Myth Map Maker
Create a tiny interactive fantasy world map made of draggable “region” cards (forest, ruins, lake, city) on a grid, each with a name, short lore blurb, and a few tags. The app generates random prompts for new regions, lets users link regions with labeled connections (trade route, rivalry, mystery), and exports the map as a shareable JSON file or a single-image snapshot. Everything runs client-side with localStorage persistence, and the UI is split into clear components: canvas/grid, region editor, connections panel, prompt generator, and import/export modal.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react && npx shadcn@latest init
by system
Configure Tailwind + @tailwindcss/vite and add Tailwind directives to src/index.css.
by system
Install core UI components (button, input, textarea, badge, card, dialog, sheet, select, tabs, separator, toast) via shadcn.
by system
Create src/types/map.ts with Region, Connection, MapState, Tag, and Prompt types.
by system
Create src/lib/seed.ts that exports a small default MapState with a few regions and one connection.
by system
Create src/lib/storage.ts to load/save MapState with versioning and safe JSON parsing.
by system
Create src/hooks/useMapState.ts to manage MapState updates and persist to localStorage.
by system
Create src/lib/prompts.ts to generate random region prompts (type, name stub, lore hook, tags).
by system
Create src/components/MapCanvas.tsx rendering a scrollable grid background and region cards overlay.
by system
Create src/components/RegionCard.tsx to display region name/type/tags and selected styling.
by system
Implement pointer-based dragging in RegionCard.tsx that updates region grid position on drop.
by system
Add click-to-select behavior in MapCanvas.tsx and expose selectedRegionId to parents.
by system
Create src/components/ConnectionLayer.tsx to draw SVG lines between region positions with labels.
by system
Add click-to-select connection support in ConnectionLayer.tsx using simple bounding-box proximity.
by system
Create src/components/RegionEditor.tsx to edit selected region name, lore, and type.
by system
Create src/components/TagInput.tsx to add/remove tags for the selected region.
by system
Create src/components/AddRegionPanel.tsx to create a new region from a generated prompt.
by system
Create src/components/PromptGenerator.tsx showing a prompt and a regenerate button.
by system
Create src/components/ConnectionsPanel.tsx listing connections and providing create/edit/delete controls.
by system
Implement a two-region selection + label input flow in ConnectionsPanel.tsx to add a connection.
by system
Add inline editing for connection label/type (trade route, rivalry, mystery) in ConnectionsPanel.tsx.
by system
Add a delete button in RegionEditor.tsx that removes the region and any related connections.
by system
Add small immutable update helpers in src/lib/reducers.ts to minimize accidental state mutation.
by system
Create src/components/ImportExportDialog.tsx using shadcn Dialog with tabs for JSON import/export.
by system
Implement JSON download in ImportExportDialog.tsx using Blob and URL.createObjectURL.
by system
Implement JSON paste/upload parsing with validation and error messaging in ImportExportDialog.tsx.
by system
Create src/lib/snapshot.ts to render the map DOM to a downloadable PNG using an in-browser SVG/Canvas approach.
by system
Add an 'Export Image' button to ImportExportDialog.tsx that calls the snapshot utility.
by system
Create src/App.tsx assembling MapCanvas, RegionEditor, ConnectionsPanel, PromptGenerator, and ImportExportDialog in a responsive layout.
by system
Add toast notifications for save/import/export/snapshot outcomes via a small src/lib/toast.ts wrapper.
by system