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