feat: HexagonLevelButton gradient support & theme-aware demos #13
Conversation
…suals - Add fillBottom color option for vertical gradient effect - Implement canvas texture-based gradient fill - Enhance 3D bevel effects with better highlight/shadow - Update hexagon color schemes with more vibrant palettes - Export darkenColor utility function Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Integrate with Docusaurus useColorMode hook - Pass theme parameter to iframe demos via URL - Force iframe reload on theme change for proper sync - SSR-safe URL construction with fallback Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Implement theme detection from parent Docusaurus, URL params, and system preference - Add theme observer for real-time theme switching - Update demos to use graphics() abstraction instead of direct PIXI - Apply theme-aware color palettes across all UI demos Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Document build commands and key directories - Explain Laravel-inspired architecture patterns - Add graphics abstraction and rendering API guidelines - Include testing and code style conventions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
Issue Found
File: docs-site/static/demos/ui-panel-variants.html:191
Issue: Direct PIXI API usage instead of graphics abstraction
The code is using PIXI.Texture.from() directly instead of using the graphics factory's createTexture() method:
const gradPanel = gfx.createSprite(PIXI.Texture.from(gradientCanvas));Why this matters:
According to CLAUDE.md, the framework uses a graphics abstraction layer to support both Pixi.js and Three.js renderers. This demo file explicitly states in its header comments (line 24) that it showcases "graphics() abstraction instead of direct PIXI usage".
The IGraphicsFactory interface provides a createTexture() method that should be used instead.
Suggested fix:
const gradPanel = gfx.createSprite(gfx.createTexture(gradientCanvas));This change completes the migration from direct PIXI usage that was started when replacing new PIXI.Sprite() with gfx.createSprite().
Summary: 1 CLAUDE.md compliance issue found. All other changes look good - no bugs detected.
|
|
||
| const gradPanel = new PIXI.Sprite(PIXI.Texture.from(gradientCanvas)); | ||
| const gradPanel = gfx.createSprite(PIXI.Texture.from(gradientCanvas)); | ||
| gradPanel.x = 20; |
There was a problem hiding this comment.
Use graphics abstraction instead of direct PIXI API
This should use gfx.createTexture(gradientCanvas) instead of PIXI.Texture.from(gradientCanvas) to follow the framework's graphics abstraction layer.
According to CLAUDE.md, the framework abstracts over Pixi.js and Three.js. The IGraphicsFactory provides a createTexture() method for this purpose.
Suggested change:
| gradPanel.x = 20; | |
| const gradPanel = gfx.createSprite(gfx.createTexture(gradientCanvas)); |
Replace direct PIXI.Texture.from() calls with gfx.createTexture() to follow the framework's graphics abstraction layer. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Silence ESLint empty catch block warning by capturing the error variable with underscore prefix to indicate intentional non-use. The fallback to solid color fill is expected behavior when texture fill is not supported. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
GameTooltip: - Replace if-else chain with positionMap lookup in getTailInfo() - Simplify toggle() to single ternary expression - Consolidate switch cases in getTailOffset() HexagonLevelButton: - Remove redundant colors variable alias - Simplify border drawing logic (remove duplicated drawHexagon call) - Remove unused _color parameter from drawHexagonHighlight() - Extract duplicated pointer event logic Net reduction: 31 lines. No functionality changes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
| width: 100, | ||
| height: 45, | ||
| fontSize: 16, | ||
| colorScheme: GameStyleColors.BUTTON_GREEN |
There was a problem hiding this comment.
Bug: Undefined constant reference
The constant GameStyleColors.BUTTON_GREEN does not exist. The correct constant name is GameStyleColors.GREEN_BUTTON.
This will cause a runtime error when the demo page loads. All other files in the codebase use GREEN_BUTTON:
src/ui/themes/GameStyleUITheme.ts:130- constant definitionsrc/ui/screens/ResultScreen.ts:381- usage example
| colorScheme: GameStyleColors.BUTTON_GREEN | |
| colorScheme: GameStyleColors.GREEN_BUTTON |
Changed BUTTON_GREEN to GREEN_BUTTON to match the actual constant exported by GameStyleColors in the framework. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Summary
fillBottomcolor option, improved 3D bevel effects, and updated color schemes with more vibrant palettesuseColorModehook for seamless theme switchingChanges
UI Components
HexagonLevelButton.ts: Canvas texture-based gradient fill, enhanced highlight/shadow effectsGameStyleUITheme.ts: NewfillBottomproperty for all hexagon color schemes,darkenColorutility exportDocumentation Site
LiveDemo.tsx: Theme parameter injection to iframes, SSR-safe URL handlingBuild
Test plan
🤖 Generated with Claude Code