Pocket Constellations
A tiny sky-doodle app where users create constellations by placing stars on a canvas, connecting them with lines, and naming each pattern with a short myth or caption. Includes a gallery of saved constellations (localStorage), a “random sky seed” generator to spawn starting star fields, and export to PNG for sharing. Clear component boundaries: Starfield Canvas (draw/place/connect), Myth Editor (title + text), Gallery Grid (load/rename/delete), and Controls Panel (seed, colors, snap-to-grid, export).
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 && npx shadcn@latest init && npx shadcn@latest add button card dialog input textarea label slider switch dropdown-menu tooltip separator toast
by system
Configure Tailwind content paths and add base Tailwind directives in src/index.css.
by system
Add CSS variables/theme tokens (light/dark ready) in src/index.css for shadcn/ui.
by system
Implement a simple responsive layout shell in src/App.tsx (canvas left, sidebar right, gallery below).
by system
Create src/types/constellation.ts with Star, Edge, Constellation, and AppSettings types.
by system
Create src/lib/storage.ts to load/save constellations and settings with versioned keys.
by system
Create src/lib/rng.ts implementing deterministic seeded random number generation.
by system
Create src/lib/skySeed.ts to generate a starfield (positions/magnitudes) from a seed.
by system
Create src/lib/canvasMath.ts for coordinate transforms, hit-testing, and distance helpers.
by system
Create src/lib/exportPng.ts to export the canvas to PNG via toDataURL/download.
by system
Create src/hooks/useSettings.ts to manage settings (colors, snap, grid size) persisted to localStorage.
by system
Create src/hooks/useConstellations.ts to manage active constellation plus gallery list persisted to localStorage.
by system
Add src/components/StarfieldCanvas.tsx rendering a full-size canvas with resize handling.
by system
Implement draw routine in src/components/StarfieldCanvas.tsx for background stars and connected lines.
by system
Add click-to-place star behavior in src/components/StarfieldCanvas.tsx (with optional snap-to-grid).
by system
Add hover/select hit-testing for stars in src/components/StarfieldCanvas.tsx.
by system
Add click-two-stars to toggle an edge connection in src/components/StarfieldCanvas.tsx.
by system
Add drag-to-move stars in src/components/StarfieldCanvas.tsx (respecting snap-to-grid).
by system
Add delete selected star (and connected edges) via keyboard in src/components/StarfieldCanvas.tsx.
by system
Add src/components/MythEditor.tsx with shadcn Input/Textarea for title and myth text.
by system
Wire MythEditor props to update the active constellation title/text without touching canvas code.
by system
Add src/components/ControlsPanel.tsx for seed input/button, color pickers, snap toggle, and export button.
by system
Implement ControlsPanel callbacks to generate a new seeded starfield and apply it to the active constellation.
by system
Implement ControlsPanel updates for star/line/background colors via settings state.
by system
Implement snap-to-grid toggle and grid size slider in ControlsPanel with persisted settings.
by system
Wire ControlsPanel export action to export the StarfieldCanvas to PNG using the helper.
by system
Add src/components/GalleryGrid.tsx showing saved constellations in a responsive Card grid.
by system
Implement selecting a saved constellation from GalleryGrid to become the active one.
by system
Add inline rename and delete actions in GalleryGrid with localStorage persistence.
by system
Connect App.tsx to useSettings/useConstellations and pass props to StarfieldCanvas, MythEditor, ControlsPanel, and GalleryGrid.
by system