From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 14 Jan 2019 11:15:23 +0000 (+0100)
Subject: Draft moveList component
X-Git-Url: https://git.auder.net/assets/js/doc/html/current/css/index.css?a=commitdiff_plain;h=7ee085c29c53c5072008e10a1ec8d3a763f42859;p=vchess.git

Draft moveList component
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 6361b8a1..594c8c22 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -93,7 +93,7 @@ Vue.component('my-game', {
 					{{ translate("Download PGN") }}
 				</button>
 			</div>
-			<my-move-list v-if="showMoves">
+			<my-move-list v-if="showMoves" :moves="moves">
 			</my-move-list>
 		</div>
 	`,
diff --git a/public/javascripts/components/moveList.js b/public/javascripts/components/moveList.js
index 97980040..3687864c 100644
--- a/public/javascripts/components/moveList.js
+++ b/public/javascripts/components/moveList.js
@@ -1 +1,74 @@
 //TODO: component for moves list on the right
+// TODO: generic "getPGN" in the same way (following move.color)
+Vue.component('my-move-list', {
+	props: ["moves"], //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
+		};
+	},
+	// TODO: extend rendering for more than 2 colors: would be a parameter
+	render(h) {
+		if (this.moves.length == 0)
+			return;
+		const nbColors = 2;
+		if (this.moves[0].color == "black")
+			this.moves.unshift({color: "white", notation: "..."});
+		let tableContent = [];
+		let moveCounter = 0;
+		let tableRow = undefined;
+		let moveCells = undefined;
+		let curCellContent = "";
+		for (let i=0; i<this.moves.length; i++)
+		{
+			if (this.moves[i].color == "white")
+			{
+				if (i == 0 || i>0 && this.moves[i-1].color=="black")
+				{
+					if (!!tableRow)
+						tableContent.push(tableRow);
+					moveCells = [
+						h(
+							"td",
+							{ attrs: { innerHTML: (++moveCounter) + "." } }
+						)
+					];
+					tableRow = h(
+						"tr",
+						{ },
+						moveCells
+					);
+					curCellContent = "";
+				}
+				curCellContent += this.moves[i].notation + ",";
+				moveCells.push(
+					h(
+						"td",
+						{ attrs: ..............
+			}
+		}
+		// Complete last row, which might not be full:
+		if (tableRow.length-1 < nbColors)
+		{
+			const delta = nbColors - (moveCells.length-1);
+			for (let i=0; i<delta; i++)
+			{
+				moveCells.push(
+					"td"
+					{ attrs: { innerHTML: "" } }
+				);
+			}
+			tableContent.push(tableRow);
+		}
+		const movesTable = h(
+			"table",
+			{ },
+			tableContent
+		);
+		return movesTable;
+	},
+//	methods: {
+//	},
+}
diff --git a/public/javascripts/components/room.js b/public/javascripts/components/room.js
index 38eb9f9b..f5daee28 100644
--- a/public/javascripts/components/room.js
+++ b/public/javascripts/components/room.js
@@ -8,6 +8,15 @@ div(role="dialog" aria-labelledby="newGameTxt")
 		p= translations["Waiting for opponent..."]
 */
 
+
+
+
+// TODO: my-challenge-list, gérant clicks sur challenges, affichage, réception/émission des infos sur challenges
+// de même, my-player-list
+
+
+
+
 // TODO: si on est en train de jouer une partie, le notifier aux nouveaux connectés
 
 /*