Myth Map Maker
A playful interactive atlas where users drag-and-drop icons (ruins, villages, monsters, treasures) onto a grid map, name locations, and write short “lore cards” that link places together (e.g., “The Ruins of Ash connect to the River Wisp”). The app includes a simple procedural “terrain stamp” tool (forest/mountain/water) using click-to-paint tiles, plus an export/share view that generates a single JSON or PNG snapshot of the current map. Everything runs client-side with localStorage saves, a componentized layout (MapCanvas, TilePalette, IconLibrary, LorePanel, Timeline/Changelog, ExportModal) to enable parallel building.
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 in src/index.css and tailwind.config to scan src/**/*.{ts,tsx}.
by system
Create src/App.tsx with a responsive grid layout for palette, canvas, and side panels.
by system
Create src/components/HeaderBar.tsx with title and actions placeholders.
by system
Create src/types/map.ts defining tiles, icons, locations, lore cards, and full project state.
by system
Create src/state/MapStore.tsx providing state, dispatch, and selectors via React context.
by system
Create src/state/reducer.ts with actions for painting tiles, placing/moving icons, and editing lore.
by system
Create src/state/useLocalStorageSync.ts to load/save full state with versioning.
by system
Create src/state/defaultState.ts with an initial grid, empty icons, and sample lore card.
by system
Create src/components/MapCanvas.tsx rendering a fixed-size grid with tiles and icon layer.
by system
Create src/components/TileCell.tsx to render one tile with terrain color and hover state.
by system
Create src/components/TilePalette.tsx to select terrain stamp type (forest/mountain/water/erase).
by system
Update src/components/MapCanvas.tsx to paint tiles on click/drag based on selected terrain.
by system
Create src/components/IconLibrary.tsx listing draggable icon types (ruins/village/monster/treasure).
by system
Create src/components/IconItem.tsx implementing HTML5 drag payload for an icon type.
by system
Update src/components/MapCanvas.tsx to accept drops and dispatch place-icon at grid coords.
by system
Create src/components/IconLayer.tsx to render placed icons positioned on top of tiles.
by system
Update src/components/IconLayer.tsx to support dragging existing icons to new coordinates.
by system
Update src/state/reducer.ts to support selecting a placed icon/location by id.
by system
Create src/components/LorePanel.tsx showing selected location name and lore editor fields.
by system
Update src/components/LorePanel.tsx to edit and dispatch location name changes.
by system
Update src/components/LorePanel.tsx to edit a short lore card text for the selected location.
by system
Create src/components/LinkPlaces.tsx to add/remove links between two locations.
by system
Update src/components/MapCanvas.tsx to draw simple SVG lines between linked locations.
by system
Create src/components/TimelinePanel.tsx listing recent changes (paint/place/move/edit).
by system
Update src/state/reducer.ts to append human-readable entries for key actions.
by system
Create src/components/ExportModal.tsx using shadcn Dialog with JSON/PNG tabs.
by system
Create src/utils/exportJson.ts to stringify and download the current state as a .json file.
by system
Create src/utils/exportPng.ts to render the map to a canvas and download a .png file.
by system
Update src/components/HeaderBar.tsx to open ExportModal and add a 'Reset map' action.
by system