Myth Map Cards
A tiny interactive storyteller where users build a fantasy map by placing “location cards” (forest, ruin, port, shrine) onto a grid and linking them with routes, then generate a short quest narrative that references the placed locations and connections. The app includes a card editor (name, icon, tags, mood), a map builder with drag-and-drop placement and route drawing, and a story panel that can reshuffle quest beats (hook, obstacle, twist, reward) while keeping consistency with the current map. Everything runs client-side with localStorage saves for multiple maps and exported/imported JSON for sharing.
Run: npm create vite@latest . -- --template react-ts && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite class-variance-authority clsx tailwind-merge lucide-react @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-toast && npx shadcn@latest init
by system
Create src/App.tsx with a responsive 3-column layout (cards, map, story) using Tailwind.
by system
Create src/components/TopBar.tsx with app title and New/Save/Load/Export/Import buttons.
by system
Add src/components/ui/toaster.tsx and toast usage scaffold for user feedback.
by system
Create src/lib/types.ts with Card, MapState, PlacedCard, Route, and StoryBeat types.
by system
Create src/lib/defaultCards.ts exporting initial location cards (forest, ruin, port, shrine).
by system
Create src/lib/storage.ts to list/save/load/delete named maps in localStorage.
by system
Create src/lib/serialize.ts to export/import MapState with validation and versioning.
by system
Create src/state/useMapStore.ts as a React hook managing current MapState and actions.
by system
Create src/components/MapManagerDialog.tsx to browse, load, rename, and delete saved maps.
by system
Create src/components/ImportDialog.tsx with textarea/file input to load exported JSON.
by system
Create src/components/ExportDialog.tsx showing current map JSON with copy/download.
by system
Create src/components/CardEditor.tsx for editing name, icon, tags, and mood of a card.
by system
Create src/components/IconPicker.tsx listing a small set of lucide icons to choose from.
by system
Create src/components/CardCatalog.tsx showing available cards with search and tag filters.
by system
Create src/components/CardCatalogItem.tsx as a draggable card tile preview.
by system
Create src/components/MapGrid.tsx rendering a fixed-size grid with cell coordinates.
by system
Create src/components/GridCell.tsx handling drop target highlighting and click selection.
by system
Implement HTML5 drag/drop in MapGrid to place a card into a target cell.
by system
Create src/components/PlacedCardToken.tsx to render a placed card within a grid cell.
by system
Create src/components/PlacedCardMenu.tsx for rotate/remove/edit actions via dropdown.
by system
Create src/components/RouteOverlay.tsx using SVG to draw routes between placed cards.
by system
Add click-to-start/click-to-end logic in MapGrid to create a route between two cells.
by system
Add route hit-targets and a small delete action when a route is selected.
by system
Create src/components/MapToolbar.tsx for toggling route mode, snap options, and grid size.
by system
Create src/lib/storygen.ts to generate hook/obstacle/twist/reward using current map data.
by system
Create src/components/StoryPanel.tsx displaying beats and a generated quest summary.
by system
Add per-beat reshuffle controls in StoryPanel that keep referenced locations consistent.
by system
Implement a stable entity resolver in storygen to reuse the same chosen locations/routes across reshuffles.
by system
Connect TopBar buttons to store actions and dialogs (new/save/load/export/import) with toasts.
by system