docs: add inventions panel design

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:35:51 +00:00
parent 6d1f470ba5
commit 89ae5d065b
1 changed files with 79 additions and 0 deletions
@@ -0,0 +1,79 @@
+# Inventions Panel Design
+
+## Overview
+
+Add an "I" (Inventions) tab to the existing left-side panel, showing a scrollable, read-only log of all inventions. Each entry displays the invention name, category tag, required materials, workshop/tool requirements, inventor name, and game day. A notification dot on the tab badge signals unseen inventions.
+
+## Shared Types
+
+New type in `shared/src/types.ts`:
+
+```typescript
+export interface InventionSummary {
+  itemId: string;
+  name: string;
+  category: 'resource' | 'tool' | 'material' | 'structure';
+  inputs: { itemId: string; quantity: number }[];
+  workshopType: string | null;
+  toolRequired: string | null;
+  inventorName: string;
+  day: number;
+}
+```
+
+New socket events in `ServerEvents`:
+
+```typescript
+'invention-event': (data: InventionSummary) => void;
+'invention-history': (data: InventionSummary[]) => void;
+```
+
+## Server Changes
+
+### InventionTimeline
+
+Extend stored entries to include `inputs`, `workshopType`, `toolRequired`, and display `name` (in addition to existing `itemId`, `inventorEntityId`, `inventorName`, `tick`, `day`). Add `getAll(): InventionSummary[]` method.
+
+### SocketServer
+
+- On client connect: emit `invention-history` with `inventionTimeline.getAll()`
+- On new invention: emit `invention-event` with the single `InventionSummary`
+- Hook emission via callback on the invention registration path, same pattern as narration's `onEventCreated`
+
+## Client Changes
+
+### SocketClient
+
+Add `onInventionEvent` and `onInventionHistory` callbacks. Listen for `invention-event` and `invention-history` socket events.
+
+### InventionsPanel (new file: `client/src/ui/InventionsPanel.ts`)
+
+- Scrollable list of invention cards, newest first
+- Each card shows:
+  - Name with colored category tag (e.g., `[tool]`, `[material]`)
+  - Materials: "2x wood, 1x stone"
+  - Requirements (if any): "Requires: workbench" or "Requires: wooden_axe"
+  - Footer: inventor name + "Day N"
+- Methods: `getElement()`, `addInvention(data)`, `loadHistory(data[])`
+- Tracks unseen state when panel is not visible
+
+### LeftPanel
+
+- Add third tab "I" for Inventions
+- Tab button supports notification dot (small colored circle)
+- Clicking "I" tab clears the notification dot
+
+### GameScene
+
+- Create `InventionsPanel` instance
+- Pass to `LeftPanel` as third tab content
+- Wire `client.onInventionEvent` → `inventionsPanel.addInvention()`
+- Wire `client.onInventionHistory` → `inventionsPanel.loadHistory()`
+
+## Styling
+
+Matches existing EarthBound aesthetic: dark background (#1a1a2e), warm borders (#e0d0b0), muted text colors. Category tags use distinct colors per category.
+
+## Approach
+
+Follows same architecture as narration events: dedicated socket events for history (on connect) and live updates, with a panel class that manages its own DOM.