client/src/components/Settings.vue

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