Micro-Mystery Maker
A bite-sized interactive story builder where users assemble a “case” by picking suspects, clues, locations, and twists, then play through the generated mystery as a short choose-your-path narrative. It includes a simple scene editor (cards for suspects/clues), a story preview/play mode with branching choices, and a randomizer that can auto-generate a coherent mini-mystery from saved elements. All cases are saved locally (localStorage), with reusable component boundaries like Case Library, Card Editor, Branch Builder, and Play Viewer.
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.config and src/index.css with Tailwind directives and a basic design-friendly base.
by system
Create src/App.tsx with a header, main container, and placeholder content areas.
by system
Add React Router and define routes for Library, Editor, Builder, and Play pages.
by system
Implement a header nav component with links to the four routes using shadcn/ui.
by system
Create src/types/mystery.ts defining Case, ElementCard (suspect/clue/location/twist), SceneNode, and Choice types.
by system
Create src/lib/storage.ts with get/set helpers, versioning, and safe JSON parsing.
by system
Create src/state/useCasesStore.ts as a small hook managing cases list and active case id synced to localStorage.
by system
Add a small component to select and display the active case from the store.
by system
Create src/pages/LibraryPage.tsx to list saved cases and open one as active.
by system
Add a shadcn Dialog component to create a new case with title and optional description.
by system
Add inline rename/edit UI for a case title in the library list.
by system
Add a delete button with confirmation for removing a case from localStorage.
by system
Create src/pages/EditorPage.tsx with tabs/sections for Suspects, Clues, Locations, and Twists.
by system
Create a component to render a list of element cards with edit and delete controls.
by system
Create a reusable form component to add/edit an element card (name, description, tags).
by system
Connect the element card form and list to the active case data in the store.
by system
Add a search input that filters element cards by name/tags within the editor.
by system
Create src/pages/BuilderPage.tsx with a scene list sidebar and a scene editor panel.
by system
Add helper functions in src/lib/scene.ts for creating nodes, ids, and validating links.
by system
Implement a component to add/select/delete scene nodes for the active case.
by system
Build a component to edit a scene’s title, narrative text, and associated element references.
by system
Create a component to add/remove/edit choices (label + target scene id) for the selected scene.
by system
Show warnings for missing start scene, dead ends, or choices pointing to deleted scenes.
by system
Create src/pages/PlayPage.tsx to render the mystery starting at the case start scene.
by system
Implement a component that displays current scene text, referenced cards, and choice buttons.
by system
Create a hook that manages current scene id, history stack, and restart/back actions.
by system
Add a read-only preview component that shows a linearized outline of reachable scenes from start.
by system
Create src/lib/randomizer.ts to generate a coherent mini-mystery (scenes + choices) from saved elements.
by system
Add a button in BuilderPage that runs the generator and overwrites the current case after confirmation.
by system