Splt board view in View or Play

contest-core/src/main/java/eu/solven/kumite/app/InjectDefaultGamesConfig.java

@@ -102,7 +102,7 @@ public CloseableBean injectStaticContestsSchedule(Environment env, ActiveContest
 			// BEWARE The appContext may not be fully started yet
 			// https://stackoverflow.com/questions/8686507/how-to-add-a-hook-to-the-application-context-initialization-event
 			// https://www.baeldung.com/spring-context-events
-			
+
 			log.debug("About to generate contests for games without joinable contest");
 			activeContestGenerator.makeContestsIfNoneJoinable();
 		}, seconds, seconds, TimeUnit.SECONDS);

contest-core/src/main/java/eu/solven/kumite/game/opposition/tictactoe/TicTacToe.java

@@ -105,7 +105,8 @@ public Map<String, IKumiteMove> exampleMoves(RandomGenerator randomGenerator,
 			if ('_' == positions[i]) {
 				// This is a playable position
 				int oneBasePosition = i + 1;
-				moves.put(Integer.toString(oneBasePosition), TicTacToeMove.builder().position(oneBasePosition).build());
+				moves.put(Integer.toString(oneBasePosition),
+						TicTacToeMove.builder().symbol(nextPlayerSymbol).position(oneBasePosition).build());
 			} else {
 				// This position is occupied
 			}

contest-core/src/main/java/eu/solven/kumite/game/opposition/tictactoe/TicTacToeBoard.java

@@ -159,20 +159,33 @@ public Leaderboard makeLeaderboard() {
 		Leaderboard leaderboard = Leaderboard.builder().build();
 
 		if (!isGameOver()) {
+			playerIdToSymbol.forEach((playerId, symbol) -> {
+				leaderboard.registerScore(PlayerLongScore.builder().playerId(playerId).score(0).build());
+			});
+
 			return leaderboard;
 		}
 
-		int winningChar = optWinningSymbol().getAsInt();
+		OptionalInt optWinningSymbol = optWinningSymbol();
 
-		playerIdToSymbol.forEach((playerId, symbol) -> {
-			if (symbol.charValue() == winningChar) {
-				// 3 points for a win
-				leaderboard.registerScore(PlayerLongScore.builder().playerId(playerId).score(3).build());
-			} else {
-				// 1 point for a tie
-				leaderboard.registerScore(PlayerLongScore.builder().playerId(playerId).score(1).build());
-			}
-		});
+		if (optWinningSymbol.isPresent()) {
+			int winningChar = optWinningSymbol.getAsInt();
+
+			playerIdToSymbol.forEach((playerId, symbol) -> {
+				if (symbol.charValue() == winningChar) {
+					// 3 points for a win
+					leaderboard.registerScore(PlayerLongScore.builder().playerId(playerId).score(3).build());
+				} else {
+					// 1 point for a lose
+					leaderboard.registerScore(PlayerLongScore.builder().playerId(playerId).score(1).build());
+				}
+			});
+		} else {
+			playerIdToSymbol.forEach((playerId, symbol) -> {
+				// 2 point for a tie
+				leaderboard.registerScore(PlayerLongScore.builder().playerId(playerId).score(2).build());
+			});
+		}
 
 		return leaderboard;
 	}

contest-core/src/main/java/eu/solven/kumite/game/opposition/tictactoe/TicTacToeMove.java

@@ -20,6 +20,10 @@
 @Builder
 @Jacksonized
 public class TicTacToeMove implements IKumiteMove {
+	// This is useful for rendering the move, hence RandomPlayer does not have to compute its own symbol
+	// 'X' or 'O'
+	char symbol;
+
 	// Has to be between 1 and 9 (included)
 	int position;
 }

contest-core/src/main/java/eu/solven/kumite/randomgamer/IContestJoiningStrategy.java

@@ -6,5 +6,5 @@
 public interface IContestJoiningStrategy {
 
 	boolean shouldJoin(IGame game, Contest contest);
-	
+
 }

contest-core/src/main/java/eu/solven/kumite/randomgamer/RandomPlaysVs1Config.java

@@ -48,8 +48,7 @@ public void onContestIsCreated(ContestIsCreated contestIsCreated) {
 					strategy);
 		}
 
-		// Async to prevent submitting board operations from a boardMutating thread
-		@Subscribe// (threadMode = ThreadMode.ASYNC)
+		@Subscribe
 		public void onPlayerJoinedBoard(PlayerJoinedBoard playerJoined) {
 			ContestSearchParameters searchContestId =
 					ContestSearchParameters.searchContestId(playerJoined.getContestId());
@@ -58,8 +57,7 @@ public void onPlayerJoinedBoard(PlayerJoinedBoard playerJoined) {
 			randomGamer.playOncePerContestAndPlayer(searchContestId, p -> true);
 		}
 
-		// Async to prevent submitting board operations from a boardMutating thread
-		@Subscribe// (threadMode = ThreadMode.ASYNC)
+		@Subscribe
 		public void onBoardIsUpdated(PlayerMoved playerMoved) {
 			ContestSearchParameters searchContestId =
 					ContestSearchParameters.searchContestId(playerMoved.getContestId());

js/e2e-tests/fake-player.mjs

@@ -42,17 +42,18 @@ export default {
 
         await page.getByRole("button", { name: "Preview the board" }).click();
         await page.getByRole("button", { name: "Join contest as player" }).click();
+        await page.getByRole("button", { name: /Play a move/ }).click();
         await page.getByRole("button", { name: "Load some available moves" }).click();
         await page.getByRole("button", { name: "Prefill with an example move" }).click();
         await page.getByText("greedy").click();
         await page.getByRole("button", { name: "Submit" }).click();
         await expect(page.getByText("11111111-1111-1111-1111-111111111111 has score")).toBeVisible();
     },
 
-    async playMultiplayers(page, gameRegex ) {
+    async playMultiplayers(page, gameRegex) {
         await page.getByRole("link", { name: /Games/ }).click();
 
-        await page.getByRole("link", { name: gameRegex}).click();
+        await page.getByRole("link", { name: gameRegex }).click();
         await page.getByRole("link", { name: /Create your own contest/ }).click();
 
         // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
@@ -70,7 +71,7 @@ export default {
         await page.getByRole("button", { name: "Join contest as player" }).click();
         await page.getByRole("button", { name: "Load some available moves" }).click();
         await page.getByRole("button", { name: "Prefill with an example move" }).click();
-        await page.getByText("greedy").click();
+        await page.getByTestId("move_0").click();
         await page.getByRole("button", { name: "Submit" }).click();
         await expect(page.getByText("11111111-1111-1111-1111-111111111111 has score")).toBeVisible();
     },

js/src/main/resources/static/index.html

@@ -51,7 +51,8 @@
             import KumiteContestForm from "./ui/js/kumite-contest-form.js";
             import KumiteSearchContests from "./ui/js/kumite-search-contests.js";
             import KumiteContest from "./ui/js/kumite-contest.js";
-            import KumiteBoard from "./ui/js/kumite-board.js";
+            import KumiteBoardOverview from "./ui/js/kumite-board-overview.js";
+            import KumiteBoardPlay from "./ui/js/kumite-board-play.js";
             import Login from "./ui/js/login.js";
             import LoginBasic from "./ui/js/login-basic.js";
             import AboutView from "./ui/js/about.js";
@@ -99,7 +100,14 @@
                 },
                 {
                     path: "/html/games/:gameId/contest/:contestId/board",
-                    component: KumiteBoard,
+                    name: "board",
+                    component: KumiteBoardOverview,
+                    props: true,
+                },
+                {
+                    path: "/html/games/:gameId/contest/:contestId/board/play",
+                    name: "play",
+                    component: KumiteBoardPlay,
                     props: true,
                 },
                 {
@@ -133,7 +141,7 @@
         </script>
         <!-- This demonstrate how we can inject properties into source files, to be rendered without any API/Javascript-->
         <!-- https://stackoverflow.com/questions/39099295/make-div-stick-to-bottom-of-page -->
-        <div style="position: fixed; bottom: 0; width: 100%; text-align: center">
+        <div style="position: fixed; bottom: 0; width: 100%; text-align: right; z-index: -1;">
             <a href="https://github.com/solven-eu/kumite/commit/@git.commit.id.abbrev@" target="_blank">
                 <img src="./ui/img/github-mark.svg" alt="Github" width="32" height="32" />
             </a>

js/src/main/resources/static/ui/js/board-renderers/kumite-tictactoe-board-move.js

@@ -9,6 +9,8 @@ import { Group } from "https://cdn.jsdelivr.net/npm/two.js/src/group.js";
 // It is easier but (slightly) less efficient
 // import Two from "https://cdn.jsdelivr.net/npm/two.js/src/two.js";
 
+import TicTacToeTools from "./kumite-tictactoe-tools.js";
+
 // https://github.com/jonobr1/two.js/tree/main?tab=readme-ov-file#running-in-headless-environments
 // We may want to generate board views with server-side rendering
 // It may help picking dynamically a nice way to render a given board
@@ -35,9 +37,6 @@ export default {
 		const boardCanvas = ref(null);
 		const board = props.board;
 
-		const width = 256; //window.innerWidth;
-		const height = 256; // window.innerHeight;
-
 		const renderer = new Renderer({});
 
 		function renderRawMove() {
@@ -55,47 +54,12 @@ export default {
 		const renderedGroup = ref(null);
 
 		function renderMove(move) {
-			if (!move || !move.cities) {
+			if (!move || !move.position) {
 				console.log("Can not render invalid move", move);
 				return;
 			}
 
-			console.log("Rendering move", move);
-
-			const cityToPosition = {};
-
-			board.cities.forEach((city) => {
-				cityToPosition[city.name] = city;
-			});
-
-			const group = new Group();
-
-			function checkAndAddLine(from, to) {
-				if (!from) {
-					console.warn("Unknown city", from);
-					return;
-				}
-				if (!to) {
-					console.warn("Unknown city", to);
-					return;
-				}
-
-				const line = new Line(width * from.x, height * from.y, width * to.x, height * to.y);
-				group.add(line);
-			}
-
-			move.cities.forEach((city, index) => {
-				if (index == 0) {
-					const previousCity = cityToPosition[move.cities[move.cities.length - 1]];
-					const currentCity = cityToPosition[city];
-					checkAndAddLine(previousCity, currentCity, renderer);
-				} else {
-					const previousCity = cityToPosition[move.cities[index - 1]];
-					const currentCity = cityToPosition[city];
-
-					checkAndAddLine(previousCity, currentCity, renderer);
-				}
-			});
+			const group = TicTacToeTools.renderMove(renderer, move);
 
 			if (renderedGroup.value) {
 				// Undraw the previously rendered solution
@@ -104,16 +68,23 @@ export default {
 			renderedGroup.value = group;
 			renderer.scene.add(group);
 
-			console.log("Rendering move", move);
+			console.debug("Rendering move", move);
 			renderer.render();
 		}
 
 		onMounted(() => {
-			console.log("onMounted", boardCanvas);
 			boardCanvas.value.appendChild(renderer.domElement);
-			renderer.setSize(width, height);
 
-			console.log("Rendering board", board);
+			renderer.setSize(TicTacToeTools.width(), TicTacToeTools.height());
+
+			console.debug("Rendering board", board);
+			{
+				const positions = board.positions;
+
+				TicTacToeTools.renderSupport(renderer);
+
+				TicTacToeTools.renderPositions(renderer, positions);
+			}
 			renderer.render();
 
 			watch(