Mystery Map Maker
A playful micro-app for creating "treasure maps" with draggable landmarks, doodle-style paths, and hidden clues revealed via click-to-flip note cards. Users can place icons (caves, towers, forests), draw routes with a simple pen tool, and attach short riddle hints to each landmark, then export the map as a PNG and save/load drafts via localStorage. The UI is split into clear panels (canvas, toolbar, landmark/clue editor, and map gallery) so multiple agents can build features in parallel without overlap.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react class-variance-authority tailwind-merge clsx && npx shadcn@latest init
by system
Configure Tailwind content paths and add @tailwind directives in src/index.css.
by system
Implement App.tsx with a 4-panel responsive grid (toolbar, canvas, editor, gallery).
by system
Create src/types/map.ts with Landmark, PathStroke, MapDraft, and GalleryItem types.
by system
Add src/state/useMapStore.ts implementing reducer-style state for landmarks, strokes, selection, and drafts.
by system
Create src/data/landmarkCatalog.ts exporting icon metadata (cave, tower, forest, etc.) using lucide-react.
by system
Build src/components/ToolbarPanel.tsx with shadcn buttons/toggles for Select, Pen, and Add Landmark.
by system
Wire toolbar tool selection to global state (select/pen/add) without implementing behaviors.
by system
Create src/components/MapCanvasPanel.tsx containing the canvas stage wrapper and size handling.
by system
Implement src/components/LandmarkNode.tsx to render a positioned landmark icon + label from state.
by system
Implement click-to-place landmark behavior on the canvas when tool mode is Add.
by system
Implement click-to-select and deselect-on-empty-canvas behavior for landmarks.
by system
Add pointer-based dragging for LandmarkNode with snap-to-canvas bounds clamping.
by system
Add a Delete action (toolbar button or keypress) to remove the currently selected landmark.
by system
Implement stroke creation data updates (points array) in state when pen tool is active.
by system
Create src/components/StrokeLayer.tsx to render doodle-style strokes as SVG paths.
by system
Implement pointer down/move/up on canvas to draw strokes and commit them to state.
by system
Add simple UI controls in ToolbarPanel for stroke color and width.
by system
Build src/components/LandmarkEditorPanel.tsx showing selected landmark fields (name + riddle hint).
by system
Wire editor inputs to update selected landmark name and hint in state.
by system
Create src/components/ClueFlipCard.tsx that flips on click between landmark summary and riddle hint.
by system
Show ClueFlipCard near a landmark when it is clicked/selected on the canvas.
by system
Build src/components/MapGalleryPanel.tsx listing saved drafts with thumbnail placeholder and actions.
by system
Implement src/state/persistence.ts to save/load drafts and active draft id via localStorage.
by system
Add a Save button that writes the current map state into localStorage drafts.
by system
Implement selecting a gallery item to load its saved map state into the editor.
by system
Add gallery actions to duplicate a draft and delete a draft from localStorage.
by system
Create src/utils/exportPng.ts to export the map canvas DOM/SVG to a downloadable PNG.
by system
Add an Export PNG button in ToolbarPanel that calls exportPng for the current map.
by system