Myth Map Maker
A playful micro-world builder where you generate a tiny fantasy map made of draggable “tiles” (forest, mountain, ruins, village, river) and attach short lore notes to each location. The app includes a seed-based random map generator, a simple quest prompt creator that stitches together selected locations, and localStorage save/load for multiple maps. Components split cleanly into a tile palette, canvas/grid editor, location inspector (notes/tags), quest generator panel, and a gallery of saved maps.
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 src/index.css with Tailwind directives and basic app background/text defaults.
by system
Implement src/App.tsx with a responsive 3-panel layout (palette/canvas/inspector) plus right-side tools area.
by system
Create src/types.ts defining TileType, TileDef, MapCell, WorldMap, LoreNote, and SavedMapMeta.
by system
Create src/tiles.ts exporting the canonical tile set (forest, mountain, ruins, village, river) with icons/colors.
by system
Create src/utils/rng.ts implementing a deterministic seeded RNG and helpers (int range, pick).
by system
Create src/utils/grid.ts with functions to create empty grids, clone/update a cell, and bounds checks.
by system
Create src/utils/serialize.ts to JSON stringify/parse maps with versioning and safe fallbacks.
by system
Create src/utils/storage.ts for save/list/load/delete maps under a single storage namespace key.
by system
Create src/hooks/useMapState.ts managing active map, selected cell, and basic mutations (set tile, set note, set tags).
by system
Create src/hooks/useSeededGenerator.ts exposing generateFromSeed(seed, size) that fills a grid deterministically.
by system
Create src/utils/quests.ts to generate a quest prompt from selected locations using lightweight templates.
by system
Add shadcn/ui Button via the CLI and verify import works in a small example.
by system
Add shadcn/ui Card via the CLI for consistent panels.
by system
Add shadcn/ui Input via the CLI for seed/name fields.
by system
Add shadcn/ui Textarea via the CLI for lore notes.
by system
Add shadcn/ui Badge via the CLI for tags and tile labels.
by system
Add shadcn/ui Tabs via the CLI for switching tools (Quest/Generator/Gallery).
by system
Create src/components/TilePalette.tsx rendering selectable tile buttons from tiles.ts.
by system
Create src/components/MapCanvas.tsx rendering the grid with clickable cells and a visual selected state.
by system
Implement HTML5 drag-and-drop from TilePalette to MapCanvas to set a cell’s tile type.
by system
Add click-to-paint behavior in MapCanvas using the currently selected palette tile.
by system
Create src/components/LocationInspector.tsx showing selected cell tile, coordinates, note editor, and tags.
by system
Create src/components/TagEditor.tsx for add/remove tags on the selected location.
by system
Create src/components/SeedGeneratorPanel.tsx with seed input, size selector, and Generate button.
by system
Create src/components/QuestGeneratorPanel.tsx to pick locations and display a generated quest prompt.
by system
Add selection logic to MapCanvas to toggle cells into a quest selection set (without affecting main selection).
by system
Create src/components/SavedMapsGallery.tsx listing saved maps with load/delete actions.
by system
Create src/components/MapSaveBar.tsx with map name field and Save/New buttons wired to storage util.
by system
Update src/App.tsx to compose TilePalette, MapCanvas, LocationInspector, panels (Tabs), and MapSaveBar using hooks.
by system