Feat/war room redesign#60
Merged
Merged
Conversation
Replace the Flex/Surface two-column layout with a full-viewport conference room design featuring three composited screen panels: - Left: MatrixBackground tenant signal display - Center: checkpoint interaction with progress pips, styled choices - Right: mission briefing with timer widget and abandon controls Background uses room-bg.jpg with darkened filter, vignette overlay, and desk foreground gradient. All screens have scan-line overlays and CRT-inspired styling. Replaced RadioGroup/Radio with custom styled choice divs. Added .jpg module declaration to types.d.ts. https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
Replace JS asset import with a static path string to avoid bundler dependency on the image file. https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- Darken room bg brightness to 0.28 for better UI contrast - Increase status bar text opacity to 0.75 - Darken panel backgrounds to rgba(4,6,14,0.92) - Brighten checkpoint question text to #e0eaf8 - Brighten choice text to rgba(210,225,240,0.85) - Brighten briefing body text to rgba(170,190,210,0.75) - Brighten mission title to #eef4fc - Use explicit mission.checkpoints[currentCheckpoint].id for hint handler https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
The desk gradient div (z-index:3) was overlapping the UI layer (z-index:2), blocking clicks on the validate button and action row. https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
Remove the background photo div and unused roomBg constant. The outermost wrapper's solid #060810 background now serves as the sole backdrop, improving text contrast and readability. https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
Re-add the room background photo div with lower brightness (0.15) and saturation (0.7). Change panel backgrounds to rgba(2,4,10,0.97) so text is readable against the nearly-opaque panels, not the photo. https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- Increase room-bg brightness to 0.35 - Lower panel opacity to rgba(2,4,12,0.82) so photo bleeds through - Add backdropFilter blur(2px) for frosted glass effect - Set center panel border to rgba(20,150,255,0.25) https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
Replace CSS grid layout with absolutely positioned panels aligned to the screen positions in room-bg.jpg. Remove vignette overlay, desk foreground, and status bar. Add bottom HUD strip. Panels use frosted glass effect over the photo at brightness(0.55). https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- Extend all three panel heights from 44% to 52% - Increase room-bg brightness to 0.85 and saturation to 0.95 - Restyle VALIDATE button with bolder colors and larger padding - Restyle REQUEST INTEL as a bordered button with white text - Restyle ABANDON MISSION as a bordered red button https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- Resize panels: LEFT 24%x56%, CENTER 38%x56%, RIGHT 23%x56% - LEFT: remove Tenant Signal header, add timer + abandon at bottom over MatrixBackground with opaque dock - RIGHT: remove timer + abandon, briefing-only with scrollable text - CENTER: unchanged (checkpoint content) https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- Extend all panel heights from 56% to 64% - Right panel width 23% → 21% to stay within photo boundary - Mission title in briefing panel 14px → 20px https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- LEFT: left 6.5%, width 22% - CENTER: left 29.5%, width 38% - RIGHT: left 68.5%, width 22% - Mission title: 22px / fontWeight 700 - Checkpoint question text: 14px (was 12px) https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- All panels height 64% → 58% - RIGHT panel width 22% → 19% - Left panel bottom dock: padding 12→8, overflow hidden - Mission title: explicit fontSize "22px", lineHeight 1.2 - Checkpoint question text confirmed at 14px https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- LEFT: left 1%, width 27%, height 65% - CENTER: left 29%, width 38%, height 65% - RIGHT: left 68%, width 20%, height 65% https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
fontSize 15px, fontWeight 600, color #e0eaf8, lineHeight 1.6 https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
- Center panel top bar mission ID label: fontWeight 700 - Mission Briefing eyebrow label: fontWeight 700 - Checkpoint section label: fontWeight 700 https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Type of change
Checklist
npx tsc --noEmit)npx dt-app dev