Myth Map Maker
A tiny interactive worldbuilder where users generate a whimsical “map” made of draggable tiles (forests, ruins, seas, villages) and attach short lore notes to each location. Includes a prompt-driven randomizer to spawn new tiles and story hooks, plus an export view that turns the map into a clean poster-style layout (PNG) for sharing. Everything runs client-side with localStorage saves, and the UI is split into clear components: tile palette, canvas/grid, lore editor, prompt/randomizer panel, and export modal.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i -D @tailwindcss/vite && npm i lucide-react class-variance-authority clsx tailwind-merge && npx shadcn@latest init
by system
Configure Tailwind in src/index.css and enable the Tailwind Vite plugin in vite.config.ts.
by system
Build App.tsx layout with header and two-column main area (left tools, right canvas).
by system
Create src/lib/types.ts with TileType, Tile, LoreNote, and MapState interfaces.
by system
Create src/lib/tileCatalog.ts exporting default tile definitions (forest, ruins, sea, village) with icons/colors.
by system
Create src/lib/storage.ts with loadState/saveState and versioned key constants.
by system
Create src/hooks/useMapState.ts to manage MapState, selection, and persist to localStorage.
by system
Add src/components/TilePalette.tsx showing catalog tiles as draggable buttons.
by system
Add src/components/MapCanvas.tsx rendering a fixed-size grid and existing placed tiles.
by system
Add src/components/GridCell.tsx to render a single droppable cell and its tile preview.
by system
Wire HTML5 drag events between TilePalette and GridCell to place a tile in state.
by system
Enable dragging an existing tile from the canvas to another grid cell to reposition it.
by system
Allow clicking a placed tile to set selectedTileId in useMapState.
by system
Add a small delete control for the selected tile and remove it from MapState.
by system
Add a toolbar button that resets MapState to an empty map with confirmation dialog.
by system
Add src/components/LoreEditor.tsx to view/edit lore text for the selected tile.
by system
Persist lore changes immediately to MapState with a debounced update.
by system
Show selected tile name/type and coordinates at top of the LoreEditor.
by system
Add src/components/RandomizerPanel.tsx with a prompt input and a generate button.
by system
Create src/lib/randomizer.ts to pick a tile type + optional variant name based on prompt keywords.
by system
Extend src/lib/randomizer.ts to generate a short hook/lore snippet tied to the chosen tile type.
by system
On generate, place a new tile into the first available empty cell and select it.
by system
If the map is full, show a shadcn/ui alert dialog explaining no space is available.
by system
Add src/components/ExportModal.tsx using shadcn/ui Dialog with poster preview area.
by system
Add src/components/PosterView.tsx to render a clean, print-like map layout from current MapState.
by system
Create src/lib/exportPng.ts to capture PosterView DOM to PNG via a browser-only library.
by system
Add a download button in ExportModal to save the generated PNG with a filename.
by system
Add src/components/StateTransfer.tsx to export MapState JSON and import it back with validation.
by system
Implement keybindings (Del to delete selected tile, Esc to clear selection) in MapCanvas.
by system
Replace basic buttons/inputs with shadcn/ui components and ensure responsive Tailwind spacing.
by system