From 2bcd6aa1f6b68cf199d6f3370b8c6a4c2820009d Mon Sep 17 00:00:00 2001 From: Labyricorn Date: Mon, 17 Aug 2026 13:50:29 -0700 Subject: [PATCH] Document Twitch video overlay milestone --- .../devlog/twitch-video-overlay/contents.lr | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 .labyricorn/devlog/twitch-video-overlay/contents.lr diff --git a/.labyricorn/devlog/twitch-video-overlay/contents.lr b/.labyricorn/devlog/twitch-video-overlay/contents.lr new file mode 100644 index 0000000..fbea86e --- /dev/null +++ b/.labyricorn/devlog/twitch-video-overlay/contents.lr @@ -0,0 +1,63 @@ +_model: devlog-entry +--- +schema_version: 1 +--- +title: Twungeon controls move into the Twitch video overlay +--- +date: 2026-08-17 +--- +author: Codex and Christopher Chambers +--- +summary: Twungeon replaced its component-style viewer popup with a transparent, responsive Twitch video overlay that reuses the authenticated controller while leaving the streamed dungeon visible. +--- +tags: implementation, deployment, Twitch, Twitch Extension, video overlay, responsive UI, accessibility, testing +--- +source_commit: a8a86852c0e06e518d816ea35400ef9878a365f3 +--- +body: + +Twungeon's viewer controls now sit directly over the control area reserved in +the stream instead of opening as a large Twitch Video Component popup. The +production viewer uses Twitch's Video - Fullscreen placement with `extension` +as its relative viewer path. The broadcast continues to provide the dungeon, +players, Goblin, exit, status frame, and action log underneath the Extension. + +The change deliberately reuses the existing controller and authoritative +backend flow. Twitch identity sharing, short-lived Twungeon sessions, character +ownership, movement, attack, self-heal, pass, action points, phase checks, and +dead-character checks still use the same APIs and server-side rules. The root +page remains the complete local and broadcast view, while `/extension` receives +an overlay class before first paint and hides every noninteractive game surface. + +Overlay placement is expressed through centralized percentage-based CSS +variables for the control region rather than resolution-specific coordinates. +Container-relative sizing keeps the directional pad and action buttons usable +across normal, theater, fullscreen, narrow, and 4:3 players. The transparent +document and empty overlay canvas reject pointer events; only the actual buttons +restore them, so the rest of the video is not presented as a large clickable +surface. + +Development remains practical without Twitch. The loopback-only +`/extension?dev=1&debug=1` mode exposes the existing synthetic viewer login and +draws control-region boundaries. The flags are ignored on the deployed host. +Operator documentation now identifies the Twitch dashboard setting as +**Video - Fullscreen**, records the `extension` viewer path, and separates the +manual dashboard change from repository deployment. + +Live testing exposed a subtle transparency failure after the correct viewer +path was saved. Although the document, body, and control region all computed to +transparent backgrounds, the root `color-scheme: dark` declaration caused +Chrome to paint the iframe canvas black. Dark color scheme now applies only to +the full game page; overlay mode explicitly uses the normal transparent canvas. +The stylesheet fix was deployed without restarting the Twungeon service, so the +active in-memory run was preserved. + +Validation covered linting, strict type checking, 24 domain tests, 10 +integration and multi-viewer tests, and a production build. Browser checks at +1920×1080, 1280×720, and 1024×768 confirmed normalized placement, hidden +noninteractive surfaces, button-only pointer handling, and transparent computed +backgrounds. The deployed public stylesheet and viewer endpoint were verified +after the final transparency correction. + +The Twitch video-overlay implementation is recorded in +[commit `a8a86852c0e06e518d816ea35400ef9878a365f3`](https://git.labyricorn.com/Labyricorn/Twungeon/commit/a8a86852c0e06e518d816ea35400ef9878a365f3).