Commit | Line | Data |
---|---|---|
98db2082 BA |
1 | <template lang="pug"> |
2 | div | |
3 | input#modalSettings.modal(type="checkbox") | |
910d631b BA |
4 | div( |
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 BA |
29 | fieldset |
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") | |
37 | | {{ st.tr["Highlight last move and checks?"] }} | |
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 | |
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"] }} | |
98db2082 BA |
54 | </template> |
55 | ||
56 | <script> | |
c66a829b | 57 | import { store } from "@/store.js"; |
98db2082 | 58 | export default { |
c66a829b BA |
59 | name: "my-settings", |
60 | data: function() { | |
61 | return { | |
6808d7a1 | 62 | st: store.state |
c66a829b | 63 | }; |
5701c228 | 64 | }, |
5b3dc10e BA |
65 | mounted: function() { |
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; | |
69 | }); | |
70 | }, | |
71 | computed: { | |
72 | flagImage: function() { | |
73 | return `/images/flags/${this.st.lang}.svg`; | |
74 | } | |
75 | }, | |
dac39588 | 76 | methods: { |
5b3dc10e BA |
77 | setLanguage: function(e) { |
78 | localStorage["lang"] = e.target.value; | |
79 | store.setLanguage(e.target.value); | |
80 | }, | |
98db2082 | 81 | updateSettings: function(event) { |
6808d7a1 BA |
82 | const propName = event.target.id |
83 | .substr(3) | |
84 | .replace(/^\w/, c => c.toLowerCase()); | |
85 | let value = ["bcolor", "sound"].includes(propName) | |
602d6bef | 86 | ? event.target.value |
6808d7a1 BA |
87 | : event.target.checked; |
88 | if (propName == "sound") value = parseInt(value); | |
dfeb96ea | 89 | store.updateSetting(propName, value); |
6808d7a1 BA |
90 | } |
91 | } | |
98db2082 BA |
92 | }; |
93 | </script> | |
9a3049f3 BA |
94 | |
95 | <style lang="sass" scoped> | |
96 | [type="checkbox"].modal+div .card | |
97 | max-width: 767px | |
98 | max-height: 100% | |
5b3dc10e BA |
99 | #flagContainer |
100 | display: inline-block | |
101 | height: 100% | |
102 | & > img | |
103 | vertical-align: middle | |
104 | padding: 0 0 0 10px | |
105 | width: 36px | |
106 | height: 27px | |
9a3049f3 | 107 | </style> |