feat: Added pages with full webpack bundling

PartMan7 · PartMan7 · commit ebf5c064fac7 · 2025-02-25T00:27:51.000+05:30
diff --git a/docs/WORKAROUNDS.md b/docs/WORKAROUNDS.md
@@ -0,0 +1,13 @@
+## tsconfig.json
+
+```json
+{
+	"compilerOptions": {
+		"module": "commonjs", // 'require' syntax makes HMR possible; 'import' doesn't
+		"esModuleInterop": true // Allow default-importing stuff like path
+	},
+	"ts-node": {
+		"require": ["tsconfig-paths/register"] // For path aliases
+	}
+}
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,10 @@
 		"notify-unpushed": "sh ./scripts/notify-unpushed.sh",
 		"prettify": "prettier -w",
 		"prepare": "sh ./scripts/setup.sh",
-		"start": "ts-node --swc src/index.ts",
+		"start": "npm run webpack-server & ts-node --swc src/index.ts",
 		"test": "npm run lint && npm run tsc",
-		"tsc": "tsc"
+		"tsc": "tsc",
+		"webpack-server": "webpack -c src/web/webpack/webpack.config.ts --watch"
 	},
 	"keywords": [],
 	"author": "PartMan7",
@@ -29,15 +30,19 @@
 		"ps-client": "^4.4.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"ts-loader": "^9.5.2",
 		"ts-node": "^10.9.2",
 		"tsconfig-paths": "^4.2.0",
-		"typescript": "^5.1.6"
+		"typescript": "^5.1.6",
+		"webpack": "^5.98.0",
+		"webpack-cli": "^6.0.1"
 	},
 	"devDependencies": {
 		"@types/express": "^5.0.0",
 		"@types/node": "^20.4.4",
 		"@types/react": "^18.2.48",
 		"@types/react-dom": "^18.2.18",
+		"@types/webpack": "^5.28.5",
 		"@typescript-eslint/eslint-plugin": "^6.2.0",
 		"@typescript-eslint/parser": "^6.2.0",
 		"eslint": "^8.45.0",
diff --git a/src/database/games.ts b/src/database/games.ts
@@ -1,4 +1,4 @@
-import mongoose from 'mongoose';
+import mongoose, { type HydratedDocument } from 'mongoose';
 
 import type { Player } from '@/ps/games/common';
 
@@ -48,6 +48,7 @@ const schema = new mongoose.Schema({
 		default: Date.now,
 	},
 	log: [String],
+	winCtx: mongoose.Schema.Types.Mixed,
 });
 
 schema.index({ id: 1 });
@@ -61,9 +62,17 @@ export interface GameModel {
 	started: Date | null;
 	ended: Date;
 	log: string[];
+	winCtx?: unknown;
 }
 const model = mongoose.model('game', schema, 'games');
 
 export function uploadGame(game: GameModel): Promise<GameModel> {
 	return model.create(game);
 }
+
+export async function getGameById(gameType: string, gameId: string): Promise<HydratedDocument<GameModel>> {
+	const id = gameId.toUpperCase().replace(/^#?/, '#');
+	const game = await model.findOne({ game: gameType, id });
+	if (!game) throw new Error(`Unable to find a game of ${gameType} with ID ${id}.`);
+	return game;
+}
diff --git a/src/ps/games/connectfour/index.ts b/src/ps/games/connectfour/index.ts
@@ -43,7 +43,7 @@ export class ConnectFour extends Game<State> {
 		this.log.push({ action: 'play', time: new Date(), turn, ctx: col });
 
 		if (this.won(col, turn)) {
-			const other = this.next(turn);
+			const other = this.getNext(turn);
 			this.winCtx = { type: 'win', winner: this.players[turn], loser: this.players[other] };
 			this.end();
 			return true;
diff --git a/src/ps/games/game.ts b/src/ps/games/game.ts
@@ -261,6 +261,7 @@ export class Game<State extends BaseState> {
 			const forfeitPlayer = this.onForfeitPlayer?.(player, ctx);
 			if (forfeitPlayer?.success === false) return forfeitPlayer;
 			player.out = true;
+			this.log.push({ action: staffAction ? 'dq' : 'forfeit', turn: player.turn, time: new Date(), ctx: null });
 			return {
 				success: true,
 				data: {
@@ -317,7 +318,7 @@ export class Game<State extends BaseState> {
 	}
 
 	// Only gets next turn. No side effects.
-	next(current = this.turn): State['turn'] {
+	getNext(current = this.turn): State['turn'] {
 		const baseIndex = this.turns.indexOf(current!);
 		return this.turns[(baseIndex + 1) % this.turns.length];
 	}
@@ -326,7 +327,7 @@ export class Game<State extends BaseState> {
 	nextPlayer(): State['turn'] | null {
 		let current = this.turn;
 		do {
-			current = this.next(current);
+			current = this.getNext(current);
 			const currentPlayer = this.players[current];
 			if (!currentPlayer) throw new Error(`Could not find ${current} in ${Object.keys(this.players)} from ${this.turns}`);
 			if (currentPlayer.out) continue;
@@ -337,6 +338,7 @@ export class Game<State extends BaseState> {
 				this.setTimer('Next turn');
 				return current;
 			}
+			this.log.push({ action: 'skip', turn: current, time: new Date(), ctx: null });
 		} while (current !== this.turn);
 		this.clearTimer();
 		return null;
@@ -388,6 +390,7 @@ export class Game<State extends BaseState> {
 				created: this.createdAt,
 				started: this.startedAt!,
 				ended: this.endedAt!,
+				winCtx: 'winCtx' in this ? this.winCtx : null,
 			};
 			uploadGame(model).catch(err => {
 				log(err);
diff --git a/src/ps/games/othello/index.ts b/src/ps/games/othello/index.ts
@@ -54,7 +54,7 @@ export class Othello extends Game<State> {
 	play([i, j]: [number, number], turn: Turn, board: Board): boolean;
 	play([i, j]: [number, number], turn: Turn, board = this.state.board): Board | null | boolean {
 		const isActual = board === this.state.board;
-		const other = this.next(turn);
+		const other = this.getNext(turn);
 		if (isActual && this.turn !== turn) throw new ChatError(this.$T('GAME.IMPOSTOR_ALERT'));
 
 		if (board[i][j]) return null;
@@ -126,17 +126,17 @@ export class Othello extends Game<State> {
 		}
 		const winningSide = scores.W > scores.B ? 'W' : 'B';
 		const winner = this.players[winningSide];
-		const loser = this.players[this.next(winningSide)];
+		const loser = this.players[this.getNext(winningSide)];
 		this.winCtx = {
 			type: 'win',
 			winner: { ...winner, score: scores[winningSide] },
-			loser: { ...loser, score: scores[this.next(winningSide)] },
+			loser: { ...loser, score: scores[this.getNext(winningSide)] },
 		};
 		return this.$T('GAME.WON_AGAINST', {
 			winner: `${winner.name} (${winningSide})`,
 			game: this.meta.name,
-			loser: `${loser.name} (${this.next(winningSide)})`,
-			ctx: ` [${scores[winningSide]}-${scores[this.next(winningSide)]}]`,
+			loser: `${loser.name} (${this.getNext(winningSide)})`,
+			ctx: ` [${scores[winningSide]}-${scores[this.getNext(winningSide)]}]`,
 		});
 	}
 
diff --git a/src/sentinel/sentinel.ts b/src/sentinel/sentinel.ts
@@ -7,11 +7,13 @@ import { cachebuster } from '@/utils/cachebuster';
 import { debounce } from '@/utils/debounce';
 import { fsPath } from '@/utils/fsPath';
 
+import type { FSWatcher } from 'chokidar';
+
 type ListenerType = 'commands' | 'games';
 type Register = { label: ListenerType; pattern: RegExp; reload: (filepaths: string[]) => Promise<void> | void; debounce?: number };
 type Listener = { label: ListenerType; pattern: RegExp; reload: (filepaths: string) => Promise<void> | void };
 
-interface EmitterEvents {
+export interface EmitterEvents {
 	trigger: [label: ListenerType, file: string];
 	start: [label: ListenerType, files: string[]];
 	complete: [label: ListenerType, files: string[]];
@@ -27,7 +29,7 @@ class Emitter extends EventEmitter {
 	}
 }
 
-export default function createSentinel() {
+export default function createSentinel(): { emitter: Emitter; sentinel: FSWatcher } {
 	const emitter = new Emitter();
 
 	const registers: Register[] = [
diff --git a/src/types/common.ts b/src/types/common.ts
@@ -5,3 +5,12 @@ export type RecursiveArray<T> = BaseRecursiveArray<T>[];
 export type RecursivePartial<T> = {
 	[P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];
 };
+
+// Mongoose output as JSON
+export type SerializedInstance<T extends object> = {
+	[key in keyof T]: Exclude<T[key], undefined> extends Map<infer K extends string | number | symbol, infer V>
+		? Record<K, V> | (T[key] extends undefined ? undefined : never)
+		: Exclude<T[key], null | undefined> extends Date
+			? string | (T[key] extends null ? null : never) | (T[key] extends undefined ? undefined : never)
+			: T[key];
+};
diff --git a/src/types/web.ts b/src/types/web.ts
@@ -3,7 +3,7 @@ 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 }
+	res: { [key in keyof Response as key extends 'render' ? never : key]: Response[key] } & { render: Render; getBundle: GetBundle }
 ) => void;
 
 // Note: This isn't the actual type that's imported, but since we override render to support JSX...
@@ -17,3 +17,4 @@ export type UIRoute = {
 };
 
 export type Render = (jsx: ReactElement, title: string, hydrate: boolean) => Promise<Response>;
+export type GetBundle = (filePath: string, title: string) => Promise<Response>;
diff --git a/src/web/api/othello/[gameId].ts b/src/web/api/othello/[gameId].ts
@@ -0,0 +1,13 @@
+import { getGameById } from '@/database/games';
+
+import type { RequestHandler } from 'express';
+
+export const handler: RequestHandler = async (req, res) => {
+	const { gameId } = req.params as { gameId: string };
+	try {
+		const game = await getGameById('othello', gameId);
+		res.json(game.toJSON());
+	} catch (err: unknown) {
+		res.status(404).send((err as Error).message);
+	}
+};
diff --git a/src/web/index.ts b/src/web/index.ts
@@ -1,8 +1,10 @@
 import express, { json, urlencoded } from 'express';
 
 import { port } from '@/config/web';
+import connection from '@/database';
 import { log } from '@/utils/logger';
 import loadAPI from '@/web/loaders/api';
+import loadBundles from '@/web/loaders/bundles';
 import loadUI from '@/web/loaders/ui';
 
 const app = express();
@@ -11,8 +13,11 @@ app.use(urlencoded({ extended: true }));
 app.use(json());
 
 if (process.env.USE_WEB) {
-	loadAPI(app).then(() => loadUI(app));
-	app.listen(port, () => log(`Web is running!`));
+	connection
+		.then(() => loadAPI(app))
+		.then(() => loadUI(app))
+		.then(() => loadBundles(app))
+		.then(() => app.listen(port, () => log(`Web is running!`)));
 }
 
 export default app;
diff --git a/src/web/loaders/bundles.ts b/src/web/loaders/bundles.ts
@@ -0,0 +1,19 @@
+import { Router } from 'express';
+
+import { fsPath } from '@/utils/fsPath';
+import { readFileStructure } from '@/web/loaders/util';
+
+import type { Application } from 'express';
+
+export default async function init(app: Application): Promise<void> {
+	const router = Router();
+
+	const routes = await readFileStructure(fsPath('web', 'react', 'pages'));
+	await Promise.all(
+		Object.entries(routes).map(async ([urlPath, filePath]) => {
+			router.get(urlPath, (req, res) => res.sendFile(filePath.replace('/pages/', '/compiled/').replace(/(?:\.tsx?)?$/, '.js')));
+		})
+	);
+
+	app.use('/bundles', router);
+}
diff --git a/src/web/loaders/middleware.ts b/src/web/loaders/middleware.ts
@@ -3,7 +3,7 @@ import { renderToString } from 'react-dom/server';
 import { jsxToHTML } from '@/utils/jsxToHTML';
 import { renderTemplate } from '@/web/loaders/util';
 
-import type { Render } from '@/types/web';
+import type { GetBundle, Render } from '@/types/web';
 import type { NextFunction, Request, Response } from 'express';
 
 export function renderReact(req: Request, res: Response, next: NextFunction): void {
@@ -18,6 +18,12 @@ export function renderReact(req: Request, res: Response, next: NextFunction): vo
 		const page = await renderTemplate('react.html', { title, preHydrated, content: '???' });
 		return res.send(page);
 	};
-	Object.assign(res, { render });
+
+	const getBundle: GetBundle = async (bundle, title) => {
+		const template = await renderTemplate('react-bundled.html', { title, bundle });
+		return res.send(template);
+	};
+
+	Object.assign(res, { render, getBundle });
 	next();
 }
diff --git a/src/web/react/.eslintrc.json b/src/web/react/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+	"extends": "../../../.eslintrc",
+	"overrides": [
+		{
+			"files": ["./**/*"],
+			"rules": {
+				"no-console": "off"
+			}
+		}
+	]
+}
diff --git a/src/web/react/README.md b/src/web/react/README.md
@@ -0,0 +1,4 @@
+## WARNING
+`tsc` will NOT check any files under `@/web/react`! Please use an
+editor integration (eg: TSServer) to catch errors, since TypeScript
+does not properly support references with noEmit.
diff --git a/src/web/react/compiled/.gitignore b/src/web/react/compiled/.gitignore
@@ -0,0 +1 @@
+*.js
diff --git a/src/web/react/components/board.tsx b/src/web/react/components/board.tsx
@@ -0,0 +1,64 @@
+import type { CellRenderer } from '@/ps/games/render';
+import type { ReactElement } from 'react';
+
+type Label = 'A-Z' | 'Z-A' | '1-9' | '9-1';
+
+const aCode = 'A'.charCodeAt(0);
+
+function getLabels(amount: number, label: Label): string[] {
+	const base = Array.from({ length: amount }).map((_, index) => index + 1);
+	if (label === '9-1' || label === 'Z-A') base.reverse();
+	if (label === 'A-Z' || label === 'Z-A') return base.map(num => String.fromCharCode(aCode + num - 1));
+	else return base.map(num => num.toString());
+}
+
+export function Table<T>({
+	board,
+	rowLabel,
+	colLabel,
+	Cell,
+}: {
+	board: T[][];
+	rowLabel: Label;
+	colLabel: Label;
+	Cell: CellRenderer<T>;
+}): ReactElement {
+	const rowLabels = getLabels(board.length, rowLabel);
+	const colLabels = getLabels(board[0].length, colLabel);
+	return (
+		<table
+			style={{
+				borderCollapse: 'collapse',
+				margin: 20,
+			}}
+		>
+			<tbody>
+				<tr>
+					<th />
+					{colLabels.map(label => (
+						<th style={{ color: 'gray', height: 20 }}>{label}</th>
+					))}
+					<th />
+				</tr>
+
+				{board.map((row, i) => (
+					<tr>
+						<th style={{ color: 'gray', width: 20 }}>{rowLabels[i]}</th>
+						{row.map((cell, j) => (
+							<Cell cell={cell} i={i} j={j} />
+						))}
+						<th style={{ color: 'gray', width: 20 }}>{rowLabels[i]}</th>
+					</tr>
+				))}
+
+				<tr>
+					<th />
+					{colLabels.map(label => (
+						<th style={{ color: 'gray', height: 20 }}>{label}</th>
+					))}
+					<th />
+				</tr>
+			</tbody>
+		</table>
+	);
+}
diff --git a/src/web/react/components/error.tsx b/src/web/react/components/error.tsx
@@ -0,0 +1,12 @@
+import { type ReactElement, memo } from 'react';
+
+export const Error = memo(({ err }: { err: Error }): ReactElement => {
+	console.error(err);
+	return (
+		<>
+			<h1>Hi sorry something went wrong</h1>
+			<h3>{err.message}</h3>
+			<p>Check the browser console for more details...</p>
+		</>
+	);
+});
diff --git a/src/web/react/components/othello/index.tsx b/src/web/react/components/othello/index.tsx
diff --git a/src/web/react/pages/othello.tsx b/src/web/react/pages/othello.tsx
diff --git a/src/web/react/tsconfig.json b/src/web/react/tsconfig.json
diff --git a/src/web/react/typings.d.ts b/src/web/react/typings.d.ts
diff --git a/src/web/templates/react-bundled.html b/src/web/templates/react-bundled.html
diff --git a/src/web/ui/othello/[gameId].tsx b/src/web/ui/othello/[gameId].tsx
diff --git a/src/web/webpack/webpack.config.ts b/src/web/webpack/webpack.config.ts
diff --git a/tsconfig.json b/tsconfig.json
