Compare commits
2 Commits
feature/co
...
fb6cbfe9fb
| Author | SHA1 | Date | |
|---|---|---|---|
|
fb6cbfe9fb | ||
|
|
d504008030 |
342
src/App.tsx
342
src/App.tsx
@@ -1,71 +1,323 @@
|
||||
import React from "react";
|
||||
|
||||
import { sampleContentPack } from "@/data/sampleContentPack";
|
||||
import { createStartingAdventurer } from "@/rules/character";
|
||||
import {
|
||||
createRunState,
|
||||
enterCurrentRoom,
|
||||
getAvailableMoves,
|
||||
resolveRunEnemyTurn,
|
||||
resolveRunPlayerTurn,
|
||||
startCombatInCurrentRoom,
|
||||
travelCurrentExit,
|
||||
} from "@/rules/runState";
|
||||
import type { RunState } from "@/types/state";
|
||||
|
||||
const planningDocs = [
|
||||
"Planning/PROJECT_PLAN.md",
|
||||
"Planning/GAME_SPEC.md",
|
||||
"Planning/content-checklist.json",
|
||||
"Planning/DATA_MODEL.md",
|
||||
"Planning/IMPLEMENTATION_NOTES.md",
|
||||
];
|
||||
function createDemoRun() {
|
||||
const adventurer = createStartingAdventurer(sampleContentPack, {
|
||||
name: "Aster",
|
||||
weaponId: "weapon.short-sword",
|
||||
armourId: "armour.leather-vest",
|
||||
scrollId: "scroll.lesser-heal",
|
||||
});
|
||||
|
||||
const nextTargets = [
|
||||
"Encode Level 1 foundational tables into structured JSON.",
|
||||
"Implement dice utilities for D3, D6, 2D6, and D66.",
|
||||
"Create character creation state and validation.",
|
||||
"Build deterministic room generation for the Level 1 loop.",
|
||||
];
|
||||
return createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.demo",
|
||||
adventurer,
|
||||
});
|
||||
}
|
||||
|
||||
function getRoomTitle(run: RunState, roomId?: string) {
|
||||
if (!roomId) {
|
||||
return "Unknown Room";
|
||||
}
|
||||
|
||||
const room = run.dungeon.levels[run.currentLevel]?.rooms[roomId];
|
||||
|
||||
if (!room) {
|
||||
return "Unknown Room";
|
||||
}
|
||||
|
||||
return (
|
||||
sampleContentPack.roomTemplates.find((template) => template.id === room.templateId)?.title ??
|
||||
room.notes[0] ??
|
||||
room.templateId ??
|
||||
room.id
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [run, setRun] = React.useState<RunState>(() => createDemoRun());
|
||||
const currentLevel = run.dungeon.levels[run.currentLevel];
|
||||
const currentRoom = run.currentRoomId ? currentLevel?.rooms[run.currentRoomId] : undefined;
|
||||
const availableMoves = getAvailableMoves(run);
|
||||
const combatReadyEncounter = Boolean(
|
||||
currentRoom?.encounter?.resolved &&
|
||||
currentRoom.encounter.creatureNames &&
|
||||
currentRoom.encounter.creatureNames.length > 0,
|
||||
);
|
||||
|
||||
const handleReset = () => {
|
||||
setRun(createDemoRun());
|
||||
};
|
||||
|
||||
const handleEnterRoom = () => {
|
||||
setRun((previous) => enterCurrentRoom({ content: sampleContentPack, run: previous }).run);
|
||||
};
|
||||
|
||||
const handleStartCombat = () => {
|
||||
setRun((previous) =>
|
||||
startCombatInCurrentRoom({ content: sampleContentPack, run: previous }).run,
|
||||
);
|
||||
};
|
||||
|
||||
const handleTravel = (direction: "north" | "east" | "south" | "west") => {
|
||||
setRun((previous) =>
|
||||
travelCurrentExit({
|
||||
content: sampleContentPack,
|
||||
run: previous,
|
||||
exitDirection: direction,
|
||||
}).run,
|
||||
);
|
||||
};
|
||||
|
||||
const handlePlayerTurn = (manoeuvreId: string, targetEnemyId: string) => {
|
||||
setRun((previous) =>
|
||||
resolveRunPlayerTurn({
|
||||
content: sampleContentPack,
|
||||
run: previous,
|
||||
manoeuvreId,
|
||||
targetEnemyId,
|
||||
}).run,
|
||||
);
|
||||
};
|
||||
|
||||
const handleEnemyTurn = () => {
|
||||
setRun((previous) =>
|
||||
resolveRunEnemyTurn({ content: sampleContentPack, run: previous }).run,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="app-shell">
|
||||
<section className="hero">
|
||||
<div>
|
||||
<p className="eyebrow">2D6 Dungeon Web</p>
|
||||
<h1>Project scaffold is live.</h1>
|
||||
<h1>Playable Rules Shell</h1>
|
||||
<p className="lede">
|
||||
The app now has a Vite + React + TypeScript foundation, shared type
|
||||
models, and Zod schemas that mirror the planning documents.
|
||||
The core loop now runs inside the app: move through generated rooms,
|
||||
resolve room state on entry, and fight when a room produces a real
|
||||
encounter.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="hero-actions">
|
||||
<button className="button button-primary" onClick={handleReset}>
|
||||
Reset Demo Run
|
||||
</button>
|
||||
<div className="status-chip">
|
||||
<span>Run Status</span>
|
||||
<strong>{run.status}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="panel-grid">
|
||||
<article className="panel">
|
||||
<h2>Planning Set</h2>
|
||||
<ul>
|
||||
{planningDocs.map((doc) => (
|
||||
<li key={doc}>{doc}</li>
|
||||
))}
|
||||
</ul>
|
||||
<section className="dashboard-grid">
|
||||
<article className="panel panel-highlight">
|
||||
<div className="panel-header">
|
||||
<h2>Adventurer</h2>
|
||||
<span>Level {run.adventurerSnapshot.level}</span>
|
||||
</div>
|
||||
<div className="stat-strip">
|
||||
<div>
|
||||
<span>HP</span>
|
||||
<strong>
|
||||
{run.adventurerSnapshot.hp.current}/{run.adventurerSnapshot.hp.max}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Shift</span>
|
||||
<strong>{run.adventurerSnapshot.stats.shift}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Discipline</span>
|
||||
<strong>{run.adventurerSnapshot.stats.discipline}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Precision</span>
|
||||
<strong>{run.adventurerSnapshot.stats.precision}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p className="supporting-text">
|
||||
{run.adventurerSnapshot.name} is equipped with a{" "}
|
||||
{sampleContentPack.weapons.find(
|
||||
(weapon) => weapon.id === run.adventurerSnapshot.weaponId,
|
||||
)?.name ?? "weapon"}
|
||||
.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="panel">
|
||||
<h2>Immediate Build Targets</h2>
|
||||
<ol>
|
||||
{nextTargets.map((target) => (
|
||||
<li key={target}>{target}</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="panel-header">
|
||||
<h2>Current Room</h2>
|
||||
<span>Level {run.currentLevel}</span>
|
||||
</div>
|
||||
<h3 className="room-title">
|
||||
{getRoomTitle(run, run.currentRoomId)}
|
||||
</h3>
|
||||
<p className="supporting-text">
|
||||
{currentRoom?.notes[1] ?? "No encounter notes available yet."}
|
||||
</p>
|
||||
<div className="room-meta">
|
||||
<span>Entered: {currentRoom?.discovery.entered ? "Yes" : "No"}</span>
|
||||
<span>Cleared: {currentRoom?.discovery.cleared ? "Yes" : "No"}</span>
|
||||
<span>Exits: {currentRoom?.exits.length ?? 0}</span>
|
||||
</div>
|
||||
<div className="button-row">
|
||||
<button className="button" onClick={handleEnterRoom}>
|
||||
Enter Room
|
||||
</button>
|
||||
<button
|
||||
className="button button-primary"
|
||||
onClick={handleStartCombat}
|
||||
disabled={!combatReadyEncounter || Boolean(run.activeCombat)}
|
||||
>
|
||||
Start Combat
|
||||
</button>
|
||||
</div>
|
||||
<div className="encounter-box">
|
||||
<span className="encounter-label">Encounter</span>
|
||||
<strong>{currentRoom?.encounter?.resultLabel ?? "None"}</strong>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="panel">
|
||||
<h2>Sample Content Pack</h2>
|
||||
<dl className="stats">
|
||||
<div>
|
||||
<dt>Tables</dt>
|
||||
<dd>{sampleContentPack.tables.length}</dd>
|
||||
<div className="panel-header">
|
||||
<h2>Navigation</h2>
|
||||
<span>{availableMoves.length} exits</span>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Weapons</dt>
|
||||
<dd>{sampleContentPack.weapons.length}</dd>
|
||||
<div className="move-list">
|
||||
{availableMoves.map((move) => (
|
||||
<button
|
||||
key={move.direction}
|
||||
className="move-card"
|
||||
onClick={() => handleTravel(move.direction)}
|
||||
disabled={Boolean(run.activeCombat)}
|
||||
>
|
||||
<span>{move.direction}</span>
|
||||
<strong>{move.leadsToRoomId ? "Travel" : "Generate"}</strong>
|
||||
<em>
|
||||
{move.leadsToRoomId
|
||||
? getRoomTitle(run, move.leadsToRoomId)
|
||||
: `${move.exitType} exit`}
|
||||
</em>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<dt>Manoeuvres</dt>
|
||||
<dd>{sampleContentPack.manoeuvres.length}</dd>
|
||||
<div className="mini-map">
|
||||
{currentLevel?.discoveredRoomOrder.map((roomId) => {
|
||||
const room = currentLevel.rooms[roomId];
|
||||
const active = roomId === run.currentRoomId;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={roomId}
|
||||
className={`map-node${active ? " map-node-active" : ""}`}
|
||||
>
|
||||
<span>{room.position.x},{room.position.y}</span>
|
||||
<strong>{getRoomTitle(run, roomId)}</strong>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<dt>Creatures</dt>
|
||||
<dd>{sampleContentPack.creatures.length}</dd>
|
||||
</article>
|
||||
|
||||
<article className="panel">
|
||||
<div className="panel-header">
|
||||
<h2>Combat</h2>
|
||||
<span>{run.activeCombat ? `Round ${run.activeCombat.round}` : "Inactive"}</span>
|
||||
</div>
|
||||
{run.activeCombat ? (
|
||||
<>
|
||||
<div className="combat-status">
|
||||
<span>Acting Side</span>
|
||||
<strong>{run.activeCombat.actingSide}</strong>
|
||||
</div>
|
||||
<div className="enemy-list">
|
||||
{run.activeCombat.enemies.map((enemy) => (
|
||||
<div key={enemy.id} className="enemy-card">
|
||||
<div>
|
||||
<strong>{enemy.name}</strong>
|
||||
<span>
|
||||
HP {enemy.hpCurrent}/{enemy.hpMax}
|
||||
</span>
|
||||
</div>
|
||||
<div className="enemy-actions">
|
||||
<button
|
||||
className="button"
|
||||
onClick={() =>
|
||||
handlePlayerTurn("manoeuvre.exact-strike", enemy.id)
|
||||
}
|
||||
disabled={
|
||||
run.activeCombat?.actingSide !== "player" ||
|
||||
enemy.hpCurrent <= 0
|
||||
}
|
||||
>
|
||||
Exact Strike
|
||||
</button>
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => handlePlayerTurn("manoeuvre.guard-break", enemy.id)}
|
||||
disabled={
|
||||
run.activeCombat?.actingSide !== "player" ||
|
||||
enemy.hpCurrent <= 0
|
||||
}
|
||||
>
|
||||
Guard Break
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="button-row">
|
||||
<button
|
||||
className="button button-primary"
|
||||
onClick={handleEnemyTurn}
|
||||
disabled={run.activeCombat.actingSide !== "enemy"}
|
||||
>
|
||||
Resolve Enemy Turn
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="supporting-text">
|
||||
No active combat. Travel through the dungeon until a room generates
|
||||
a creature encounter, then start combat from that room.
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="panel panel-log">
|
||||
<div className="panel-header">
|
||||
<h2>Run Log</h2>
|
||||
<span>{run.log.length} entries</span>
|
||||
</div>
|
||||
<div className="log-list">
|
||||
{run.log.length === 0 ? (
|
||||
<p className="supporting-text">No events recorded yet.</p>
|
||||
) : (
|
||||
run.log
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((entry) => (
|
||||
<article key={entry.id} className="log-entry">
|
||||
<span>{entry.type}</span>
|
||||
<p>{entry.text}</p>
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
230
src/rules/runState.test.ts
Normal file
230
src/rules/runState.test.ts
Normal file
@@ -0,0 +1,230 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { sampleContentPack } from "@/data/sampleContentPack";
|
||||
|
||||
import { createStartingAdventurer } from "./character";
|
||||
import {
|
||||
createRunState,
|
||||
enterCurrentRoom,
|
||||
getAvailableMoves,
|
||||
resolveRunEnemyTurn,
|
||||
resolveRunPlayerTurn,
|
||||
startCombatInCurrentRoom,
|
||||
travelCurrentExit,
|
||||
} from "./runState";
|
||||
|
||||
function createSequenceRoller(values: number[]) {
|
||||
let index = 0;
|
||||
|
||||
return () => {
|
||||
const next = values[index];
|
||||
index += 1;
|
||||
return next;
|
||||
};
|
||||
}
|
||||
|
||||
function createAdventurer() {
|
||||
return createStartingAdventurer(sampleContentPack, {
|
||||
name: "Aster",
|
||||
weaponId: "weapon.short-sword",
|
||||
armourId: "armour.leather-vest",
|
||||
scrollId: "scroll.lesser-heal",
|
||||
});
|
||||
}
|
||||
|
||||
describe("run state flow", () => {
|
||||
it("creates a run anchored in the start room", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
at: "2026-03-15T14:00:00.000Z",
|
||||
});
|
||||
|
||||
expect(run.currentLevel).toBe(1);
|
||||
expect(run.currentRoomId).toBe("room.level1.start");
|
||||
expect(run.dungeon.levels["1"]?.rooms["room.level1.start"]).toBeDefined();
|
||||
});
|
||||
|
||||
it("enters the current room and appends room logs", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
at: "2026-03-15T14:00:00.000Z",
|
||||
});
|
||||
|
||||
const result = enterCurrentRoom({
|
||||
content: sampleContentPack,
|
||||
run,
|
||||
at: "2026-03-15T14:01:00.000Z",
|
||||
});
|
||||
|
||||
expect(result.run.log).toHaveLength(1);
|
||||
expect(result.run.log[0]?.text).toContain("Re-entered Entry Chamber");
|
||||
});
|
||||
|
||||
it("starts combat from the current room and stores the active combat state", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
at: "2026-03-15T14:00:00.000Z",
|
||||
});
|
||||
const levelState = run.dungeon.levels["1"]!;
|
||||
const room = levelState.rooms["room.level1.start"]!;
|
||||
|
||||
room.encounter = {
|
||||
id: `${room.id}.encounter`,
|
||||
sourceTableCode: "L1G",
|
||||
creatureIds: ["a", "b"],
|
||||
creatureNames: ["Guard", "Warrior"],
|
||||
resultLabel: "Guard and Warrior",
|
||||
resolved: true,
|
||||
};
|
||||
|
||||
const result = startCombatInCurrentRoom({
|
||||
content: sampleContentPack,
|
||||
run,
|
||||
at: "2026-03-15T14:02:00.000Z",
|
||||
});
|
||||
|
||||
expect(result.run.activeCombat?.enemies).toHaveLength(2);
|
||||
expect(result.run.log.at(-1)?.text).toContain("Combat begins");
|
||||
});
|
||||
|
||||
it("resolves player and enemy turns through run state", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
at: "2026-03-15T14:00:00.000Z",
|
||||
});
|
||||
const levelState = run.dungeon.levels["1"]!;
|
||||
const room = levelState.rooms["room.level1.start"]!;
|
||||
|
||||
room.encounter = {
|
||||
id: `${room.id}.encounter`,
|
||||
sourceTableCode: "L1G",
|
||||
creatureIds: ["a", "b"],
|
||||
creatureNames: ["Guard", "Warrior"],
|
||||
resultLabel: "Guard and Warrior",
|
||||
resolved: true,
|
||||
};
|
||||
|
||||
const withCombat = startCombatInCurrentRoom({
|
||||
content: sampleContentPack,
|
||||
run,
|
||||
at: "2026-03-15T14:02:00.000Z",
|
||||
}).run;
|
||||
const targetEnemyId = withCombat.activeCombat!.enemies[0]!.id;
|
||||
|
||||
const afterPlayer = resolveRunPlayerTurn({
|
||||
content: sampleContentPack,
|
||||
run: withCombat,
|
||||
manoeuvreId: "manoeuvre.exact-strike",
|
||||
targetEnemyId,
|
||||
roller: createSequenceRoller([6, 6]),
|
||||
at: "2026-03-15T14:03:00.000Z",
|
||||
}).run;
|
||||
|
||||
expect(afterPlayer.activeCombat?.actingSide).toBe("enemy");
|
||||
expect(afterPlayer.log.at(-1)?.text).toContain("deals");
|
||||
|
||||
const afterEnemy = resolveRunEnemyTurn({
|
||||
content: sampleContentPack,
|
||||
run: afterPlayer,
|
||||
roller: createSequenceRoller([6, 6]),
|
||||
at: "2026-03-15T14:04:00.000Z",
|
||||
}).run;
|
||||
|
||||
expect(afterEnemy.activeCombat?.actingSide).toBe("player");
|
||||
expect(afterEnemy.adventurerSnapshot.hp.current).toBeLessThan(
|
||||
createAdventurer().hp.current,
|
||||
);
|
||||
});
|
||||
|
||||
it("clears the room and ends active combat when the last enemy falls", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
at: "2026-03-15T14:00:00.000Z",
|
||||
});
|
||||
const room = run.dungeon.levels["1"]!.rooms["room.level1.start"]!;
|
||||
|
||||
room.encounter = {
|
||||
id: `${room.id}.encounter`,
|
||||
sourceTableCode: "L1G",
|
||||
creatureIds: ["a"],
|
||||
creatureNames: ["Guard"],
|
||||
resultLabel: "Guard",
|
||||
resolved: true,
|
||||
};
|
||||
|
||||
const withCombat = startCombatInCurrentRoom({
|
||||
content: sampleContentPack,
|
||||
run,
|
||||
at: "2026-03-15T14:02:00.000Z",
|
||||
}).run;
|
||||
|
||||
withCombat.activeCombat!.enemies[0]!.hpCurrent = 1;
|
||||
|
||||
const result = resolveRunPlayerTurn({
|
||||
content: sampleContentPack,
|
||||
run: withCombat,
|
||||
manoeuvreId: "manoeuvre.guard-break",
|
||||
targetEnemyId: withCombat.activeCombat!.enemies[0]!.id,
|
||||
roller: createSequenceRoller([6, 6]),
|
||||
at: "2026-03-15T14:03:00.000Z",
|
||||
});
|
||||
|
||||
expect(result.run.activeCombat).toBeUndefined();
|
||||
expect(result.run.dungeon.levels["1"]!.rooms["room.level1.start"]!.discovery.cleared).toBe(true);
|
||||
expect(result.run.dungeon.levels["1"]!.rooms["room.level1.start"]!.encounter?.rewardPending).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it("lists available traversable exits for the current room", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
});
|
||||
|
||||
expect(getAvailableMoves(run)).toEqual([
|
||||
expect.objectContaining({
|
||||
direction: "north",
|
||||
generated: false,
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
||||
it("travels through an unresolved exit, generates a room, and enters it", () => {
|
||||
const run = createRunState({
|
||||
content: sampleContentPack,
|
||||
campaignId: "campaign.1",
|
||||
adventurer: createAdventurer(),
|
||||
at: "2026-03-15T14:00:00.000Z",
|
||||
});
|
||||
|
||||
const result = travelCurrentExit({
|
||||
content: sampleContentPack,
|
||||
run,
|
||||
exitDirection: "north",
|
||||
roller: createSequenceRoller([1, 1]),
|
||||
at: "2026-03-15T14:05:00.000Z",
|
||||
});
|
||||
|
||||
expect(result.run.currentRoomId).toBe("room.level1.room.002");
|
||||
expect(result.run.dungeon.levels["1"]!.discoveredRoomOrder).toEqual([
|
||||
"room.level1.start",
|
||||
"room.level1.room.002",
|
||||
]);
|
||||
expect(result.run.dungeon.levels["1"]!.rooms["room.level1.room.002"]!.discovery.entered).toBe(
|
||||
true,
|
||||
);
|
||||
expect(result.run.log[0]?.text).toContain("Travelled north");
|
||||
});
|
||||
});
|
||||
477
src/rules/runState.ts
Normal file
477
src/rules/runState.ts
Normal file
@@ -0,0 +1,477 @@
|
||||
import type { ContentPack } from "@/types/content";
|
||||
import type {
|
||||
AdventurerState,
|
||||
CombatState,
|
||||
DungeonState,
|
||||
RunState,
|
||||
} from "@/types/state";
|
||||
import type { LogEntry } from "@/types/rules";
|
||||
|
||||
import { startCombatFromRoom } from "./combat";
|
||||
import {
|
||||
resolveEnemyTurn,
|
||||
resolvePlayerAttack,
|
||||
type ResolveEnemyTurnOptions,
|
||||
type ResolvePlayerAttackOptions,
|
||||
} from "./combatTurns";
|
||||
import {
|
||||
expandLevelFromExit,
|
||||
getUnresolvedExits,
|
||||
initializeDungeonLevel,
|
||||
} from "./dungeon";
|
||||
import type { DiceRoller } from "./dice";
|
||||
import { enterRoom } from "./roomEntry";
|
||||
|
||||
export type CreateRunOptions = {
|
||||
content: ContentPack;
|
||||
campaignId: string;
|
||||
adventurer: AdventurerState;
|
||||
runId?: string;
|
||||
at?: string;
|
||||
};
|
||||
|
||||
export type EnterCurrentRoomOptions = {
|
||||
content: ContentPack;
|
||||
run: RunState;
|
||||
roller?: DiceRoller;
|
||||
at?: string;
|
||||
};
|
||||
|
||||
export type StartCurrentCombatOptions = {
|
||||
content: ContentPack;
|
||||
run: RunState;
|
||||
at?: string;
|
||||
};
|
||||
|
||||
export type ResolveRunPlayerTurnOptions = {
|
||||
content: ContentPack;
|
||||
run: RunState;
|
||||
manoeuvreId: string;
|
||||
targetEnemyId: string;
|
||||
roller?: DiceRoller;
|
||||
at?: string;
|
||||
};
|
||||
|
||||
export type ResolveRunEnemyTurnOptions = {
|
||||
content: ContentPack;
|
||||
run: RunState;
|
||||
roller?: DiceRoller;
|
||||
at?: string;
|
||||
};
|
||||
|
||||
export type TravelCurrentExitOptions = {
|
||||
content: ContentPack;
|
||||
run: RunState;
|
||||
exitDirection: "north" | "east" | "south" | "west";
|
||||
roomTableCode?: string;
|
||||
roller?: DiceRoller;
|
||||
at?: string;
|
||||
};
|
||||
|
||||
export type AvailableMove = {
|
||||
direction: "north" | "east" | "south" | "west";
|
||||
exitType: string;
|
||||
discovered: boolean;
|
||||
leadsToRoomId?: string;
|
||||
generated: boolean;
|
||||
};
|
||||
|
||||
export type RunTransitionResult = {
|
||||
run: RunState;
|
||||
logEntries: LogEntry[];
|
||||
};
|
||||
|
||||
function cloneCombat(combat: CombatState): CombatState {
|
||||
return {
|
||||
...combat,
|
||||
player: {
|
||||
...combat.player,
|
||||
statuses: [...combat.player.statuses],
|
||||
traits: [...combat.player.traits],
|
||||
},
|
||||
enemies: combat.enemies.map((enemy) => ({
|
||||
...enemy,
|
||||
statuses: [...enemy.statuses],
|
||||
traits: [...enemy.traits],
|
||||
})),
|
||||
combatLog: combat.combatLog.map((entry) => ({
|
||||
...entry,
|
||||
relatedIds: entry.relatedIds ? [...entry.relatedIds] : undefined,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
function cloneRun(run: RunState): RunState {
|
||||
return {
|
||||
...run,
|
||||
adventurerSnapshot: {
|
||||
...run.adventurerSnapshot,
|
||||
hp: { ...run.adventurerSnapshot.hp },
|
||||
stats: { ...run.adventurerSnapshot.stats },
|
||||
favour: { ...run.adventurerSnapshot.favour },
|
||||
statuses: run.adventurerSnapshot.statuses.map((status) => ({ ...status })),
|
||||
inventory: {
|
||||
...run.adventurerSnapshot.inventory,
|
||||
carried: run.adventurerSnapshot.inventory.carried.map((entry) => ({ ...entry })),
|
||||
equipped: run.adventurerSnapshot.inventory.equipped.map((entry) => ({ ...entry })),
|
||||
stored: run.adventurerSnapshot.inventory.stored.map((entry) => ({ ...entry })),
|
||||
currency: { ...run.adventurerSnapshot.inventory.currency },
|
||||
lightSources: run.adventurerSnapshot.inventory.lightSources.map((entry) => ({ ...entry })),
|
||||
},
|
||||
progressionFlags: [...run.adventurerSnapshot.progressionFlags],
|
||||
manoeuvreIds: [...run.adventurerSnapshot.manoeuvreIds],
|
||||
},
|
||||
dungeon: {
|
||||
levels: Object.fromEntries(
|
||||
Object.entries(run.dungeon.levels).map(([level, levelState]) => [
|
||||
level,
|
||||
{
|
||||
...levelState,
|
||||
rooms: Object.fromEntries(
|
||||
Object.entries(levelState.rooms).map(([roomId, room]) => [
|
||||
roomId,
|
||||
{
|
||||
...room,
|
||||
position: { ...room.position },
|
||||
dimensions: { ...room.dimensions },
|
||||
exits: room.exits.map((exit) => ({ ...exit })),
|
||||
discovery: { ...room.discovery },
|
||||
encounter: room.encounter
|
||||
? {
|
||||
...room.encounter,
|
||||
creatureIds: [...room.encounter.creatureIds],
|
||||
creatureNames: room.encounter.creatureNames
|
||||
? [...room.encounter.creatureNames]
|
||||
: undefined,
|
||||
}
|
||||
: undefined,
|
||||
objects: room.objects.map((object) => ({
|
||||
...object,
|
||||
effects: object.effects ? [...object.effects] : undefined,
|
||||
})),
|
||||
notes: [...room.notes],
|
||||
flags: [...room.flags],
|
||||
},
|
||||
]),
|
||||
),
|
||||
discoveredRoomOrder: [...levelState.discoveredRoomOrder],
|
||||
},
|
||||
]),
|
||||
) as DungeonState["levels"],
|
||||
revealedPercentByLevel: { ...run.dungeon.revealedPercentByLevel },
|
||||
globalFlags: [...run.dungeon.globalFlags],
|
||||
},
|
||||
activeCombat: run.activeCombat ? cloneCombat(run.activeCombat) : undefined,
|
||||
log: run.log.map((entry) => ({
|
||||
...entry,
|
||||
relatedIds: entry.relatedIds ? [...entry.relatedIds] : undefined,
|
||||
})),
|
||||
pendingEffects: run.pendingEffects.map((effect) => ({ ...effect })),
|
||||
};
|
||||
}
|
||||
|
||||
function requireCurrentLevel(run: RunState) {
|
||||
const levelState = run.dungeon.levels[run.currentLevel];
|
||||
|
||||
if (!levelState) {
|
||||
throw new Error(`Run is missing level ${run.currentLevel}.`);
|
||||
}
|
||||
|
||||
return levelState;
|
||||
}
|
||||
|
||||
function requireCurrentRoomId(run: RunState) {
|
||||
if (!run.currentRoomId) {
|
||||
throw new Error("Run does not have a current room.");
|
||||
}
|
||||
|
||||
return run.currentRoomId;
|
||||
}
|
||||
|
||||
function requireCurrentRoom(run: RunState) {
|
||||
const levelState = requireCurrentLevel(run);
|
||||
const roomId = requireCurrentRoomId(run);
|
||||
const room = levelState.rooms[roomId];
|
||||
|
||||
if (!room) {
|
||||
throw new Error(`Unknown room id: ${roomId}`);
|
||||
}
|
||||
|
||||
return room;
|
||||
}
|
||||
|
||||
function inferNextRoomTableCode(run: RunState) {
|
||||
const room = requireCurrentRoom(run);
|
||||
const levelState = requireCurrentLevel(run);
|
||||
|
||||
if (room.roomClass === "start") {
|
||||
return "L1LR";
|
||||
}
|
||||
|
||||
if (room.roomClass === "small") {
|
||||
return "L1LR";
|
||||
}
|
||||
|
||||
if (room.roomClass === "large") {
|
||||
return "L1SR";
|
||||
}
|
||||
|
||||
return levelState.discoveredRoomOrder.length % 2 === 0 ? "L1LR" : "L1SR";
|
||||
}
|
||||
|
||||
function syncPlayerToAdventurer(run: RunState) {
|
||||
if (!run.activeCombat) {
|
||||
return;
|
||||
}
|
||||
|
||||
run.adventurerSnapshot.hp.current = run.activeCombat.player.hpCurrent;
|
||||
run.adventurerSnapshot.statuses = run.activeCombat.player.statuses.map((status) => ({ ...status }));
|
||||
}
|
||||
|
||||
function appendLogs(run: RunState, logEntries: LogEntry[]) {
|
||||
run.log.push(...logEntries);
|
||||
}
|
||||
|
||||
export function createRunState(options: CreateRunOptions): RunState {
|
||||
const at = options.at ?? new Date().toISOString();
|
||||
const levelState = initializeDungeonLevel({
|
||||
content: options.content,
|
||||
level: 1,
|
||||
});
|
||||
|
||||
return {
|
||||
id: options.runId ?? "run.active",
|
||||
campaignId: options.campaignId,
|
||||
status: "active",
|
||||
startedAt: at,
|
||||
currentLevel: 1,
|
||||
currentRoomId: "room.level1.start",
|
||||
dungeon: {
|
||||
levels: {
|
||||
1: levelState,
|
||||
},
|
||||
revealedPercentByLevel: {
|
||||
1: 0,
|
||||
},
|
||||
globalFlags: [],
|
||||
},
|
||||
adventurerSnapshot: options.adventurer,
|
||||
log: [],
|
||||
pendingEffects: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function enterCurrentRoom(
|
||||
options: EnterCurrentRoomOptions,
|
||||
): RunTransitionResult {
|
||||
const run = cloneRun(options.run);
|
||||
const levelState = requireCurrentLevel(run);
|
||||
const roomId = requireCurrentRoomId(run);
|
||||
const entry = enterRoom({
|
||||
content: options.content,
|
||||
levelState,
|
||||
roomId,
|
||||
roller: options.roller,
|
||||
at: options.at,
|
||||
});
|
||||
|
||||
run.dungeon.levels[run.currentLevel] = entry.levelState;
|
||||
appendLogs(run, entry.logEntries);
|
||||
|
||||
return {
|
||||
run,
|
||||
logEntries: entry.logEntries,
|
||||
};
|
||||
}
|
||||
|
||||
export function getAvailableMoves(run: RunState): AvailableMove[] {
|
||||
const room = requireCurrentRoom(run);
|
||||
|
||||
return room.exits
|
||||
.filter((exit) => exit.traversable)
|
||||
.map((exit) => ({
|
||||
direction: exit.direction,
|
||||
exitType: exit.exitType,
|
||||
discovered: exit.discovered,
|
||||
leadsToRoomId: exit.leadsToRoomId,
|
||||
generated: Boolean(exit.leadsToRoomId),
|
||||
}));
|
||||
}
|
||||
|
||||
export function travelCurrentExit(
|
||||
options: TravelCurrentExitOptions,
|
||||
): RunTransitionResult {
|
||||
const run = cloneRun(options.run);
|
||||
|
||||
if (run.activeCombat) {
|
||||
throw new Error("Cannot travel while combat is active.");
|
||||
}
|
||||
|
||||
const levelState = requireCurrentLevel(run);
|
||||
const roomId = requireCurrentRoomId(run);
|
||||
const room = requireCurrentRoom(run);
|
||||
const exit = room.exits.find((candidate) => candidate.direction === options.exitDirection);
|
||||
|
||||
if (!exit) {
|
||||
throw new Error(`Current room does not have an exit to the ${options.exitDirection}.`);
|
||||
}
|
||||
|
||||
if (!exit.traversable) {
|
||||
throw new Error(`Exit ${exit.id} is not traversable.`);
|
||||
}
|
||||
|
||||
let nextLevelState = levelState;
|
||||
let destinationRoomId = exit.leadsToRoomId;
|
||||
const at = options.at ?? new Date().toISOString();
|
||||
|
||||
if (!destinationRoomId) {
|
||||
const unresolvedExits = getUnresolvedExits(levelState);
|
||||
const matchingExit = unresolvedExits.find(
|
||||
(candidate) =>
|
||||
candidate.roomId === roomId && candidate.direction === options.exitDirection,
|
||||
);
|
||||
|
||||
if (!matchingExit) {
|
||||
throw new Error(`Exit ${exit.id} is no longer available for generation.`);
|
||||
}
|
||||
|
||||
const expansion = expandLevelFromExit({
|
||||
content: options.content,
|
||||
levelState,
|
||||
fromRoomId: roomId,
|
||||
exitDirection: options.exitDirection,
|
||||
roomTableCode: options.roomTableCode ?? inferNextRoomTableCode(run),
|
||||
roller: options.roller,
|
||||
});
|
||||
|
||||
nextLevelState = expansion.levelState;
|
||||
destinationRoomId = expansion.createdRoom.id;
|
||||
}
|
||||
|
||||
run.dungeon.levels[run.currentLevel] = nextLevelState;
|
||||
run.currentRoomId = destinationRoomId;
|
||||
|
||||
const movedLog: LogEntry = {
|
||||
id: `${roomId}.travel.${options.exitDirection}.${run.log.length + 1}`,
|
||||
at,
|
||||
type: "room",
|
||||
text: `Travelled ${options.exitDirection} from ${room.id} to ${destinationRoomId}.`,
|
||||
relatedIds: [room.id, destinationRoomId],
|
||||
};
|
||||
|
||||
appendLogs(run, [movedLog]);
|
||||
|
||||
const entered = enterCurrentRoom({
|
||||
content: options.content,
|
||||
run,
|
||||
roller: options.roller,
|
||||
at,
|
||||
});
|
||||
|
||||
return {
|
||||
run: entered.run,
|
||||
logEntries: [movedLog, ...entered.logEntries],
|
||||
};
|
||||
}
|
||||
|
||||
export function startCombatInCurrentRoom(
|
||||
options: StartCurrentCombatOptions,
|
||||
): RunTransitionResult {
|
||||
const run = cloneRun(options.run);
|
||||
const levelState = requireCurrentLevel(run);
|
||||
const roomId = requireCurrentRoomId(run);
|
||||
const room = levelState.rooms[roomId];
|
||||
|
||||
if (!room) {
|
||||
throw new Error(`Unknown room id: ${roomId}`);
|
||||
}
|
||||
|
||||
const started = startCombatFromRoom({
|
||||
content: options.content,
|
||||
adventurer: run.adventurerSnapshot,
|
||||
room,
|
||||
at: options.at,
|
||||
});
|
||||
|
||||
levelState.rooms[roomId] = started.room;
|
||||
run.activeCombat = started.combat;
|
||||
appendLogs(run, started.logEntries);
|
||||
|
||||
return {
|
||||
run,
|
||||
logEntries: started.logEntries,
|
||||
};
|
||||
}
|
||||
|
||||
export function resolveRunPlayerTurn(
|
||||
options: ResolveRunPlayerTurnOptions,
|
||||
): RunTransitionResult {
|
||||
const run = cloneRun(options.run);
|
||||
|
||||
if (!run.activeCombat) {
|
||||
throw new Error("Run does not have an active combat.");
|
||||
}
|
||||
|
||||
const result = resolvePlayerAttack({
|
||||
content: options.content,
|
||||
combat: run.activeCombat,
|
||||
adventurer: run.adventurerSnapshot,
|
||||
manoeuvreId: options.manoeuvreId,
|
||||
targetEnemyId: options.targetEnemyId,
|
||||
roller: options.roller,
|
||||
at: options.at,
|
||||
} satisfies ResolvePlayerAttackOptions);
|
||||
|
||||
run.activeCombat = result.combat;
|
||||
syncPlayerToAdventurer(run);
|
||||
appendLogs(run, result.logEntries);
|
||||
|
||||
if (result.combatEnded) {
|
||||
const levelState = requireCurrentLevel(run);
|
||||
const roomId = requireCurrentRoomId(run);
|
||||
const room = levelState.rooms[roomId];
|
||||
|
||||
if (room?.encounter) {
|
||||
room.encounter.rewardPending = false;
|
||||
room.discovery.cleared = true;
|
||||
}
|
||||
|
||||
run.activeCombat = undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
run,
|
||||
logEntries: result.logEntries,
|
||||
};
|
||||
}
|
||||
|
||||
export function resolveRunEnemyTurn(
|
||||
options: ResolveRunEnemyTurnOptions,
|
||||
): RunTransitionResult {
|
||||
const run = cloneRun(options.run);
|
||||
|
||||
if (!run.activeCombat) {
|
||||
throw new Error("Run does not have an active combat.");
|
||||
}
|
||||
|
||||
const result = resolveEnemyTurn({
|
||||
content: options.content,
|
||||
combat: run.activeCombat,
|
||||
adventurer: run.adventurerSnapshot,
|
||||
roller: options.roller,
|
||||
at: options.at,
|
||||
} satisfies ResolveEnemyTurnOptions);
|
||||
|
||||
run.activeCombat = result.combat;
|
||||
syncPlayerToAdventurer(run);
|
||||
appendLogs(run, result.logEntries);
|
||||
|
||||
if (result.combatEnded) {
|
||||
run.status = "failed";
|
||||
}
|
||||
|
||||
return {
|
||||
run,
|
||||
logEntries: result.logEntries,
|
||||
};
|
||||
}
|
||||
377
src/styles.css
377
src/styles.css
@@ -1,9 +1,10 @@
|
||||
:root {
|
||||
font-family: "Segoe UI", "Aptos", sans-serif;
|
||||
color: #f3f1e8;
|
||||
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
|
||||
color: #f4efe3;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(179, 121, 59, 0.35), transparent 30%),
|
||||
linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
||||
radial-gradient(circle at top, rgba(177, 91, 29, 0.25), transparent 26%),
|
||||
radial-gradient(circle at 20% 20%, rgba(227, 188, 101, 0.12), transparent 18%),
|
||||
linear-gradient(180deg, #160f0b 0%, #0b0807 100%);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color-scheme: dark;
|
||||
@@ -23,108 +24,356 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
width: min(1100px, calc(100% - 2rem));
|
||||
width: min(1200px, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
padding: 3rem 0 4rem;
|
||||
padding: 1.5rem 0 3rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 2rem;
|
||||
border: 1px solid rgba(243, 241, 232, 0.16);
|
||||
background: rgba(21, 18, 14, 0.72);
|
||||
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
align-items: end;
|
||||
padding: 1.75rem;
|
||||
border: 1px solid rgba(255, 231, 196, 0.12);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(62, 34, 17, 0.92), rgba(24, 18, 15, 0.86)),
|
||||
rgba(18, 14, 12, 0.9);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.75rem;
|
||||
margin: 0 0 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
color: #d8b27a;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: #f1ba73;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2.5rem, 7vw, 4.5rem);
|
||||
line-height: 0.95;
|
||||
font-size: clamp(2.6rem, 6vw, 4.8rem);
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
.lede {
|
||||
width: min(55ch, 100%);
|
||||
margin: 1.25rem 0 0;
|
||||
color: rgba(243, 241, 232, 0.82);
|
||||
font-size: 1.05rem;
|
||||
width: min(56ch, 100%);
|
||||
margin: 1rem 0 0;
|
||||
color: rgba(244, 239, 227, 0.78);
|
||||
}
|
||||
|
||||
.panel-grid {
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid rgba(255, 231, 196, 0.12);
|
||||
background: rgba(255, 231, 196, 0.05);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.status-chip strong {
|
||||
color: #f7d59d;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgba(243, 241, 232, 0.14);
|
||||
background: rgba(29, 24, 19, 0.82);
|
||||
grid-column: span 4;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid rgba(255, 231, 196, 0.1);
|
||||
background: rgba(25, 19, 16, 0.86);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 231, 196, 0.03);
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin-top: 0;
|
||||
.panel-highlight {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(101, 52, 28, 0.28), rgba(25, 19, 16, 0.92)),
|
||||
rgba(25, 19, 16, 0.9);
|
||||
}
|
||||
|
||||
.panel-log {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #f6d49e;
|
||||
color: #f8d79f;
|
||||
}
|
||||
|
||||
.panel ul,
|
||||
.panel ol {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.panel li + li {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats div {
|
||||
padding: 0.9rem;
|
||||
background: rgba(243, 241, 232, 0.05);
|
||||
}
|
||||
|
||||
.stats dt {
|
||||
color: rgba(243, 241, 232, 0.62);
|
||||
font-size: 0.8rem;
|
||||
.panel-header span {
|
||||
color: rgba(244, 239, 227, 0.58);
|
||||
font-size: 0.83rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.stats dd {
|
||||
margin: 0.3rem 0 0;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
.stat-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.stat-strip div,
|
||||
.encounter-box,
|
||||
.combat-status {
|
||||
padding: 0.9rem;
|
||||
background: rgba(255, 245, 223, 0.04);
|
||||
border: 1px solid rgba(255, 231, 196, 0.08);
|
||||
}
|
||||
|
||||
.stat-strip span,
|
||||
.encounter-label,
|
||||
.combat-status span,
|
||||
.room-meta span,
|
||||
.log-entry span {
|
||||
display: block;
|
||||
color: rgba(244, 239, 227, 0.56);
|
||||
font-size: 0.76rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.stat-strip strong,
|
||||
.encounter-box strong,
|
||||
.combat-status strong {
|
||||
display: block;
|
||||
margin-top: 0.3rem;
|
||||
font-size: 1.45rem;
|
||||
color: #fff2d6;
|
||||
}
|
||||
|
||||
.supporting-text {
|
||||
margin: 0.9rem 0 0;
|
||||
color: rgba(244, 239, 227, 0.76);
|
||||
}
|
||||
|
||||
.room-title {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: 1.5rem;
|
||||
color: #fff2d6;
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.9rem;
|
||||
margin-top: 0.95rem;
|
||||
}
|
||||
|
||||
.button-row,
|
||||
.enemy-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid rgba(255, 217, 163, 0.24);
|
||||
background: rgba(255, 245, 223, 0.04);
|
||||
color: #f4efe3;
|
||||
padding: 0.72rem 1rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 140ms ease,
|
||||
background 140ms ease,
|
||||
border-color 140ms ease;
|
||||
}
|
||||
|
||||
.button:hover:enabled {
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 217, 163, 0.09);
|
||||
border-color: rgba(255, 217, 163, 0.35);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.42;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(180deg, #c36b2d, #8d4617);
|
||||
border-color: rgba(255, 217, 163, 0.32);
|
||||
color: #fff4e1;
|
||||
}
|
||||
|
||||
.button-primary:hover:enabled {
|
||||
background: linear-gradient(180deg, #d97833, #9f501b);
|
||||
}
|
||||
|
||||
.encounter-box,
|
||||
.combat-status {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.move-list,
|
||||
.mini-map {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mini-map {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.move-card,
|
||||
.map-node {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0.95rem;
|
||||
border: 1px solid rgba(255, 231, 196, 0.08);
|
||||
background: rgba(255, 245, 223, 0.04);
|
||||
}
|
||||
|
||||
.move-card {
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 140ms ease,
|
||||
background 140ms ease,
|
||||
border-color 140ms ease;
|
||||
}
|
||||
|
||||
.move-card:hover:enabled {
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 217, 163, 0.09);
|
||||
border-color: rgba(255, 217, 163, 0.35);
|
||||
}
|
||||
|
||||
.move-card:disabled {
|
||||
opacity: 0.42;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.move-card span,
|
||||
.map-node span {
|
||||
display: block;
|
||||
color: rgba(244, 239, 227, 0.56);
|
||||
font-size: 0.74rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.move-card strong,
|
||||
.map-node strong {
|
||||
display: block;
|
||||
margin-top: 0.3rem;
|
||||
font-size: 1rem;
|
||||
color: #fff2d6;
|
||||
}
|
||||
|
||||
.move-card em {
|
||||
display: block;
|
||||
margin-top: 0.3rem;
|
||||
font-style: normal;
|
||||
color: rgba(244, 239, 227, 0.7);
|
||||
}
|
||||
|
||||
.map-node-active {
|
||||
border-color: rgba(243, 186, 115, 0.55);
|
||||
background: rgba(243, 186, 115, 0.12);
|
||||
}
|
||||
|
||||
.enemy-list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.enemy-card {
|
||||
padding: 0.95rem;
|
||||
border: 1px solid rgba(255, 231, 196, 0.08);
|
||||
background: rgba(255, 245, 223, 0.04);
|
||||
}
|
||||
|
||||
.enemy-card strong {
|
||||
display: block;
|
||||
font-size: 1.05rem;
|
||||
color: #fff2d6;
|
||||
}
|
||||
|
||||
.enemy-card span {
|
||||
color: rgba(244, 239, 227, 0.66);
|
||||
}
|
||||
|
||||
.log-list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
max-height: 340px;
|
||||
overflow: auto;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 0.9rem;
|
||||
border-left: 3px solid rgba(243, 186, 115, 0.7);
|
||||
background: rgba(255, 245, 223, 0.04);
|
||||
}
|
||||
|
||||
.log-entry p {
|
||||
margin: 0.35rem 0 0;
|
||||
color: #f4efe3;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.panel,
|
||||
.panel-log {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.app-shell {
|
||||
width: min(100% - 1rem, 1100px);
|
||||
padding-top: 1rem;
|
||||
width: min(100% - 1rem, 1200px);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.panel {
|
||||
padding: 1rem;
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.stat-strip {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user