Commit | Line | Data |
---|---|---|
98db2082 BA |
1 | <template lang="pug"> |
2 | div | |
3 | input#modalSettings.modal(type="checkbox") | |
42a92848 | 4 | div#settingsDiv( |
910d631b BA |
5 | role="dialog" |
6 | data-checkbox="modalSettings" | |
7 | ) | |
5b3dc10e | 8 | .card |
98db2082 | 9 | label.modal-close(for="modalSettings") |
5b3dc10e BA |
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)") | |
9a3049f3 | 29 | fieldset |
42a92848 | 30 | label(for="setHints") {{ st.tr["Show possible moves"] }} |
910d631b BA |
31 | input#setHints( |
32 | type="checkbox" | |
33 | v-model="st.settings.hints" | |
34 | ) | |
9a3049f3 BA |
35 | fieldset |
36 | label(for="setHighlight") | |
42a92848 | 37 | | {{ st.tr["Highlight last move"] }} |
910d631b BA |
38 | input#setHighlight( |
39 | type="checkbox" | |
40 | v-model="st.settings.highlight" | |
41 | ) | |
9a3049f3 BA |
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 | fieldset | |
db1f1f9a | 49 | label(for="setSound") |
42a92848 | 50 | | {{ st.tr["Sound alert at game start"] }} |
db1f1f9a BA |
51 | input#setSound( |
52 | type="checkbox" | |
53 | v-model="st.settings.sound" | |
54 | ) | |
aae89b49 BA |
55 | fieldset |
56 | label(for="setGotonext") | |
42a92848 | 57 | | {{ st.tr["Show next game after a move"] }} |
aae89b49 BA |
58 | input#setGotonext( |
59 | type="checkbox" | |
60 | v-model="st.settings.gotonext" | |
61 | ) | |
f35b9960 | 62 | fieldset |
6b7b2cf7 | 63 | label(for="setRandomness") {{ st.tr["Randomness"] }} |
f35b9960 BA |
64 | select#setRandomness(v-model="st.settings.randomness") |
65 | option(value="0") {{ st.tr["Deterministic"] }} | |
66 | option(value="1") {{ st.tr["Symmetric random"] }} | |
67 | option(value="2") {{ st.tr["Asymmetric random"] }} | |
98db2082 BA |
68 | </template> |
69 | ||
70 | <script> | |
c66a829b | 71 | import { store } from "@/store.js"; |
42a92848 | 72 | import { processModalClick } from "@/utils/modalClick.js"; |
98db2082 | 73 | export default { |
c66a829b BA |
74 | name: "my-settings", |
75 | data: function() { | |
76 | return { | |
6808d7a1 | 77 | st: store.state |
c66a829b | 78 | }; |
5701c228 | 79 | }, |
5b3dc10e | 80 | mounted: function() { |
42a92848 BA |
81 | document.getElementById("settingsDiv") |
82 | .addEventListener("click", processModalClick); | |
5b3dc10e BA |
83 | // NOTE: better style would be in pug directly, but how? |
84 | document.querySelectorAll("#langSelect > option").forEach(opt => { | |
85 | if (opt.value == this.st.lang) opt.selected = true; | |
86 | }); | |
87 | }, | |
88 | computed: { | |
89 | flagImage: function() { | |
90 | return `/images/flags/${this.st.lang}.svg`; | |
91 | } | |
92 | }, | |
dac39588 | 93 | methods: { |
5b3dc10e BA |
94 | setLanguage: function(e) { |
95 | localStorage["lang"] = e.target.value; | |
96 | store.setLanguage(e.target.value); | |
97 | }, | |
98db2082 | 98 | updateSettings: function(event) { |
6808d7a1 BA |
99 | const propName = event.target.id |
100 | .substr(3) | |
101 | .replace(/^\w/, c => c.toLowerCase()); | |
f35b9960 | 102 | const value = ["bcolor","randomness"].includes(propName) |
602d6bef | 103 | ? event.target.value |
6808d7a1 | 104 | : event.target.checked; |
dfeb96ea | 105 | store.updateSetting(propName, value); |
6808d7a1 BA |
106 | } |
107 | } | |
98db2082 BA |
108 | }; |
109 | </script> | |
9a3049f3 BA |
110 | |
111 | <style lang="sass" scoped> | |
112 | [type="checkbox"].modal+div .card | |
6b7b2cf7 | 113 | max-width: 520px |
9a3049f3 | 114 | max-height: 100% |
5b3dc10e BA |
115 | #flagContainer |
116 | display: inline-block | |
117 | height: 100% | |
118 | & > img | |
119 | vertical-align: middle | |
120 | padding: 0 0 0 10px | |
121 | width: 36px | |
122 | height: 27px | |
9a3049f3 | 123 | </style> |