Fixes
[vchess.git] / client / src / components / MoveList.vue
1 <template lang="pug">
2 div
3 #scoreInfo(v-if="score!='*'")
4 p {{ score }}
5 p {{ message }}
6 table#movesList
7 tbody
8 tr(v-for="moveIdx in evenNumbers")
9 td {{ moveIdx / 2 + 1 }}
10 td(:class="{'highlight-lm': cursor == moveIdx}"
11 data-label="White move" @click="() => gotoMove(moveIdx)")
12 | {{ moves[moveIdx].notation }}
13 td(v-if="moveIdx < moves.length-1"
14 :class="{'highlight-lm': cursor == moveIdx+1}"
15 data-label="Black move" @click="() => gotoMove(moveIdx+1)")
16 | {{ moves[moveIdx+1].notation }}
17 // Else: just add an empty cell
18 td(v-else)
19 </template>
20
21 <script>
22 // Component for moves list on the right
23 export default {
24 name: 'my-move-list',
25 props: ["moves","cursor","score","message"],
26 watch: {
27 cursor: function(newValue) {
28 if (newValue < 0)
29 newValue = 0; //avoid rows[-1] --> error
30 // $nextTick to wait for table > tr to be rendered
31 this.$nextTick( () => {
32 let rows = document.querySelectorAll('#movesList tr');
33 if (rows.length > 0)
34 {
35 rows[Math.floor(newValue/2)].scrollIntoView({
36 behavior: "auto",
37 block: "nearest",
38 });
39 }
40 });
41 },
42 },
43 computed: {
44 evenNumbers: function() {
45 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
46 },
47 },
48 methods: {
49 gotoMove: function(index) {
50 this.$emit("goto-move", index);
51 },
52 },
53 };
54 </script>
55
56 <style lang="sass" scoped>
57 .moves-list
58 min-width: 250px
59 td.highlight-lm
60 background-color: plum
61 </style>
62
63 <!-- Old render method:
64 render(h) {
65 if (this.moves.length == 0)
66 return;
67 let tableContent = [];
68 let moveCounter = 0;
69 let tableRow = undefined;
70 let moveCells = undefined;
71 let curCellContent = "";
72 for (let i=0; i<this.moves.length; i++)
73 {
74 if (this.moves[i].color == "w")
75 {
76 if (i == 0 || i>0 && this.moves[i-1].color=="b")
77 {
78 if (!!tableRow)
79 {
80 tableRow.children = moveCells;
81 tableContent.push(tableRow);
82 }
83 moveCells = [
84 h(
85 "td",
86 { domProps: { innerHTML: (++moveCounter) + "." } }
87 )
88 ];
89 tableRow = h(
90 "tr",
91 { }
92 );
93 curCellContent = "";
94 }
95 }
96 curCellContent += this.moves[i].notation;
97 if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
98 curCellContent += ",";
99 else //color change
100 {
101 moveCells.push(
102 h(
103 "td",
104 {
105 domProps: { innerHTML: curCellContent },
106 on: { click: () => this.gotoMove(i) },
107 "class": { "highlight-lm": this.cursor == i },
108 }
109 )
110 );
111 curCellContent = "";
112 }
113 }
114 // Complete last row, which might not be full:
115 if (moveCells.length-1 == 1)
116 {
117 moveCells.push(
118 h(
119 "td",
120 { domProps: { innerHTML: "" } }
121 )
122 );
123 }
124 tableRow.children = moveCells;
125 tableContent.push(tableRow);
126 const scoreDiv = h("div",
127 {
128 id: "scoreInfo",
129 style: {
130 display: this.score!="*" ? "block" : "none",
131 },
132 },
133 [
134 h("p", this.score),
135 h("p", this.message),
136 ]
137 );
138 const movesTable = h(
139 "div",
140 { },
141 [
142 scoreDiv,
143 h(
144 "table",
145 {
146 "class": {
147 "moves-list": true,
148 },
149 },
150 tableContent
151 )
152 ]
153 );
154 return movesTable;
155 },
156 -->