alex/pony
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: two real bugs found via live Playwright QA — decoration z-index and color accuracy

Browse Source 
Did a real browser QA pass against the deployed site (Playwright, not just
isolated HTML harnesses) and found two actual bugs the harness-based checks
couldn't catch:

- FloatingBg/Sparkles are `position: fixed` full-viewport layers with
  z-index: 1, while page content like .pony-card only has z-index: auto.
  Per CSS stacking rules a positioned z-index:1 sibling paints above
  z-index:auto content regardless of DOM order, so the floating ponies were
  rendering on top of / poking through the theme-select cards. Changed both
  to z-index: -1 so they reliably sit behind all normal content.

- COLOR_OPTIONS' hue-rotate values were tuned against the wrong baseline hue:
  base.png's actual body hue is ~0deg (red), but e.g. "Blå" (blue) used
  hue-rotate(150deg), landing on ~150deg = green, and "Lilla" (purple) used
  220deg, landing on ~220deg = blue. Recalibrated all rotations against the
  real measured base hue so picking a color now actually produces that
  color on the body. Verified before/after with a side-by-side render of
  all 8 colors, then confirmed live against the deployed site (clicking
  "Kropsfarve: Blå" now visibly turns the body blue, not green).

67/67 tests still passing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
alexpolo
2026-08-09 13:44:23 +00:00
parent e745e5f53c
commit 9f8bf98a94
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pony-frontend/src/App.css
View File

@@ -1436,7 +1436,7 @@ body {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
z-index: -1;
}
.sparkle {
@@ -1449,7 +1449,7 @@ body {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
z-index: -1;
}
.floating-pony {

19
pony-frontend/src/pixelPony/spriteData.js
View File

@@ -59,14 +59,21 @@ export const WING_STYLES = [
{ id: 'spread', label: 'Udspredt', file: '/sprites/pony/wing-spread.png' },
];
// hue-rotate degrees are calibrated against base.png's own hue (~0deg, red)
// so the *body* color actually matches its label (previously "Blå" rendered
// green and "Lilla" rendered blue, since the rotations were tuned for a
// baseline that didn't match the real sprite). Mane/tail/horn sit at a
// different baseline hue (~30deg, orange), so the same rotation lands on a
// nearby-but-not-identical hue there -- an accepted tradeoff of sharing one
// palette across every layer.
export const COLOR_OPTIONS = [
{ id: 'original', label: 'Original', filter: 'none' },
{ id: 'pink', label: 'Lyserød', filter: 'hue-rotate(300deg) saturate(1.3)' },
{ id: 'purple', label: 'Lilla', filter: 'hue-rotate(220deg) saturate(1.4)' },
{ id: 'blue', label: 'Blå', filter: 'hue-rotate(150deg) saturate(1.5)' },
{ id: 'teal', label: 'Turkis', filter: 'hue-rotate(120deg) saturate(1.4)' },
{ id: 'green', label: 'Grøn', filter: 'hue-rotate(80deg) saturate(1.3)' },
{ id: 'yellow', label: 'Gul', filter: 'hue-rotate(-30deg) saturate(1.5) brightness(1.15)' },
{ id: 'pink', label: 'Lyserød', filter: 'hue-rotate(330deg) saturate(1.3)' },
{ id: 'purple', label: 'Lilla', filter: 'hue-rotate(275deg) saturate(1.4)' },
{ id: 'blue', label: 'Blå', filter: 'hue-rotate(215deg) saturate(1.5)' },
{ id: 'teal', label: 'Turkis', filter: 'hue-rotate(180deg) saturate(1.4)' },
{ id: 'green', label: 'Grøn', filter: 'hue-rotate(125deg) saturate(1.3)' },
{ id: 'yellow', label: 'Gul', filter: 'hue-rotate(50deg) saturate(1.5) brightness(1.15)' },
{ id: 'white', label: 'Hvid', filter: 'saturate(0.15) brightness(1.7)' },
{ id: 'black', label: 'Sort', filter: 'brightness(0.35)' },
];