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 {{ $tr["Preferences"] }}
   8       fieldset
   9         label(for="setSqSize") {{ $tr["Square size (in pixels). 0 for 'adaptative'"] }}
  10         input#setSqSize(type="number" v-model="settings.sqSize")
  11       fieldset
  12         label(for="selectHints") {{ $tr["Show move hints?"] }}
  13         select#setHints(v-model="settings.hints")
  14           option(value="0") {{ $tr["None"] }}
  15           option(value="1") {{ $tr["Moves from a square"] }}
  16           option(value="2") {{ $tr["Pieces which can move"] }}
  17       fieldset
  18         label(for="setHighlight") {{ $tr["Highlight squares? (Last move & checks)"] }}
  19         input#setHighlight(type="checkbox" v-model="settings.highlight")
  20       fieldset
  21         label(for="setCoords") {{ $tr["Show board coordinates?"] }}
  22         input#setCoords(type="checkbox" v-model="settings.coords")
  23       fieldset
  24         label(for="selectColor") {{ $tr["Board colors"] }}
  25         select#setBcolor(v-model="settings.bcolor")
  26           option(value="lichess") {{ $tr["brown"] }}
  27           option(value="chesscom") {{ $tr["green"] }}
  28           option(value="chesstempo") {{ $tr["blue"] }}
  29       fieldset
  30         label(for="selectSound") {{ $tr["Play sounds?"] }}
  31         select#setSound(v-model="settings.sound")
  32           option(value="0") {{ $tr["None"] }}
  33           option(value="1") {{ $tr["New game"] }}
  34           option(value="2") {{ $tr["All"] }}
  35 </template>
  36
  37 <script>
  38 export default {
  39   name: "Settings",
  40   props: ["settings"],
  41     methods: {
  42     updateSettings: function(event) {
  43       const propName =
  44         event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
  45       localStorage[propName] = ["highlight","coords"].includes(propName)
  46         ? event.target.checked
  47         : event.target.value;
  48     },
  49     },
  50 };
  51 </script>