ZacharyZhang-NYandClaude Opus 5.5
2d7af224dd
CI / Typecheck, lint, tests, e2e (push) Failing after 3m51s
- Title screen over a real-time voxel office rendered at low resolution and quantized to a rotating 32-colour palette with Bayer dithering; day part and season re-light the scene and every surface. - 16-bit UI kit: name-plate dialogs, menu cursor, inventory, XP bar, badges, NPC speech, GAME OVER with CONTINUE, hand-placed 12x12 icons, Fusion Pixel font (Latin subset preloaded). - Sections as a game: quest log (onboarding), character select (AI CEO / AI Co-Founder), inventory (features), party roster (providers), live download XP, save point (all v1.5.1 builds), FAQ as NPC dialog, credits. - Downloads and source point to the Gitea release; the download function only redirects to git.zacharyzhang.com. - Tailwind and the old components removed; unit tests for platform/downloads, rewritten e2e suite. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Badge, Dialog, Icon, NpcSay, PixelButton } from "../pixel";
|
|
import { modes, type Mode } from "../../lib/content";
|
|
import { Reveal } from "./reveal";
|
|
import { SectionHeader } from "./section-header";
|
|
import section from "./section.module.css";
|
|
import styles from "./character-select.module.css";
|
|
|
|
const verdict: Record<Mode["id"], string[]> = {
|
|
ceo: ["Bold. The CEO hires, approves and ships while you get a snack.", "It still can't close a goal by itself. The auditor holds that key."],
|
|
cofounder: ["Classic co-op. The CEO does the grinding and pings you before anything risky.", "Big hires and risky work land in your Approvals. Deliverables wait for your review."],
|
|
};
|
|
|
|
export function CharacterSelect() {
|
|
const [picked, setPicked] = useState<Mode["id"]>("cofounder");
|
|
|
|
return (
|
|
<section id="modes" className={section.section} aria-labelledby="modes-title">
|
|
<div className={section.inner}>
|
|
<Reveal>
|
|
<SectionHeader
|
|
id="modes-title"
|
|
stage="World 2 · Character select"
|
|
title="Choose your CEO"
|
|
intro="Same company, two play styles. You pick one during setup."
|
|
/>
|
|
<div className={styles.roster}>
|
|
{modes.map((mode, index) => {
|
|
const selected = mode.id === picked;
|
|
return (
|
|
<div key={mode.id} className={styles.card} data-selected={selected}>
|
|
<span className={styles.player} aria-hidden="true">
|
|
{selected ? `P${index + 1} ▼` : ""}
|
|
</span>
|
|
<Dialog title={mode.name} tone={selected ? "accent" : "default"} as="div">
|
|
<div className={styles.portrait} aria-hidden="true">
|
|
<Icon name={mode.icon} size={4} />
|
|
</div>
|
|
<p className={styles.class}>
|
|
<Badge>Class: {mode.className}</Badge>
|
|
</p>
|
|
<p className={styles.pitch}>{mode.pitch}</p>
|
|
<dl className={styles.stats}>
|
|
{mode.stats.map((stat) => (
|
|
<div key={stat.label} className={styles.stat}>
|
|
<dt>{stat.label}</dt>
|
|
<dd>{stat.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
<p className={styles.special}>
|
|
<span>Special:</span> {mode.special}
|
|
</p>
|
|
<PixelButton variant={selected ? "primary" : "ghost"} onClick={() => setPicked(mode.id)} icon={selected ? "check" : "sword"}>
|
|
{selected ? `${mode.name} selected` : `Select ${mode.name}`}
|
|
</PixelButton>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className={styles.npc} aria-live="polite">
|
|
<NpcSay key={picked} speaker="Bit, the intern" portrait="bot" lines={verdict[picked]} />
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|