glitch-university/gupi-osint-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Live dialogue preview in the editors (reuses the real DialoguePlayer)

Browse Source 
- DialoguePlayer gains an `inline` mode (fills its container, no window key
  capture) and a `startId` to jump the walk to a given utterance.
- New DialoguePreview: a scaled-down mini player that fetches the resolved tree
  from GET /api/admin/story-nodes/:id/dialogue (same resolver as playback).
- Mystery graph: preview appears next to a selected dialogue node.
- Utterance editor: docked preview that jumps to the clicked/selected utterance
  and refreshes after each edit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
gitprov
2026-08-18 19:24:03 +02:00
co-authored by Claude Opus 4.8
parent f10d7584d2
commit 0b1e5e7fc7
6 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+13
View File
@@ -574,3 +574,16 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.asset-actions button:hover { background: #1c463a; color: #e4e9e4; }
.asset-actions .asset-del { flex: 0 0 26px; }
.asset-actions .asset-del:hover { border-color: #d78a7f; color: #e5b3ab; background: #4a221d; }
/* Live dialogue preview (mini player, real DialoguePlayer scaled down) */
.dialogue.inline { position: absolute; inset: 0; width: 100%; height: 100%; animation: none; }
.dialogue-preview { width: 340px; background: #0a211d; border: 1px solid #40655b; box-shadow: 4px 6px 0 #04110e88; }
.dialogue-preview-bar { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: #0e2a24; border-bottom: 1px solid #24413a; font: 8px IBM Plex Mono; letter-spacing: .16em; color: #86a199; text-transform: uppercase; }
.dialogue-preview-bar span { margin-right: auto; }
.dialogue-preview-bar button { background: none; border: 0; color: #9bb0a9; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
.dialogue-preview-bar button:hover { color: #e7b57e; }
.dialogue-preview-stage { position: relative; width: 340px; height: 191px; overflow: hidden; cursor: pointer; background: #06140f; }
.dialogue-preview-scale { position: absolute; top: 0; left: 0; width: 1020px; height: 573px; transform: scale(0.33333); transform-origin: top left; }
.dialogue-preview-empty { display: grid; place-items: center; height: 100%; color: #5f7b73; font: 9px IBM Plex Mono; }
.graph-node-preview { position: absolute; z-index: 6; }
.utterance-preview-dock { position: absolute; left: 16px; bottom: 16px; z-index: 6; }