Feature/how to play

src/ps/commands/games/core.tsx

@@ -1,20 +1,95 @@
 import { PSGames } from '@/cache';
 import { gameCache } from '@/cache/games';
+import { prefix } from '@/config/ps';
 import { Games } from '@/ps/games';
 import { renderBackups, renderMenu } from '@/ps/games/menus';
 import { generateId } from '@/ps/games/utils';
 import { ChatError } from '@/utils/chatError';
+import { Button } from '@/utils/components/ps';
 import { fromHumanTime, toHumanTime } from '@/utils/humanTime';
 import { Timer } from '@/utils/timer';
 import { toId } from '@/utils/toId';
 
 import type { NoTranslate, TranslationFn } from '@/i18n/types';
 import type { CommonGame } from '@/ps/games/game';
 import type { BaseModEntry } from '@/ps/games/mods';
+import type { GameHTPData, HTPDropdown, HTPImage } from '@/ps/games/types';
 import type { PSCommand, PSCommandChild } from '@/types/chat';
 import type { Room } from 'ps-client';
 import type { HTMLopts } from 'ps-client/classes/common';
 
+const guideImageUrl = (path: HTPImage['path']) => (/^https?:\/\//.test(path) ? path : `${process.env.WEB_URL}/static/guides/${path}`);
+
+const HTPLine = ({ line }: { line: string }) => {
+	const parts = line.split(/(https?:\/\/[^\s]+)/g);
+	if (parts.length === 1) return <>{line}</>;
+
+	return (
+		<>
+			{parts.map((part, idx) =>
+				/^https?:\/\//.test(part) ? (
+					<a key={idx} href={part} target="_blank" rel="noopener noreferrer">
+						{part}
+					</a>
+				) : (
+					part
+				)
+			)}
+		</>
+	);
+};
+
+const HTPSection = ({ section }: { section: HTPDropdown }) => {
+	return (
+		<details style={{ margin: '4px 0 4px 8px', cursor: 'pointer' }}>
+			<summary style={{ fontWeight: 'bold' }}>{section.title}</summary>
+			<div style={{ padding: '2px 0 2px 8px', fontSize: '0.95em' }}>
+				{section.lines?.map((line, idx) => (
+					<div key={idx} style={{ margin: '2px 0' }}>
+						<HTPLine line={line} />
+					</div>
+				))}
+				{section.images?.map((image, idx) => (
+					<img
+						key={idx}
+						src={guideImageUrl(image.path)}
+						alt={image.alt ?? ''}
+						width={image.width ?? 170}
+						height={image.height ?? 178}
+						style={{ display: 'block', marginTop: 4 }}
+					/>
+				))}
+				{section.content}
+				{section.subsections?.map((sub, idx) => <HTPSection key={idx} section={sub} />)}
+			</div>
+		</details>
+	);
+};
+
+const HowToPlayBox = ({ data }: { data: GameHTPData }) => {
+	return (
+		<div
+			className="infobox"
+			style={{
+				padding: '10px',
+				borderRadius: '5px',
+				border: '1px solid',
+			}}
+		>
+			<div style={{ fontWeight: 'bold', marginBottom: '8px', borderBottom: '1px solid #444', paddingBottom: '4px' }}>
+				Goal:{' '}
+				<span style={{ fontWeight: 'normal' }}>
+					<HTPLine line={data.goal} />
+				</span>
+			</div>
+
+			{data.sections.map((sec, idx) => (
+				<HTPSection key={idx} section={sec} />
+			))}
+		</div>
+	);
+};
+
 type SearchContext =
 	| { action: 'start'; user: string }
 	| { action: 'join'; user: string }
@@ -152,11 +227,35 @@ export const command: PSCommand[] = Object.entries(Games).map(([_gameId, Game]):
 		},
 		help: `Game module for ${Game.meta.name}. See subcommands.`,
 		syntax: 'CMD',
-		async run({ run, command }) {
-			return run(`help ${command.join(' ')}`);
+		async run({ broadcastHTML, message }) {
+			return broadcastHTML(
+				<div className="infobox" style={{ padding: '0 16px 0' }}>
+					<p>
+						Hi, to make a game of {gameId}, you&nbsp;
+						{Game.meta.players === 'single' ? `can use ,${gameId} create!` : 'need to ask a staff member!'}
+					</p>
+					<p>
+						If you want to learn how to play, check{' '}
+						<Button name="send" value={`/botmsg ${message.parent.status.userid},${prefix}${gameId} help`}>
+							this
+						</Button>{' '}
+						out!
+					</p>
+				</div>
+			);
 		},
 		categories: ['game'],
 		children: {
+			help: {
+				name: 'help',
+				aliases: ['h'],
+				help: 'Shows this help message.',
+				syntax: 'CMD',
+				flags: { allowPMs: true, noDisplay: true },
+				async run({ command, run }) {
+					return run(`help ${command[0]}`);
+				},
+			},
 			create: {
 				name: 'create',
 				aliases: ['new', 'n'],
@@ -223,6 +322,17 @@ export const command: PSCommand[] = Object.entries(Games).map(([_gameId, Game]):
 					}
 				},
 			},
+			htp: {
+				name: 'htp',
+				aliases: ['howtoplay'],
+				help: 'Shows the how-to-play for this game.',
+				flags: { allowPMs: true },
+				syntax: 'CMD',
+				async run({ message }) {
+					const htpData = Game.meta.htp;
+					return message.replyHTML(<HowToPlayBox data={htpData} />);
+				},
+			},
 			...conditionalCommand(
 				Game.meta.autostart === false,
 				{