2 import { store } from "@/store";
5 props: ["moves","cursor","score","message","firstNum"],
7 cursor: function(newCursor) {
8 if (window.innerWidth <= 767)
9 return; //moves list is below: scrolling would hide chessboard
10 // Count grouped moves until the cursor (if multi-moves):
12 let curCol = undefined;
13 for (let i=0; i<newCursor; i++)
15 const m = this.moves[i];
16 if (m.color != curCol)
22 // $nextTick to wait for table > tr to be rendered
23 this.$nextTick( () => {
24 let rows = document.querySelectorAll('#movesList tr');
27 rows[Math.floor(Math.max(groupsCount,0)/2)].scrollIntoView({
36 if (this.moves.length == 0)
38 let tableContent = [];
40 let tableRow = undefined;
41 let moveCells = undefined;
42 let curCellContent = "";
44 for (let i=0; i<this.moves.length; i++)
46 if (this.moves[i].color == "w")
48 if (i == 0 || i>0 && this.moves[i-1].color=="b")
52 tableRow.children = moveCells;
53 tableContent.push(tableRow);
58 { domProps: { innerHTML: (++moveCounter) + "." } }
69 // Next condition is fine because even if the first move is black,
70 // there will be the "..." which count as white move.
71 else if (this.moves[i].color == "b" && this.moves[i-1].color == "w")
73 curCellContent += this.moves[i].notation;
74 if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
75 curCellContent += ",";
82 domProps: { innerHTML: curCellContent },
83 on: { click: () => this.gotoMove(i) },
84 "class": { "highlight-lm":
85 this.cursor >= firstIndex && this.cursor <= i },
92 // Complete last row, which might not be full:
93 if (moveCells.length-1 == 1)
98 { domProps: { innerHTML: "" } }
102 tableRow.children = moveCells;
103 tableContent.push(tableRow);
104 let rootElements = [];
105 if (!!this.score && this.score != "*")
107 const scoreDiv = h("div",
111 display: this.score!="*" ? "block" : "none",
116 h("p", store.state.tr[this.message]),
119 rootElements.push(scoreDiv);
138 gotoMove: function(index) {
139 this.$emit("goto-move", index);
145 <style lang="sass" scoped>
149 background-color: plum