X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2FmoveList.js;h=48a8e05c4ba1edd521e1b38b1b947d9ef9ecfd7d;hb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;hp=3687864ce81e98ccbbadb6978db7d65bbedaa8f9;hpb=7ee085c29c53c5072008e10a1ec8d3a763f42859;p=vchess.git

diff --git a/public/javascripts/components/moveList.js b/public/javascripts/components/moveList.js
index 3687864c..48a8e05c 100644
--- a/public/javascripts/components/moveList.js
+++ b/public/javascripts/components/moveList.js
@@ -1,21 +1,21 @@
-//TODO: component for moves list on the right
-// TODO: generic "getPGN" in the same way (following move.color)
+// Component for moves list on the right
 Vue.component('my-move-list', {
-	props: ["moves"], //TODO: other props for e.g. players names + connected indicator
+	props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
 	// --> we could also add turn indicator here
 	data: function() {
 		return {
-			// if oppid == "computer" then mode = "computer" (otherwise human)
-			myid: "", //TODO
+			something: "", //TODO?
 		};
 	},
 	// TODO: extend rendering for more than 2 colors: would be a parameter
+	// in that case some moves for some colors could be just skipped (if a player lost)
 	render(h) {
 		if (this.moves.length == 0)
 			return;
 		const nbColors = 2;
-		if (this.moves[0].color == "black")
-			this.moves.unshift({color: "white", notation: "..."});
+		// TODO: name colors "white", "black", "red", "yellow" ?
+		if (this.moves[0].color == "b")
+			this.moves.unshift({color: "w", notation: "..."});
 		let tableContent = [];
 		let moveCounter = 0;
 		let tableRow = undefined;
@@ -23,45 +23,62 @@ Vue.component('my-move-list', {
 		let curCellContent = "";
 		for (let i=0; i<this.moves.length; i++)
 		{
-			if (this.moves[i].color == "white")
+			if (this.moves[i].color == "w")
 			{
-				if (i == 0 || i>0 && this.moves[i-1].color=="black")
+				if (i == 0 || i>0 && this.moves[i-1].color=="b")
 				{
 					if (!!tableRow)
+					{
+						tableRow.children = moveCells;
 						tableContent.push(tableRow);
+					}
 					moveCells = [
 						h(
 							"td",
-							{ attrs: { innerHTML: (++moveCounter) + "." } }
+							{ domProps: { innerHTML: (++moveCounter) + "." } }
 						)
 					];
 					tableRow = h(
 						"tr",
-						{ },
-						moveCells
+						{ }
 					);
 					curCellContent = "";
 				}
-				curCellContent += this.moves[i].notation + ",";
+			}
+			curCellContent += this.moves[i].notation;
+			if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
+				curCellContent += ",";
+			else //color change
+			{
 				moveCells.push(
 					h(
 						"td",
-						{ attrs: ..............
+						{
+							domProps: { innerHTML: curCellContent },
+							on: { click: () => this.gotoMove(i) },
+							"class": { "highlight-lm": this.cursor == i },
+						}
+					)
+				);
+				curCellContent = "";
 			}
 		}
 		// Complete last row, which might not be full:
-		if (tableRow.length-1 < nbColors)
+		if (moveCells.length-1 < nbColors)
 		{
 			const delta = nbColors - (moveCells.length-1);
 			for (let i=0; i<delta; i++)
 			{
 				moveCells.push(
-					"td"
-					{ attrs: { innerHTML: "" } }
+					h(
+						"td",
+						{ domProps: { innerHTML: "" } }
+					)
 				);
 			}
-			tableContent.push(tableRow);
 		}
+		tableRow.children = moveCells;
+		tableContent.push(tableRow);
 		const movesTable = h(
 			"table",
 			{ },
@@ -69,6 +86,9 @@ Vue.component('my-move-list', {
 		);
 		return movesTable;
 	},
-//	methods: {
-//	},
-}
+	methods: {
+		gotoMove: function(index) {
+			this.$emit("goto-move", index);
+		},
+	},
+})