client/src/components/Settings.vue

   1 <template lang="pug">
   2 div
   3   input#modalSettings.modal(type="checkbox")
   4   div(
   5     role="dialog"
   6     data-checkbox="modalSettings"
   7   )
   8     .card(@change="updateSettings($event)")
   9       label.modal-close(for="modalSettings")
  10       form
  11         fieldset
  12           label(for="setHints") {{ st.tr["Show possible moves?"] }}
  13           input#setHints(
  14             type="checkbox"
  15             v-model="st.settings.hints"
  16           )
  17         fieldset
  18           label(for="setHighlight")
  19             | {{ st.tr["Highlight last move and checks?"] }}
  20           input#setHighlight(
  21             type="checkbox"
  22             v-model="st.settings.highlight"
  23           )
  24         fieldset
  25           label(for="setBcolor") {{ st.tr["Board colors"] }}
  26           select#setBcolor(v-model="st.settings.bcolor")
  27             option(value="lichess") {{ st.tr["brown"] }}
  28             option(value="chesscom") {{ st.tr["green"] }}
  29             option(value="chesstempo") {{ st.tr["blue"] }}
  30         fieldset
  31           label(for="setSound") {{ st.tr["Play sounds?"] }}
  32           select#setSound(v-model="st.settings.sound")
  33             option(value="0") {{ st.tr["None"] }}
  34             option(value="1") {{ st.tr["New game"] }}
  35             option(value="2") {{ st.tr["All"] }}
  36 </template>
  37
  38 <script>
  39 import { store } from "@/store.js";
  40 export default {
  41   name: "my-settings",
  42   data: function() {
  43     return {
  44       st: store.state
  45     };
  46   },
  47   methods: {
  48     updateSettings: function(event) {
  49       const propName = event.target.id
  50         .substr(3)
  51         .replace(/^\w/, c => c.toLowerCase());
  52       let value = ["bcolor", "sound"].includes(propName)
  53         ? event.target.value
  54         : event.target.checked;
  55       if (propName == "sound") value = parseInt(value);
  56       store.updateSetting(propName, value);
  57     }
  58   }
  59 };
  60 </script>
  61
  62 <style lang="sass" scoped>
  63 [type="checkbox"].modal+div .card
  64   max-width: 767px
  65   max-height: 100%
  66 </style>