client/src/components/Settings.vue

   1 <template lang="pug">
   2 div
   3   input#modalSettings.modal(type="checkbox")
   4   div(role="dialog" data-checkbox="modalSettings"
   5       aria-labelledby="settingsTitle")
   6     .card.smallpad(@change="updateSettings")
   7       label.modal-close(for="modalSettings")
   8       h3#settingsTitle.section {{ st.tr["Preferences"] }}
   9       fieldset
  10         label(for="setSqSize")
  11           | {{ st.tr["Square size (in pixels). 0 for 'adaptative'"] }}
  12         input#setSqSize(type="number" v-model="st.settings.sqSize")
  13       fieldset
  14         label(for="selectHints") {{ st.tr["Show move hints?"] }}
  15         select#setHints(v-model="st.settings.hints")
  16           option(value="0") {{ st.tr["None"] }}
  17           option(value="1") {{ st.tr["Moves from a square"] }}
  18           option(value="2") {{ st.tr["Pieces which can move"] }}
  19       fieldset
  20         label(for="setHighlight")
  21           | {{ st.tr["Highlight squares? (Last move & checks)"] }}
  22         input#setHighlight(type="checkbox" v-model="st.settings.highlight")
  23       fieldset
  24         label(for="setCoords") {{ st.tr["Show board coordinates?"] }}
  25         input#setCoords(type="checkbox" v-model="st.settings.coords")
  26       fieldset
  27         label(for="selectColor") {{ st.tr["Board colors"] }}
  28         select#setBcolor(v-model="st.settings.bcolor")
  29           option(value="lichess") {{ st.tr["brown"] }}
  30           option(value="chesscom") {{ st.tr["green"] }}
  31           option(value="chesstempo") {{ st.tr["blue"] }}
  32       fieldset
  33         label(for="selectSound") {{ st.tr["Play sounds?"] }}
  34         select#setSound(v-model="st.settings.sound")
  35           option(value="0") {{ st.tr["None"] }}
  36           option(value="1") {{ st.tr["New game"] }}
  37           option(value="2") {{ st.tr["All"] }}
  38       fieldset
  39         .slidecontainer
  40           input#myRange.slider(type="range" min="0" max="100" value="50"
  41             @input="adjustBoard")
  42 </template>
  43
  44 <script>
  45 import { store } from "@/store.js";
  46 export default {
  47   name: "my-settings",
  48   data: function() {
  49     return {
  50       st: store.state,
  51     };
  52   },
  53   mounted: function() {
  54     const boardSize = localStorage.getItem("boardSize");
  55     if (!!boardSize)
  56       document.getElementById("myRange").value = Math.floor(boardSize / 10);
  57     // timeout to avoid calling too many time the adjust method
  58     let timeoutLaunched = false;
  59     window.addEventListener("resize", (e) => {
  60       if (!timeoutLaunched)
  61       {
  62         timeoutLaunched = true;
  63         setTimeout( () => {
  64           this.adjustBoard();
  65           timeoutLaunched = false;
  66         }, 500);
  67       }
  68     });
  69   },
  70     methods: {
  71     updateSettings: function(event) {
  72       const propName =
  73         event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
  74       localStorage[propName] = ["highlight","coords"].includes(propName)
  75         ? event.target.checked
  76         : event.target.value;
  77     },
  78     adjustBoard: function() {
  79       const boardContainer = document.getElementById("boardContainer");
  80       if (!boardContainer)
  81         return; //no board on page
  82       const k = document.getElementById("myRange").value;
  83       const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
  84       const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary...
  85       // Value of 0 is board min size; 100 is window.width [- movesWidth]
  86       const boardSize = minBoardWidth +
  87         k * (window.innerWidth - (movesWidth+minBoardWidth)) / 100;
  88       localStorage.setItem("boardSize", boardSize);
  89       boardContainer.style.width = boardSize + "px";
  90       document.getElementById("gameContainer").style.width =
  91         (boardSize + movesWidth) + "px";
  92     },
  93     },
  94 };
  95 </script>