Fix Chakart when landing piece on invisible queen + reserve pieces ordering
[vchess.git] / client / src / components / Settings.vue
1 <template lang="pug">
2 div
3 input#modalSettings.modal(type="checkbox")
4 div#settingsDiv(
5 role="dialog"
6 data-checkbox="modalSettings"
7 )
8 .card
9 label.modal-close(for="modalSettings")
10 -
11 var langName = {
12 "en": "English",
13 "es": "Español",
14 "fr": "Français",
15 };
16 fieldset(@change="setLanguage($event)")
17 label(for="langSelect")
18 | {{ st.tr["Language"] }}
19 select#langSelect
20 each language,langCode in langName
21 option(value=langCode)
22 =language
23 #flagContainer
24 img(
25 v-if="!!st.lang"
26 :src="flagImage"
27 )
28 div(@change="updateSettings($event)")
29 fieldset
30 label(for="setHints") {{ st.tr["Show possible moves"] }}
31 input#setHints(
32 type="checkbox"
33 v-model="st.settings.hints"
34 )
35 fieldset
36 label(for="setHighlight")
37 | {{ st.tr["Highlight last move"] }}
38 input#setHighlight(
39 type="checkbox"
40 v-model="st.settings.highlight"
41 )
42 fieldset
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"] }}
49 fieldset
50 label(for="setSound")
51 | {{ st.tr["Sound alert at game start"] }}
52 input#setSound(
53 type="checkbox"
54 v-model="st.settings.sound"
55 )
56 fieldset
57 label(for="setGotonext")
58 | {{ st.tr["Show next game after a move"] }}
59 input#setGotonext(
60 type="checkbox"
61 v-model="st.settings.gotonext"
62 )
63 fieldset
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"] }}
69 </template>
70
71 <script>
72 import { store } from "@/store.js";
73 import { processModalClick } from "@/utils/modalClick.js";
74 export default {
75 name: "my-settings",
76 data: function() {
77 return {
78 st: store.state
79 };
80 },
81 mounted: function() {
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;
87 });
88 },
89 computed: {
90 flagImage: function() {
91 return `/images/flags/${this.st.lang}.svg`;
92 }
93 },
94 methods: {
95 setLanguage: function(e) {
96 localStorage["lang"] = e.target.value;
97 store.setLanguage(e.target.value);
98 },
99 updateSettings: function(event) {
100 const propName = event.target.id
101 .substr(3)
102 .replace(/^\w/, c => c.toLowerCase());
103 const value = ["bcolor","randomness"].includes(propName)
104 ? event.target.value
105 : event.target.checked;
106 store.updateSetting(propName, value);
107 }
108 }
109 };
110 </script>
111
112 <style lang="sass" scoped>
113 [type="checkbox"].modal+div .card
114 max-width: 520px
115 max-height: 100%
116 #flagContainer
117 display: inline-block
118 height: 100%
119 & > img
120 vertical-align: middle
121 padding: 0 0 0 10px
122 width: 36px
123 height: 27px
124 </style>