Restyle component circles: gradient fill, drop shadow, tier-3 pulse#100
Merged
Restyle component circles: gradient fill, drop shadow, tier-3 pulse#100
Conversation
- Each component body gets a radial-gradient highlight overlay (top-left lit) on top of the existing base color, plus a soft ctx.shadowBlur drop shadow. save/restore isolates the shadow state so it does not bleed into the stroke, label, or tier badge drawn on the same component. - Tier-3 components now breathe: the surrounding ring alpha (0.18..0.40) and radius (+7..+11) animate on a ~0.6Hz sine. Tier-2 keeps the existing static ring. A small rAF loop (ensurePulseLoop) drives redraws only while any tier-3 component is on-screen AND the sim is running; it self-terminates otherwise so paused / idle runs cost nothing. - IS_E2E skips the pulse entirely and pins the phase to 0.5, keeping snapshot timings deterministic. No gameplay change. Health ring, down indicator, selection glow, type label, and tier badge render identically to before.
- main.ts: drop the IS_E2E early-return in ensurePulseLoop so the rAF loop actually runs in headless runs (the sine phase was already pinned to 0.5 in draw() so snapshot timing stays deterministic). Expose a small window.__PULSE__ probe under IS_E2E with an active getter. - tests/e2e/canvas-restyle.spec.ts: place a UI component, force it to tier 3 via __SIM__, start the sim, and assert the pulse loop is active and a gold-ish pixel is painted within 60 device px of the component centre. Click pause and assert the loop terminates within the timeout.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
app-survival-android | 0fefe90 | Commit Preview URL Branch Preview URL |
Apr 22 2026, 11:57 PM |
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.
What
Each component body on the canvas now has:
ctx.shadowBlurdrop shadow under the base fill,Tier-2 keeps its existing static ring. Health ring, down indicator, selection glow, type label, and tier badge are untouched, so the information density a returning player relies on is preserved.
Why
Flat circles read clearly but flatly. The gradient + shadow give each node a tangible "object" feel that makes the graph easier to scan for newcomers, while staying restrained enough not to distract senior players who are tracking health + tier at a glance.
How
save()set shadow, fill base color,restore(), fill gradient overlay, stroke border. The save/restore keeps the shadow from bleeding into the stroke/label drawn next.ensurePulseLoop()rAF loop drives redraws only while any tier-3 component is on screen ANDsim.running. It self-terminates otherwise, so paused / idle runs cost nothing.IS_E2Eso snapshots stay deterministic; the loop itself now runs in E2E so the new visual-smoke spec can probe it.No gameplay change. Not localized (canvas only).
Test plan
npm run test:unit(143/143 pass)npm run test:e2e:ci(26/26 pass on desktop + mobile projects)npm run buildclean; entry grows ~0.3 KB gziptests/e2e/canvas-restyle.spec.ts:__SIM__, starts the sim;window.__PULSE__.activeflips to true within one frame__PULSE__.activeback to false within the timeout