feat: V2 modernization — Neo-Brutalism UI, 3D tiles, photo scan, mobile UX, and architecture overhaul#18
Merged
Merged
Conversation
…stic beveled block aesthetics and remove unused dashboard widgets
… resolve light mode theme inconsistencies
…st Tray Wrapper, and add Neumorphic 2D shadows
…trols in Neo-Brutalism
… styling globally in 2D mode
…ing, and fully apply Brutalist theme to panel card widgets
…lish - Fix corner tile SVG arc sweep flags (elbow pieces now render correctly) - Apply neo-brutalism-card/app-surface to all modals, panels, dialogs, toast, tooltips - Add brutalist variant to buttonVariants CVA; update base Card and DialogContent defaults - Remove orphaned panel.tsx/panel-variants.ts and dead .shadow-neumorphic CSS - Remove background radial gradient and blur-blob glow artifacts from App.tsx - Remove gradient text and animate-pulse from AppHeader branding - Remove internal DialogTrigger from SettingsDialog (eliminated duplicate settings button) - Fix all SetupPanel buttons (Start Game, Randomize, Scan, Reset, player toggles) - Fix SolverPanel buttons (Slide In, Cancel, Execute, Go Home, 1-move targets) - Step nav buttons converted to brutalist bordered style - Replace per-segment SVG lines with continuous polyline path overlay + animated marching dashes - Remove glowing cell ring shadows; replace with clean ring-inset highlights - Pushed-out tile preview fully opaque with brutalist border - Replace emoji treasure display with compact text banner across tile bottom - Add TREASURE_SHORT_NAMES and PAWN_COLOR_HEX to constants.ts - Consolidate pawn colors; fix non-standard red-650/red-750 Tailwind stops - Remove home corner R/G/B/Y letter badge from tiles - Slim solver suggestions panel: remove idle arrow-hint banner, shrink heading - Direct Route label only shown for single-turn solutions; multi-turn shows Multi-Turn Route - Go Home button always shows same label; disabled/grayed when pawn is already home - Solver solution cards made more compact (removed verbose pawn-moves text) - Fix duplicate Settings button; AppHeader icon buttons deduplicated via iconBtnCls constant - Remove dead animate-pulse-border, dash-crawl keyframes and shadow-theme-glow utility Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…t path overlay, animated path underline, slower path crawl - Tile dark mode bg: stone-800 -> stone-900 so tiles read dark against the near-black board background - Lock badge: replace rounded-full soft shadow-md with rounded-md border-2 border-stone-950 shadow-[2px_2px_0_0_#000000] matching brutalist language - Path overlay lines: add opacity 0.45/0.70 so treasure name banners beneath stay readable - Path underline polyline: add animate-path-crawl so both lines march together (no more static black + moving color) - Path crawl speed: 0.6s -> 1.8s for a more relaxed pace Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Replace dark: Tailwind prefix (never fired — app uses data-theme, not .dark class) with: - bg-card for standard tile background (--card: #1b1917 dark / #ffffff light) - tile-corridor-fill CSS class in index.css using [data-theme="dark"] selector for SVG corridor fill - Drop redundant dark: variants from corner tile color classes - Grid gap: gap-0.5/xs:gap-1/md:gap-1.5 -> gap-px/xs:gap-0.5/md:gap-1 (tighter spacing, saves ~8px per side on mobile) - Tile DraggableTile sizing: w-[90%] h-[90%] -> w-full h-full (fills cell fully, no wasted inset margin) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…oard AppHeader: - Remove Compass icon button from top-left branding - Remove subtitle line (Web Edition / Play phase / tile count) - Timer extracted as standalone brutalist badge next to step nav; shows ⏸/⏱ with elapsed time - Pawn score pills replaced with brutalist chips: pawn color background, black border + hard shadow, active state elevated - Dividers and gaps tightened; toolbar gaps reduced from gap-2 to gap-1.5 - Removed Compass import; cleaned up unused imports Board: - Cell highlight rings replaced with CSS outline (outline-2/outline-[3px]) — outline paints in overlay layer above box-shadows, fixing rings rendering behind tile drop shadows App.tsx: - Board flex ratio: md:flex-[1.4] lg:flex-[1.5] → md:flex-[1.6] lg:flex-[1.8] - Desktop board max-w: calc(100svh-150px) → calc(100svh-120px) — tiles ~15% larger on desktop Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Board grid (play mode): - Replace grid-cols-9/grid-rows-9 equal columns with custom gridTemplateColumns/Rows: "0.4fr repeat(7, 1fr) 0.4fr" — arrow slots take 0.4fr instead of 1fr, so the 7 tile columns occupy ~89% of the board vs ~78% previously. Tiles are visibly larger in play mode, matching the edit-layout scale. Cell highlight border: - Remove ring/outline classes from cell (both render behind tile box-shadows) - Add a pointer-events-none z-40 overlay div after the tile in DOM order with border-2/border-[3px] classes — paints above box-shadow correctly for isOnHoveredPath, isCustomTarget, isActiveTarget, and isOver states Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…in settings, styled tooltips, hover fix Board: - SVG path viewBox 0 0 9 9 -> 0 0 7.8 7.8; tile centers cx(c)=c+0.9/cy(r)=r+0.9 to match the 0.4fr repeat(7,1fr) 0.4fr grid — path overlay now aligns with tiles AppHeader: - Compass icon button removed; title is now a neo-brutalism-card <a> tag linking to GitHub repo - Timer folded into the active Play Game step button as an inline mono badge (⏸/⏱ elapsed) - 3D View button removed from toolbar (moved to Settings Experimental section) - iconBtnCls hover: changed from hover:bg-stone-100 (white, obscures icon) to hover:bg-stone-200 hover:text-stone-950 — dark background, icon becomes visible dark on light - All native title="" tooltips replaced with styled <Tooltip> components (neo-brutalism-card) - Mute button: removed text-theme-primary tint from Volume2 icon so hover color is consistent SettingsDialog: - Add is3D/onToggle3D props - New "Experimental" section in Preferences tab with 3D Isometric View toggle Tooltip component: - New src/components/ui/tooltip.tsx: group-hover invisible->visible overlay div, app-dialog-panel neo-brutalism-card, supports top/bottom/left/right sides Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Path SVG alignment: - Move SVG out of gapped grid div into tray wrapper as absolute-positioned sibling - Use viewBox="0 0 100 100" preserveAspectRatio="none" with percentage coords - Tile center pct(i) = (i + 0.9) / 7.8 * 100 — eliminates gap math entirely, SVG coords now map exactly to tile centers regardless of gap size - All stroke widths, dash arrays, and marker sizes also expressed in pct units Highlight borders: - Add isPathStart / isPathEnd back to BoardSpaceProps and render loop - rounded-lg -> rounded-2xl to match tile shape - Start tile: border-[3px] border-green-400 - End tile: border-[3px] border-theme-primary - Mid path: border-2 border-theme-primary/60 (subtle, doesn't compete with markers) - Custom target / active target: border-[3px] distinct colors as before Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Path overlay: - Revert viewBox to "0 0 7.8 7.8" with tc(i)=i+0.9 coords — preserveAspectRatio="xMidYMid meet" keeps the SVG square and correctly centered over the grid regardless of 3D padding - strokeDasharray/strokeWidth back to simple literal values matching the keyframe's -0.6 offset - Animation speed: 1.8s -> 0.9s (the 100-unit viewBox made 1.8s look static; 7.8 viewBox needs ~0.9s) Pushed tile: - Move out of the grid (where it sat in a 0.4fr arrow cell and shrank) into the tray wrapper as position:absolute, sized to one tile cell (1/7.8 * 100% of tray) and placed just outside the board edge — matches the tile grid visually at full tile size - Remove now-unused gridRow/gridColumn variables Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… smaller arrows - Revert to grid-cols-9/grid-rows-9 equal columns (removes all fr-fraction math) - SVG path overlay back inside the grid div, viewBox "0 0 9 9", tc(i)=i+1.5 (proven correct) - Pushed tile back to gridRow/gridColumn placement in the 9×9 grid — sits in a proper 1fr cell at full tile size, no clipping - Arrow buttons: max-w-[85%] max-h-[85%] -> max-w-[70%] max-h-[70%] so they read smaller than tiles visually without changing the column fractions - Animation speed: 0.9s (keeps correct pace with 7.8-unit dash cycle in 9-unit viewBox) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
1 participant
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.
Summary
This is the full V2 modernization of Labyrinth Game Solver, accumulated across the
feat/modernization-v2branch. It touches nearly every layer of the app — visual design, component architecture, feature additions, and infrastructure cleanup.Visual Design System
AppHeaderwith brutalist title treatment and 3D settings buttonFeature Additions
BoardScanModal.tsx): capture or upload a photo of a physical board and auto-detect tile types/orientations using the per-tile closeup template atlas (atlas-config.json)MoveHistoryDialog.tsx): visual mini-board snapshots of each past moveuseStopwatch.ts): timer visible during step-by-step navigationWelcomeGuide.tsx): three-step onboarding overlay on first launchArchitecture & Refactor
components/board/,components/panels/,components/modals/,components/ui/main-electron.cjs,preload.cjs,build/)LandingPage,TrophyPanel, save-slot system, andSetupPanel/SolverPanelroot-level files (replaced by/panels/)public/tile-templates/atlas-config.jsonexternalizes tile atlas configuration for easy editinguseLabyrinthStorage.ts); slot system removedw-full), path overlay coordinate fixes, and desktop board scale constraint bug resolvedMobile & Responsive UX
md:); mobile bottom sheet / peek panel gated to phonesTouchSensorfor reliable drag-and-drop on mobileInfra / Docs
docs/ARCHITECTURE.md,CHANGELOG.md,DECISIONS.md,DESIGN_SYSTEM.md,MASTER_PLAN.md,TODO.mdDEVELOPMENT_AND_RELEASES.mdupdated with full release pipeline detailsCLAUDE.mdupdated to match current stack and patternsrelease.yml) updatedTest plan
npm run typecheckpasses with no errorsnpm run testpassesnpm run lintpasses🤖 Generated with Claude Code