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 </template>
  36
  37 <script>
  38 import { store } from "@/store.js";
  39 export default {
  40   name: "my-settings",
  41   data: function() {
  42     return {
  43       st: store.state,
  44     };
  45   },
  46     methods: {
  47     updateSettings: function(event) {
  48       const propName =
  49         event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
  50       localStorage[propName] = ["highlight","coords"].includes(propName)
  51         ? event.target.checked
  52         : event.target.value;
  53     },
  54     },
  55 };
  56 </script>