Commit | Line | Data |
---|---|---|
e71161fb BA |
1 | <template lang="pug"> |
2 | div | |
5b3dc10e BA |
3 | input#modalAdjust.modal(type="checkbox") |
4 | div#adjuster( | |
5 | role="dialog" | |
6 | data-checkbox="modalAdjust" | |
7 | ) | |
8 | .card.text-center | |
9 | label.modal-close(for="modalAdjust") | |
10 | label(for="boardSize") {{ st.tr["Board size"] }} | |
11 | input#boardSize.slider( | |
12 | type="range" | |
13 | min="0" | |
14 | max="100" | |
15 | value="50" | |
16 | @input="adjustBoard()" | |
17 | ) | |
18 | div#boardSizeBtnContainer | |
19 | button#boardSizeBtn(onClick="window.doClick('modalAdjust')") | |
bc06c9bb | 20 | | {{ st.tr["Set board size"] }} |
e71161fb BA |
21 | #scoreInfo(v-if="score!='*'") |
22 | p {{ score }} | |
311cba76 | 23 | p {{ st.tr[message] }} |
57eb158f | 24 | .moves-list(v-if="!['none','highlight'].includes(show)") |
e71161fb BA |
25 | .tr(v-for="moveIdx in evenNumbers") |
26 | .td {{ firstNum + moveIdx / 2 + 1 }} | |
27 | .td(v-if="moveIdx < moves.length-1 || show == 'all'" | |
28 | :class="{'highlight-lm': cursor == moveIdx}" | |
29 | @click="() => gotoMove(moveIdx)" | |
30 | ) | |
31 | | {{ notation(moves[moveIdx]) }} | |
32 | .td( | |
33 | v-if="moveIdx < moves.length-1" | |
34 | :class="{'highlight-lm': cursor == moveIdx+1}" | |
35 | @click="() => gotoMove(moveIdx+1)" | |
36 | ) | |
37 | | {{ notation(moves[moveIdx+1]) }} | |
e71161fb BA |
38 | </template> |
39 | ||
cf2343ce | 40 | <script> |
fcd299a3 | 41 | import { store } from "@/store"; |
e71161fb | 42 | import { getFullNotation } from "@/utils/notation"; |
5b3dc10e | 43 | import { processModalClick } from "@/utils/modalClick"; |
cf2343ce | 44 | export default { |
6808d7a1 | 45 | name: "my-move-list", |
933fd1f9 | 46 | props: ["moves", "show", "cursor", "score", "message", "firstNum"], |
311cba76 BA |
47 | data: function() { |
48 | return { | |
49 | st: store.state | |
50 | }; | |
51 | }, | |
5b3dc10e BA |
52 | mounted: function() { |
53 | document.getElementById("adjuster").addEventListener( | |
54 | "click", | |
55 | processModalClick); | |
56 | // Take full width on small screens: | |
57 | let boardSize = parseInt(localStorage.getItem("boardSize")); | |
58 | if (!boardSize) { | |
59 | boardSize = | |
60 | window.innerWidth >= 768 | |
61 | ? 0.75 * Math.min(window.innerWidth, window.innerHeight) | |
62 | : window.innerWidth; | |
63 | } | |
64 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
65 | document.getElementById("boardContainer").style.width = boardSize + "px"; | |
66 | let gameContainer = document.getElementById("gameContainer"); | |
67 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
68 | document.getElementById("boardSize").value = | |
69 | (boardSize * 100) / (window.innerWidth - movesWidth); | |
70 | // timeout to avoid calling too many time the adjust method | |
71 | let timeoutLaunched = false; | |
72 | window.addEventListener("resize", () => { | |
73 | if (!timeoutLaunched) { | |
74 | timeoutLaunched = true; | |
75 | setTimeout(() => { | |
76 | this.adjustBoard(); | |
77 | timeoutLaunched = false; | |
78 | }, 500); | |
79 | } | |
80 | }); | |
81 | }, | |
c6b8d37f BA |
82 | watch: { |
83 | cursor: function(newCursor) { | |
84 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
85 | // $nextTick to wait for table > tr to be rendered |
86 | this.$nextTick(() => { | |
8477e53d BA |
87 | let curMove = document.querySelector(".td.highlight-lm"); |
88 | if (curMove) { | |
89 | curMove.scrollIntoView({ | |
c6b8d37f BA |
90 | behavior: "auto", |
91 | block: "nearest" | |
92 | }); | |
93 | } | |
94 | }); | |
95 | } | |
96 | }, | |
e71161fb BA |
97 | computed: { |
98 | evenNumbers: function() { | |
99 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
100 | } | |
101 | }, | |
430a2038 | 102 | methods: { |
e71161fb BA |
103 | notation: function(move) { |
104 | return getFullNotation(move); | |
105 | }, | |
dac39588 BA |
106 | gotoMove: function(index) { |
107 | this.$emit("goto-move", index); | |
5b3dc10e BA |
108 | }, |
109 | adjustBoard: function() { | |
110 | const boardContainer = document.getElementById("boardContainer"); | |
111 | if (!boardContainer) return; //no board on page | |
112 | const k = document.getElementById("boardSize").value; | |
113 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
114 | const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary... | |
115 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
116 | const boardSize = | |
117 | minBoardWidth + | |
118 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; | |
119 | localStorage.setItem("boardSize", boardSize); | |
120 | boardContainer.style.width = boardSize + "px"; | |
121 | document.getElementById("gameContainer").style.width = | |
122 | boardSize + movesWidth + "px"; | |
6808d7a1 BA |
123 | } |
124 | } | |
430a2038 BA |
125 | }; |
126 | </script> | |
127 | ||
128 | <style lang="sass" scoped> | |
129 | .moves-list | |
8477e53d BA |
130 | cursor: pointer |
131 | min-height: 1px | |
132 | max-height: 500px | |
133 | overflow: auto | |
134 | background-color: white | |
135 | width: 280px | |
136 | & > .tr | |
137 | clear: both | |
138 | border-bottom: 1px solid lightgrey | |
139 | & > .td | |
140 | float: left | |
f9c36b2d | 141 | padding: 2% 0 2% 2% |
8477e53d BA |
142 | &:first-child |
143 | color: grey | |
f9c36b2d | 144 | width: 13% |
8477e53d | 145 | &:not(first-child) |
f9c36b2d | 146 | width: 40.5% |
8477e53d BA |
147 | |
148 | @media screen and (max-width: 767px) | |
149 | .moves-list | |
150 | width: 100% | |
910d631b | 151 | |
8477e53d | 152 | .td.highlight-lm |
430a2038 | 153 | background-color: plum |
5b3dc10e BA |
154 | |
155 | #boardSizeBtnContainer | |
156 | width: 100% | |
157 | text-align: center | |
158 | ||
159 | button#boardSizeBtn | |
160 | margin: 0 | |
161 | ||
162 | [type="checkbox"]#modalAdjust+div .card | |
163 | padding: 5px | |
430a2038 | 164 | </style> |