TODO: fix draw logic
[vchess.git] / client / src / components / Settings.vue
CommitLineData
98db2082
BA
1<template lang="pug">
2div
3 input#modalSettings.modal(type="checkbox")
dcd68c41
BA
4 div(role="dialog" data-checkbox="modalSettings"
5 aria-labelledby="settingsTitle")
98db2082
BA
6 .card.smallpad(@change="updateSettings")
7 label.modal-close(for="modalSettings")
c66a829b 8 h3#settingsTitle.section {{ st.tr["Preferences"] }}
98db2082 9 fieldset
dcd68c41
BA
10 label(for="setSqSize")
11 | {{ st.tr["Square size (in pixels). 0 for 'adaptative'"] }}
c66a829b 12 input#setSqSize(type="number" v-model="st.settings.sqSize")
98db2082 13 fieldset
c66a829b
BA
14 label(for="selectHints") {{ st.tr["Show move hints?"] }}
15 select#setHints(v-model="st.settings.hints")
16 option(value="0") {{ st.tr["None"] }}
17 option(value="1") {{ st.tr["Moves from a square"] }}
18 option(value="2") {{ st.tr["Pieces which can move"] }}
98db2082 19 fieldset
dcd68c41
BA
20 label(for="setHighlight")
21 | {{ st.tr["Highlight squares? (Last move & checks)"] }}
c66a829b 22 input#setHighlight(type="checkbox" v-model="st.settings.highlight")
98db2082 23 fieldset
c66a829b
BA
24 label(for="setCoords") {{ st.tr["Show board coordinates?"] }}
25 input#setCoords(type="checkbox" v-model="st.settings.coords")
98db2082 26 fieldset
c66a829b
BA
27 label(for="selectColor") {{ st.tr["Board colors"] }}
28 select#setBcolor(v-model="st.settings.bcolor")
29 option(value="lichess") {{ st.tr["brown"] }}
30 option(value="chesscom") {{ st.tr["green"] }}
31 option(value="chesstempo") {{ st.tr["blue"] }}
98db2082 32 fieldset
c66a829b
BA
33 label(for="selectSound") {{ st.tr["Play sounds?"] }}
34 select#setSound(v-model="st.settings.sound")
35 option(value="0") {{ st.tr["None"] }}
36 option(value="1") {{ st.tr["New game"] }}
37 option(value="2") {{ st.tr["All"] }}
7b3cf1b7
BA
38 fieldset
39 .slidecontainer
cf94b843 40 input#myRange.slider(type="range" min="0" max="100" value="50"
7b3cf1b7 41 @input="adjustBoard")
98db2082
BA
42</template>
43
44<script>
c66a829b 45import { store } from "@/store.js";
98db2082 46export default {
c66a829b
BA
47 name: "my-settings",
48 data: function() {
49 return {
50 st: store.state,
51 };
5701c228
BA
52 },
53 mounted: function() {
54 const boardSize = localStorage.getItem("boardSize");
55 if (!!boardSize)
56 document.getElementById("myRange").value = Math.floor(boardSize / 10);
d36ca198
BA
57 // timeout to avoid calling too many time the adjust method
58 let timeoutLaunched = false;
59 window.addEventListener("resize", (e) => {
60 if (!timeoutLaunched)
61 {
62 timeoutLaunched = true;
63 setTimeout( () => {
64 this.adjustBoard();
65 timeoutLaunched = false;
66 }, 500);
67 }
68 });
c66a829b 69 },
98db2082
BA
70 methods: {
71 updateSettings: function(event) {
72 const propName =
73 event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
74 localStorage[propName] = ["highlight","coords"].includes(propName)
75 ? event.target.checked
76 : event.target.value;
7b3cf1b7
BA
77 },
78 adjustBoard: function() {
cf94b843
BA
79 const boardContainer = document.getElementById("boardContainer");
80 if (!boardContainer)
7b3cf1b7 81 return; //no board on page
cf94b843 82 const k = document.getElementById("myRange").value;
d36ca198 83 const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
41c80bb6 84 const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary...
96e9585a
BA
85 // Value of 0 is board min size; 100 is window.width [- movesWidth]
86 const boardSize = minBoardWidth +
87 k * (window.innerWidth - (movesWidth+minBoardWidth)) / 100;
7b3cf1b7 88 localStorage.setItem("boardSize", boardSize);
cf94b843 89 boardContainer.style.width = boardSize + "px";
d36ca198
BA
90 document.getElementById("gameContainer").style.width =
91 (boardSize + movesWidth) + "px";
98db2082
BA
92 },
93 },
94};
95</script>