Better colors on GameList component
[vchess.git] / client / src / components / MoveList.vue
1 <script>
2 import { store } from "@/store";
3 export default {
4 name: "my-move-list",
5 props: ["moves", "cursor", "score", "message", "firstNum"],
6 render(h) {
7 if (this.moves.length == 0) return h("div");
8 let tableContent = [];
9 let moveCounter = 0;
10 let tableRow = undefined;
11 let moveCells = undefined;
12 let curCellContent = "";
13 let firstIndex = 0;
14 for (let i = 0; i < this.moves.length; i++) {
15 if (this.moves[i].color == "w") {
16 if (i == 0 || (i > 0 && this.moves[i - 1].color == "b")) {
17 if (tableRow) {
18 tableRow.children = moveCells;
19 tableContent.push(tableRow);
20 }
21 moveCells = [
22 h("td", { domProps: { innerHTML: ++moveCounter + "." } })
23 ];
24 tableRow = h("tr", {});
25 curCellContent = "";
26 firstIndex = i;
27 }
28 }
29 // Next condition is fine because even if the first move is black,
30 // there will be the "..." which count as white move.
31 else if (this.moves[i].color == "b" && this.moves[i - 1].color == "w")
32 firstIndex = i;
33 curCellContent += this.moves[i].notation;
34 if (
35 i < this.moves.length - 1 &&
36 this.moves[i + 1].color == this.moves[i].color
37 )
38 curCellContent += ",";
39 //color change
40 else {
41 moveCells.push(
42 h("td", {
43 domProps: { innerHTML: curCellContent },
44 on: { click: () => this.gotoMove(i) },
45 class: {
46 "highlight-lm": this.cursor >= firstIndex && this.cursor <= i
47 }
48 })
49 );
50 curCellContent = "";
51 }
52 }
53 // Complete last row, which might not be full:
54 if (moveCells.length - 1 == 1) {
55 moveCells.push(h("td", { domProps: { innerHTML: "" } }));
56 }
57 tableRow.children = moveCells;
58 tableContent.push(tableRow);
59 let rootElements = [];
60 if (!!this.score && this.score != "*") {
61 const scoreDiv = h(
62 "div",
63 {
64 id: "scoreInfo",
65 style: {
66 display: this.score != "*" ? "block" : "none"
67 }
68 },
69 [h("p", this.score), h("p", store.state.tr[this.message])]
70 );
71 rootElements.push(scoreDiv);
72 }
73 rootElements.push(
74 h(
75 "table",
76 {
77 class: {
78 "moves-list": true
79 }
80 },
81 tableContent
82 )
83 );
84 return h("div", {}, rootElements);
85 },
86 watch: {
87 cursor: function(newCursor) {
88 if (window.innerWidth <= 767) return; //scrolling would hide chessboard
89 // Count grouped moves until the cursor (if multi-moves):
90 let groupsCount = 0;
91 let curCol = undefined;
92 for (let i = 0; i < newCursor; i++) {
93 const m = this.moves[i];
94 if (m.color != curCol) {
95 groupsCount++;
96 curCol = m.color;
97 }
98 }
99 // $nextTick to wait for table > tr to be rendered
100 this.$nextTick(() => {
101 let rows = document.querySelectorAll("#movesList tr");
102 if (rows.length > 0) {
103 rows[Math.floor(groupsCount / 2)].scrollIntoView({
104 behavior: "auto",
105 block: "nearest"
106 });
107 }
108 });
109 }
110 },
111 methods: {
112 gotoMove: function(index) {
113 this.$emit("goto-move", index);
114 }
115 }
116 };
117 </script>
118
119 <style lang="sass" scoped>
120 .moves-list
121 min-width: 250px
122
123 td.highlight-lm
124 background-color: plum
125 </style>
126
127 <!-- TODO: use template function + multi-moves: much easier
128 <template lang="pug">
129 div
130 #scoreInfo(v-if="score!='*'")
131 p {{ score }}
132 p {{ message }}
133 table.moves-list
134 tbody
135 tr(v-for="moveIdx in evenNumbers")
136 td {{ firstNum + moveIdx / 2 + 1 }}
137 td(:class="{'highlight-lm': cursor == moveIdx}"
138 @click="() => gotoMove(moveIdx)")
139 | {{ moves[moveIdx].notation }}
140 td(v-if="moveIdx < moves.length-1"
141 :class="{'highlight-lm': cursor == moveIdx+1}"
142 @click="() => gotoMove(moveIdx+1)")
143 | {{ moves[moveIdx+1].notation }}
144 // Else: just add an empty cell
145 td(v-else)
146 </template>
147
148 <script>
149 // Component for moves list on the right
150 export default {
151 name: 'my-move-list',
152 props: ["moves","cursor","score","message","firstNum"],
153 watch: {
154 cursor: function(newValue) {
155 if (window.innerWidth <= 767)
156 return; //moves list is below: scrolling would hide chessboard
157 if (newValue < 0)
158 newValue = 0; //avoid rows[-1] => error
159 // $nextTick to wait for table > tr to be rendered
160 this.$nextTick( () => {
161 let rows = document.querySelectorAll('#movesList tr');
162 if (rows.length > 0)
163 {
164 rows[Math.floor(newValue/2)].scrollIntoView({
165 behavior: "auto",
166 block: "nearest",
167 });
168 }
169 });
170 },
171 },
172 computed: {
173 evenNumbers: function() {
174 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
175 },
176 },
177 methods: {
178 gotoMove: function(index) {
179 this.$emit("goto-move", index);
180 },
181 },
182 };
183 </script>
184 -->