Render parking spots as a garage scene, not squares (#17) - #18
Draft
nice-jan-p wants to merge 1 commit into
Draft
Conversation
Replace the CSS-grid of square spot-cards with a cartoon-garage scene: cars parked in the painted bays of a fixed background illustration, coloured per occupant, with name chips and dashed 'Park here' markers on free bays. Interaction is self-service (click a free bay to park yourself, click your own car to leave). - new ParkingScene component (same prop contract as the old SpotsGrid) - pure, unit-tested scene-data helpers (bay layout map, name parsing, deterministic per-name hue, inlined car SVG <defs>) - background art + car SVGs added as assets - unmapped spots fall back to a compact card strip so none are hidden
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description: Render parking spots as a cartoon-garage scene instead of square cards
Possible impact: Today view, day-detail view, spot reserve/release UX
Closes #17.
Summary
Replaces the CSS grid of square
spot-cards with a garage scene matching the uploaded prototype: cars parked in the painted bays of a fixed background illustration, coloured per occupant, with name chips and dashed "Park here" markers on free bays. Both floors (-1,-2) render from live SpacetimeDB data — bays are matched by parsing the"<floor>/<bay>"spot name (e.g.-1/070,-1/063 ♿️).Interaction is self-service, matching the mockup: click a free bay to park the signed-in user, click your own car to leave. (This drops the previous ability to reserve under an arbitrary typed name and to clear anyone else's reservation — easy to re-add behind an admin affordance if needed.)
Changes
src/components/parking-scene/parking-scene.tsx— keeps the exact prop contract of the oldSpotsGrid, so the two routes change by one import line.src/components/parking-scene/scene-data.ts— pure, unit-tested helpers: bay coordinate map (from the prototype), spot-name parsing, deterministic per-name hue (signed-in user fixed to blue), initials/short-name, and the inlined car<defs>(built from?rawSVG imports → SSR-safe, no hydration mismatch, no runtime fetch).scene-data.test.ts— covers parsing, hue, initials, short name, and box geometry.public/parking-bg.png,car_front.svg,car_side.svg.spots-grid.tsx; kept its.spot-cardCSS for the fallback strip (any spot whose bay isn't in the art is still shown/bookable below the scene).src/global.css— added the scene styles, mapping the prototype's Lyra tokens to the app's existing tokens.Test plan
npm run build.types(tsc),npm run lint,npm run fmt.checknpm test— 70 tests pass (incl. new scene-data suite)npm run buildsucceeds (client + SSR).env) — reserve/release, real-time updates, conflict banner.Note: the car SVGs are inlined (~750 KB) into the scene chunk; it is lazy-loaded and gzip-compressed by the fastify server. SVG minification is a sensible follow-up.
🤖 Built with Claude Code