From e55f201d0dd506d6d98d98782f2d7c4930f3236f Mon Sep 17 00:00:00 2001 From: Maix0 Date: Thu, 15 Jan 2026 13:42:33 +0100 Subject: [PATCH] no longer spam request --- frontend/src/pages/pong/pong.ts | 64 +++++++++++++++++++++------------ 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/frontend/src/pages/pong/pong.ts b/frontend/src/pages/pong/pong.ts index 47905d4..3dd40ed 100644 --- a/frontend/src/pages/pong/pong.ts +++ b/frontend/src/pages/pong/pong.ts @@ -59,13 +59,17 @@ enum TourInfoState { NoTournament = "⚪️", } +type gamePlayer = {id: string, name: string | Promise, self: boolean}; + type currentGameInfo = { game: GameUpdate; spectating: boolean; - playerL: { id: string; name: string; self: boolean }; - playerR: { id: string; name: string; self: boolean }; + playerL: gamePlayer; + playerR: gamePlayer; } + + document.addEventListener("ft:pageChange", (newUrl) => { if (window.__state.pongSock !== undefined) window.__state.pongSock.close(); if (window.__state.pongKeepAliveInterval !== undefined) @@ -222,7 +226,7 @@ function keys_listen_setup(currentGame : currentGameInfo | null, socket : CSocke tourScoreScreen.classList.add("hidden"); playHow_b.innerText = "?"; } - if (queue.innerText !== QueueState.InGame || currentGame == null) + if (queue.innerText !== QueueState.InGame || currentGame === null) return; if (keys[keysP1.up] !== keys[keysP1.down]) packet.move = keys[keysP1.up] ? "up" : "down"; @@ -248,6 +252,21 @@ function render(state: GameUpdate, playBatL : HTMLDivElement, playBatR : HTMLDiv playInfo.innerText = `${state.left.score} | ${state.right.score}`; }; +function normalizeUser( + id: string, + u: Promise<{ id: string; name: string | null }>, + def: string, +): gamePlayer { + + let user = getSelfUser(); + + return { + id: id, + name: u.then( u => u.name ?? def), + self: id === user?.id, + }; +}; + function pongClient( _url: string, _args: RouteHandlerParams, @@ -341,9 +360,8 @@ function pongClient( } }; - socket.on("gameUpdate", (state: GameUpdate) => { - ready.classList.add("hidden"); - updateCurrentGame(state); + socket.on("gameUpdate", async (state: GameUpdate) => { + await updateCurrentGame(state); render(state, playBatL, playBatR, ball, playInfo); }); @@ -370,17 +388,7 @@ function pongClient( } const updateCurrentGame = async (state: GameUpdate) => { - const normalizeUser = ( - u: { id: string; name: string | null }, - d: string, - ) => { - return { - id: u.id, - name: u.name ?? d, - self: u.id === user.id, - }; - }; - if (currentGame === null) + if (currentGame === null) { currentGame = { spectating: !( state.left.id === user.id || @@ -388,15 +396,20 @@ function pongClient( ), game: state, playerL: normalizeUser( - await getUser(state.left.id), + state.left.id, + getUser(state.left.id), "left", ), playerR: normalizeUser( - await getUser(state.right.id), + state.right.id, + getUser(state.right.id), "right", ), }; - else currentGame.game = state; + } + else { + currentGame.game = state; + } if ( (currentGame && currentGame?.game.local) || currentGame?.playerL.self @@ -412,13 +425,17 @@ function pongClient( playBatR!.style.backgroundColor = SELF_COLOR; playNameR!.style.color = SELF_COLOR; } - playNameL!.innerText = currentGame!.playerL.name; - playNameR!.innerText = currentGame!.playerR.name; + if (currentGame!.playerL.name instanceof Promise) + currentGame!.playerL.name.then(n => currentGame!.playerL.name = n) + if (currentGame!.playerR.name instanceof Promise) + currentGame!.playerR.name.then(n => currentGame!.playerR.name = n) + playNameL!.innerText = typeof currentGame!.playerL.name === 'string' ? currentGame!.playerL.name : "left"; + playNameR!.innerText = typeof currentGame!.playerR.name === 'string' ? currentGame!.playerR.name : "right"; }; socket.on("newGame", async (state) => { currentGame = null; - updateCurrentGame(state); + await updateCurrentGame(state); render(state, playBatL, playBatR, ball, playInfo); tourScoreScreen.classList.add("hidden"); @@ -437,6 +454,7 @@ function pongClient( }); socket.on("gameEnd", (winner) => { + ready.classList.add("hidden"); queue.innerHTML = QueueState.Iddle; queue.style.color = "white";