Commit | Line | Data |
---|---|---|
98db2082 BA |
1 | <template lang="pug"> |
2 | div | |
3 | input#modalSettings.modal(type="checkbox") | |
4 | div(role="dialog" aria-labelledby="settingsTitle") | |
5 | .card.smallpad(@change="updateSettings") | |
6 | label.modal-close(for="modalSettings") | |
7 | h3#settingsTitle.section {{ $tr["Preferences"] }} | |
8 | fieldset | |
9 | label(for="setSqSize") {{ $tr["Square size (in pixels). 0 for 'adaptative'"] }} | |
10 | input#setSqSize(type="number" v-model="settings.sqSize") | |
11 | fieldset | |
12 | label(for="selectHints") {{ $tr["Show move hints?"] }} | |
13 | select#setHints(v-model="settings.hints") | |
14 | option(value="0") {{ $tr["None"] }} | |
15 | option(value="1") {{ $tr["Moves from a square"] }} | |
16 | option(value="2") {{ $tr["Pieces which can move"] }} | |
17 | fieldset | |
18 | label(for="setHighlight") {{ $tr["Highlight squares? (Last move & checks)"] }} | |
19 | input#setHighlight(type="checkbox" v-model="settings.highlight") | |
20 | fieldset | |
21 | label(for="setCoords") {{ $tr["Show board coordinates?"] }} | |
22 | input#setCoords(type="checkbox" v-model="settings.coords") | |
23 | fieldset | |
24 | label(for="selectColor") {{ $tr["Board colors"] }} | |
25 | select#setBcolor(v-model="settings.bcolor") | |
26 | option(value="lichess") {{ $tr["brown"] }} | |
27 | option(value="chesscom") {{ $tr["green"] }} | |
28 | option(value="chesstempo") {{ $tr["blue"] }} | |
29 | fieldset | |
30 | label(for="selectSound") {{ $tr["Play sounds?"] }} | |
31 | select#setSound(v-model="settings.sound") | |
32 | option(value="0") {{ $tr["None"] }} | |
33 | option(value="1") {{ $tr["New game"] }} | |
34 | option(value="2") {{ $tr["All"] }} | |
35 | </template> | |
36 | ||
37 | <script> | |
38 | export default { | |
39 | name: "Settings", | |
40 | props: ["settings"], | |
41 | methods: { | |
42 | updateSettings: function(event) { | |
43 | const propName = | |
44 | event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase()) | |
45 | localStorage[propName] = ["highlight","coords"].includes(propName) | |
46 | ? event.target.checked | |
47 | : event.target.value; | |
48 | }, | |
49 | }, | |
50 | }; | |
51 | </script> |