Merge pull request '✨Feature: implement game shell UI with room navigation and combat mechanics' (#9) from feature/game-shell-ui into main

Reviewed-on: #9

src/App.tsx

@@ -6,7 +6,6 @@ import {
   createRunState,
   enterCurrentRoom,
   getAvailableMoves,
-  isCurrentRoomCombatReady,
   resolveRunEnemyTurn,
   resolveRunPlayerTurn,
   startCombatInCurrentRoom,
@@ -53,7 +52,11 @@ function App() {
   const currentLevel = run.dungeon.levels[run.currentLevel];
   const currentRoom = run.currentRoomId ? currentLevel?.rooms[run.currentRoomId] : undefined;
   const availableMoves = getAvailableMoves(run);
-  const combatReadyEncounter = isCurrentRoomCombatReady(run);
+  const combatReadyEncounter = Boolean(
+    currentRoom?.encounter?.resolved &&
+      currentRoom.encounter.creatureNames &&
+      currentRoom.encounter.creatureNames.length > 0,
+  );
 
   const handleReset = () => {
     setRun(createDemoRun());
@@ -101,10 +104,11 @@ function App() {
       <section className="hero">
         <div>
           <p className="eyebrow">2D6 Dungeon Web</p>
-          <h1>Dungeon Loop Shell</h1>
+          <h1>Playable Rules Shell</h1>
           <p className="lede">
-            Traverse generated rooms, auto-resolve room entry, and engage combat
+            The core loop now runs inside the app: move through generated rooms,
-            when a room reveals a real encounter.
+            resolve room state on entry, and fight when a room produces a real
+            encounter.
           </p>
         </div>
 
@@ -119,22 +123,6 @@ function App() {
         </div>
       </section>
 
-      {combatReadyEncounter && !run.activeCombat ? (
-        <section className="alert-banner">
-          <div>
-            <span className="alert-kicker">Encounter Ready</span>
-            <strong>{currentRoom?.encounter?.resultLabel}</strong>
-            <p>
-              This room contains a combat-ready encounter. Engage now to enter
-              tactical resolution.
-            </p>
-          </div>
-          <button className="button button-primary" onClick={handleStartCombat}>
-            Engage Encounter
-          </button>
-        </section>
-      ) : null}
-
       <section className="dashboard-grid">
         <article className="panel panel-highlight">
           <div className="panel-header">
@@ -160,10 +148,6 @@ function App() {
               <span>Precision</span>
               <strong>{run.adventurerSnapshot.stats.precision}</strong>
             </div>
-            <div>
-              <span>XP</span>
-              <strong>{run.adventurerSnapshot.xp}</strong>
-            </div>
           </div>
           <p className="supporting-text">
             {run.adventurerSnapshot.name} is equipped with a{" "}
@@ -172,9 +156,6 @@ function App() {
             )?.name ?? "weapon"}
             .
           </p>
-          <p className="supporting-text">
-            Run rewards: {run.xpGained} XP earned, {run.defeatedCreatureIds.length} foes defeated.
-          </p>
         </article>
 
         <article className="panel">
@@ -244,9 +225,7 @@ function App() {
                   key={roomId}
                   className={`map-node${active ? " map-node-active" : ""}`}
                 >
-                  <span>
+                  <span>{room.position.x},{room.position.y}</span>
-                    {room.position.x},{room.position.y}
-                  </span>
                   <strong>{getRoomTitle(run, roomId)}</strong>
                 </article>
               );
@@ -313,8 +292,8 @@ function App() {
             </>
           ) : (
             <p className="supporting-text">
-              No active combat. Travel until a room reveals a hostile encounter,
+              No active combat. Travel through the dungeon until a room generates
-              then engage it from the banner or room panel.
+              a creature encounter, then start combat from that room.
             </p>
           )}
         </article>

src/data/contentHelpers.ts

@@ -61,16 +61,3 @@ export function findCreatureByName(
 
   return creature;
 }
-
-export function findCreatureById(
-  content: ContentPack,
-  creatureId: string,
-): CreatureDefinition {
-  const creature = content.creatures.find((entry) => entry.id === creatureId);
-
-  if (!creature) {
-    throw new Error(`Unknown creature id: ${creatureId}`);
-  }
-
-  return creature;
-}

src/rules/runState.test.ts

@@ -7,7 +7,6 @@ import {
   createRunState,
   enterCurrentRoom,
   getAvailableMoves,
-  isCurrentRoomCombatReady,
   resolveRunEnemyTurn,
   resolveRunPlayerTurn,
   startCombatInCurrentRoom,
@@ -185,10 +184,6 @@ describe("run state flow", () => {
     expect(result.run.dungeon.levels["1"]!.rooms["room.level1.start"]!.encounter?.rewardPending).toBe(
       false,
     );
-    expect(result.run.adventurerSnapshot.xp).toBe(2);
-    expect(result.run.xpGained).toBe(2);
-    expect(result.run.defeatedCreatureIds).toEqual(["creature.level1.guard"]);
-    expect(result.run.log.at(-1)?.text).toContain("Victory rewards");
   });
 
   it("lists available traversable exits for the current room", () => {
@@ -232,25 +227,4 @@ describe("run state flow", () => {
     );
     expect(result.run.log[0]?.text).toContain("Travelled north");
   });
-
-  it("flags combat-ready rooms once entry resolves a hostile encounter", () => {
-    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", "b"],
-      creatureNames: ["Guard", "Warrior"],
-      resultLabel: "Guard and Warrior",
-      resolved: true,
-    };
-
-    expect(isCurrentRoomCombatReady(run)).toBe(true);
-  });
 });

src/rules/runState.ts

@@ -6,7 +6,6 @@ import type {
   RunState,
 } from "@/types/state";
 import type { LogEntry } from "@/types/rules";
-import { findCreatureById } from "@/data/contentHelpers";
 
 import { startCombatFromRoom } from "./combat";
 import {
@@ -233,52 +232,6 @@ function appendLogs(run: RunState, logEntries: LogEntry[]) {
   run.log.push(...logEntries);
 }
 
-function createRewardLog(
-  id: string,
-  at: string,
-  text: string,
-  relatedIds: string[],
-): LogEntry {
-  return {
-    id,
-    at,
-    type: "progression",
-    text,
-    relatedIds,
-  };
-}
-
-function applyCombatRewards(
-  content: ContentPack,
-  run: RunState,
-  completedCombat: CombatState,
-  at: string,
-) {
-  const defeatedCreatureIds = completedCombat.enemies
-    .filter((enemy) => enemy.hpCurrent === 0 && enemy.sourceDefinitionId)
-    .map((enemy) => enemy.sourceDefinitionId!);
-  const xpAwarded = defeatedCreatureIds.reduce((total, creatureId) => {
-    return total + (findCreatureById(content, creatureId).xpReward ?? 0);
-  }, 0);
-
-  run.defeatedCreatureIds.push(...defeatedCreatureIds);
-  run.xpGained += xpAwarded;
-  run.adventurerSnapshot.xp += xpAwarded;
-
-  if (xpAwarded === 0) {
-    return [] as LogEntry[];
-  }
-
-  return [
-    createRewardLog(
-      `${completedCombat.id}.rewards`,
-      at,
-      `Victory rewards: gained ${xpAwarded} XP from ${defeatedCreatureIds.length} defeated creature${defeatedCreatureIds.length === 1 ? "" : "s"}.`,
-      [completedCombat.id, ...defeatedCreatureIds],
-    ),
-  ];
-}
-
 export function createRunState(options: CreateRunOptions): RunState {
   const at = options.at ?? new Date().toISOString();
   const levelState = initializeDungeonLevel({
@@ -303,8 +256,6 @@ export function createRunState(options: CreateRunOptions): RunState {
       globalFlags: [],
     },
     adventurerSnapshot: options.adventurer,
-    defeatedCreatureIds: [],
-    xpGained: 0,
     log: [],
     pendingEffects: [],
   };
@@ -347,16 +298,6 @@ export function getAvailableMoves(run: RunState): AvailableMove[] {
     }));
 }
 
-export function isCurrentRoomCombatReady(run: RunState) {
-  const room = requireCurrentRoom(run);
-
-  return Boolean(
-    room.encounter?.resolved &&
-      room.encounter.creatureNames &&
-      room.encounter.creatureNames.length > 0,
-  );
-}
-
 export function travelCurrentExit(
   options: TravelCurrentExitOptions,
 ): RunTransitionResult {
@@ -486,16 +427,9 @@ export function resolveRunPlayerTurn(
   appendLogs(run, result.logEntries);
 
   if (result.combatEnded) {
-    const completedCombat = result.combat;
     const levelState = requireCurrentLevel(run);
     const roomId = requireCurrentRoomId(run);
     const room = levelState.rooms[roomId];
-    const rewardLogs = applyCombatRewards(
-      options.content,
-      run,
-      completedCombat,
-      options.at ?? new Date().toISOString(),
-    );
 
     if (room?.encounter) {
       room.encounter.rewardPending = false;
@@ -503,7 +437,6 @@ export function resolveRunPlayerTurn(
     }
 
     run.activeCombat = undefined;
-    appendLogs(run, rewardLogs);
   }
 
   return {

src/schemas/state.ts

@@ -214,8 +214,6 @@ export const runStateSchema = z.object({
   dungeon: dungeonStateSchema,
   adventurerSnapshot: adventurerStateSchema,
   activeCombat: combatStateSchema.optional(),
-  defeatedCreatureIds: z.array(z.string()),
-  xpGained: z.number().int().nonnegative(),
   log: z.array(logEntrySchema),
   pendingEffects: z.array(ruleEffectSchema),
 });

src/styles.css

@@ -98,39 +98,6 @@ select {
   font-size: 0.95rem;
 }
 
-.alert-banner {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-  margin-top: 1rem;
-  padding: 1rem 1.2rem;
-  border: 1px solid rgba(255, 176, 94, 0.3);
-  background:
-    linear-gradient(90deg, rgba(117, 43, 21, 0.92), rgba(48, 22, 18, 0.92)),
-    rgba(48, 22, 18, 0.92);
-}
-
-.alert-kicker {
-  display: block;
-  color: #ffbf78;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  font-size: 0.74rem;
-}
-
-.alert-banner strong {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 1.15rem;
-  color: #fff4de;
-}
-
-.alert-banner p {
-  margin: 0.35rem 0 0;
-  color: rgba(244, 239, 227, 0.82);
-}
-
 .dashboard-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -277,20 +244,17 @@ select {
 }
 
 .move-list,
-.mini-map,
+.mini-map {
-.enemy-list {
   display: grid;
   gap: 0.75rem;
 }
 
-.mini-map,
+.mini-map {
-.enemy-list {
   margin-top: 1rem;
 }
 
 .move-card,
-.map-node,
+.map-node {
-.enemy-card {
   width: 100%;
   text-align: left;
   padding: 0.95rem;
@@ -327,16 +291,14 @@ select {
 }
 
 .move-card strong,
-.map-node strong,
+.map-node strong {
-.enemy-card strong {
   display: block;
   margin-top: 0.3rem;
   font-size: 1rem;
   color: #fff2d6;
 }
 
-.move-card em,
+.move-card em {
-.enemy-card span {
   display: block;
   margin-top: 0.3rem;
   font-style: normal;
@@ -348,6 +310,28 @@ select {
   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;
@@ -380,8 +364,7 @@ select {
     padding-top: 0.75rem;
   }
 
-  .hero,
+  .hero {
-  .alert-banner {
     flex-direction: column;
     align-items: stretch;
   }

src/types/state.ts

@@ -215,8 +215,6 @@ export type RunState = {
   dungeon: DungeonState;
   adventurerSnapshot: AdventurerState;
   activeCombat?: CombatState;
-  defeatedCreatureIds: string[];
-  xpGained: number;
   log: LogEntry[];
   pendingEffects: RuleEffect[];
 };