diff --git a/frontend/index.html b/frontend/index.html index f5da4a5..c68ae22 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -36,7 +36,7 @@ 👤 Signin ⭕ Tic-Tac-Toe ▮•▮ Ping Pong - ⚙️ Settings + 🏆 Tournaments 🚪 Logout diff --git a/frontend/src/auth.ts b/frontend/src/auth.ts index acbc97a..c7a5d57 100644 --- a/frontend/src/auth.ts +++ b/frontend/src/auth.ts @@ -2,7 +2,7 @@ import { showError } from "@app/toast"; import client from "@app/api"; import cookie from "js-cookie"; import { ensureWindowState, isNullish } from "@app/utils"; -import { navigateTo } from "./routing"; +import { handleRoute, navigateTo } from "./routing"; cookie.remove("pkce"); @@ -28,6 +28,7 @@ declare module "ft_state" { interface State { user: User | null; _headerProfile: boolean; + _reloadOnAuthChange: boolean; } } @@ -95,6 +96,12 @@ if (!window.__state._headerProfile) { }); window.__state._headerProfile = true; } + +window.__state._reloadOnAuthChange ??= false; +if (!window.__state._reloadOnAuthChange) { + document.addEventListener("ft:userChange", () => handleRoute()); + window.__state._reloadOnAuthChange = true; +} updateHeaderProfile(); Object.assign(window as any, { getUser, setUser, updateUser, isLogged }); diff --git a/frontend/src/pages/about/about.html b/frontend/src/pages/about/about.html deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/pages/about/about.ts b/frontend/src/pages/about/about.ts deleted file mode 100644 index 2071fd9..0000000 --- a/frontend/src/pages/about/about.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { addRoute, setTitle } from "@app/routing"; -import page from './about.html?raw' - - -async function route(_url: string, _args: { [k: string]: string }): Promise { - setTitle('About us') - return page; -} - - - -addRoute('/about', route) diff --git a/frontend/src/pages/pong/pong.ts b/frontend/src/pages/pong/pong.ts index 2262608..5733f54 100644 --- a/frontend/src/pages/pong/pong.ts +++ b/frontend/src/pages/pong/pong.ts @@ -79,7 +79,7 @@ function pongClient( _url: string, _args: RouteHandlerParams, ): RouteHandlerReturn { - setTitle("Pong Game Page"); + setTitle("Pong Game"); const urlParams = new URLSearchParams(window.location.search); let game_req_join = urlParams.get("game"); // todo: diff --git a/frontend/src/pages/pongHistory/pongHistory.ts b/frontend/src/pages/pongHistory/pongHistory.ts index cbbf069..afb2498 100644 --- a/frontend/src/pages/pongHistory/pongHistory.ts +++ b/frontend/src/pages/pongHistory/pongHistory.ts @@ -1,8 +1,9 @@ -import { addRoute, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; +import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; import page from './pongHistory.html?raw'; import { isNullish } from "@app/utils"; import client from "@app/api"; import { updateUser } from "@app/auth"; +import { showError } from "@app/toast"; function getHHMM(d: Date): string { @@ -12,23 +13,23 @@ function getHHMM(d: Date): string { } async function pongHistory(_url: string, args: RouteHandlerParams): Promise { + setTitle("Pong Matches"); if (isNullish(args.userid)) args.userid = 'me'; let user = await updateUser(); if (isNullish(user)) { - return { html: ' You aren\'t logged in ' }; + return { html: ' You aren\'t logged in ', postInsert: () => { showError("You must be logged in !"); navigateTo("/") } }; } - let userInfoRes = await client.getUser({user: args.userid}); - if (userInfoRes.kind !== 'success') - { - return { html: ' You tried to open a game history with no data :(' }; + let userInfoRes = await client.getUser({ user: args.userid }); + if (userInfoRes.kind !== 'success') { + return { html: ' You tried to open a game history with no data :(', postInsert: () => { showError("We found no data"); navigateTo("/") } }; } let userInfo = userInfoRes.payload; let res = await client.pongHistory({ user: args.userid }); if (res.kind === 'failure' || res.kind === 'notLoggedIn') { // todo: make a real page on no data - return { html: ' You tried to open a game history with no data :(' }; + return { html: ' You tried to open a game history with no data :(', postInsert: () => { showError("We found no data"); navigateTo("/") } }; } let games = res.payload.data; games.reverse(); diff --git a/frontend/src/pages/tourHistory/tourHistory.ts b/frontend/src/pages/tourHistory/tourHistory.ts index 395efd7..f08f2e3 100644 --- a/frontend/src/pages/tourHistory/tourHistory.ts +++ b/frontend/src/pages/tourHistory/tourHistory.ts @@ -1,4 +1,4 @@ -import { addRoute, navigateTo, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; +import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; import pageAll from './tourHistoryAll.html?raw'; import pageSingle from './tourHistorySingle.html?raw'; import { isNullish } from "@app/utils"; @@ -14,7 +14,7 @@ function getHHMM(d: Date): string { } async function tourHistoryAll(_url: string, args: RouteHandlerParams): Promise { - + setTitle("Tournaments"); let data = await client.tournamentList(); if (data.kind !== 'success') { showError(`Failed to fetch data`); diff --git a/frontend/src/pages/ttt/ttt.ts b/frontend/src/pages/ttt/ttt.ts index 63825fb..ad634bb 100644 --- a/frontend/src/pages/ttt/ttt.ts +++ b/frontend/src/pages/ttt/ttt.ts @@ -1,5 +1,5 @@ import "./ttt.css" -import {addRoute, type RouteHandlerReturn} from "@app/routing"; +import {addRoute, setTitle, type RouteHandlerReturn} from "@app/routing"; import tttPage from "./ttt.html?raw"; import {showError, showInfo} from "@app/toast"; import {io} from "socket.io-client"; @@ -41,6 +41,7 @@ type CurrentGameInfo = GameUpdate & { lastState: GameUpdate['gameState'] | null // Route handler for the Tic-Tac-Toe page. // Instantiates the game logic and binds UI events. async function handleTTT(): Promise { + setTitle("Tic Tac Toe"); const msgNotifTimeOut = 4 * 1000; const socket: Socket = getSocket(); void socket; diff --git a/frontend/src/pages/tttHistory/tttHistory.ts b/frontend/src/pages/tttHistory/tttHistory.ts index d7fcf51..4a0dfc6 100644 --- a/frontend/src/pages/tttHistory/tttHistory.ts +++ b/frontend/src/pages/tttHistory/tttHistory.ts @@ -1,8 +1,9 @@ -import { addRoute, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; +import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; import page from './tttHistory.html?raw'; import { isNullish } from "@app/utils"; import client from "@app/api"; import { updateUser } from "@app/auth"; +import { showError } from "@app/toast"; function getHHMM(d: Date): string { @@ -11,36 +12,36 @@ function getHHMM(d: Date): string { return `${h < 9 ? '0' : ''}${h}:${m < 9 ? '0' : ''}${m}` } -function statusText(side:'X'|'O',status: string): string { +function statusText(side: 'X' | 'O', status: string): string { if (status === `win${side}`) return 'WIN'; - if (status === `win${side === 'X'? 'O' : 'X'}`) return 'LOSE'; + if (status === `win${side === 'X' ? 'O' : 'X'}`) return 'LOSE'; return 'DRAW' } -function statusColor(side:'X'|'O',status: string): string { +function statusColor(side: 'X' | 'O', status: string): string { if (status === `win${side}`) return 'text-green-600'; - if (status === `win${side === 'X'? 'O' : 'X'}`) return 'text-red-600'; + if (status === `win${side === 'X' ? 'O' : 'X'}`) return 'text-red-600'; return 'text-yellow-600' } async function tttHistory(_url: string, args: RouteHandlerParams): Promise { + setTitle("Tic Tac Toe Games"); if (isNullish(args.userid)) args.userid = 'me'; let user = await updateUser(); if (isNullish(user)) { - return { html: ' You aren\'t logged in ' }; + return { html: ' You aren\'t logged in ', postInsert: () => { showError("You must be logged in !"); navigateTo("/") } }; } - let userInfoRes = await client.getUser({user: args.userid}); - if (userInfoRes.kind !== 'success') - { - return { html: ' You tried to open a game history with no data :(' }; + let userInfoRes = await client.getUser({ user: args.userid }); + if (userInfoRes.kind !== 'success') { + return { html: ' You tried to open a game history with no data :(', postInsert: () => { showError("We found no data"); navigateTo("/") } }; } let userInfo = userInfoRes.payload; let res = await client.tttHistory({ user: args.userid }); if (res.kind === 'failure' || res.kind === 'notLoggedIn') { // todo: make a real page on no data - return { html: ' You tried to open a game history with no data :(' }; + return { html: ' You tried to open a game history with no data :(', postInsert: () => { showError("We found no data"); navigateTo("/") } }; } let games = res.payload.data; games.reverse(); @@ -54,7 +55,7 @@ async function tttHistory(_url: string, args: RouteHandlerParams): Promise