games: Support themes and fix base contructor hotpatching

Author: PartMan7

src/i18n/english.ts

@@ -66,6 +66,9 @@ export default {
 		MOD_NOT_FOUND: "Could not find a mod called '{{mod}}'.",
 		CANNOT_MOD: 'Mods cannot be applied to this game now.',
 		APPLIED_MOD: '{{mod}} has been applied to game {{id}}.',
+		NO_THEME_SUPPORT: '{{game}} does not support themes.',
+		INVALID_THEME: 'Invalid theme. Valid themes are: {{themes}}.',
+		SET_THEME: 'The theme has been set to {{theme}}.',
 		TIMER: {
 			PRIVATE: "Psst it's your turn to play in {{game}} [{{id}}]",
 			PUBLIC: "{{user}} hasn't played in {{game}} [{{id}}] for {{time}}...",

src/ps/commands/games/core.tsx

@@ -386,7 +386,8 @@ export const command: PSCommand[] = Object.entries(Games).map(([_gameId, Game]):
 							name: 'mod',
 							aliases: ['#'],
 							help: 'Modifies a given game.',
-							syntax: 'CMD [game ref] (mod)',
+							perms: Symbol.for('games.create'),
+							syntax: 'CMD [game ref] [mod]',
 							async run({ message, arg, $T }) {
 								const { game, ctx } = getGame(arg, { action: 'mod', user: message.author.id }, { room: message.target, $T });
 								if (!game.moddable?.() || !game.applyMod) throw new ChatError($T('GAME.CANNOT_MOD'));
@@ -398,6 +399,22 @@ export const command: PSCommand[] = Object.entries(Games).map(([_gameId, Game]):
 						},
 					} satisfies PSCommand['children'])
 				: {}),
+			...(Game.meta.themes
+				? ({
+						theme: {
+							name: 'theme',
+							aliases: ['t'],
+							help: "Customizes a game's theme.",
+							perms: Symbol.for('games.create'),
+							syntax: 'CMD [game ref] [theme name]',
+							async run({ message, arg, $T }) {
+								const { game, ctx } = getGame(arg, { action: 'any' }, { room: message.target, $T });
+								const result = game.setTheme(ctx);
+								message.reply(result);
+							},
+						},
+					} satisfies PSCommand['children'])
+				: {}),
 			menu: {
 				name: 'menu',
 				aliases: ['m', 'list'],

src/ps/games/chess/index.ts

@@ -8,7 +8,7 @@ import { pick } from '@/utils/pick';
 import type { TranslatedText } from '@/i18n/types';
 import type { Log } from '@/ps/games/chess/logs';
 import type { RenderCtx, State, ThemeColours, Turn, WinCtx } from '@/ps/games/chess/types';
-import type { ActionResponse, EndType } from '@/ps/games/common';
+import type { ActionResponse, EndType, Meta, Theme } from '@/ps/games/common';
 import type { BaseContext } from '@/ps/games/game';
 import type { Move, Square } from 'chess.js';
 import type { User } from 'ps-client';
@@ -31,13 +31,7 @@ export class Chess extends Game<State> {
 	cache: Record<string, Record<Turn, number>> = {};
 	lichessURL: string | null = null;
 
-	theme: ThemeColours = {
-		W: '#fff',
-		B: '#9c5624',
-		sel: '#87cefa',
-		hl: '#adff2fa5',
-		last: '#ff330019',
-	};
+	declare meta: Omit<Meta, 'themes'> & { themes: Record<string, Theme<ThemeColours>>; defaultTheme: string };
 
 	constructor(ctx: BaseContext) {
 		super(ctx);
@@ -188,7 +182,7 @@ export class Chess extends Game<State> {
 			side,
 			id: this.id,
 			turn: this.turn!,
-			theme: this.theme,
+			theme: this.meta.themes[this.theme!].colors,
 			small: false,
 		};
 		if (this.winCtx) {

src/ps/games/chess/meta.ts

@@ -1,3 +1,4 @@
+import { CHESS_THEMES, defaultTheme } from '@/ps/games/chess/themes';
 import { GamesList } from '@/ps/games/common';
 import { fromHumanTime } from '@/tools';
 
@@ -17,4 +18,7 @@ export const meta: Meta = {
 	autostart: true,
 	pokeTimer: fromHumanTime('30 sec'),
 	timer: fromHumanTime('1 min'),
+
+	themes: CHESS_THEMES,
+	defaultTheme,
 };

src/ps/games/chess/themes.ts

@@ -0,0 +1,67 @@
+import type { ThemeColours } from '@/ps/games/chess/types';
+import type { Theme } from '@/ps/games/common';
+
+export const defaultTheme = 'default';
+
+export const CHESS_THEMES: Record<string, Theme<ThemeColours>> = {
+	default: {
+		id: 'default',
+		name: 'Default',
+		aliases: ['standard'],
+		colors: {
+			W: '#fff',
+			B: '#9c5624',
+			sel: '#87cefa',
+			hl: '#adff2fa5',
+			last: '#ff330019',
+		},
+	},
+	snow: {
+		id: 'snow',
+		name: 'Snow',
+		aliases: ['pristine', 'white'],
+		colors: {
+			W: '#fff',
+			B: '#ddd',
+			sel: '#99e6e6',
+			hl: '#c2ff6666',
+			last: '#ff330016',
+		},
+	},
+	ocean: {
+		id: 'ocean',
+		name: 'Ocean',
+		aliases: ['sea', 'deep', 'blue'],
+		colors: {
+			W: '#7DACC9',
+			B: '#5486B0',
+			sel: '#87CEFA',
+			hl: '#00E6B8',
+			last: null,
+		},
+	},
+	spooky: {
+		id: 'spooky',
+		name: 'Spooky',
+		aliases: ['halloween', 'ghost'],
+		colors: {
+			W: '#523f69',
+			B: '#332849',
+			sel: 'rgba(237,160,61)',
+			hl: 'rgba(255,172,64,0.6)',
+			last: 'rgba(160,160,225,0.4)',
+		},
+	},
+	ii: {
+		id: 'ii',
+		name: 'II',
+		aliases: ['audiino', 'candy', 'purple', 'ii88'],
+		colors: {
+			W: '#f08dcb',
+			B: '#8e209f',
+			sel: '#da8b37',
+			hl: '#f1ca67d8',
+			last: '#801c5fbf',
+		},
+	},
+};

src/ps/games/chess/types.ts

@@ -12,8 +12,8 @@ export type ThemeColours = {
 	W: string;
 	B: string;
 	sel: string;
-	hl?: string;
-	last?: string;
+	hl: string | null;
+	last: string | null;
 };
 
 export type RenderCtx = {

src/ps/games/common.ts

@@ -2,26 +2,35 @@ import type { TranslatedText } from '@/i18n/types';
 import type { ModData, ModEnum } from '@/ps/games/mods';
 import type { Satisfies } from '@/types/common';
 
-export type Meta = Readonly<{
-	// The name of the game must match the exported class after removing spaces
+export type Theme<Colors extends Partial<Record<string, string | null>> = Partial<Record<string, string | null>>> = {
+	id: string;
 	name: string;
-	id: GamesList;
-	aliases?: readonly string[];
-	/** Only for single-player games. Required for those. */
-	abbr?: string;
-
-	players: 'single' | 'many';
-	turns?: Readonly<Record<string, string>>;
-	minSize?: number;
-	maxSize?: number;
-
-	mods?: Readonly<{ list: ModEnum<string>; data: ModData<string> }>;
-
-	/** @default Assume true */
-	autostart?: boolean;
-	timer?: number | false;
-	pokeTimer?: number | false | undefined;
-}>;
+	aliases: string[];
+	colors: Colors;
+};
+
+export type Meta = Readonly<
+	{
+		// The name of the game must match the exported class after removing spaces
+		name: string;
+		id: GamesList;
+		aliases?: readonly string[];
+		/** Only for single-player games. Required for those. */
+		abbr?: string;
+
+		players: 'single' | 'many';
+		turns?: Readonly<Record<string, string>>;
+		minSize?: number;
+		maxSize?: number;
+
+		mods?: Readonly<{ list: ModEnum<string>; data: ModData<string> }>;
+
+		/** @default Assume true */
+		autostart?: boolean;
+		timer?: number | false;
+		pokeTimer?: number | false | undefined;
+	} & ({ themes: Record<string, Theme>; defaultTheme: string } | { themes?: undefined; defaultTheme?: undefined })
+>;
 
 // Note: The values here MUST match the folder name!
 export enum GamesList {

src/ps/games/game.ts

@@ -20,7 +20,7 @@ import type { EmbedBuilder } from 'discord.js';
 import type { Client, User } from 'ps-client';
 import type { ReactElement } from 'react';
 
-const backupKeys = ['state', 'started', 'turn', 'turns', 'seed', 'players', 'log', 'startedAt', 'createdAt'] as const;
+const backupKeys = ['state', 'started', 'turn', 'turns', 'seed', 'players', 'theme', 'log', 'startedAt', 'createdAt'] as const;
 
 /**
  * This is the shared code for all games. To check the game-specific code, refer to the
@@ -63,6 +63,8 @@ export class Game<State extends BaseState> {
 	players: Record<BaseState['turn'], Player> = {};
 	spectators: string[] = [];
 
+	theme?: string;
+
 	// Game-provided methods:
 	render(side: State['turn'] | null): ReactElement;
 	render() {
@@ -114,6 +116,8 @@ export class Game<State extends BaseState> {
 			this.timerLength = ctx.meta.timer;
 			this.pokeTimerLength = ctx.meta.pokeTimer ?? ctx.meta.timer;
 		}
+
+		if (ctx.meta.defaultTheme) this.theme = ctx.meta.defaultTheme;
 	}
 	persist(ctx: BaseContext) {
 		if (!PSGames[this.meta.id]) PSGames[this.meta.id] = {};
@@ -208,6 +212,17 @@ export class Game<State extends BaseState> {
 		gameCache.set({ id: this.id, room: this.roomid, game: this.meta.id, backup });
 	}
 
+	setTheme(input: string): TranslatedText {
+		if (!this.meta.themes) this.throw('GAME.NO_THEME_SUPPORT', { game: this.meta.name });
+		const themeId = toId(input);
+		const allThemes = Object.values(this.meta.themes);
+		const selectedTheme = allThemes.find(theme => toId(theme.name) === themeId || theme.aliases.includes(themeId));
+		if (!selectedTheme) this.throw('GAME.INVALID_THEME', { themes: allThemes.map(theme => theme.name).list(this.$T) });
+		this.theme = selectedTheme.id;
+		this.update();
+		return this.$T('GAME.SET_THEME', { theme: selectedTheme.name });
+	}
+
 	renderSignups?(staff: boolean): ReactElement | null;
 	signups(): void {
 		if (this.started) this.throw('GAME.ALREADY_STARTED');

src/sentinel/registers/ps.ts

@@ -30,26 +30,23 @@ export const PS_REGISTERS: Register[] = [
 	{
 		label: 'games',
 		pattern: /\/ps\/games\//,
-		reload: async filepaths => {
+		reload: async () => {
 			['common', 'game', 'index', 'render'].forEach(file => cachebuster(`@/ps/games/${file}`));
-			const games = filepaths
-				.reduce<GamesList[]>((acc, filepath) => {
-					const match = filepath.match(/\/ps\/games\/([^/]*)\//);
-					if (match) acc.push(match[1] as GamesList);
-					return acc;
-				}, [])
-				.unique();
+			const games = await fs.readdir(fsPath('ps', 'games'), { withFileTypes: true });
 			await Promise.all(
-				games.map(async game => {
-					const files = await fs.readdir(fsPath('ps', 'games', game));
-					files.forEach(file => cachebuster(fsPath('ps', 'games', game, file)));
+				games
+					.filter(game => game.isDirectory())
+					.map(async game => {
+						const gameDir = game.name as GamesList;
+						const files = await fs.readdir(fsPath('ps', 'games', gameDir));
+						files.forEach(file => cachebuster(fsPath('ps', 'games', gameDir, file)));
 
-					const gameImport = await import(`@/ps/games/${game}`);
-					const { meta }: { meta: Meta } = gameImport;
-					const { [meta.name.replaceAll(' ', '')]: instance } = gameImport;
+						const gameImport = await import(`@/ps/games/${gameDir}`);
+						const { meta }: { meta: Meta } = gameImport;
+						const { [meta.name.replaceAll(' ', '')]: instance } = gameImport;
 
-					Games[game] = { meta, instance };
-				})
+						Games[gameDir] = { meta, instance };
+					})
 			);
 
 			const gameCommands = await fs.readdir(fsPath('ps', 'commands', 'games'));

src/utils/cachebuster.ts

@@ -5,6 +5,7 @@ export function cachebuster(_filepath: string): boolean {
 	const cache = require.cache[filepath];
 	if (!cache) return false;
 	emptyObject(cache.exports);
+	cache.children.length = 0;
 	emptyObject(cache);
 	delete require.cache[filepath];
 	return true;