diff --git a/frontend/src/pages/pong/pong.html b/frontend/src/pages/pong/pong.html
index 005a44e..e239863 100644
--- a/frontend/src/pages/pong/pong.html
+++ b/frontend/src/pages/pong/pong.html
@@ -6,17 +6,7 @@
Pong Box
-
-
-
-
-
-
-
-
-
- System: connecting ...
0:0
diff --git a/frontend/src/pages/pong/pong.ts b/frontend/src/pages/pong/pong.ts
index 6380161..7646c60 100644
--- a/frontend/src/pages/pong/pong.ts
+++ b/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("#batleft");
const batRight = document.querySelector("#batright");
const ball = document.querySelector("#ball");
@@ -52,6 +54,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const playerL = document.querySelector('#player-left');
const playerR = document.querySelector('#player-right');
const queueBtn = document.querySelector("#QueueBtn");
+ const gameBoard = document.querySelector("#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";
- txtO.innerHTML = "The Mechant";
+ txtU.innerText = isNullish(user) ? "you" : user.name;
+ 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('queueEvent', (e) => showInfo(`QueueEvent: ${e}`)); // queue evt can be left in product
+ socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
+ socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
showInfo("butter");
showInfo("butter-toast");
// socket.emit('localGame');
diff --git a/frontend/src/pages/pong/socket.ts b/frontend/src/pages/pong/socket.ts
index 064e7f4..8eb14ec 100644
--- a/frontend/src/pages/pong/socket.ts
+++ b/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;
};
diff --git a/frontend/src/pong/pong.css b/frontend/src/pong/pong.css
index 4cc9eb9..9c46a73 100644
--- a/frontend/src/pong/pong.css
+++ b/frontend/src/pong/pong.css
@@ -131,4 +131,14 @@
-translate-x-1/2
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
}
\ No newline at end of file
diff --git a/src/pong/src/socket.ts b/src/pong/src/socket.ts
index 360801b..417c58c 100644
--- a/src/pong/src/socket.ts
+++ b/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;
diff --git a/src/pong/src/state.ts b/src/pong/src/state.ts
index cf431b3..2fa8c0f 100644
--- a/src/pong/src/state.ts
+++ b/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);