web: Render logs for all games

Author: PartMan7

package-lock.json

@@ -35,6 +35,7 @@
 		"ps-client": "^5.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-json-tree": "^0.20.0",
 		"sheets-parser": "^1.1.1",
 		"tailwindcss": "^4.0.8",
 		"ts-loader": "^9.5.2",

package.json

@@ -1,14 +1,15 @@
-import type { Request, Response } from 'express';
+import type { NextFunction, Request, Response } from 'express';
 import type { ReactElement } from 'react';
 
 export type UIRouteHandler = (
 	req: Request,
-	res: { [key in keyof Response as key extends 'render' ? never : key]: Response[key] } & { render: Render; getBundle: GetBundle }
+	res: { [key in keyof Response as key extends 'render' ? never : key]: Response[key] } & { render: Render; getBundle: GetBundle },
+	next: NextFunction
 ) => void;
 
 // Note: This isn't the actual type that's imported, but since we override render to support JSX...
 export type APIRoute = {
-	handler: (req: Request, res: Response) => void;
+	handler: (req: Request, res: Response, next: NextFunction) => void;
 	verb?: 'get' | 'post';
 };
 

src/types/web.ts

@@ -18,8 +18,8 @@ if (IS_ENABLED.WEB) {
 	Promise.resolve(connection)
 		.then(() => loadStatic(app))
 		.then(() => loadAPI(app))
-		.then(() => loadUI(app))
 		.then(() => loadBundles(app))
+		.then(() => loadUI(app))
 		.then(() => app.listen(port, () => Logger.log(`Web is running!`)));
 }
 

src/web/index.ts

@@ -0,0 +1,18 @@
+import { createRoot } from 'react-dom/client';
+import { JSONTree } from 'react-json-tree';
+
+import { Error } from '@/web/react/components/error';
+
+const container = document.getElementById('react-root')!;
+const root = createRoot(container);
+
+const splitPath = window.location.pathname.split('/');
+const game = splitPath.at(-2)!;
+const gameId = splitPath.at(-1)!;
+
+fetch(`/api/${game}/${gameId}`)
+	.then(res => res.json())
+	.then(data => {
+		root.render(<JSONTree data={data} shouldExpandNodeInitially={() => true} />);
+	})
+	.catch(err => root.render(<Error err={err} />));

src/web/react/pages/[game].tsx

@@ -0,0 +1,9 @@
+import { Games } from '@/ps/games';
+
+import type { UIRouteHandler } from '@/types/web';
+
+export const handler: UIRouteHandler = (req, res, next) => {
+	const { game: gameType } = req.params as { game: string; gameId: string };
+	if (!Object.keys(Games).includes(gameType)) return next();
+	res.getBundle(gameType, `${gameType.charAt(0).toUpperCase() + gameType.substring(1)} Replay`);
+};