Skip to content

feat(web): draw the tyre gauge as the kart from behind - #358

Merged
khiet merged 2 commits into
mainfrom
feat/352-tyre-gauge-from-behind
Nov 10, 2026
Merged

khiet merged 2 commits into
mainfrom
feat/352-tyre-gauge-from-behind

Conversation

@khiet

@khiet khiet commented Nov 10, 2026 •

Copy link
Copy Markdown
Owner

Summary

The Instrument panel's tyre gauge now draws the own kart from behind, as the chase camera sees it, instead of from above (ADR 0105, take 3 of docs/mockups/coin-and-tyre-gauge-variations.html).

 <div data-instrument="tyre" data-tyre-wear="good|warn|bad">
-  kartFromAbove(livery)        # 60x92: four tyres, wings front and back
+  kartFromBehind(livery)       # 72x58: rear wing, two rears, tub, halo, hair
     tyreBlock x2               # was tyreFromAbove x4; keeps data-tyre-corner
   <span data-tyre-percent>100%</span>
  • Only the two rears carry data-tyre-corner, so they take the band's tone. Tyre life is one number, so hiding the fronts loses nothing.
  • The percentage and data-tyre-wear are unchanged. The gauge SVG widens from --hud * 3.6 to 4.2, as in the mockup.
  • docs/style-guide.html now draws the kart from behind and shows the gauge in all three bands. The from-above rule and tyre life in docs/GLOSSARY.md now say "from behind".

Evidence

  • Before: the gauge drew four data-tyre-corner tyres around a kart seen from above.
    After: the panel was staged headless at tyre life 100, 45 and 12 for liveries 1, 4 and 6. Bands read good/warn/bad, both rears filled green/yellow/red, and each livery's hair colour was drawn.
it "draws the own kart from behind, so only its two rear tyres take the band's tone"
  count [data-tyre-corner] in the tyre gauge == 2    # was 4: red, now green
it "paints slot N's ... tyre gauge, not slot M's"
  gauge fills include primary, secondary, accent and the driver's hair colour

pnpm test: 1195 passed. Biome and typecheck are clean.

Screenshots:

Gauge: good, warn, bad (livery 1), then liveries 4 and 6 Style guide entry in all three bands

Merge Danger

Door: two-way

A drawing swap. Reverting the commit restores the kart from above.

Blast Radius: cosmetic

Only the tyre gauge icon and its width in the speed cluster change. The gauge is 0.6 --hud wider, which nudges the BOX, STOP and RAIN plates that sit off the cluster's right edge.

Closes #352

The gauge now shows the own kart as the chase camera sees it: rear wing
across the top, the two rear tyres toned by the wear band, the driver's
hair inside the halo. kartFromAbove is retired; its tyre block stays as
tyreBlock. The style guide shows the gauge in all three bands.

Closes #352
@khiet khiet linked an issue Nov 10, 2026 that may be closed by this pull request
@khiet
khiet marked this pull request as ready for review November 10, 2026 10:26
@khiet
khiet merged commit b12fb2b into main Nov 10, 2026
4 checks passed
@khiet
khiet deleted the feat/352-tyre-gauge-from-behind branch November 10, 2026 10:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Draw the tyre gauge as the kart from behind

1 participant