Better menu ordering ?
[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 watch: {
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):
11 let groupsCount = -1;
12 let curCol = undefined;
13 for (let i=0; i<newCursor; i++)
14 {
15 const m = this.moves[i];
16 if (m.color != curCol)
17 {
18 groupsCount++;
19 curCol = m.color;
20 }
21 }
22 // $nextTick to wait for table > tr to be rendered
23 this.$nextTick( () => {
24 let rows = document.querySelectorAll('#movesList tr');
25 if (rows.length > 0)
26 {
27 rows[Math.floor(Math.max(groupsCount,0)/2)].scrollIntoView({
28 behavior: "auto",
29 block: "nearest",
30 });
31 }
32 });
33 },
34 },
35 render(h) {
36 if (this.moves.length == 0)
37 return;
38 let tableContent = [];
39 let moveCounter = 0;
40 let tableRow = undefined;
41 let moveCells = undefined;
42 let curCellContent = "";
43 let firstIndex = 0;
44 for (let i=0; i<this.moves.length; i++)
45 {
46 if (this.moves[i].color == "w")
47 {
48 if (i == 0 || i>0 && this.moves[i-1].color=="b")
49 {
50 if (!!tableRow)
51 {
52 tableRow.children = moveCells;
53 tableContent.push(tableRow);
54 }
55 moveCells = [
56 h(
57 "td",
58 { domProps: { innerHTML: (++moveCounter) + "." } }
59 )
60 ];
61 tableRow = h(
62 "tr",
63 { }
64 );
65 curCellContent = "";
66 firstIndex = i;
67 }
68 }
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")
72 firstIndex = i;
73 curCellContent += this.moves[i].notation;
74 if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
75 curCellContent += ",";
76 else //color change
77 {
78 moveCells.push(
79 h(
80 "td",
81 {
82 domProps: { innerHTML: curCellContent },
83 on: { click: () => this.gotoMove(i) },
84 "class": { "highlight-lm":
85 this.cursor >= firstIndex && this.cursor <= i },
86 }
87 )
88 );
89 curCellContent = "";
90 }
91 }
92 // Complete last row, which might not be full:
93 if (moveCells.length-1 == 1)
94 {
95 moveCells.push(
96 h(
97 "td",
98 { domProps: { innerHTML: "" } }
99 )
100 );
101 }
102 tableRow.children = moveCells;
103 tableContent.push(tableRow);
104 let rootElements = [];
105 if (!!this.score && this.score != "*")
106 {
107 const scoreDiv = h("div",
108 {
109 id: "scoreInfo",
110 style: {
111 display: this.score!="*" ? "block" : "none",
112 },
113 },
114 [
115 h("p", this.score),
116 h("p", store.state.tr[this.message]),
117 ]
118 );
119 rootElements.push(scoreDiv);
120 }
121 rootElements.push(
122 h(
123 "table",
124 {
125 "class": {
126 "moves-list": true,
127 },
128 },
129 tableContent
130 )
131 );
132 return h(
133 "div",
134 { },
135 rootElements);
136 },
137 methods: {
138 gotoMove: function(index) {
139 this.$emit("goto-move", index);
140 },
141 },
142 };
143 </script>
144
145 <style lang="sass" scoped>
146 .moves-list
147 min-width: 250px
148 td.highlight-lm
149 background-color: plum
150 </style>