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     // timeout to avoid calling too many time the adjust method
  55     let timeoutLaunched = false;
  56     window.addEventListener("resize", (e) => {
  57       if (!timeoutLaunched)
  58       {
  59         timeoutLaunched = true;
  60         setTimeout( () => {
  61           this.adjustBoard();
  62           timeoutLaunched = false;
  63         }, 500);
  64       }
  65     });
  66   },
  67     methods: {
  68     updateSettings: function(event) {
  69       const propName =
  70         event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
  71       localStorage[propName] = ["highlight","coords"].includes(propName)
  72         ? event.target.checked
  73         : event.target.value;
  74     },
  75     adjustBoard: function() {
  76       const boardContainer = document.getElementById("boardContainer");
  77       if (!boardContainer)
  78         return; //no board on page
  79       const k = document.getElementById("myRange").value;
  80       const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
  81       const minBoardWidth = 240; //TODO: same
  82       // Value of 0 is board min size; 100 is window.width [- movesWidth]
  83       const boardSize = minBoardWidth +
  84         k * (window.innerWidth - (movesWidth+minBoardWidth)) / 100;
  85       localStorage.setItem("boardSize", boardSize);
  86       boardContainer.style.width = boardSize + "px";
  87       document.getElementById("gameContainer").style.width =
  88         (boardSize + movesWidth) + "px";
  89     },
  90     },
  91 };
  92 </script>