3 input#modalSettings.modal(type="checkbox")
6 data-checkbox="modalSettings"
9 label.modal-close(for="modalSettings")
16 fieldset(@change="setLanguage($event)")
17 label(for="langSelect")
18 | {{ st.tr["Language"] }}
20 each language,langCode in langName
21 option(value=langCode)
28 div(@change="updateSettings($event)")
30 label(for="setHints") {{ st.tr["Show possible moves?"] }}
33 v-model="st.settings.hints"
36 label(for="setHighlight")
37 | {{ st.tr["Highlight last move and checks?"] }}
40 v-model="st.settings.highlight"
43 label(for="setBcolor") {{ st.tr["Board colors"] }}
44 select#setBcolor(v-model="st.settings.bcolor")
45 option(value="lichess") {{ st.tr["brown"] }}
46 option(value="chesscom") {{ st.tr["green"] }}
47 option(value="chesstempo") {{ st.tr["blue"] }}
49 label(for="setSound") {{ st.tr["Play sounds?"] }}
50 select#setSound(v-model="st.settings.sound")
51 option(value="0") {{ st.tr["None"] }}
52 option(value="1") {{ st.tr["New game"] }}
53 option(value="2") {{ st.tr["All"] }}
57 import { store } from "@/store.js";
66 // NOTE: better style would be in pug directly, but how?
67 document.querySelectorAll("#langSelect > option").forEach(opt => {
68 if (opt.value == this.st.lang) opt.selected = true;
72 flagImage: function() {
73 return `/images/flags/${this.st.lang}.svg`;
77 setLanguage: function(e) {
78 localStorage["lang"] = e.target.value;
79 store.setLanguage(e.target.value);
81 updateSettings: function(event) {
82 const propName = event.target.id
84 .replace(/^\w/, c => c.toLowerCase());
85 let value = ["bcolor", "sound"].includes(propName)
87 : event.target.checked;
88 if (propName == "sound") value = parseInt(value);
89 store.updateSetting(propName, value);
95 <style lang="sass" scoped>
96 [type="checkbox"].modal+div .card
100 display: inline-block
103 vertical-align: middle