Skyline Stampede
A tiny, client-side city-builder where you drag-and-drop “building stamps” onto a grid to create a skyline, scoring points for simple adjacency combos (e.g., parks next to homes, offices near transit, factories away from parks). The app includes a limited daily challenge seed (stored in localStorage) so everyone gets the same puzzle layout, plus a free-build sandbox with undo/redo and an exportable PNG snapshot of your skyline. Components are cleanly separated into a grid editor, stamp palette, scoring/rules panel, challenge selector, and a compact history/timeline viewer.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react html-to-image && npx shadcn@latest init -d
by system
Configure tailwind content paths and add Tailwind directives to src/index.css.
by system
Create src/App.tsx with a responsive two-column layout for grid and side panels.
by system
Add src/lib/types.ts defining StampType, Cell, GridState, Mode, and HistoryEntry types.
by system
Add src/lib/stamps.ts exporting available building stamps with ids, names, icons, and scores.
by system
Add src/lib/seed.ts implementing deterministic RNG from a string/number seed.
by system
Add src/lib/daily.ts to compute today’s seed and persist it in localStorage.
by system
Add src/lib/grid.ts with functions to create/reset a grid and place/remove stamps immutably.
by system
Add src/lib/scoring.ts to compute total score plus per-rule breakdown from a grid.
by system
Create src/state/useSkylineStore.ts as a React hook managing mode, seed, grid, and selection.
by system
Extend src/state/useSkylineStore.ts to track past/future stacks and expose undo/redo actions.
by system
Add src/hooks/useHotkeys.ts for Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z binding to undo/redo.
by system
Create src/components/StampPalette.tsx showing selectable stamp buttons in a compact grid.
by system
Add src/lib/dnd.ts defining a consistent drag data format for stamps.
by system
Create src/components/GridEditor.tsx rendering the grid and exposing cell-level events.
by system
Create src/components/GridCell.tsx to render one cell with stamp icon and hover/active states.
by system
Implement HTML5 drag/drop in src/components/GridEditor.tsx to place selected stamp on drop.
by system
Add click-to-place behavior in src/components/GridEditor.tsx using the currently selected stamp.
by system
Create src/components/ToolBar.tsx with Select/Erase toggles that affect grid interactions.
by system
Add contextmenu handling in src/components/GridEditor.tsx to erase a cell without switching tools.
by system
Create src/components/RulesPanel.tsx listing adjacency rules and showing brief explanations.
by system
Create src/components/ScorePanel.tsx showing total score and per-rule contributions from scoring.ts.
by system
Create src/components/ChallengeSelector.tsx to switch between Daily Challenge and Sandbox modes.
by system
Wire src/components/ChallengeSelector.tsx to load today’s seeded layout and lock seed for the day.
by system
Add a “New Sandbox” action in src/components/ChallengeSelector.tsx that resets to an empty grid.
by system
Add src/lib/persist.ts and wire it in useSkylineStore to save/load mode, seed, and grid to localStorage.
by system
Create src/components/HistoryTimeline.tsx showing recent actions with clickable jump-to state.
by system
Create src/components/ExportSnapshotButton.tsx to export the grid area as a PNG using html-to-image.
by system
Update src/components/GridEditor.tsx to expose a stable ref/container for snapshot exporting.
by system
Replace basic controls with shadcn/ui components (Button, Tabs, Card, Tooltip) in existing files.
by system