+ {pieces.map(p => ( +

+ ))} +

+ ); +}; + +export default function App() { + // Modes: 'idle', 'countdown', 'brushing', 'finished' + const [mode, setMode] = useState('idle'); + const [currentStageIndex, setCurrentStageIndex] = useState(0); + + // Timers + const [countdownTick, setCountdownTick] = useState(3); + const [brushingTime, setBrushingTime] = useState(SECONDS_PER_STAGE); + + // Triggers + const [isPlaying, setIsPlaying] = useState(false); + const [confettiTrigger, setConfettiTrigger] = useState(0); + + // Plaque Spots State + const [plaqueSpots, setPlaqueSpots] = useState([]); + + // Generate random dirt/plaque spots when moving to a new section + useEffect(() => { + // Generate one spot for each second of brushing + const spots = Array.from({ length: SECONDS_PER_STAGE }).map((_, i) => ({ + id: i, + // Random placement spanning the tooth area (clipped later to stay inside) + cx: 20 + Math.random() * 60, + cy: 20 + Math.random() * 70, + r: 4 + Math.random() * 8, // Random size + color: PLAQUE_COLORS[Math.floor(Math.random() * PLAQUE_COLORS.length)], + })); + + // Shuffle the array so spots disappear randomly across the tooth, not in order of generation + for (let j = spots.length - 1; j > 0; j--) { + const k = Math.floor(Math.random() * (j + 1)); + [spots[j], spots[k]] = [spots[k], spots[j]]; + } + + // Assign a time threshold (0 to 29). Spot vanishes when timer hits this threshold. + const assignedSpots = spots.map((spot, index) => ({ ...spot, threshold: index })); + setPlaqueSpots(assignedSpots); + }, [currentStageIndex]); + + useEffect(() => { + let interval = null; + + if (isPlaying) { + interval = setInterval(() => { + + // --- COUNTDOWN LOGIC (3 -> 2 -> 1 -> GO -> Switch to Brushing) --- + if (mode === 'countdown') { + setCountdownTick((prev) => { + if (prev > 1) { + sounds.tick(); + return prev - 1; + } else if (prev === 1) { + sounds.go(); + return 0; // 0 represents "GO!" + } else { + // Transition from GO! to Brushing + setMode('brushing'); + setBrushingTime(SECONDS_PER_STAGE); + return 3; // Reset for next time + } + }); + } + + // --- BRUSHING LOGIC (30 -> 0) --- + else if (mode === 'brushing') { + setBrushingTime((prev) => { + if (prev > 1) { + return prev - 1; + } else { + // Section Finished + sounds.ding(); + setConfettiTrigger(c => c + 1); + + if (currentStageIndex < STAGES.length - 1) { + // Go to next stage via a countdown + setCurrentStageIndex(curr => curr + 1); + setMode('countdown'); + setCountdownTick(3); + return SECONDS_PER_STAGE; + } else { + // Completely finished + sounds.tada(); + setMode('finished'); + setIsPlaying(false); + return 0; + } + } + }); + } + }, 1000); + } + + return () => { + if (interval) clearInterval(interval); + }; + }, [isPlaying, mode, currentStageIndex]); + + const handlePlayPause = () => { + initAudio(); + if (mode === 'idle') { + setMode('countdown'); + } + setIsPlaying(!isPlaying); + }; + + const handleReset = () => { + setIsPlaying(false); + setMode('idle'); + setCurrentStageIndex(0); + setCountdownTick(3); + setBrushingTime(SECONDS_PER_STAGE); + }; + + const ToothVisual = () => { + const progress = 1 - (brushingTime / SECONDS_PER_STAGE); + const glowOpacity = mode === 'finished' ? 1 : progress; + + return ( +

+ +

+ ); + }; + + const DirectionArrow = () => { + const stage = STAGES[currentStageIndex]; + + if (stage.isVertical) { + // Up-and-down arrow for front teeth + return ( +

+ +

+ ); + } + + // Directional pointer arrow for corners + return ( +

+ +

+ ); + }; + + return ( + <> + {/* Dynamic Styles for Confetti */} + + +

+ + + +

+ + {/* Header */} +

+ Brush Buddy! +

+ + {/* Main Visual Area */} +

+ + {mode === 'idle' && ( +

🦷

Ready to brush?

+ )} + + {mode === 'countdown' && ( +

Get Ready!

+ {countdownTick === 0 ? "GO!" : countdownTick} +

+ )} + + {mode === 'brushing' && ( +

+ + +

+ {/* Numerical Timer */} +

+ 00:{brushingTime.toString().padStart(2, '0')} +

+ + {/* Visual Pie/Donut Timer */} +

+ +

+ )} + + {mode === 'finished' && ( +

✨😁✨

All Clean!

+ )} + +

+ + {/* Progress Indicators */} +

+ {STAGES.map((stage, idx) => ( +

+ ))} +

+ + {/* Controls */} +

+ {mode !== 'finished' && ( + + )} + + +

+ +

+ + ); +} \ No newline at end of file diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..02251f4 Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ + diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..a461c50 --- /dev/null +++ b/src/index.css @@ -0,0 +1 @@ +@import "tailwindcss"; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..bef5202 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..6830b6f --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023", "DOM"], + "module": "esnext", + "types": ["vite/client"], + "allowArbitraryExtensions": true, + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..8455dcb --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023"], + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "module": "nodenext", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..b726b92 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import tailwindcss from '@tailwindcss/vite' + +export default defineConfig({ + plugins: [react(), tailwindcss()], +}) \ No newline at end of file