docs(ui): add 19 UI wireframes across 5 categories (v0.1 + v1.0)
First wireframe set covering all major UI surfaces: - HUD: basic insert (v0.1), full insert with perception modes (v1.0) - Dialogue: speaking, choosing, overheard states (v0.1), full with relationship indicators (v1.0) - Monologue: idle, reaction (v0.1), thought threading (v1.0) - Popups: modal, tooltip, interaction list (v0.1), context menu, notification stack (v1.0) - Menus: main, pause, save/load (v0.1), main menu, options (v1.0) README.md cross-references each wireframe to governing D-records. JSON source + PNG exports tracked in git. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,107 @@
|
||||
{
|
||||
"name": "v01-monologue-idle",
|
||||
"shapes": {
|
||||
"bg": {
|
||||
"type": "Rectangle",
|
||||
"left": 0, "top": 0, "width": 1140, "height": 760,
|
||||
"fillColor": "#1a1e24",
|
||||
"strokeColor": "#1a1e24"
|
||||
},
|
||||
"bg-game-label": {
|
||||
"type": "Text",
|
||||
"left": 380, "top": 340,
|
||||
"text": "GAME VIEW — PLAYER IDLE IN CORRIDOR\n(no active conversation, no active threat)",
|
||||
"fontColor": "#333340",
|
||||
"fontSize": 14
|
||||
},
|
||||
"monologue-block": {
|
||||
"type": "Rectangle",
|
||||
"left": 200, "top": 598, "width": 740, "height": 64,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#00000000"
|
||||
},
|
||||
"monologue-line-1": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 598, "width": 740,
|
||||
"text": "The station never really goes quiet. You just stop noticing.",
|
||||
"fontColor": "#d0d4e0",
|
||||
"fontSize": 13,
|
||||
"wordWrap": true
|
||||
},
|
||||
"monologue-trigger-label": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 618,
|
||||
"text": "trigger: time_idle // mood: content // character: detective",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"hint-bar": {
|
||||
"type": "Rectangle",
|
||||
"left": 0, "top": 728, "width": 1140, "height": 32,
|
||||
"fillColor": "#0e1218",
|
||||
"strokeColor": "#333340"
|
||||
},
|
||||
"hint-text": {
|
||||
"type": "Text",
|
||||
"left": 20, "top": 736,
|
||||
"text": "[E] Interact [Shift] Sprint [Tab] Insert [RMB] World Menu [Esc] Pause",
|
||||
"fontColor": "#8899aa",
|
||||
"fontSize": 11
|
||||
},
|
||||
"minimap-frame": {
|
||||
"type": "Rectangle",
|
||||
"left": 880, "top": 16, "width": 244, "height": 244,
|
||||
"fillColor": "#12141a",
|
||||
"strokeColor": "#333340",
|
||||
"corners": [4, 4, 4, 4]
|
||||
},
|
||||
"minimap-stub-label": {
|
||||
"type": "Text",
|
||||
"left": 975, "top": 124,
|
||||
"text": "minimap",
|
||||
"fontColor": "#333340",
|
||||
"fontSize": 12
|
||||
},
|
||||
"positioning-note": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 670,
|
||||
"text": "Position: lower center screen. Does NOT obstruct game view above ~60% height.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"fade-note": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 684,
|
||||
"text": "Standard opacity 85%. No container — text floats freely on z-layer 7.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"dialogue-zone-label": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 700,
|
||||
"text": "← dialogue box would appear BELOW this line (max 20% screen height from bottom) →",
|
||||
"fontColor": "#2a3540",
|
||||
"fontSize": 10
|
||||
},
|
||||
"dialogue-zone-line": {
|
||||
"type": "Line",
|
||||
"left": 0, "top": 608, "width": 1140, "height": 0,
|
||||
"strokeColor": "#1e2830"
|
||||
},
|
||||
"annotation-title": {
|
||||
"type": "Text",
|
||||
"left": 16, "top": 16,
|
||||
"text": "v0.1 MONOLOGUE — IDLE OBSERVATION",
|
||||
"fontColor": "#556677",
|
||||
"fontSize": 11
|
||||
},
|
||||
"annotation-notes": {
|
||||
"type": "Text",
|
||||
"left": 16, "top": 30, "width": 840,
|
||||
"text": "time_idle trigger. Single line. 85% opacity. No container chrome. Floats above dialogue zone. Standard chime on appearance.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10,
|
||||
"wordWrap": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
@@ -0,0 +1,133 @@
|
||||
{
|
||||
"name": "v01-monologue-reaction",
|
||||
"shapes": {
|
||||
"bg": {
|
||||
"type": "Rectangle",
|
||||
"left": 0, "top": 0, "width": 1140, "height": 760,
|
||||
"fillColor": "#1a1e24",
|
||||
"strokeColor": "#1a1e24"
|
||||
},
|
||||
"bg-game-label": {
|
||||
"type": "Text",
|
||||
"left": 340, "top": 320,
|
||||
"text": "GAME VIEW — PLAYER OBSERVES KAEL IN WRONG LOCATION\n(entity blob in fog transitioning to amber silhouette — cognitive delay active)",
|
||||
"fontColor": "#333340",
|
||||
"fontSize": 14
|
||||
},
|
||||
"fog-entity-blob": {
|
||||
"type": "Ellipse",
|
||||
"left": 500, "top": 440, "width": 24, "height": 24,
|
||||
"fillColor": "#555566",
|
||||
"strokeColor": "#555566"
|
||||
},
|
||||
"fog-entity-pulse-ring": {
|
||||
"type": "Ellipse",
|
||||
"left": 490, "top": 430, "width": 44, "height": 44,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#e8c547"
|
||||
},
|
||||
"fog-entity-note": {
|
||||
"type": "Text",
|
||||
"left": 450, "top": 476,
|
||||
"text": "blob → color transition (0.3s)",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"monologue-urgent-accent": {
|
||||
"type": "Rectangle",
|
||||
"left": 196, "top": 580, "width": 3, "height": 80,
|
||||
"fillColor": "#c8d8f0",
|
||||
"strokeColor": "#c8d8f0"
|
||||
},
|
||||
"monologue-block": {
|
||||
"type": "Rectangle",
|
||||
"left": 200, "top": 580, "width": 740, "height": 80,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#00000000"
|
||||
},
|
||||
"monologue-line-1": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 580, "width": 740,
|
||||
"text": "Those footsteps... that's Kael's walk.",
|
||||
"fontColor": "#e0e8f8",
|
||||
"fontSize": 13,
|
||||
"wordWrap": true
|
||||
},
|
||||
"monologue-line-2": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 602, "width": 740,
|
||||
"text": "What's he doing in this corridor?",
|
||||
"fontColor": "#c8d4ec",
|
||||
"fontSize": 13,
|
||||
"wordWrap": true
|
||||
},
|
||||
"monologue-trigger-label": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 625,
|
||||
"text": "trigger: observe_npc // mood: suspicious // chime: urgent variant at onset of cognitive delay (D-067)",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"cognitive-delay-note": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 639,
|
||||
"text": "0.6s cognitive delay — monologue fires DURING delay, not after. Text IS the recognition (D-060).",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"full-opacity-note": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 653,
|
||||
"text": "Urgent: 100% opacity, left accent bar (cyan). Standard monologue: 85% opacity, no bar.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"hint-bar": {
|
||||
"type": "Rectangle",
|
||||
"left": 0, "top": 728, "width": 1140, "height": 32,
|
||||
"fillColor": "#0e1218",
|
||||
"strokeColor": "#333340"
|
||||
},
|
||||
"hint-text": {
|
||||
"type": "Text",
|
||||
"left": 20, "top": 736,
|
||||
"text": "[E] Interact [Shift] Sprint [Tab] Insert [RMB] World Menu [Esc] Pause",
|
||||
"fontColor": "#8899aa",
|
||||
"fontSize": 11
|
||||
},
|
||||
"minimap-frame": {
|
||||
"type": "Rectangle",
|
||||
"left": 880, "top": 16, "width": 244, "height": 244,
|
||||
"fillColor": "#12141a",
|
||||
"strokeColor": "#333340",
|
||||
"corners": [4, 4, 4, 4]
|
||||
},
|
||||
"minimap-stub-label": {
|
||||
"type": "Text",
|
||||
"left": 975, "top": 124,
|
||||
"text": "minimap",
|
||||
"fontColor": "#333340",
|
||||
"fontSize": 12
|
||||
},
|
||||
"dialogue-zone-line": {
|
||||
"type": "Line",
|
||||
"left": 0, "top": 608, "width": 1140, "height": 0,
|
||||
"strokeColor": "#1e2830"
|
||||
},
|
||||
"annotation-title": {
|
||||
"type": "Text",
|
||||
"left": 16, "top": 16,
|
||||
"text": "v0.1 MONOLOGUE — REACTION (RECOGNITION EVENT)",
|
||||
"fontColor": "#556677",
|
||||
"fontSize": 11
|
||||
},
|
||||
"annotation-notes": {
|
||||
"type": "Text",
|
||||
"left": 16, "top": 30, "width": 840,
|
||||
"text": "Urgent chime at onset of cognitive delay. Two-line monologue: first line names the recognition, second continues the thought. Accent bar left. Entity transitioning fog-blob to amber in game world above.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10,
|
||||
"wordWrap": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
@@ -0,0 +1,200 @@
|
||||
{
|
||||
"name": "v10-monologue-threading",
|
||||
"shapes": {
|
||||
"bg": {
|
||||
"type": "Rectangle",
|
||||
"left": 0, "top": 0, "width": 1140, "height": 760,
|
||||
"fillColor": "#1a1e24",
|
||||
"strokeColor": "#1a1e24"
|
||||
},
|
||||
"bg-game-label": {
|
||||
"type": "Text",
|
||||
"left": 370, "top": 300,
|
||||
"text": "GAME VIEW — DEDUCTION SEQUENCE IN PROGRESS\n(player has observed contradiction, chain building)",
|
||||
"fontColor": "#333340",
|
||||
"fontSize": 14
|
||||
},
|
||||
"thread-container": {
|
||||
"type": "Rectangle",
|
||||
"left": 180, "top": 490, "width": 780, "height": 200,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#00000000"
|
||||
},
|
||||
"thread-line-connector": {
|
||||
"type": "Line",
|
||||
"left": 185, "top": 502, "width": 0, "height": 170,
|
||||
"strokeColor": "#2a3550"
|
||||
},
|
||||
"monologue-node-1": {
|
||||
"type": "Rectangle",
|
||||
"left": 192, "top": 490, "width": 740, "height": 36,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#00000000"
|
||||
},
|
||||
"monologue-text-1": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 492, "width": 720,
|
||||
"text": "Kael's shift ended at 14:00. He was at the Terminal at 15:30.",
|
||||
"fontColor": "#d0d4e0",
|
||||
"fontSize": 13,
|
||||
"wordWrap": true
|
||||
},
|
||||
"monologue-meta-1": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 510,
|
||||
"text": "observe_npc // 14s ago",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 9
|
||||
},
|
||||
"thread-node-dot-1": {
|
||||
"type": "Ellipse",
|
||||
"left": 183, "top": 499, "width": 5, "height": 5,
|
||||
"fillColor": "#4a9ebb",
|
||||
"strokeColor": "#4a9ebb"
|
||||
},
|
||||
"monologue-node-2": {
|
||||
"type": "Rectangle",
|
||||
"left": 192, "top": 532, "width": 740, "height": 36,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#00000000"
|
||||
},
|
||||
"monologue-text-2": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 534, "width": 720,
|
||||
"text": "That manifest I saw — Bay 12. The count was wrong.",
|
||||
"fontColor": "#d0d4e0",
|
||||
"fontSize": 13,
|
||||
"wordWrap": true
|
||||
},
|
||||
"monologue-meta-2": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 552,
|
||||
"text": "discover_evidence // 2 min ago",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 9
|
||||
},
|
||||
"thread-node-dot-2": {
|
||||
"type": "Ellipse",
|
||||
"left": 183, "top": 541, "width": 5, "height": 5,
|
||||
"fillColor": "#e8c547",
|
||||
"strokeColor": "#e8c547"
|
||||
},
|
||||
"monologue-node-3-active": {
|
||||
"type": "Rectangle",
|
||||
"left": 192, "top": 572, "width": 740, "height": 40,
|
||||
"fillColor": "#00000000",
|
||||
"strokeColor": "#00000000"
|
||||
},
|
||||
"monologue-accent-3": {
|
||||
"type": "Rectangle",
|
||||
"left": 196, "top": 572, "width": 2, "height": 40,
|
||||
"fillColor": "#c8d8f0",
|
||||
"strokeColor": "#c8d8f0"
|
||||
},
|
||||
"monologue-text-3": {
|
||||
"type": "Text",
|
||||
"left": 204, "top": 574, "width": 720,
|
||||
"text": "He was supposed to be off-station. Which means he never left.",
|
||||
"fontColor": "#e0e8f8",
|
||||
"fontSize": 13,
|
||||
"wordWrap": true
|
||||
},
|
||||
"monologue-meta-3": {
|
||||
"type": "Text",
|
||||
"left": 204, "top": 595,
|
||||
"text": "observe_anomaly // now // DEDUCTION",
|
||||
"fontColor": "#4a6888",
|
||||
"fontSize": 9
|
||||
},
|
||||
"thread-node-dot-3": {
|
||||
"type": "Ellipse",
|
||||
"left": 183, "top": 581, "width": 7, "height": 7,
|
||||
"fillColor": "#c8d8f0",
|
||||
"strokeColor": "#c8d8f0"
|
||||
},
|
||||
"unreliable-hint": {
|
||||
"type": "Rectangle",
|
||||
"left": 200, "top": 618, "width": 480, "height": 20,
|
||||
"fillColor": "#12141a",
|
||||
"strokeColor": "#2a3040",
|
||||
"corners": [2, 2, 2, 2]
|
||||
},
|
||||
"unreliable-text": {
|
||||
"type": "Text",
|
||||
"left": 208, "top": 622,
|
||||
"text": "v1.0: unreliable narrator hint — italics indicate character may be wrong",
|
||||
"fontColor": "#556677",
|
||||
"fontSize": 10
|
||||
},
|
||||
"connection-viz": {
|
||||
"type": "Rectangle",
|
||||
"left": 200, "top": 644, "width": 200, "height": 24,
|
||||
"fillColor": "#12141a",
|
||||
"strokeColor": "#2a3040",
|
||||
"corners": [2, 2, 2, 2]
|
||||
},
|
||||
"connection-viz-text": {
|
||||
"type": "Text",
|
||||
"left": 208, "top": 649,
|
||||
"text": "KAEL ←→ BAY 12 ←→ MANIFEST",
|
||||
"fontColor": "#6677aa",
|
||||
"fontSize": 10
|
||||
},
|
||||
"connection-viz-note": {
|
||||
"type": "Text",
|
||||
"left": 408, "top": 650,
|
||||
"text": "v1.0: knowledge connection visualization",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"thread-scroll-note": {
|
||||
"type": "Text",
|
||||
"left": 200, "top": 672,
|
||||
"text": "Thread scrolls upward as new thoughts arrive. Oldest fade out. Max 3-4 visible.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10
|
||||
},
|
||||
"hint-bar": {
|
||||
"type": "Rectangle",
|
||||
"left": 0, "top": 728, "width": 1140, "height": 32,
|
||||
"fillColor": "#0e1218",
|
||||
"strokeColor": "#333340"
|
||||
},
|
||||
"hint-text": {
|
||||
"type": "Text",
|
||||
"left": 20, "top": 736,
|
||||
"text": "[E] Interact [Shift] Sprint [Tab] Insert [J] Case File [RMB] World Menu [Esc] Pause",
|
||||
"fontColor": "#6677aa",
|
||||
"fontSize": 11
|
||||
},
|
||||
"minimap-frame": {
|
||||
"type": "Rectangle",
|
||||
"left": 880, "top": 16, "width": 244, "height": 244,
|
||||
"fillColor": "#12141a",
|
||||
"strokeColor": "#c8d0e0",
|
||||
"corners": [4, 4, 4, 4]
|
||||
},
|
||||
"minimap-stub-label": {
|
||||
"type": "Text",
|
||||
"left": 975, "top": 124,
|
||||
"text": "minimap",
|
||||
"fontColor": "#333340",
|
||||
"fontSize": 12
|
||||
},
|
||||
"annotation-title": {
|
||||
"type": "Text",
|
||||
"left": 16, "top": 16,
|
||||
"text": "v1.0 MONOLOGUE — THOUGHT THREADING (DEDUCTION CHAIN)",
|
||||
"fontColor": "#556677",
|
||||
"fontSize": 11
|
||||
},
|
||||
"annotation-notes": {
|
||||
"type": "Text",
|
||||
"left": 16, "top": 30, "width": 840,
|
||||
"text": "Thread of 3 thoughts connected by vertical line. Each node has source trigger + timestamp. Active node has accent bar. Connection visualization. Unreliable narrator hints in italics.",
|
||||
"fontColor": "#3a4455",
|
||||
"fontSize": 10,
|
||||
"wordWrap": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Reference in New Issue
Block a user