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       fieldset
   9         label(for="setHints") {{ st.tr["Show possible moves?"] }}
  10         input#setHints(type="checkbox" v-model="st.settings.hints")
  11       fieldset
  12         label(for="setHighlight")
  13           | {{ st.tr["Highlight last move and checks?"] }}
  14         input#setHighlight(type="checkbox" v-model="st.settings.highlight")
  15       fieldset
  16         label(for="setBcolor") {{ st.tr["Board colors"] }}
  17         select#setBcolor(v-model="st.settings.bcolor")
  18           option(value="lichess") {{ st.tr["brown"] }}
  19           option(value="chesscom") {{ st.tr["green"] }}
  20           option(value="chesstempo") {{ st.tr["blue"] }}
  21       fieldset
  22         label(for="setSound") {{ st.tr["Play sounds?"] }}
  23         select#setSound(v-model="st.settings.sound")
  24           option(value="0") {{ st.tr["None"] }}
  25           option(value="1") {{ st.tr["New game"] }}
  26           option(value="2") {{ st.tr["All"] }}
  27 </template>
  28
  29 <script>
  30 import { store } from "@/store.js";
  31 export default {
  32   name: "my-settings",
  33   data: function() {
  34     return {
  35       st: store.state,
  36     };
  37   },
  38   methods: {
  39     updateSettings: function(event) {
  40       const propName =
  41         event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
  42       localStorage[propName] = ["bcolor","sound"].includes(propName)
  43         ? event.target.value
  44         : event.target.checked;
  45     },
  46   },
  47 };
  48 </script>