Mystery Mapmaker
A playful micro-adventure builder where users create a tiny “mystery map” made of connected location cards (e.g., Alley, Library, Rooftop) and hide clue tokens across them. The app lets you switch between Build mode (design the map, add clues, suspects, and a secret solution) and Play mode (navigate the map, collect clues, and make an accusation), with progress and custom scenarios saved in localStorage. Components are cleanly separable: map graph editor, card detail panel, clue/suspect manager, playthrough navigator, and a simple end-screen logic checker.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tabs @radix-ui/react-toast class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d
by system
Set up Tailwind directives and CSS variables in src/index.css.
by system
Implement a minimal shell layout with header and main content in src/App.tsx.
by system
Create TypeScript types for Map, LocationCard, Connection, Clue, Suspect, Solution, and PlayState in src/types.ts.
by system
Add load/save utility functions (with versioning) in src/lib/storage.ts.
by system
Create a React hook for scenario state + persistence in src/state/useScenarioStore.ts.
by system
Add a Build/Play mode toggle component in src/components/ModeToggle.tsx.
by system
Provide a default starter scenario in src/state/defaultScenario.ts.
by system
Create a map editor canvas that lists/positions location cards in src/components/map/MapCanvas.tsx.
by system
Render an individual location node card UI in src/components/map/LocationNode.tsx.
by system
Draw simple connection lines between nodes using SVG overlay in src/components/map/ConnectionsLayer.tsx.
by system
Implement “Add Location” button and handler in src/components/map/AddLocationButton.tsx.
by system
Wire selection state when clicking a location node in src/components/map/useSelectedLocation.ts.
by system
Enable dragging location nodes to update their x/y positions in src/components/map/useNodeDrag.ts.
by system
Add a simple connect-two-nodes interaction for creating/removing edges in src/components/map/useConnectTool.ts.
by system
Create a right-side detail panel container in src/components/panel/DetailPanel.tsx.
by system
Implement name/description editing for selected location in src/components/panel/LocationDetailsForm.tsx.
by system
Create CRUD UI for clues (title, text) in src/components/panel/ClueManager.tsx.
by system
Create CRUD UI for suspects (name, note) in src/components/panel/SuspectManager.tsx.
by system
Implement secret solution selection (culprit + key clue) in src/components/panel/SolutionEditor.tsx.
by system
Add UI to assign clues to a specific location card in src/components/panel/CluePlacement.tsx.
by system
Compose map editor + detail panel into a Build page in src/pages/BuildPage.tsx.
by system
Create a hook to manage playthrough progress (current location, collected clues, visited) in src/state/usePlayState.ts.
by system
Implement Play mode main view (current location, exits) in src/pages/PlayPage.tsx.
by system
Add navigation actions to traverse connections and update current location in src/components/play/ExitsList.tsx.
by system
Show location clues and allow collecting into inventory in src/components/play/LocationClues.tsx.
by system
Create an inventory UI listing collected clues in src/components/play/InventoryDrawer.tsx.
by system
Implement an accusation form (choose suspect + key clue) in src/components/play/AccusationDialog.tsx.
by system
Add result screen logic to compare accusation vs secret solution in src/components/play/EndScreen.tsx.
by system