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 | ) | |
9a3049f3 | 8 | .card(@change="updateSettings($event)") |
98db2082 | 9 | label.modal-close(for="modalSettings") |
9a3049f3 BA |
10 | form |
11 | fieldset | |
12 | label(for="setHints") {{ st.tr["Show possible moves?"] }} | |
910d631b BA |
13 | input#setHints( |
14 | type="checkbox" | |
15 | v-model="st.settings.hints" | |
16 | ) | |
9a3049f3 BA |
17 | fieldset |
18 | label(for="setHighlight") | |
19 | | {{ st.tr["Highlight last move and checks?"] }} | |
910d631b BA |
20 | input#setHighlight( |
21 | type="checkbox" | |
22 | v-model="st.settings.highlight" | |
23 | ) | |
9a3049f3 BA |
24 | fieldset |
25 | label(for="setBcolor") {{ st.tr["Board colors"] }} | |
26 | select#setBcolor(v-model="st.settings.bcolor") | |
27 | option(value="lichess") {{ st.tr["brown"] }} | |
28 | option(value="chesscom") {{ st.tr["green"] }} | |
29 | option(value="chesstempo") {{ st.tr["blue"] }} | |
30 | fieldset | |
31 | label(for="setSound") {{ st.tr["Play sounds?"] }} | |
32 | select#setSound(v-model="st.settings.sound") | |
33 | option(value="0") {{ st.tr["None"] }} | |
34 | option(value="1") {{ st.tr["New game"] }} | |
35 | option(value="2") {{ st.tr["All"] }} | |
98db2082 BA |
36 | </template> |
37 | ||
38 | <script> | |
c66a829b | 39 | import { store } from "@/store.js"; |
98db2082 | 40 | export default { |
c66a829b BA |
41 | name: "my-settings", |
42 | data: function() { | |
43 | return { | |
6808d7a1 | 44 | st: store.state |
c66a829b | 45 | }; |
5701c228 | 46 | }, |
dac39588 | 47 | methods: { |
98db2082 | 48 | updateSettings: function(event) { |
6808d7a1 BA |
49 | const propName = event.target.id |
50 | .substr(3) | |
51 | .replace(/^\w/, c => c.toLowerCase()); | |
52 | let value = ["bcolor", "sound"].includes(propName) | |
602d6bef | 53 | ? event.target.value |
6808d7a1 BA |
54 | : event.target.checked; |
55 | if (propName == "sound") value = parseInt(value); | |
dfeb96ea | 56 | store.updateSetting(propName, value); |
6808d7a1 BA |
57 | } |
58 | } | |
98db2082 BA |
59 | }; |
60 | </script> | |
9a3049f3 BA |
61 | |
62 | <style lang="sass" scoped> | |
63 | [type="checkbox"].modal+div .card | |
64 | max-width: 767px | |
65 | max-height: 100% | |
66 | </style> |