wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The embers actually show: off the shield's top edge, not across it

Browse Source 
They were running the whole time (0.85 opacity, measured) — they were just
flying ACROSS the artwork, where a 3px gold speck disappears into a pixel
shield. They lift off the top edge into the dark above it now, seven per badge
on a shorter delay window: spread over 2.6s the shield stood empty half the
time, which is what "ich sehe kein glimmen" was looking at.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-31 15:54:31 +02:00
1 parent 80eb60d181
commit 87833db095
2 files changed
+14 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+8 -6
View File
@@ -373,15 +373,17 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
align-items: center; gap: 4px; }
/* ...and an earned shield SMOULDERS: two-pixel embers drifting off it, each on its own delay and
lane (main.embers). Pure CSS — the menu parks the game loop and this has no business waking it. */
#cdBadges .badge em { position: absolute; bottom: 22px; width: 3px; height: 3px; background: #f2cf6a;
box-shadow: 0 0 4px 1px rgba(232,178,58,0.55);
/* they lift off the shield's TOP EDGE into the dark above it — at the old bottom:22px the whole
flight happened ACROSS the artwork, where a 3px gold speck is invisible (Oliver saw nothing) */
#cdBadges .badge em { position: absolute; bottom: 52px; width: 3px; height: 3px; background: #fff2c9;
box-shadow: 0 0 6px 2px rgba(232,178,58,0.75);
opacity: 0; pointer-events: none; animation-name: ember;
animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes ember {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
18% { opacity: 0.85; }
60% { transform: translate(2px, -16px) scale(0.8); opacity: 0.5; }
100% { transform: translate(-1px, -30px) scale(0.4); opacity: 0; } }
0% { transform: translate(0, 6px) scale(0.6); opacity: 0; }
20% { opacity: 1; }
60% { transform: translate(3px, -10px) scale(1); opacity: 0.75; }
100% { transform: translate(-2px, -32px) scale(0.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #cdBadges .badge em { display: none; } }
#cdBadges img { height: 46px; image-rendering: pixelated; }
#cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px;
src/main.js
+6 -4
View File
@@ -602,10 +602,12 @@ const countUp = (write, target, dur = 700) => {
// leichtes feuer"). CSS keyframes, not a loop: the menu deliberately parks the game loop, and six
// two-pixel sparks per badge have no business waking it. The randomness is baked into each spark's
// own delay, duration and lane at build time, so no two shields burn in step.
const embers = won => !won ? '' : Array.from({ length: 5 }, () =>
`<em style="left:${(14 + Math.random() * 62).toFixed(0)}%;` +
`animation-delay:${(Math.random() * 2.6).toFixed(2)}s;` +
`animation-duration:${(1.9 + Math.random() * 1.5).toFixed(2)}s"></em>`).join('');
const embers = won => !won ? '' : Array.from({ length: 7 }, () =>
`<em style="left:${(16 + Math.random() * 58).toFixed(0)}%;` +
// a SHORT delay window: spread over 2.6s the shield was empty half the time, which is why the
// first cut read as nothing happening at all
`animation-delay:${(Math.random() * 1.7).toFixed(2)}s;` +
`animation-duration:${(1.7 + Math.random() * 1.1).toFixed(2)}s"></em>`).join('');
function buildCard() {
for (const t of cardTimers) clearTimeout(t);