Unearned shields go dead, and the halo leaves the honours row

Two bugs in one rule. The grey sat on the IMAGE while the breathing halo was an
animation on the same image — and a filter in a keyframe outranks a static one,
so the glow was painting the greyscale away. Worse, the selector that handed out
that halo still read `img:not(.dark)` from when the class hung on the image; the
class moved to the cell in the inscription pass, so every shield on the row was
matching it, lit or not. The grey lives on the cell now, where nothing animates.

And the halo is gone from the row entirely (Oliver): the glints do that job, and
a permanent breathing glow under an occasional flash was two effects saying the
same thing. The league panel's crest keeps its own.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-31 16:00:49 +02:00
1 parent 708ecbb858
commit 25ac21b852
1 file changed
+11 -8
+11 -8
View File
@@ -355,7 +355,8 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
grid-template-areas: "crest league" "crest level" "bar bar" "xp xp" "career career"; }
/* THE CREST STANDS BESIDE THE LEAGUE (2026-08-31, Oliver: on its own row it pushed the text
down), so the two things that say WHERE YOU ARE share a line instead of stacking. */
#cdBadge { grid-area: crest; width: 56px; image-rendering: pixelated; align-self: center; }
#cdBadge { grid-area: crest; width: 56px; image-rendering: pixelated; align-self: center;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
#cdLeague { grid-area: league; align-self: end; font: 700 10px/1.5 Silkscreen, monospace;
text-decoration: none; letter-spacing: 1.5px; }
#cdLeague i { display: block; font-style: normal; font-size: 9px; opacity: 0.85; }
@@ -387,13 +388,15 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
#cdBadges img { height: 46px; image-rendering: pixelated; }
#cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px;
text-decoration: none; white-space: nowrap; }
#cdBadges .badge.dark img { filter: grayscale(1) brightness(0.3); }
/* AN UNEARNED SLOT IS DEAD (2026-08-31): the grey sits on the CELL, not the image, so nothing
can animate over it — the breathing halo used to, because `filter` in a keyframe outranks a
static one, and a stale `img:not(.dark)` selector (from when the class hung on the image) was
handing that halo to every shield on the row, lit or not. That is why the dark slots glowed
in colour instead of standing grey and still. */
#cdBadges .badge.dark { filter: grayscale(1) brightness(0.38); }
#cdBadges .badge.dark u { color: #3f4d45; }
#cdBadges img.dark { filter: grayscale(1) brightness(0.3); }
/* earned badges BREATHE — a subtle gold halo, CSS-only (the menu parks the game loop, CSS
animations do not care). The dark slots stay dead, which is the point of them. */
#cdBadges .badge:not(.dark) img, #cdBadges img:not(.dark), #cdBadge {
animation: badgeGlow 2.6s ease-in-out infinite; }
/* ...and the halo itself is GONE from this row (Oliver): the glints do that job now, and a
permanent breathing glow under an occasional flash was two effects saying the same thing. */
@keyframes badgeGlow {
0%, 100% { filter: drop-shadow(0 0 2px rgba(232, 178, 58, 0.25)); }
50% { filter: drop-shadow(0 0 7px rgba(232, 178, 58, 0.75)); } }
@@ -1077,6 +1080,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
</div>
</div>
</div>
<script type="module" src="src/main.js?v=344"></script>
<script type="module" src="src/main.js?v=345"></script>
</body>
</html>