Myth Mapmaker
Create a tiny interactive world map where each “location” is a draggable pin with a short myth, character, or quest snippet you write. The app includes a prompt-based generator (client-side templates + random tables) to help you quickly spin up lore, plus a timeline/quest list view to connect pins into simple story arcs. Everything is saved to localStorage, with clear components like MapCanvas, PinEditor, PromptGenerator, and QuestTimeline so multiple agents can build in parallel.
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 && npx shadcn@latest init
by system
Configure Tailwind content paths and add Tailwind directives to src/index.css.
by system
Install and register the shadcn/ui Button component.
by system
Install and register the shadcn/ui Dialog component.
by system
Install and register the shadcn/ui Input component.
by system
Install and register the shadcn/ui Textarea component.
by system
Install and register the shadcn/ui Select component.
by system
Install and register the shadcn/ui Tabs component.
by system
Install and register the shadcn/ui Separator component.
by system
Create src/types.ts with Pin, Quest, TimelineEvent, and AppState interfaces.
by system
Create src/state/storage.ts with loadState/saveState helpers and versioned migrations stub.
by system
Create src/state/useAppState.ts to manage pins/quests and persist changes to localStorage.
by system
Add a small default state in src/state/defaultState.ts used when no saved data exists.
by system
Create src/components/AppShell.tsx with header, main split layout, and responsive behavior.
by system
Create src/components/TopBar.tsx with New Pin, Export, Import, and Reset buttons.
by system
Create src/components/ImportExportDialog.tsx to copy/paste state JSON and validate it.
by system
Create src/components/MapCanvas.tsx rendering a pannable/zoomable map area with a simple grid background.
by system
Create src/components/MapPin.tsx to draw a pin at x/y with selected styling.
by system
Add pointer-driven dragging logic to MapPin to update pin coordinates via callbacks.
by system
Wire MapCanvas to track selectedPinId and handle click-to-select and click-empty-to-deselect.
by system
Add MapCanvas double-click handler to create a new pin at cursor position.
by system
Create src/components/PinEditor.tsx to edit title, myth text, tags, and color for the selected pin.
by system
Add a delete button to PinEditor that removes the selected pin from state.
by system
Create src/lore/tables.ts exporting random-table data (themes, beings, artifacts, twists, locations).
by system
Create src/lore/generateLore.ts to build a snippet from templates + random tables + optional prompt.
by system
Create src/components/PromptGenerator.tsx with prompt input, generate button, and preview output.
by system
Add an action in PromptGenerator to write generated text into the selected pin (or create a new pin).
by system
Create src/components/QuestTimeline.tsx to list quests/events and link them to pins.
by system
Add create/edit/delete quest functionality inside QuestTimeline using dialogs for form fields.
by system
Add UI in Quest editor to attach ordered pin references to form a simple story arc.
by system