Assign colours to usernames

Allows for the page to be reloaded without issue

lambda/database.js

@@ -23,8 +23,8 @@ async function readData({ gameId }) {
 	return { success, data: success ? docs[0].data : {} };
 }
 
-async function sendData({ gameId, fen, moves, lastMove, points, ingame, players, chat }) {
-	const data = { id: gameId, fen, moves, lastMove, points, ingame, players, chat };
+async function sendData({ gameId, fen, moves, lastMove, points, ingame, players, white, black, chat }) {
+	const data = { id: gameId, fen, moves, lastMove, points, ingame, players, white, black, chat };
 	console.debug('Sending game data', fen, 'to ID', gameId);
 	let success, type;
 	let docs = await getGameData(gameId);

scripts/play/index.js

@@ -19,7 +19,6 @@ function run() {
 		spectating: booleanParam('spectating'),
 	}
 	window.firstLoad = false;
-	history.pushState({}, 'Play', location.href.replace(location.search, ''));
 
 	window.ingame = true;
 	window.sessionLost = false;
@@ -39,8 +38,8 @@ function run() {
 	window.autoPing = gameOptions.multiplayer;
 	window.hasRules = gameOptions.rules;
 	window.gameId = gameOptions.gamecode;
-	window.username = gameOptions.username || 'User' + random(10, 99);
-	window.chat = [[+new Date(), '[System]', `${username} joined the game`].join(SEP.INFO)];
+	window.username = gameOptions.username || '[Anon]';
+	window.chat = [];
 
 	$('#game-data_content').innerHTML = '';
 	addGameData('Opponent', gameOptions.bot ? 'Bot' : (gameOptions.multiplayer && !gameOptions.static) ? 'Online' : 'Local');
@@ -64,7 +63,7 @@ function run() {
 		$('body').dataset.noflip = true;
 	}
 
-	Object.assign(window, { ...fenFuncs });
+	Object.assign(window, fenFuncs);
 	setupBoard();
 	newBoard(8, true);
 	alignBoard();

scripts/play/online.js

@@ -9,9 +9,8 @@ let lastMessageUser;
 
 async function getGameData(chat) {
 	if (!window.gameId) throw Error('No game ID has been specified');
-	let gameId = (chat ? 'c:' : '') + window.gameId;
-	const resp = await fetch(`${apiUrl}?type=read&gameId=${gameId}`).then(data => data.json());
-	console.debug(`Retrieved data for game ID ${gameId}.`);
+	const resp = await fetch(`${apiUrl}?type=read&gameId=${(chat ? 'c:' : '') + window.gameId}`).then(data => data.json());
+	console.debug(`Retrieved data for game ID ${window.gameId}.`);
 	return resp.output.data;
 }
 
@@ -56,6 +55,7 @@ async function sendDB(soft) {
 		!soft && `moves=${global.logList.join(',')}`,
 		!soft && `lastMove=${window.lastMove.start},${window.lastMove.end}`,
 		!soft && `points=${window.points.w},${window.points.b}`,
+		window.playerTurn && `${window.playerTurn}=${window.username}`,
 		`players=${window.playerCount}`,
 		`ingame=${+!window.sessionLost}`,
 	];
@@ -117,14 +117,25 @@ async function init() {
 	if (!gameOptions?.multiplayer) return;
 	cipher = new Cipher(window.gameId);
 	const data = await getGameData();
-	window.playerCount = (+data.players || 0) + 1;
-	window.playerTurn = playerCount === 1 ? 'white' : 'black';
-	if (playerCount > 2) {
-		gameOptions.spectating = true;
-		window.ingame = false;
-		addGameData('Spectating', 'Yes');
+	if ([data.white, data.black].includes(window.username)) {
+		window.playerCount = +data.players;
+		window.playerTurn = { [data.white]: 'white', [data.black]: 'black' }[window.username];
+	}
+	else {
+		window.playerCount = (+data.players || 0) + 1;
+		window.playerTurn = [, 'white', 'black'][playerCount] || '';
+		if (playerCount > 2 && !gameOptions.spectating) {
+			gameOptions.spectating = true;
+			window.ingame = false;
+			addGameData('Spectating', 'Yes');
+		}
 	}
 	if (window.playerTurn === 'black') flipBoard();
+	if (window.username === '[Anon]') {
+		let newName = window.playerCount < 3 ? 'Player' + window.playerCount : 'Spectator' + (window.playerCount - 2);
+		window.username = newName;
+	}
+	window.chat = [[+new Date(), '[System]', `${username} joined`].join(SEP.INFO)];
 	$('#chat').innerHTML = window.chat.map(msg => formatChatMessage(msg.split(SEP.INFO)));
 	sendDB('soft:true');
 	sendChatMessage('force:true');

styles/common.nvss

@@ -18,6 +18,7 @@ body {
 	background-position: center;
 	color: #eee;
 	font-family: 'Century Gothic', 'Trebuchet MS', Vedana, Arial, sans-serif;
+
 	@ ..600px {
 		background-repeat: repeat;
 		background-size: 200%;
@@ -28,10 +29,12 @@ footer {
 	padding: 1em;
 	text-align: center;
 	font-family: 'Source Sans Pro', sans-serif;
+
 	@ 600px.. {
 		position: relative;
 		bottom: 0.5em;
 	}
+
 	a {
 		text-decoration: underline;
 	}

styles/play.nvss

@@ -14,7 +14,7 @@
 	}
 	--board-size: calc(var(--cell-size) * 8 );
 	--left-sidebar-size: 240px;
-	[mode="singleplayer"] {
+	[data-mode="singleplayer"] {
 		--left-sidebar-size: 100px;
 	}
 }
@@ -275,20 +275,18 @@ button.disabled {
 #taken-black-pieces {grid-area: black;}
 #taken-white-pieces {grid-area: white;}
 
-body[mode="multiplayer"] :is(#undo, #reset) {
+[data-mode="multiplayer"] :is(#undo, #reset) {
 	display: none;
 }
 
 #left-sidebar,
 #right-sidebar {
 	max-height: var(--board-size);
-	overflow-y: auto;
 }
 
 #left-sidebar {
 	grid-area: lsidebar;
 	padding-right: 6px;
-	overflow-y: hidden;
 
 	#icon-options {
 		button {
@@ -305,16 +303,16 @@ body[mode="multiplayer"] :is(#undo, #reset) {
 			flex-wrap: wrap;
 			gap: 4px;
 
-			body[mode="singleplayer"] & {
+			body[data-mode="singleplayer"] & {
 				flex-direction: column;
 			}
 		}
 	}
 
-	:is(#send-chat, #chat) {
+	#send-chat, #chat {
 		width: 100%;
 
-		body[mode="singleplayer"] & {
+		body[data-mode="singleplayer"] :is(&) {
 			display: none;
 		}
 	}
@@ -372,10 +370,13 @@ body[mode="multiplayer"] :is(#undo, #reset) {
 }
 
 #right-sidebar {
+	display: flex;
+	flex-direction: column;
 	border: 2px solid #111;
 	background-color: #dcdcdc;
 	color: black;
 	grid-area: rsidebar;
+	overflow-y: auto;
 
 	strong {
 		margin-bottom: 0.5em;