diff --git a/frontend/src/pages/login/login.ts b/frontend/src/pages/login/login.ts index 352aba5..1cb11e5 100644 --- a/frontend/src/pages/login/login.ts +++ b/frontend/src/pages/login/login.ts @@ -249,7 +249,6 @@ async function handleLogin( if (dOtherLoginArea) { let styleSheetElement = document.createElement("style"); styleSheetElement.innerText = ""; - // TODO: fetch all the providers from an API ? const providersReq = await client.providerList(); const providers = providersReq.payload.list; /*const providers: Providers[] = [ diff --git a/frontend/src/pages/pong/pong.html b/frontend/src/pages/pong/pong.html index 3e38bff..4610d22 100644 --- a/frontend/src/pages/pong/pong.html +++ b/frontend/src/pages/pong/pong.html @@ -18,7 +18,7 @@
?👤 ?⏳ ?▮•▮ - ⚪️ ?👤 ?▮•▮ + @@ -54,6 +54,24 @@ L
+
diff --git a/frontend/src/pages/pong/pong.ts b/frontend/src/pages/pong/pong.ts index a69d59b..5af0e86 100644 --- a/frontend/src/pages/pong/pong.ts +++ b/frontend/src/pages/pong/pong.ts @@ -7,7 +7,7 @@ import { } from "@app/routing"; import authHtml from "./pong.html?raw"; import io from "socket.io-client"; -import type { CSocket, GameMove, GameUpdate } from "./socket"; +import type { CSocket, GameMove, GameUpdate, TourInfo } from "./socket"; import { showError, showInfo, showSuccess } from "@app/toast"; import { getUser as getSelfUser, type User } from "@app/auth"; import { isNullish } from "@app/utils"; @@ -53,7 +53,8 @@ enum TourInfoState { document.addEventListener("ft:pageChange", (newUrl) => { if (window.__state.pongSock !== undefined) window.__state.pongSock.close(); - if (window.__state.pongKeepAliveInterval !== undefined) clearInterval(window.__state.pongKeepAliveInterval); + if (window.__state.pongKeepAliveInterval !== undefined) + clearInterval(window.__state.pongKeepAliveInterval); window.__state.pongSock = undefined; window.__state.pongKeepAliveInterval = undefined; }); @@ -65,17 +66,24 @@ export function getSocket(): CSocket { }) as any as CSocket; } if (window.__state.pongKeepAliveInterval === undefined) { - window.__state.pongKeepAliveInterval = setInterval(() => { window.__state.pongSock?.emit("hello") }, 100); + window.__state.pongKeepAliveInterval = setInterval(() => { + window.__state.pongSock?.emit("hello"); + }, 100); } return window.__state.pongSock; } -function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn { - setTitle('Pong Game Page'); +function pongClient( + _url: string, + _args: RouteHandlerParams, +): RouteHandlerReturn { + setTitle("Pong Game Page"); const urlParams = new URLSearchParams(window.location.search); const game_req_join = urlParams.get("game"); if (game_req_join) { - showError("currently not supporting the act of joining game (even as a spectator)"); + showError( + "currently not supporting the act of joining game (even as a spectator)", + ); } return { @@ -85,7 +93,12 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn const SELF_COLOR = "red"; const user = getSelfUser(); - let currentGame: { game: GameUpdate, spectating: boolean, playerL: { id: string, name: string, self: boolean }, playerR: { id: string, name: string, self: boolean } } | null = null; + let currentGame: { + game: GameUpdate; + spectating: boolean; + playerL: { id: string; name: string; self: boolean }; + playerR: { id: string; name: string; self: boolean }; + } | null = null; const rdy_btn = document.querySelector("#readyup-btn"); const batLeft = document.querySelector("#batleft"); @@ -115,7 +128,9 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn const tournamentBtn = document.querySelector("#TourBtn"); const tour_infos = - document.querySelector("#tour-info"); + document.querySelector("#tour-info"); + const tour_scores = + document.querySelector("#tourscore-box"); let socket = getSocket(); @@ -138,19 +153,20 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn !rdy_btn || !end_scr || !tournamentBtn || - !tour_infos + !tour_infos || + !tour_scores || + !how_to_play_btn || + !protips ) // sanity check return showError("fatal error"); - if (!how_to_play_btn || !protips) showError("missing protips"); // not a fatal error - tournamentBtn.addEventListener("click", () => { showInfo(`Button State: ${tournamentBtn.innerText}`); switch (tournamentBtn.innerText) { case TourBtnState.AbleToStart: - socket.emit('tourStart') + socket.emit("tourStart"); break; case TourBtnState.AbleToJoin: socket.emit("tourRegister"); @@ -187,10 +203,15 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn keys[e.key.toLowerCase()] = false; }); + tour_infos.addEventListener("click", () => { + tour_scores.classList.toggle("hidden"); + }); + setInterval(() => { // key sender - if (keys["escape"] === true && protips && how_to_play_btn) { + if (keys["escape"] === true) { protips.classList.add("hidden"); + tour_scores.classList.add("hidden"); how_to_play_btn.innerText = "?"; } if (queueBtn.innerText !== QueueState.InGame) @@ -254,6 +275,42 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn currentGame = null; } + const renderTournamentScores = (info: TourInfo) => { + let players = info.players.sort((l, r) => r.score - l.score); + + tour_scores.innerHTML = ` +
+ + + + + + + + + ${players + .map( + (player) => ` + + + + + `, + ) + .join("")} + +
+ Name + + Score +
+ ${player.name} + + ${player.score} +
+
`; + }; + const render = (state: GameUpdate) => { batLeft.style.top = `${state.left.paddle.y}px`; batLeft.style.left = `${state.left.paddle.x}px`; @@ -278,7 +335,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn socket.on("tourEnding", (ending) => { showInfo(ending); - }) + }); // --- // position logic (client) end // --- @@ -287,7 +344,9 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn // queue evt // --- // utils - async function getUser(user: string): Promise<{ id: string, name: string | null }> { + async function getUser( + user: string, + ): Promise<{ id: string; name: string | null }> { let t = await client.getUser({ user }); if (t.kind === "success") @@ -342,28 +401,51 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn }); 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 }; + 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) currentGame = { - spectating: !(state.left.id === user.id || state.right.id === user.id), + spectating: !( + state.left.id === user.id || + state.right.id === user.id + ), game: state, - playerL: normalizeUser(await getUser(state.left.id), "left"), - playerR: normalizeUser(await getUser(state.right.id), "right"), - } + playerL: normalizeUser( + await getUser(state.left.id), + "left", + ), + playerR: normalizeUser( + await getUser(state.right.id), + "right", + ), + }; else currentGame.game = state; - if (currentGame && currentGame?.game.local || currentGame?.playerL.self) { + if ( + (currentGame && currentGame?.game.local) || + currentGame?.playerL.self + ) { batLeft!.style.backgroundColor = SELF_COLOR; playerL!.style.color = SELF_COLOR; } - if (currentGame && (!currentGame?.game.local && currentGame?.playerR.self)) { + if ( + currentGame && + !currentGame?.game.local && + currentGame?.playerR.self + ) { batRight!.style.backgroundColor = SELF_COLOR; playerR!.style.color = SELF_COLOR; } playerL!.innerText = currentGame!.playerL.name; playerR!.innerText = currentGame!.playerR.name; - } + }; socket.on("newGame", async (state) => { currentGame = null; @@ -429,7 +511,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn let weIn = s.players.some((p) => p.id === user.id); let imOwner = s.ownerId === user.id; - // TODO: fix this so the number of remaining games are correct switch (s.state) { case "ended": tournamentBtn.innerText = TourBtnState.AbleToCreate; @@ -439,7 +520,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn tour_infos.innerText = `${TourInfoState.Running} ${s.players.length}👤 ${s.remainingMatches ?? "?"}▮•▮`; break; case "prestart": - tour_infos.innerText = `${imOwner ? TourInfoState.Owner : (weIn ? TourInfoState.Registered : TourInfoState.NotRegisted)} ${s.players.length}👤 ?▮•▮`; + tour_infos.innerText = `${imOwner ? TourInfoState.Owner : weIn ? TourInfoState.Registered : TourInfoState.NotRegisted} ${s.players.length}👤 ?▮•▮`; if (imOwner) { tournamentBtn.innerText = TourBtnState.AbleToStart; } else { @@ -449,6 +530,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn } break; } + renderTournamentScores(s); }); socket.on("tournamentRegister", ({ kind, msg }) => {