Fix static build missing 3D subway assets#36
Conversation
✅ Deploy Preview for glittering-pony-d34e1a ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdds new static assets to the build list and implements a non‑WebGL fallback path for the 3D hero: 3d-engine now probes WebGL, can activate a static fallback UI, and exposes fallback state; style.css adds visual rules for the fallback mode. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant DOM as Document
participant Scene as JulesSubwayScene
participant Renderer as WebGLRenderer
participant UI as Page UI (HUD / Particles)
Browser->>DOM: DOMContentLoaded
DOM->>Scene: new JulesSubwayScene().init()
Scene->>Scene: hasWebGLSupport()
alt WebGL available
Scene->>Renderer: setupRenderer() (try)
Renderer-->>Scene: success (true)
Scene->>Scene: createScene(), loadAssets()
Scene-->>UI: window.JulesAI3D.fallbackActive = false
UI->>UI: init HeroParticleField
else WebGL missing or renderer failed
Scene->>Scene: activateFallback(reason)
Scene-->>UI: window.JulesAI3D.fallbackActive = true
UI->>UI: apply .hero-visual-stage--fallback styles
UI->>UI: skip HeroParticleField init
end
Scene->>Browser: ready / render loop (if active)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
3d-engine.js (1)
178-208: WebGL detection is thorough; consider relaxing performance requirements.The
hasWebGLSupport()method comprehensively probes for WebGL availability and properly cleans up test contexts. However, line 192 usesfailIfMajorPerformanceCaveat: true, which will fail on systems where the browser detects significant performance degradation compared to software rendering.While this ensures optimal performance, it might exclude users who could still benefit from a functional (if slower) 3D experience. Consider whether this restriction aligns with your accessibility and user experience goals—relaxing this flag could expand compatibility.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
3d-engine.js(5 hunks)style.css(1 hunks)
🔇 Additional comments (5)
style.css (1)
819-855: Fallback styling implementation looks solid.The new
.hero-visual-stage--fallbackrules provide a graceful degradation path when WebGL is unavailable. The approach correctly:
- Removes 3D transforms and uses a static gradient + image background
- Hides the canvas and particle elements with
display: none !important- Adjusts text colors for improved contrast against the darker fallback background
- Suppresses decorative pseudo-elements that rely on 3D effects
The scoping ensures these styles only apply when the fallback class is active, preserving the primary 3D experience when available.
3d-engine.js (4)
49-49: Fallback detection and initialization flow is well-structured.The implementation correctly identifies multiple failure scenarios:
- Missing canvas element
- Unavailable Three.js library
- Unsupported WebGL
Each failure path calls
activateFallback()and returns early to prevent attempting 3D initialization. ThesetupRenderer()return value is properly checked before proceeding with scene setup.Also applies to: 59-67, 92-117
156-176: Proper error handling for renderer initialization.Wrapping the
WebGLRenderercreation in try/catch ensures that initialization failures are caught and handled gracefully. The method returns a boolean to signal success/failure, allowing the caller to make informed decisions about proceeding with scene setup.
210-238: Fallback activation and UI updates are well-implemented.The
activateFallback()method properly:
- Guards against duplicate activation
- Adds the CSS fallback class to enable static styling
- Marks the canvas as
aria-hidden="true"for accessibility- Updates UI text (badge, subtitle, title) to communicate the fallback state to users
The inclusion of a
reasonparameter provides useful context for the fallback, which is reflected in the subtitle text.
746-780: DOMContentLoaded integration correctly propagates fallback state.The initialization flow properly:
- Detects existing fallback state from the DOM
- Updates fallback state after scene initialization (since
init()may activate fallback)- Conditionally creates the particle field only when fallback is inactive
- Exposes the fallback state on the public
window.JulesAI3DAPIThis ensures that the particle field is not created when 3D rendering is unavailable, preventing unnecessary DOM manipulation.
1 participant
Summary
Testing
Codex Task
Summary by CodeRabbit
New Features
Style
Chores