pong:front: pretty end screen + self & opponent names prints

frontend/src/pages/pong/pong.html

@@ -6,17 +6,7 @@
 			Pong Box<span id="t-username"></span>
 		</h1><br>
 
-	<!-- on/off switch for local / online play : idea was re-worked, we probably wont use that -->
-	<!--	<label class="inline-flex items-center gap-3 cursor-pointer select-none"> -->
-	<!--		<input id="modeToggle" type="checkbox" class="sr-only"/> -->
-	<!--		<div id="toggleTrack" class="relative w-14 h-7 rounded-full bg-gray-300 transition-colors duration-300"> -->
-	<!--			<span id="toggleKnob" class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full transition-transform duration-300"></span> -->
-	<!--		</div> -->
-	<!--		<span id="toggleLabel" class="text-sm font-medium text-gray-700"> Local </span> -->
-	<!--	</label> -->
-
 		<!-- Horizontal Message Box -->
-		<div id="system-box" class="system-info">System: connecting ... </div>
 		<div id="score-box" class="grid grid-cols-[1fr_auto_1fr] items-center">
 			<h1 id="player-left"></h1>
 			<h1 id="score-board" class="justify-self-center text-p10 font-bold text-gray-800">0:0</h1>

frontend/src/pages/pong/pong.ts

@@ -3,8 +3,9 @@ import authHtml from './pong.html?raw';
 import io from 'socket.io-client';
 import type { CSocket, GameMove, GameUpdate } from "./socket";
 import { showError, showInfo } from "@app/toast";
-import { getUser } from "@app/auth";
+import { getUser, type User } from "@app/auth";
 import { isNullish } from "@app/utils";
+import client from "@app/api";
 
 // get the name of the machine used to connect
 declare module 'ft_state' {
@@ -45,6 +46,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 
 			const user = getUser();
 			let currentGame: GameUpdate | null = null;
+			let opponent: User | null = null;
 			const batLeft = document.querySelector<HTMLDivElement>("#batleft");
 			const batRight = document.querySelector<HTMLDivElement>("#batright");
 			const ball = document.querySelector<HTMLDivElement>("#ball");
@@ -52,6 +54,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			const playerL = document.querySelector<HTMLDivElement>('#player-left');
 			const playerR = document.querySelector<HTMLDivElement>('#player-right');
 			const queueBtn = document.querySelector<HTMLButtonElement>("#QueueBtn");
+			const gameBoard = document.querySelector<HTMLDivElement>("#pongbox");
 
 			let socket = getSocket();
 
@@ -59,7 +62,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				navigateTo("/app");
 				return ;
 			}
-			if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR) // sanity check
+			if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR || !gameBoard) // sanity check
 				return showError('fatal error');
 
 			// ---
@@ -134,8 +137,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			function set_pretty(batU : HTMLDivElement, txtU : HTMLDivElement, txtO : HTMLDivElement, colorYou : string) {
 				batU.style.backgroundColor = colorYou;
 				txtU.style.color = colorYou;
-				txtU.innerText = "you";
+				txtU.innerText = isNullish(user) ? "you" : user.name;
-				txtO.innerHTML = "The Mechant";
+				txtO.innerText = isNullish(opponent) ? "the mechant" : opponent.name;
 			}
 			queueBtn.addEventListener("click", ()=>{
 				if (queueBtn.innerText !== QueueState.Iddle) {
@@ -148,8 +151,22 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				queueBtn.innerText = QueueState.InQueu;
 				socket.emit('enqueue');
 			});
-			socket.on('newGame', (state) => {
+			async function get_opponent(opponent_id : string) {
+				let t = await client.getUser({user:opponent_id});
+
+				switch (t.kind) {
+					case "success" :
+						opponent = t.payload;
+						break ;
+					default :
+						opponent = null;
+				}
+			}
+			
+
+			socket.on('newGame', async (state) => {
 				render(state);
+				await get_opponent(state.left.id == user.id ? state.right.id : state.left.id);
 				queueBtn.innerText = QueueState.InGame;
 				queueBtn.style.color = 'red';
 				batLeft.style.backgroundColor = DEFAULT_COLOR;
@@ -165,6 +182,23 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			socket.on("gameEnd", () => {
 				queueBtn.innerHTML = QueueState.Iddle;
 				queueBtn.style.color = 'white';
+
+				if (!isNullish(currentGame)) {
+					let new_div = document.createElement('div');
+					let end_txt = "";
+					if ((user.id === currentGame.left.id && currentGame.left.score > currentGame.right.score) ||
+						(user.id === currentGame.right.id && currentGame.right.score > currentGame.left.score))
+						end_txt = 'won! #yippe';
+					else
+						end_txt = 'lost #sadge';
+					new_div.innerText = 'you ' + end_txt; 
+					new_div.className = "pong-end-screen";
+					gameBoard.appendChild(new_div);
+
+					setTimeout(() => {
+						new_div.remove();
+					}, 3 * 1000);
+				}
 				render(DEFAULT_POSITIONS);
 				batLeft.style.backgroundColor = DEFAULT_COLOR;
 				batRight.style.backgroundColor = DEFAULT_COLOR;
@@ -173,6 +207,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				playerR.innerText = "";
 				playerL.innerText = "";
 				currentGame = null;
+				opponent = null;
 			})
 			// ---
 			// queue evt end
@@ -181,8 +216,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			batLeft.style.backgroundColor = DEFAULT_COLOR;
 			batRight.style.backgroundColor = DEFAULT_COLOR;
 
-			socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`)); // queue info TODO: delete for final product
+			socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
-			socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`)); // queue evt can be left in product
+			socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
 			showInfo("butter");
 			showInfo("butter-toast");
 			// socket.emit('localGame');

frontend/src/pages/pong/socket.ts

@@ -33,6 +33,8 @@ export type GameMove = {
 export interface ClientToServer {
 	enqueue: () => void;
 	dequeue: () => void;
+	readyUp: () => void;
+	readyDown:() => void;
 	debugInfo: () => void;
 	gameMove: (up: GameMove) => void;
 	connectedToGame: (gameId: string) => void;
@@ -43,7 +45,7 @@ export interface ServerToClient {
 	forceDisconnect: (reason: string) => void;
 	queueEvent: (msg: 'registered' | 'unregistered') => void;
 	updateInformation: (info: UpdateInfo) => void,
-	newGame: (initState: GameUpdate) => void,
+	newGame: (initState: GameUpdate) => void, // <- consider this the gameProc eg not start of game but wait for client to "ready up"
 	gameUpdate: (state: GameUpdate) => void,
 	gameEnd: () => void;
 };

frontend/src/pong/pong.css

@@ -132,3 +132,13 @@
     bg-[linear-gradient(to_bottom,white_50%,transparent_50%)]
     bg-size-[4px_20px];
 }
+
+.pong-end-screen {
+  @apply 
+    rounded-2xl
+    absolute
+    justify-center
+    text-black
+    text-center
+    bg-white
+}

src/pong/src/socket.ts

@@ -32,6 +32,8 @@ export type GameMove = {
 export interface ClientToServer {
 	enqueue: () => void;
 	dequeue: () => void;
+	readyUp: () => void;
+	readyDown:() => void;
 	debugInfo: () => void;
 	gameMove: (up: GameMove) => void;
 	connectedToGame: (gameId: string) => void;

src/pong/src/state.ts

@@ -69,6 +69,10 @@ class StateI {
 			u1.currentGame = gameId;
 			u2.currentGame = gameId;
 
+			// ---
+			// wait for ready up
+			// --- 
+			
 			g.gameUpdate = setInterval(() => {
 				g.tick();
 				this.gameUpdate(gameId, u1.socket);