feat: add CharacterWizard multi-step character creation modal
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aaron Wood
parent
3e6749de5f
commit
a6218c72d4
2 changed files with 631 additions and 0 deletions
369
client/src/components/CharacterWizard.module.css
Normal file
369
client/src/components/CharacterWizard.module.css
Normal file
|
|
@ -0,0 +1,369 @@
|
|||
/* ── Backdrop ─────────────────────────────────────────── */
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--bg-overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* ── Dialog ───────────────────────────────────────────── */
|
||||
.dialog {
|
||||
background-color: var(--bg-modal);
|
||||
background-image: var(--texture-surface), var(--texture-speckle);
|
||||
background-size: 256px 256px, 128px 128px;
|
||||
background-repeat: repeat, repeat;
|
||||
border: 2px solid rgba(var(--gold-rgb), 0.3);
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow:
|
||||
0 8px 40px rgba(var(--shadow-rgb), 0.7),
|
||||
0 2px 8px rgba(var(--shadow-rgb), 0.5),
|
||||
inset 0 1px 0 rgba(var(--gold-rgb), 0.1),
|
||||
inset 0 0 60px rgba(var(--shadow-rgb), 0.2);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(var(--gold-rgb), 0.2) transparent;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────── */
|
||||
.title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.3);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stepLabel {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-tertiary);
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ── Progress dots ────────────────────────────────────── */
|
||||
.dots {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--gold-rgb), 0.15);
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.25);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.dotActive {
|
||||
background: var(--gold);
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.dotDone {
|
||||
background: rgba(var(--gold-rgb), 0.45);
|
||||
border-color: rgba(var(--gold-rgb), 0.45);
|
||||
}
|
||||
|
||||
/* ── Form fields ──────────────────────────────────────── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.fieldLabel {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg-inset);
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.15);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-family: "Alegreya", Georgia, serif;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
/* ── Stat rolling (step 2) ────────────────────────────── */
|
||||
.statGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.statRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--bg-inset);
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.statName {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
min-width: 2ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.statMod {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-tertiary);
|
||||
min-width: 3ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rerollBtn {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background: none;
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.25);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.05em;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.rerollBtn:hover {
|
||||
border-color: rgba(var(--gold-rgb), 0.5);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* ── Background list (step 3) ─────────────────────────── */
|
||||
.bgList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 0.5rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(var(--gold-rgb), 0.2) transparent;
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 0.35rem;
|
||||
background: var(--bg-inset);
|
||||
}
|
||||
|
||||
.bgItem {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0.88rem;
|
||||
font-family: "Alegreya", Georgia, serif;
|
||||
transition: background 0.1s, border-color 0.1s;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.bgItem:hover {
|
||||
background: rgba(var(--gold-rgb), 0.06);
|
||||
}
|
||||
|
||||
.bgItemSelected {
|
||||
background: rgba(var(--gold-rgb), 0.12);
|
||||
border-color: rgba(var(--gold-rgb), 0.3);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.bgSkill {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-tertiary);
|
||||
font-style: italic;
|
||||
margin-top: 0.2rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.randomBtn {
|
||||
width: 100%;
|
||||
padding: 0.35rem;
|
||||
background: none;
|
||||
border: 1px dashed rgba(var(--gold-rgb), 0.2);
|
||||
border-radius: 4px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.05em;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.randomBtn:hover {
|
||||
border-color: rgba(var(--gold-rgb), 0.4);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Review (step 4) ──────────────────────────────────── */
|
||||
.reviewSectionTitle {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.75rem;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 0.4rem;
|
||||
border-bottom: 1px solid rgba(var(--gold-rgb), 0.15);
|
||||
padding-bottom: 0.2rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.reviewGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.35rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.reviewRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
border-bottom: 1px solid rgba(var(--gold-rgb), 0.07);
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.reviewLabel {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.reviewValue {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-primary);
|
||||
font-family: "Alegreya", Georgia, serif;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reviewStats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.reviewStat {
|
||||
text-align: center;
|
||||
padding: 0.35rem;
|
||||
background: var(--bg-inset);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.1);
|
||||
}
|
||||
|
||||
.reviewStatName {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-tertiary);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.reviewStatVal {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.reviewStatMod {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* ── Navigation buttons ───────────────────────────────── */
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btnSecondary {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
background: none;
|
||||
border: 1px solid rgba(var(--gold-rgb), 0.2);
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-display);
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.btnSecondary:hover {
|
||||
border-color: rgba(var(--gold-rgb), 0.4);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btnPrimary {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: var(--btn-gold-bg);
|
||||
color: var(--btn-active-text);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(var(--shadow-rgb), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px 1px rgba(var(--shadow-rgb), 0.2);
|
||||
}
|
||||
|
||||
.btnPrimary:hover {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--gold-bright),
|
||||
var(--gold-hover) 40%,
|
||||
var(--gold)
|
||||
);
|
||||
}
|
||||
|
||||
.btnPrimary:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
262
client/src/components/CharacterWizard.tsx
Normal file
262
client/src/components/CharacterWizard.tsx
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
import { useState } from "react";
|
||||
import type { CreateCharacterData } from "../api.js";
|
||||
import SelectDropdown from "./SelectDropdown.js";
|
||||
import { BACKGROUNDS, type Background } from "../data/backgrounds.js";
|
||||
import {
|
||||
rollAllStats,
|
||||
rollStartingHp,
|
||||
rollStartingGold,
|
||||
startingGearSlots,
|
||||
getStartingTitle,
|
||||
} from "../utils/character-creation.js";
|
||||
import { getModifier, formatModifier } from "../utils/modifiers.js";
|
||||
import styles from "./CharacterWizard.module.css";
|
||||
|
||||
const CLASSES = ["Fighter", "Priest", "Thief", "Wizard"];
|
||||
const ANCESTRIES = ["Human", "Elf", "Dwarf", "Halfling", "Goblin", "Half-Orc"];
|
||||
const ALIGNMENTS = ["Lawful", "Neutral", "Chaotic"];
|
||||
const STAT_NAMES = ["STR", "DEX", "CON", "INT", "WIS", "CHA"];
|
||||
|
||||
const STEP_LABELS = [
|
||||
"Step 1 of 4 — Name & Origins",
|
||||
"Step 2 of 4 — Ability Scores",
|
||||
"Step 3 of 4 — Background & Beliefs",
|
||||
"Step 4 of 4 — Review & Create",
|
||||
];
|
||||
|
||||
interface Props {
|
||||
campaignId: number;
|
||||
onSubmit: (data: CreateCharacterData) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function CharacterWizard({ onSubmit, onClose }: Props) {
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
// Step 1
|
||||
const [name, setName] = useState("");
|
||||
const [charClass, setCharClass] = useState("Fighter");
|
||||
const [ancestry, setAncestry] = useState("Human");
|
||||
|
||||
// Step 2
|
||||
const [stats, setStats] = useState<Record<string, number>>(rollAllStats);
|
||||
|
||||
// Step 3
|
||||
const [selectedBg, setSelectedBg] = useState<Background | null>(null);
|
||||
const [alignment, setAlignment] = useState("Neutral");
|
||||
const [deity, setDeity] = useState("");
|
||||
|
||||
// Step 4 — locked-in rolled values
|
||||
const [rolledHp, setRolledHp] = useState(0);
|
||||
const [rolledGp, setRolledGp] = useState(0);
|
||||
const [rolledGearSlots, setRolledGearSlots] = useState(10);
|
||||
|
||||
const title = getStartingTitle(charClass, alignment);
|
||||
|
||||
function handleRerollStats() {
|
||||
setStats(rollAllStats());
|
||||
}
|
||||
|
||||
function advanceToStep(nextStep: number) {
|
||||
if (nextStep === 3 && step === 2) {
|
||||
setRolledHp(rollStartingHp(charClass, stats.CON));
|
||||
setRolledGp(rollStartingGold());
|
||||
setRolledGearSlots(startingGearSlots(stats.STR));
|
||||
}
|
||||
setStep(nextStep);
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
await onSubmit({
|
||||
name: name.trim(),
|
||||
class: charClass,
|
||||
ancestry,
|
||||
alignment,
|
||||
background: selectedBg?.name ?? "",
|
||||
deity: charClass === "Priest" ? deity : "",
|
||||
title,
|
||||
hp_max: rolledHp,
|
||||
gp: rolledGp,
|
||||
stats,
|
||||
});
|
||||
}
|
||||
|
||||
const reviewRows: [string, string][] = [
|
||||
["Name", name],
|
||||
["Class", charClass],
|
||||
["Ancestry", ancestry],
|
||||
["Alignment", alignment],
|
||||
["Title", title || "—"],
|
||||
["Background", selectedBg?.name ?? "—"],
|
||||
["HP", String(rolledHp)],
|
||||
["Starting Gold", `${rolledGp} gp`],
|
||||
["Gear Slots", String(rolledGearSlots)],
|
||||
...(charClass === "Priest" && deity ? [["Deity", deity] as [string, string]] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.backdrop} onClick={onClose}>
|
||||
<div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={styles.title}>New Character</div>
|
||||
<div className={styles.stepLabel}>{STEP_LABELS[step]}</div>
|
||||
|
||||
<div className={styles.dots}>
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={[
|
||||
styles.dot,
|
||||
i === step ? styles.dotActive : "",
|
||||
i < step ? styles.dotDone : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Step 1 */}
|
||||
{step === 0 && (
|
||||
<>
|
||||
<div className={styles.field}>
|
||||
<label className={styles.fieldLabel}>Name</label>
|
||||
<input
|
||||
className={styles.input}
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
autoFocus
|
||||
placeholder="Tharyn the Bold…"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label className={styles.fieldLabel}>Class</label>
|
||||
<SelectDropdown value={charClass} options={CLASSES} onChange={setCharClass} />
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label className={styles.fieldLabel}>Ancestry</label>
|
||||
<SelectDropdown value={ancestry} options={ANCESTRIES} onChange={setAncestry} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 2 */}
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div className={styles.statGrid}>
|
||||
{STAT_NAMES.map((s) => (
|
||||
<div key={s} className={styles.statRow}>
|
||||
<span className={styles.statName}>{s}</span>
|
||||
<span className={styles.statValue}>{stats[s]}</span>
|
||||
<span className={styles.statMod}>{formatModifier(getModifier(stats[s]))}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className={styles.rerollBtn} onClick={handleRerollStats}>
|
||||
Reroll All
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 3 */}
|
||||
{step === 2 && (
|
||||
<>
|
||||
<div className={styles.field}>
|
||||
<label className={styles.fieldLabel}>Background</label>
|
||||
</div>
|
||||
<div className={styles.bgList}>
|
||||
{BACKGROUNDS.map((bg) => (
|
||||
<div
|
||||
key={bg.name}
|
||||
className={[
|
||||
styles.bgItem,
|
||||
selectedBg?.name === bg.name ? styles.bgItemSelected : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
onClick={() => setSelectedBg(bg)}
|
||||
>
|
||||
<div>{bg.name}</div>
|
||||
{selectedBg?.name === bg.name && (
|
||||
<div className={styles.bgSkill}>{bg.skill}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className={styles.randomBtn}
|
||||
onClick={() =>
|
||||
setSelectedBg(BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)])
|
||||
}
|
||||
>
|
||||
Random Background
|
||||
</button>
|
||||
<div className={styles.field}>
|
||||
<label className={styles.fieldLabel}>Alignment</label>
|
||||
<SelectDropdown value={alignment} options={ALIGNMENTS} onChange={setAlignment} />
|
||||
</div>
|
||||
{charClass === "Priest" && (
|
||||
<div className={styles.field}>
|
||||
<label className={styles.fieldLabel}>Deity</label>
|
||||
<input
|
||||
className={styles.input}
|
||||
type="text"
|
||||
value={deity}
|
||||
onChange={(e) => setDeity(e.target.value)}
|
||||
placeholder="Saint Terragnis…"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 4 — Review */}
|
||||
{step === 3 && (
|
||||
<>
|
||||
<div className={styles.reviewSectionTitle}>Character</div>
|
||||
<div className={styles.reviewGrid}>
|
||||
{reviewRows.map(([label, value]) => (
|
||||
<div key={label} className={styles.reviewRow}>
|
||||
<span className={styles.reviewLabel}>{label}</span>
|
||||
<span className={styles.reviewValue}>{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.reviewSectionTitle}>Ability Scores</div>
|
||||
<div className={styles.reviewStats}>
|
||||
{STAT_NAMES.map((s) => (
|
||||
<div key={s} className={styles.reviewStat}>
|
||||
<div className={styles.reviewStatName}>{s}</div>
|
||||
<div className={styles.reviewStatVal}>{stats[s]}</div>
|
||||
<div className={styles.reviewStatMod}>{formatModifier(getModifier(stats[s]))}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
className={styles.btnSecondary}
|
||||
onClick={step === 0 ? onClose : () => setStep(step - 1)}
|
||||
>
|
||||
{step === 0 ? "Cancel" : "Back"}
|
||||
</button>
|
||||
{step < 3 ? (
|
||||
<button
|
||||
className={styles.btnPrimary}
|
||||
disabled={step === 0 && !name.trim()}
|
||||
onClick={() => advanceToStep(step + 1)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
) : (
|
||||
<button className={styles.btnPrimary} onClick={handleCreate}>
|
||||
Create Character
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue