Better display on main Hall when no challenges or games found
[vchess.git] / client / src / components / MoveList.vue
CommitLineData
e71161fb
BA
1<template lang="pug">
2div
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 41import { store } from "@/store";
e71161fb 42import { getFullNotation } from "@/utils/notation";
5b3dc10e 43import { processModalClick } from "@/utils/modalClick";
cf2343ce 44export 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
159button#boardSizeBtn
160 margin: 0
161
162[type="checkbox"]#modalAdjust+div .card
163 padding: 5px
430a2038 164</style>