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"; } 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 /* 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. */ 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; #cdLeague { grid-area: league; align-self: end; font: 700 10px/1.5 Silkscreen, monospace;
text-decoration: none; letter-spacing: 1.5px; } text-decoration: none; letter-spacing: 1.5px; }
#cdLeague i { display: block; font-style: normal; font-size: 9px; opacity: 0.85; } #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 img { height: 46px; image-rendering: pixelated; }
#cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px; #cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px;
text-decoration: none; white-space: nowrap; } 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 .badge.dark u { color: #3f4d45; }
#cdBadges img.dark { filter: grayscale(1) brightness(0.3); } /* ...and the halo itself is GONE from this row (Oliver): the glints do that job now, and a
/* earned badges BREATHE — a subtle gold halo, CSS-only (the menu parks the game loop, CSS permanent breathing glow under an occasional flash was two effects saying the same thing. */
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; }
@keyframes badgeGlow { @keyframes badgeGlow {
0%, 100% { filter: drop-shadow(0 0 2px rgba(232, 178, 58, 0.25)); } 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)); } } 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> </div>
</div> </div>
<script type="module" src="src/main.js?v=344"></script> <script type="module" src="src/main.js?v=345"></script>
</body> </body>
</html> </html>