X-Git-Url: https://git.auder.net/variants/%24%7Bvname%7D/current/git-favicon.png?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FMoveList.vue;h=987329c82615775bff76a87b6884b0f1e458f94e;hb=6cd07b4da66403ab2ff751b1c0361fa237cd0ed2;hp=63e985f2879549ff36af82d5b4494a43b7e0ca40;hpb=6855163c1b62ddbc83fa86a17d6d99bf0638060c;p=vchess.git

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index 63e985f2..987329c8 100644
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -1,24 +1,11 @@
-<!-- TODO: merge Game.vue and MoveList.vue (one logic entity, no ?) -->
 <script>
 // Component for moves list on the right
 export default {
   name: 'my-move-list',
-	props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
-	// --> we could also add turn indicator here
-	data: function() {
-		return {
-			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)
+	props: ["moves","cursor"],
 	render(h) {
 		if (this.moves.length == 0)
 			return;
-		const nbColors = 2;
-		// 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;
@@ -67,26 +54,30 @@ export default {
 			}
 		}
 		// Complete last row, which might not be full:
-		if (moveCells.length-1 < nbColors)
+		if (moveCells.length-1 == 1)
 		{
-			const delta = nbColors - (moveCells.length-1);
-			for (let i=0; i<delta; i++)
-			{
-				moveCells.push(
-					h(
-						"td",
-						{ domProps: { innerHTML: "" } }
-					)
-				);
-			}
+      moveCells.push(
+        h(
+          "td",
+          { domProps: { innerHTML: "" } }
+        )
+      );
 		}
 		tableRow.children = moveCells;
 		tableContent.push(tableRow);
 		const movesTable = h(
-			"table",
-			{ },
-			tableContent
-		);
+      "div",
+      { },
+      [h(
+			  "table",
+			  {
+          "class": {
+            "moves-list": true,
+          },
+        },
+			  tableContent
+		  )]
+    );
 		return movesTable;
 	},
 	methods: {
@@ -96,3 +87,8 @@ export default {
 	},
 };
 </script>
+
+<style lang="sass" scoped>
+.moves-list
+  min-width: 250px
+</style>