Changes
This commit is contained in:
gpt-engineer-app[bot]
parent
e327f076b3
commit
4e2e099094
5 changed files with 755 additions and 0 deletions
|
|
@ -66,6 +66,7 @@ import RentDivisionPuzzlePage from './pages/RentDivisionPuzzlePage';
|
|||
import BagchalGamePage from './pages/BagchalGamePage';
|
||||
import AscDescGridPuzzlePage from './pages/AscDescGridPuzzlePage';
|
||||
import EternalDominationGamePage from './pages/EternalDominationGamePage';
|
||||
import LadybugClockPuzzlePage from './pages/LadybugClockPuzzlePage';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
|
|
@ -142,6 +143,7 @@ const App = () => (
|
|||
<Route path="/puzzles/n-queens" element={<NQueensPuzzlePage />} />
|
||||
<Route path="/puzzles/domino-retiling" element={<DominoRetilingPuzzlePage />} />
|
||||
<Route path="/puzzles/asc-desc-grid" element={<AscDescGridPuzzlePage />} />
|
||||
<Route path="/puzzles/ladybug-clock" element={<LadybugClockPuzzlePage />} />
|
||||
<Route path="/discrete-math/foundations/zeckendorf" element={<ZeckendorfGamePage />} />
|
||||
<Route path="/discrete-math/foundations/zeckendorf-search" element={<ZeckendorfSearchTrickPage />} />
|
||||
<Route path="/discrete-math/foundations/rules-of-inference" element={<RulesOfInferencePlaygroundPage />} />
|
||||
|
|
|
|||
|
|
@ -279,6 +279,15 @@ const allInteractives: Interactive[] = [
|
|||
path: '/themes/discrete-math/uncertainty/presents-puzzle',
|
||||
theme: 'Discrete Math',
|
||||
dateAdded: '2025-11-19'
|
||||
},
|
||||
{
|
||||
id: 'ladybug-clock',
|
||||
title: 'The Ladybug Clock Puzzle',
|
||||
description: 'A ladybug walks randomly on a clock face. Discover the surprising probability that any given number is painted last!',
|
||||
tags: ['probability', 'random-walk', 'simulation', 'statistics', 'cover-time', 'puzzle'],
|
||||
path: '/puzzles/ladybug-clock',
|
||||
theme: 'Puzzles',
|
||||
dateAdded: '2025-01-21'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
704
src/components/LadybugClockPuzzle.tsx
Normal file
704
src/components/LadybugClockPuzzle.tsx
Normal file
|
|
@ -0,0 +1,704 @@
|
|||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Play, Pause, RotateCcw, SkipForward, FastForward, Info, ExternalLink, BarChart3 } from 'lucide-react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Cell } from 'recharts';
|
||||
import SocialShare from '@/components/SocialShare';
|
||||
|
||||
interface LadybugClockPuzzleProps {
|
||||
showSocialShare?: boolean;
|
||||
}
|
||||
|
||||
interface SimulationState {
|
||||
position: number; // 0-11 (0 = 12 o'clock, 1 = 1 o'clock, etc.)
|
||||
visited: Set<number>;
|
||||
path: number[];
|
||||
lastPainted: number | null;
|
||||
isComplete: boolean;
|
||||
moveCount: number;
|
||||
}
|
||||
|
||||
const CLOCK_NUMBERS = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
|
||||
|
||||
const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare = true }) => {
|
||||
// Simulation state
|
||||
const [simulation, setSimulation] = useState<SimulationState>({
|
||||
position: 0,
|
||||
visited: new Set([0]),
|
||||
path: [0],
|
||||
lastPainted: null,
|
||||
isComplete: false,
|
||||
moveCount: 0
|
||||
});
|
||||
|
||||
// Controls
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [speed, setSpeed] = useState(50); // 1-100, maps to delay
|
||||
const [numPositions, setNumPositions] = useState(12);
|
||||
|
||||
// Statistics
|
||||
const [lastPaintedCounts, setLastPaintedCounts] = useState<Record<number, number>>({});
|
||||
const [totalSimulations, setTotalSimulations] = useState(0);
|
||||
const [averageMoves, setAverageMoves] = useState(0);
|
||||
const [totalMoves, setTotalMoves] = useState(0);
|
||||
|
||||
// User prediction
|
||||
const [userPrediction, setUserPrediction] = useState<number | null>(null);
|
||||
const [showPredictionResult, setShowPredictionResult] = useState(false);
|
||||
|
||||
// Refs
|
||||
const animationRef = useRef<number | null>(null);
|
||||
const isPlayingRef = useRef(isPlaying);
|
||||
|
||||
useEffect(() => {
|
||||
isPlayingRef.current = isPlaying;
|
||||
}, [isPlaying]);
|
||||
|
||||
// Get delay from speed (inverse relationship)
|
||||
const getDelay = useCallback(() => {
|
||||
return Math.max(50, 1000 - (speed * 9));
|
||||
}, [speed]);
|
||||
|
||||
// Reset simulation
|
||||
const resetSimulation = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
setSimulation({
|
||||
position: 0,
|
||||
visited: new Set([0]),
|
||||
path: [0],
|
||||
lastPainted: null,
|
||||
isComplete: false,
|
||||
moveCount: 0
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Perform one step
|
||||
const step = useCallback(() => {
|
||||
setSimulation(prev => {
|
||||
if (prev.isComplete) return prev;
|
||||
|
||||
// Random move: clockwise or counterclockwise
|
||||
const direction = Math.random() < 0.5 ? 1 : -1;
|
||||
const newPosition = ((prev.position + direction) % numPositions + numPositions) % numPositions;
|
||||
|
||||
const newVisited = new Set(prev.visited);
|
||||
const wasNewlyPainted = !newVisited.has(newPosition);
|
||||
newVisited.add(newPosition);
|
||||
|
||||
const isNowComplete = newVisited.size === numPositions;
|
||||
const lastPainted = isNowComplete && wasNewlyPainted ? newPosition : prev.lastPainted;
|
||||
|
||||
return {
|
||||
position: newPosition,
|
||||
visited: newVisited,
|
||||
path: [...prev.path, newPosition],
|
||||
lastPainted: lastPainted,
|
||||
isComplete: isNowComplete,
|
||||
moveCount: prev.moveCount + 1
|
||||
};
|
||||
});
|
||||
}, [numPositions]);
|
||||
|
||||
// Auto-play loop
|
||||
useEffect(() => {
|
||||
if (!isPlaying || simulation.isComplete) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (isPlayingRef.current && !simulation.isComplete) {
|
||||
step();
|
||||
}
|
||||
}, getDelay());
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [isPlaying, simulation, step, getDelay]);
|
||||
|
||||
// Handle simulation completion
|
||||
useEffect(() => {
|
||||
if (simulation.isComplete && simulation.lastPainted !== null) {
|
||||
setIsPlaying(false);
|
||||
}
|
||||
}, [simulation.isComplete, simulation.lastPainted]);
|
||||
|
||||
// Run instant simulation (no animation)
|
||||
const runInstantSimulation = useCallback(() => {
|
||||
let position = 0;
|
||||
const visited = new Set([0]);
|
||||
let moveCount = 0;
|
||||
let lastPainted = 0;
|
||||
|
||||
while (visited.size < numPositions) {
|
||||
const direction = Math.random() < 0.5 ? 1 : -1;
|
||||
position = ((position + direction) % numPositions + numPositions) % numPositions;
|
||||
|
||||
if (!visited.has(position)) {
|
||||
lastPainted = position;
|
||||
visited.add(position);
|
||||
}
|
||||
moveCount++;
|
||||
}
|
||||
|
||||
return { lastPainted, moveCount };
|
||||
}, [numPositions]);
|
||||
|
||||
// Run to completion
|
||||
const runToCompletion = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
|
||||
let currentSim = simulation;
|
||||
let position = currentSim.position;
|
||||
const visited = new Set(currentSim.visited);
|
||||
let moveCount = currentSim.moveCount;
|
||||
let lastPainted = currentSim.lastPainted;
|
||||
const path = [...currentSim.path];
|
||||
|
||||
while (visited.size < numPositions) {
|
||||
const direction = Math.random() < 0.5 ? 1 : -1;
|
||||
position = ((position + direction) % numPositions + numPositions) % numPositions;
|
||||
path.push(position);
|
||||
|
||||
if (!visited.has(position)) {
|
||||
lastPainted = position;
|
||||
visited.add(position);
|
||||
}
|
||||
moveCount++;
|
||||
}
|
||||
|
||||
setSimulation({
|
||||
position,
|
||||
visited,
|
||||
path,
|
||||
lastPainted,
|
||||
isComplete: true,
|
||||
moveCount
|
||||
});
|
||||
}, [simulation, numPositions]);
|
||||
|
||||
// Run batch simulations
|
||||
const runBatchSimulations = useCallback((count: number) => {
|
||||
const newCounts = { ...lastPaintedCounts };
|
||||
let batchMoves = 0;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const result = runInstantSimulation();
|
||||
newCounts[result.lastPainted] = (newCounts[result.lastPainted] || 0) + 1;
|
||||
batchMoves += result.moveCount;
|
||||
}
|
||||
|
||||
setLastPaintedCounts(newCounts);
|
||||
setTotalSimulations(prev => prev + count);
|
||||
setTotalMoves(prev => prev + batchMoves);
|
||||
setAverageMoves((totalMoves + batchMoves) / (totalSimulations + count));
|
||||
}, [lastPaintedCounts, runInstantSimulation, totalMoves, totalSimulations]);
|
||||
|
||||
// Clear statistics
|
||||
const clearStats = useCallback(() => {
|
||||
setLastPaintedCounts({});
|
||||
setTotalSimulations(0);
|
||||
setAverageMoves(0);
|
||||
setTotalMoves(0);
|
||||
setUserPrediction(null);
|
||||
setShowPredictionResult(false);
|
||||
}, []);
|
||||
|
||||
// Reset everything when numPositions changes
|
||||
useEffect(() => {
|
||||
resetSimulation();
|
||||
clearStats();
|
||||
}, [numPositions, resetSimulation, clearStats]);
|
||||
|
||||
// Convert position index to display number
|
||||
const positionToNumber = (pos: number) => {
|
||||
if (numPositions === 12) {
|
||||
return pos === 0 ? 12 : pos;
|
||||
}
|
||||
return pos + 1;
|
||||
};
|
||||
|
||||
// Calculate clock position for a given index
|
||||
const getClockPosition = (index: number, radius: number) => {
|
||||
const angle = (index / numPositions) * 2 * Math.PI - Math.PI / 2;
|
||||
return {
|
||||
x: Math.cos(angle) * radius,
|
||||
y: Math.sin(angle) * radius
|
||||
};
|
||||
};
|
||||
|
||||
// Prepare chart data
|
||||
const chartData = Array.from({ length: numPositions - 1 }, (_, i) => {
|
||||
const pos = i + 1; // 1 to n-1 (0/12 can't be last)
|
||||
const count = lastPaintedCounts[pos] || 0;
|
||||
const percentage = totalSimulations > 0 ? (count / totalSimulations) * 100 : 0;
|
||||
return {
|
||||
position: positionToNumber(pos),
|
||||
count,
|
||||
percentage,
|
||||
label: `${positionToNumber(pos)}`
|
||||
};
|
||||
});
|
||||
|
||||
const theoreticalProbability = 100 / (numPositions - 1);
|
||||
|
||||
const shareUrl = typeof window !== 'undefined'
|
||||
? `${window.location.origin}/puzzles/ladybug-clock`
|
||||
: '';
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-6xl mx-auto px-4 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-3xl font-bold text-foreground">The Ladybug Clock Puzzle</h1>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
A ladybug walks randomly on a clock face. What's the probability each number is painted last?
|
||||
</p>
|
||||
{showSocialShare && (
|
||||
<div className="flex justify-center">
|
||||
<SocialShare
|
||||
title="Ladybug Clock Puzzle"
|
||||
description="Explore random walks on a clock face!"
|
||||
url={shareUrl}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Clock Visualization */}
|
||||
<Card className="bg-[#1a1a2e] border-slate-700">
|
||||
<CardContent className="p-6">
|
||||
<div className="relative w-full aspect-square max-w-md mx-auto">
|
||||
<svg viewBox="-150 -150 300 300" className="w-full h-full">
|
||||
{/* Clock face background */}
|
||||
<circle cx="0" cy="0" r="140" fill="#2d2d44" stroke="#4a4a6a" strokeWidth="3" />
|
||||
<circle cx="0" cy="0" r="120" fill="none" stroke="#3d3d5c" strokeWidth="1" strokeDasharray="4 4" />
|
||||
|
||||
{/* Hour markers and numbers */}
|
||||
{Array.from({ length: numPositions }, (_, i) => {
|
||||
const pos = getClockPosition(i, 100);
|
||||
const isPainted = simulation.visited.has(i);
|
||||
const isLast = simulation.isComplete && simulation.lastPainted === i;
|
||||
const isCurrent = simulation.position === i;
|
||||
|
||||
return (
|
||||
<g key={i}>
|
||||
{/* Tick mark */}
|
||||
<line
|
||||
x1={getClockPosition(i, 115).x}
|
||||
y1={getClockPosition(i, 115).y}
|
||||
x2={getClockPosition(i, 125).x}
|
||||
y2={getClockPosition(i, 125).y}
|
||||
stroke={isPainted ? '#f59e0b' : '#6b7280'}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
|
||||
{/* Number circle background */}
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="20"
|
||||
fill={isLast ? '#ef4444' : isPainted ? '#f59e0b' : '#374151'}
|
||||
className={`transition-all duration-300 ${isPainted && !simulation.isComplete ? 'animate-pulse' : ''}`}
|
||||
/>
|
||||
|
||||
{/* Glow effect for newly painted or last */}
|
||||
{(isPainted || isLast) && (
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="24"
|
||||
fill="none"
|
||||
stroke={isLast ? '#ef4444' : '#f59e0b'}
|
||||
strokeWidth="2"
|
||||
opacity="0.5"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Number text */}
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill={isPainted ? '#1a1a2e' : '#d1d5db'}
|
||||
fontSize="14"
|
||||
fontWeight="bold"
|
||||
className="select-none"
|
||||
>
|
||||
{positionToNumber(i)}
|
||||
</text>
|
||||
|
||||
{/* Current position indicator */}
|
||||
{isCurrent && (
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="26"
|
||||
fill="none"
|
||||
stroke="#22c55e"
|
||||
strokeWidth="3"
|
||||
strokeDasharray="6 3"
|
||||
className="animate-spin"
|
||||
style={{ animationDuration: '3s' }}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Ladybug */}
|
||||
{(() => {
|
||||
const ladybugPos = getClockPosition(simulation.position, 100);
|
||||
return (
|
||||
<g
|
||||
transform={`translate(${ladybugPos.x}, ${ladybugPos.y})`}
|
||||
className="transition-transform duration-200"
|
||||
>
|
||||
{/* Ladybug body */}
|
||||
<ellipse cx="0" cy="-30" rx="12" ry="15" fill="#dc2626" />
|
||||
{/* Head */}
|
||||
<circle cx="0" cy="-48" r="6" fill="#1f2937" />
|
||||
{/* Center line */}
|
||||
<line x1="0" y1="-45" x2="0" y2="-15" stroke="#1f2937" strokeWidth="2" />
|
||||
{/* Spots */}
|
||||
<circle cx="-5" cy="-35" r="3" fill="#1f2937" />
|
||||
<circle cx="5" cy="-35" r="3" fill="#1f2937" />
|
||||
<circle cx="-4" cy="-24" r="2.5" fill="#1f2937" />
|
||||
<circle cx="4" cy="-24" r="2.5" fill="#1f2937" />
|
||||
{/* Antennae */}
|
||||
<line x1="-3" y1="-52" x2="-6" y2="-58" stroke="#1f2937" strokeWidth="1.5" />
|
||||
<line x1="3" y1="-52" x2="6" y2="-58" stroke="#1f2937" strokeWidth="1.5" />
|
||||
</g>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Center decoration */}
|
||||
<circle cx="0" cy="0" r="8" fill="#4a4a6a" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Status display */}
|
||||
<div className="mt-4 text-center space-y-2">
|
||||
<div className="flex justify-center gap-4 text-sm">
|
||||
<Badge variant="outline" className="bg-slate-800 text-slate-200">
|
||||
Position: {positionToNumber(simulation.position)}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-slate-800 text-slate-200">
|
||||
Moves: {simulation.moveCount}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-slate-800 text-slate-200">
|
||||
Painted: {simulation.visited.size}/{numPositions}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{simulation.isComplete && simulation.lastPainted !== null && (
|
||||
<div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg">
|
||||
<p className="text-red-400 font-semibold">
|
||||
🎉 Complete! Last painted: <span className="text-red-300 text-lg">{positionToNumber(simulation.lastPainted)}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Controls and Stats */}
|
||||
<div className="space-y-4">
|
||||
{/* Simulation Controls */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Simulation Controls</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
disabled={simulation.isComplete}
|
||||
variant={isPlaying ? "destructive" : "default"}
|
||||
size="sm"
|
||||
>
|
||||
{isPlaying ? <Pause className="w-4 h-4 mr-1" /> : <Play className="w-4 h-4 mr-1" />}
|
||||
{isPlaying ? 'Pause' : 'Play'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={step}
|
||||
disabled={simulation.isComplete || isPlaying}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<SkipForward className="w-4 h-4 mr-1" />
|
||||
Step
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={runToCompletion}
|
||||
disabled={simulation.isComplete}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<FastForward className="w-4 h-4 mr-1" />
|
||||
Complete
|
||||
</Button>
|
||||
|
||||
<Button onClick={resetSimulation} variant="outline" size="sm">
|
||||
<RotateCcw className="w-4 h-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-muted-foreground">Animation Speed</label>
|
||||
<Slider
|
||||
value={[speed]}
|
||||
onValueChange={(v) => setSpeed(v[0])}
|
||||
min={1}
|
||||
max={100}
|
||||
step={1}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-muted-foreground">Number of Positions: {numPositions}</label>
|
||||
<Slider
|
||||
value={[numPositions]}
|
||||
onValueChange={(v) => setNumPositions(v[0])}
|
||||
min={4}
|
||||
max={24}
|
||||
step={2}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Batch Simulations */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5" />
|
||||
Batch Simulations
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[100, 1000, 10000].map(count => (
|
||||
<Button
|
||||
key={count}
|
||||
onClick={() => runBatchSimulations(count)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Run {count.toLocaleString()}
|
||||
</Button>
|
||||
))}
|
||||
<Button onClick={clearStats} variant="ghost" size="sm">
|
||||
Clear Stats
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-sm space-y-1">
|
||||
<p className="text-muted-foreground">
|
||||
Total simulations: <span className="text-foreground font-medium">{totalSimulations.toLocaleString()}</span>
|
||||
</p>
|
||||
{totalSimulations > 0 && (
|
||||
<p className="text-muted-foreground">
|
||||
Average moves to complete: <span className="text-foreground font-medium">{averageMoves.toFixed(1)}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* User Prediction */}
|
||||
{totalSimulations === 0 && (
|
||||
<Card className="border-primary/50 bg-primary/5">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Make a Prediction! 🤔</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Which number do you think is most likely to be painted last?
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from({ length: numPositions - 1 }, (_, i) => i + 1).map(pos => (
|
||||
<Button
|
||||
key={pos}
|
||||
onClick={() => setUserPrediction(pos)}
|
||||
variant={userPrediction === pos ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="w-10 h-10"
|
||||
>
|
||||
{positionToNumber(pos)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{userPrediction !== null && (
|
||||
<p className="mt-3 text-sm text-primary">
|
||||
You predicted: <strong>{positionToNumber(userPrediction)}</strong>. Run some simulations to see!
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statistics Chart */}
|
||||
{totalSimulations > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
Statistics: Which number was painted last?
|
||||
<Badge variant="secondary">{totalSimulations.toLocaleString()} simulations</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
|
||||
<XAxis dataKey="label" stroke="#9ca3af" />
|
||||
<YAxis
|
||||
stroke="#9ca3af"
|
||||
tickFormatter={(v) => `${v.toFixed(1)}%`}
|
||||
domain={[0, Math.max(theoreticalProbability * 1.5, 15)]}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151' }}
|
||||
labelStyle={{ color: '#f3f4f6' }}
|
||||
formatter={(value: number) => [`${value.toFixed(2)}%`, 'Probability']}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={theoreticalProbability}
|
||||
stroke="#22c55e"
|
||||
strokeDasharray="5 5"
|
||||
label={{
|
||||
value: `Theory: ${theoreticalProbability.toFixed(2)}%`,
|
||||
fill: '#22c55e',
|
||||
fontSize: 12,
|
||||
position: 'right'
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="percentage" radius={[4, 4, 0, 0]}>
|
||||
{chartData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={userPrediction === index + 1 ? '#8b5cf6' : '#f59e0b'}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{userPrediction !== null && (
|
||||
<div className="mt-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
|
||||
<p className="text-sm">
|
||||
<strong className="text-purple-400">Your prediction ({positionToNumber(userPrediction)}):</strong>{' '}
|
||||
{((lastPaintedCounts[userPrediction] || 0) / totalSimulations * 100).toFixed(2)}%
|
||||
{' '}— Theory predicts all numbers have equal probability of{' '}
|
||||
<span className="text-green-400">{theoreticalProbability.toFixed(2)}%</span>!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
|
||||
<p className="text-sm text-amber-200">
|
||||
<strong>The Surprising Result:</strong> Despite {numPositions === 12 ? '6' : Math.floor(numPositions / 2)} being the farthest from the start,
|
||||
every number (1-{numPositions - 1}) has an equal probability of being painted last: exactly 1/{numPositions - 1} ≈ {theoreticalProbability.toFixed(2)}%!
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Path History */}
|
||||
{simulation.path.length > 1 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Path History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
|
||||
{simulation.path.map((pos, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
className={`${
|
||||
simulation.isComplete && i === simulation.path.length - 1
|
||||
? 'bg-red-500 text-white'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{positionToNumber(pos)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Educational Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Info className="w-5 h-5" />
|
||||
About This Puzzle
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none">
|
||||
<h4 className="text-foreground">The Rules</h4>
|
||||
<ul className="text-muted-foreground">
|
||||
<li>A ladybug starts at the 12 o'clock position</li>
|
||||
<li>Each second, it randomly moves one step clockwise or counterclockwise (50/50 chance)</li>
|
||||
<li>When the ladybug visits a number, that number gets "painted"</li>
|
||||
<li>The simulation ends when all numbers have been visited at least once</li>
|
||||
</ul>
|
||||
|
||||
<h4 className="text-foreground">The Surprising Result</h4>
|
||||
<p className="text-muted-foreground">
|
||||
Intuitively, you might expect the number 6 (opposite to 12) to be the most likely to be painted last,
|
||||
since it's the farthest from the starting point. However, the probability is exactly <strong>1/{numPositions - 1}</strong> for
|
||||
every number from 1 to {numPositions - 1}! This is because once all but one number is painted, the random walk
|
||||
will eventually reach that last number, regardless of where it is.
|
||||
</p>
|
||||
|
||||
<h4 className="text-foreground">Mathematical Connections</h4>
|
||||
<ul className="text-muted-foreground">
|
||||
<li><strong>Random Walks on Cycles:</strong> This is an example of a random walk on a cycle graph</li>
|
||||
<li><strong>Cover Time:</strong> The number of moves to visit all vertices is called the "cover time"</li>
|
||||
<li><strong>Gambler's Ruin:</strong> Related to the classic probability problem of a gambler with a finite amount</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 pt-2 border-t">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
<a href="https://momath.org/mindbenders/" target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
Mindbenders (MoMath)
|
||||
</a>
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
<a href="https://www.youtube.com/shorts/t3jZ2xGOvYg" target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
YouTube Short
|
||||
</a>
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LadybugClockPuzzle;
|
||||
30
src/pages/LadybugClockPuzzlePage.tsx
Normal file
30
src/pages/LadybugClockPuzzlePage.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import Layout from '@/components/Layout';
|
||||
import LadybugClockPuzzle from '@/components/LadybugClockPuzzle';
|
||||
import { useLocation, Link } from 'react-router-dom';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
const LadybugClockPuzzlePage = () => {
|
||||
const location = useLocation();
|
||||
const fromPuzzles = location.search.includes('from=puzzles');
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{fromPuzzles && (
|
||||
<div className="max-w-6xl mx-auto px-4 pt-4">
|
||||
<Link
|
||||
to="/themes/puzzles"
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
Back to Puzzles
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="py-8">
|
||||
<LadybugClockPuzzle />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default LadybugClockPuzzlePage;
|
||||
|
|
@ -105,6 +105,16 @@ const Puzzles = () => {
|
|||
difficulty: "Intermediate" as const,
|
||||
duration: "5-15 min",
|
||||
participants: "1 player"
|
||||
},
|
||||
{
|
||||
id: "ladybug-clock",
|
||||
title: "The Ladybug Clock Puzzle",
|
||||
description: "A ladybug walks randomly on a clock face, painting numbers as it visits. What's the probability that any number is painted last?",
|
||||
path: "/puzzles/ladybug-clock",
|
||||
tags: ["Probability", "Random Walk", "Simulation", "Statistics"],
|
||||
difficulty: "Intermediate" as const,
|
||||
duration: "5-15 min",
|
||||
participants: "1 player"
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue