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"] }}
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"] }}
48 option(value="orangecc") {{ st.tr["orange"] }}
51 | {{ st.tr["Sound alert at game start"] }}
54 v-model="st.settings.sound"
57 label(for="setGotonext")
58 | {{ st.tr["Show next game after a move"] }}
61 v-model="st.settings.gotonext"
64 label(for="setRandomness") {{ st.tr["Randomness"] }}
65 select#setRandomness(v-model="st.settings.randomness")
66 option(value="0") {{ st.tr["Deterministic"] }}
67 option(value="1") {{ st.tr["Symmetric random"] }}
68 option(value="2") {{ st.tr["Asymmetric random"] }}
72 import { store } from "@/store.js";
73 import { processModalClick } from "@/utils/modalClick.js";
82 document.getElementById("settingsDiv")
83 .addEventListener("click", processModalClick);
84 // NOTE: better style would be in pug directly, but how?
85 document.querySelectorAll("#langSelect > option").forEach(opt => {
86 if (opt.value == this.st.lang) opt.selected = true;
90 flagImage: function() {
91 return `/images/flags/${this.st.lang}.svg`;
95 setLanguage: function(e) {
96 localStorage["lang"] = e.target.value;
97 store.setLanguage(e.target.value);
99 updateSettings: function(event) {
100 const propName = event.target.id
102 .replace(/^\w/, c => c.toLowerCase());
103 const value = ["bcolor","randomness"].includes(propName)
105 : event.target.checked;
106 store.updateSetting(propName, value);
112 <style lang="sass" scoped>
113 [type="checkbox"].modal+div .card
117 display: inline-block
120 vertical-align: middle