Render parking spots as a garage scene, not squares (#17) - #18
Open
nice-jan-p wants to merge 5 commits into
Open
Render parking spots as a garage scene, not squares (#17)#18nice-jan-p wants to merge 5 commits into
nice-jan-p wants to merge 5 commits into
Conversation
Collaborator
|
Today view does not work. Also an error is thrown after spot click. |
nice-jan-p
marked this pull request as ready for review
September 1, 2026 05:26
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
Clicking a free bay or your own car no longer acts immediately. It opens an inline confirm editor anchored under the bay — a pre-filled name input with Reserve for free bays (so reserving for someone else works, as in the grid) and Leave for your own car, both dismissable with ×. The editor state rides the same editingSpot signal the grid uses. The fallback strip gets the same two-step flow; other people's bays stay non-interactive there.
nice-jan-p
force-pushed
the
issue-17-parking-spots-scene
branch
from
September 1, 2026 05:35
812a8e1 to
10b8e03
Compare
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
2 participants
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