902 lines
37 KiB
TypeScript
902 lines
37 KiB
TypeScript
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||
import { Slider } from '@/components/ui/slider';
|
||
import {
|
||
Play, RotateCcw, Info, ChevronDown, ChevronUp,
|
||
ArrowLeft, ArrowRight, Skull, AlertTriangle,
|
||
BookOpen, Zap, Eye, Grid3X3, TrendingUp, Pause,
|
||
Volume2, VolumeX, Target, Trophy
|
||
} from 'lucide-react';
|
||
import SocialShare from '@/components/SocialShare';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
|
||
interface ErdosDiscrepancyPuzzleProps {
|
||
showSocialShare?: boolean;
|
||
}
|
||
|
||
type GamePhase = 'intro' | 'writing' | 'captor-reveal' | 'walking' | 'fallen' | 'survived';
|
||
type Direction = 1 | -1 | null;
|
||
|
||
interface DiscrepancyResult {
|
||
d: number;
|
||
k: number;
|
||
sum: number;
|
||
positions: number[];
|
||
}
|
||
|
||
const ErdosDiscrepancyPuzzle: React.FC<ErdosDiscrepancyPuzzleProps> = ({ showSocialShare = false }) => {
|
||
// Core game state
|
||
const [sequence, setSequence] = useState<Direction[]>([]);
|
||
const [discrepancyBound, setDiscrepancyBound] = useState(1);
|
||
const [gamePhase, setGamePhase] = useState<GamePhase>('intro');
|
||
const [showRules, setShowRules] = useState(false);
|
||
|
||
// Walk visualization state
|
||
const [selectedD, setSelectedD] = useState(1);
|
||
const [walkPosition, setWalkPosition] = useState(0);
|
||
const [walkStep, setWalkStep] = useState(0);
|
||
const [isWalking, setIsWalking] = useState(false);
|
||
const [walkSpeed, setWalkSpeed] = useState(500);
|
||
|
||
// Prisoner's Walk story mode
|
||
const [captorChosenD, setCaptorChosenD] = useState<number | null>(null);
|
||
const [prisonerPosition, setPrisonerPosition] = useState(0);
|
||
const [prisonerStep, setPrisonerStep] = useState(0);
|
||
|
||
// Heatmap state
|
||
const [hoveredCell, setHoveredCell] = useState<{d: number, k: number} | null>(null);
|
||
const [highlightedSubsequence, setHighlightedSubsequence] = useState<number[]>([]);
|
||
|
||
// Best score tracking
|
||
const [bestLength, setBestLength] = useState<number | null>(null);
|
||
|
||
// Load best score from localStorage
|
||
useEffect(() => {
|
||
const saved = localStorage.getItem(`erdos-best-length-c${discrepancyBound}`);
|
||
if (saved) {
|
||
setBestLength(parseInt(saved));
|
||
}
|
||
}, [discrepancyBound]);
|
||
|
||
// Calculate all discrepancies for current sequence
|
||
const allDiscrepancies = useMemo((): DiscrepancyResult[] => {
|
||
if (sequence.length === 0) return [];
|
||
|
||
const results: DiscrepancyResult[] = [];
|
||
const n = sequence.length;
|
||
|
||
for (let d = 1; d <= n; d++) {
|
||
let sum = 0;
|
||
const positions: number[] = [];
|
||
|
||
for (let k = 1; k * d <= n; k++) {
|
||
const pos = k * d - 1; // 0-indexed
|
||
if (sequence[pos] !== null) {
|
||
sum += sequence[pos]!;
|
||
positions.push(k * d);
|
||
results.push({
|
||
d,
|
||
k,
|
||
sum,
|
||
positions: [...positions]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
return results;
|
||
}, [sequence]);
|
||
|
||
// Find maximum discrepancy
|
||
const maxDiscrepancy = useMemo(() => {
|
||
if (allDiscrepancies.length === 0) return { value: 0, result: null };
|
||
|
||
let maxAbs = 0;
|
||
let maxResult: DiscrepancyResult | null = null;
|
||
|
||
for (const result of allDiscrepancies) {
|
||
if (Math.abs(result.sum) > maxAbs) {
|
||
maxAbs = Math.abs(result.sum);
|
||
maxResult = result;
|
||
}
|
||
}
|
||
|
||
return { value: maxAbs, result: maxResult };
|
||
}, [allDiscrepancies]);
|
||
|
||
// Check if current sequence violates bound
|
||
const hasViolation = maxDiscrepancy.value > discrepancyBound;
|
||
|
||
// Find worst step size for captor
|
||
const findWorstD = useCallback((): number => {
|
||
let worstD = 1;
|
||
let worstDiscrepancy = 0;
|
||
|
||
for (const result of allDiscrepancies) {
|
||
if (Math.abs(result.sum) > worstDiscrepancy) {
|
||
worstDiscrepancy = Math.abs(result.sum);
|
||
worstD = result.d;
|
||
}
|
||
}
|
||
|
||
return worstD;
|
||
}, [allDiscrepancies]);
|
||
|
||
// Get discrepancy for specific d,k
|
||
const getDiscrepancy = (d: number, k: number): number | null => {
|
||
const result = allDiscrepancies.find(r => r.d === d && r.k === k);
|
||
return result ? result.sum : null;
|
||
};
|
||
|
||
// Toggle sequence value
|
||
const togglePosition = (index: number) => {
|
||
if (gamePhase !== 'writing') return;
|
||
|
||
setSequence(prev => {
|
||
const newSeq = [...prev];
|
||
if (newSeq[index] === null) {
|
||
newSeq[index] = 1;
|
||
} else if (newSeq[index] === 1) {
|
||
newSeq[index] = -1;
|
||
} else {
|
||
newSeq[index] = 1;
|
||
}
|
||
return newSeq;
|
||
});
|
||
};
|
||
|
||
// Add new position to sequence
|
||
const addPosition = () => {
|
||
if (gamePhase !== 'writing') return;
|
||
setSequence(prev => [...prev, null]);
|
||
};
|
||
|
||
// Start the game
|
||
const startGame = () => {
|
||
setSequence([null, null, null, null, null]);
|
||
setGamePhase('writing');
|
||
setWalkPosition(0);
|
||
setWalkStep(0);
|
||
setPrisonerPosition(0);
|
||
setPrisonerStep(0);
|
||
setCaptorChosenD(null);
|
||
setHighlightedSubsequence([]);
|
||
};
|
||
|
||
// Reset the game
|
||
const resetGame = () => {
|
||
setSequence([]);
|
||
setGamePhase('intro');
|
||
setWalkPosition(0);
|
||
setWalkStep(0);
|
||
setIsWalking(false);
|
||
setPrisonerPosition(0);
|
||
setPrisonerStep(0);
|
||
setCaptorChosenD(null);
|
||
setHighlightedSubsequence([]);
|
||
};
|
||
|
||
// Handle captor reveal (Prisoner's Walk mode)
|
||
const revealCaptor = () => {
|
||
const worstD = findWorstD();
|
||
setCaptorChosenD(worstD);
|
||
setGamePhase('captor-reveal');
|
||
setPrisonerPosition(0);
|
||
setPrisonerStep(0);
|
||
};
|
||
|
||
// Start prisoner walking
|
||
const startPrisonerWalk = () => {
|
||
if (captorChosenD === null) return;
|
||
setGamePhase('walking');
|
||
setPrisonerPosition(0);
|
||
setPrisonerStep(0);
|
||
};
|
||
|
||
// Prisoner walk animation
|
||
useEffect(() => {
|
||
if (gamePhase !== 'walking' || captorChosenD === null) return;
|
||
|
||
const interval = setInterval(() => {
|
||
setPrisonerStep(prev => {
|
||
const nextStep = prev + 1;
|
||
const posIndex = nextStep * captorChosenD - 1;
|
||
|
||
if (posIndex >= sequence.length || sequence[posIndex] === null) {
|
||
// Sequence ended without falling
|
||
setGamePhase('survived');
|
||
clearInterval(interval);
|
||
|
||
// Save best score
|
||
const validLength = sequence.filter(s => s !== null).length;
|
||
if (!bestLength || validLength > bestLength) {
|
||
setBestLength(validLength);
|
||
localStorage.setItem(`erdos-best-length-c${discrepancyBound}`, validLength.toString());
|
||
}
|
||
|
||
return prev;
|
||
}
|
||
|
||
const newPosition = prisonerPosition + sequence[posIndex]!;
|
||
setPrisonerPosition(newPosition);
|
||
|
||
if (Math.abs(newPosition) > discrepancyBound) {
|
||
setGamePhase('fallen');
|
||
clearInterval(interval);
|
||
return nextStep;
|
||
}
|
||
|
||
return nextStep;
|
||
});
|
||
}, walkSpeed);
|
||
|
||
return () => clearInterval(interval);
|
||
}, [gamePhase, captorChosenD, sequence, prisonerPosition, discrepancyBound, walkSpeed, bestLength]);
|
||
|
||
// Manual walk control
|
||
const walkSubsequence = () => {
|
||
if (isWalking) {
|
||
setIsWalking(false);
|
||
return;
|
||
}
|
||
|
||
setWalkPosition(0);
|
||
setWalkStep(0);
|
||
setIsWalking(true);
|
||
};
|
||
|
||
// Walk animation effect
|
||
useEffect(() => {
|
||
if (!isWalking) return;
|
||
|
||
const interval = setInterval(() => {
|
||
setWalkStep(prev => {
|
||
const nextStep = prev + 1;
|
||
const posIndex = nextStep * selectedD - 1;
|
||
|
||
if (posIndex >= sequence.length || sequence[posIndex] === null) {
|
||
setIsWalking(false);
|
||
return prev;
|
||
}
|
||
|
||
setWalkPosition(current => current + sequence[posIndex]!);
|
||
return nextStep;
|
||
});
|
||
}, walkSpeed);
|
||
|
||
return () => clearInterval(interval);
|
||
}, [isWalking, selectedD, sequence, walkSpeed]);
|
||
|
||
// Get color for heatmap cell
|
||
const getHeatmapColor = (discrepancy: number | null): string => {
|
||
if (discrepancy === null) return 'bg-muted/30';
|
||
|
||
const absVal = Math.abs(discrepancy);
|
||
if (absVal > discrepancyBound) {
|
||
return 'bg-destructive/80 text-destructive-foreground';
|
||
}
|
||
if (absVal === discrepancyBound) {
|
||
return 'bg-amber-500/70 text-white';
|
||
}
|
||
if (absVal === 0) {
|
||
return 'bg-emerald-500/50 text-emerald-900 dark:text-emerald-100';
|
||
}
|
||
|
||
const intensity = absVal / discrepancyBound;
|
||
if (intensity < 0.5) {
|
||
return 'bg-emerald-400/40 text-emerald-900 dark:text-emerald-100';
|
||
}
|
||
return 'bg-amber-400/50 text-amber-900 dark:text-amber-100';
|
||
};
|
||
|
||
// Max valid k for given d
|
||
const maxK = (d: number) => Math.floor(sequence.length / d);
|
||
|
||
// Highlighted positions for selected d
|
||
const selectedPositions = useMemo(() => {
|
||
const positions: number[] = [];
|
||
for (let k = 1; k * selectedD <= sequence.length; k++) {
|
||
positions.push(k * selectedD);
|
||
}
|
||
return positions;
|
||
}, [selectedD, sequence.length]);
|
||
|
||
// Get fill status of sequence
|
||
const filledCount = sequence.filter(s => s !== null).length;
|
||
const allFilled = filledCount === sequence.length && sequence.length > 0;
|
||
|
||
// Known optimal sequences
|
||
const optimalSequences: Record<number, Direction[]> = {
|
||
1: [1, 1, -1, 1, -1, -1, -1, 1, 1, 1, -1], // One of the optimal 11-length sequences for C=1
|
||
};
|
||
|
||
const loadOptimalSequence = () => {
|
||
const optimal = optimalSequences[discrepancyBound];
|
||
if (optimal) {
|
||
setSequence([...optimal]);
|
||
setGamePhase('writing');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold text-foreground">
|
||
The Erdős Discrepancy Problem
|
||
</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
Can you write instructions to survive the tunnel forever?
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowRules(!showRules)}
|
||
>
|
||
{showRules ? <ChevronUp className="w-4 h-4 mr-1" /> : <Info className="w-4 h-4 mr-1" />}
|
||
{showRules ? 'Hide' : 'Rules'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Rules Panel */}
|
||
{showRules && (
|
||
<Card className="bg-muted/30">
|
||
<CardContent className="pt-4">
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
|
||
<Skull className="w-4 h-4" /> The Prisoner's Dilemma
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
You're trapped in a tunnel with a <span className="text-destructive font-semibold">deadly cliff {discrepancyBound} step{discrepancyBound > 1 ? 's' : ''} to your LEFT</span> and
|
||
a <span className="text-destructive font-semibold">pit of vipers {discrepancyBound} step{discrepancyBound > 1 ? 's' : ''} to your RIGHT</span>.
|
||
</p>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
Write a list of instructions: each is either <span className="text-primary font-semibold">LEFT</span> or <span className="text-blue-500 font-semibold">RIGHT</span>.
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
The evil captor then picks a step size <strong>d</strong> and you follow every d-th instruction.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
|
||
<AlertTriangle className="w-4 h-4" /> The Impossible Task
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
<strong>C = 1:</strong> Maximum possible sequence length is <strong>11</strong>
|
||
</p>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
<strong>C = 2:</strong> Maximum possible sequence length is <strong>1,160</strong>
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
Terence Tao proved in 2015: <em>No infinite sequence can survive!</em>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Game Phase: Intro */}
|
||
{gamePhase === 'intro' && (
|
||
<Card className="border-2 border-dashed">
|
||
<CardContent className="py-12 text-center">
|
||
<div className="max-w-lg mx-auto">
|
||
<Skull className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
|
||
<h2 className="text-2xl font-bold mb-4">The Prisoner's Walk</h2>
|
||
<p className="text-muted-foreground mb-6">
|
||
You wake up in a dark tunnel. There's a cliff to your left and vipers to your right.
|
||
Your captor demands you write a sequence of LEFT/RIGHT instructions...
|
||
but they get to choose which instructions you follow.
|
||
</p>
|
||
|
||
<div className="mb-6">
|
||
<label className="text-sm font-medium mb-2 block">
|
||
Discrepancy Bound (C): {discrepancyBound}
|
||
</label>
|
||
<div className="flex items-center gap-4 max-w-xs mx-auto">
|
||
<span className="text-xs">1</span>
|
||
<Slider
|
||
value={[discrepancyBound]}
|
||
onValueChange={(v) => setDiscrepancyBound(v[0])}
|
||
min={1}
|
||
max={3}
|
||
step={1}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-xs">3</span>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground mt-2">
|
||
C=1: Max 11 steps | C=2: Max 1,160 steps | C=3: Unknown (very large)
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex gap-3 justify-center">
|
||
<Button onClick={startGame} size="lg">
|
||
<Play className="w-4 h-4 mr-2" />
|
||
Start Writing
|
||
</Button>
|
||
{discrepancyBound === 1 && (
|
||
<Button variant="outline" onClick={loadOptimalSequence} size="lg">
|
||
<Trophy className="w-4 h-4 mr-2" />
|
||
Load Optimal (11)
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{bestLength && (
|
||
<p className="text-sm text-muted-foreground mt-4">
|
||
Your best: <strong>{bestLength}</strong> steps with C={discrepancyBound}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Main Game UI */}
|
||
{gamePhase !== 'intro' && (
|
||
<div className="space-y-6">
|
||
{/* Status Bar */}
|
||
<div className="flex flex-wrap gap-3 items-center">
|
||
<Badge variant="outline" className="text-sm">
|
||
Length: {sequence.length}
|
||
</Badge>
|
||
<Badge variant="outline" className="text-sm">
|
||
Filled: {filledCount}/{sequence.length}
|
||
</Badge>
|
||
<Badge
|
||
variant={hasViolation ? "destructive" : maxDiscrepancy.value === discrepancyBound ? "secondary" : "outline"}
|
||
className="text-sm"
|
||
>
|
||
Max Discrepancy: {maxDiscrepancy.value}
|
||
{maxDiscrepancy.result && ` (d=${maxDiscrepancy.result.d}, k=${maxDiscrepancy.result.k})`}
|
||
</Badge>
|
||
<Badge variant="outline" className="text-sm">
|
||
Bound: C = {discrepancyBound}
|
||
</Badge>
|
||
{bestLength && (
|
||
<Badge variant="secondary" className="text-sm">
|
||
<Trophy className="w-3 h-3 mr-1" />
|
||
Best: {bestLength}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
|
||
{/* Violation Alert */}
|
||
{hasViolation && gamePhase === 'writing' && (
|
||
<Alert variant="destructive">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<AlertTitle>Bound Exceeded!</AlertTitle>
|
||
<AlertDescription>
|
||
The subsequence with d={maxDiscrepancy.result?.d}, k={maxDiscrepancy.result?.k} has
|
||
discrepancy {maxDiscrepancy.value}, which exceeds your bound of {discrepancyBound}.
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
<Tabs defaultValue="sequence" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-3">
|
||
<TabsTrigger value="sequence" className="flex items-center gap-1">
|
||
<Target className="w-4 h-4" />
|
||
<span className="hidden sm:inline">Sequence</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="walk" className="flex items-center gap-1">
|
||
<TrendingUp className="w-4 h-4" />
|
||
<span className="hidden sm:inline">Walk</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="heatmap" className="flex items-center gap-1">
|
||
<Grid3X3 className="w-4 h-4" />
|
||
<span className="hidden sm:inline">Heatmap</span>
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* Sequence Builder Tab */}
|
||
<TabsContent value="sequence" className="mt-4">
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
Write Your Instructions
|
||
{gamePhase === 'writing' && (
|
||
<Badge variant="secondary" className="ml-2">Click to toggle</Badge>
|
||
)}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* Sequence Grid */}
|
||
<div className="mb-4 overflow-x-auto">
|
||
<div className="flex gap-1 min-w-max pb-2">
|
||
{sequence.map((val, idx) => {
|
||
const pos = idx + 1;
|
||
const isHighlighted = highlightedSubsequence.includes(pos) || selectedPositions.includes(pos);
|
||
const isViolationPart = maxDiscrepancy.result?.positions.includes(pos) && hasViolation;
|
||
|
||
return (
|
||
<button
|
||
key={idx}
|
||
onClick={() => togglePosition(idx)}
|
||
disabled={gamePhase !== 'writing'}
|
||
className={`
|
||
relative w-10 h-14 rounded-lg border-2 flex flex-col items-center justify-center
|
||
transition-all duration-200
|
||
${val === 1 ? 'bg-blue-500/20 border-blue-500 text-blue-600 dark:text-blue-400' : ''}
|
||
${val === -1 ? 'bg-rose-500/20 border-rose-500 text-rose-600 dark:text-rose-400' : ''}
|
||
${val === null ? 'bg-muted/50 border-muted-foreground/30 text-muted-foreground' : ''}
|
||
${isHighlighted ? 'ring-2 ring-amber-400 ring-offset-1' : ''}
|
||
${isViolationPart ? 'ring-2 ring-destructive ring-offset-1' : ''}
|
||
${gamePhase === 'writing' ? 'hover:scale-105 cursor-pointer' : 'cursor-default'}
|
||
`}
|
||
>
|
||
<span className="text-[10px] absolute top-0.5 left-1 opacity-50">{pos}</span>
|
||
{val === 1 && <ArrowRight className="w-5 h-5" />}
|
||
{val === -1 && <ArrowLeft className="w-5 h-5" />}
|
||
{val === null && <span className="text-lg">?</span>}
|
||
</button>
|
||
);
|
||
})}
|
||
|
||
{gamePhase === 'writing' && (
|
||
<button
|
||
onClick={addPosition}
|
||
className="w-10 h-14 rounded-lg border-2 border-dashed border-muted-foreground/30
|
||
flex items-center justify-center text-muted-foreground
|
||
hover:border-primary hover:text-primary transition-colors"
|
||
>
|
||
+
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Controls */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{gamePhase === 'writing' && (
|
||
<>
|
||
<Button
|
||
onClick={revealCaptor}
|
||
disabled={!allFilled}
|
||
className="flex-1 sm:flex-none"
|
||
>
|
||
<Skull className="w-4 h-4 mr-2" />
|
||
Face the Captor
|
||
</Button>
|
||
<Button variant="outline" onClick={resetGame}>
|
||
<RotateCcw className="w-4 h-4 mr-2" />
|
||
Reset
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* Walk Visualization Tab */}
|
||
<TabsContent value="walk" className="mt-4">
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg">Walk Visualization</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* Step size selector */}
|
||
<div className="mb-4 flex flex-wrap items-center gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<label className="text-sm font-medium">Step size (d):</label>
|
||
<div className="flex gap-1">
|
||
{Array.from({ length: Math.min(sequence.length, 8) }, (_, i) => i + 1).map(d => (
|
||
<Button
|
||
key={d}
|
||
variant={selectedD === d ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => {
|
||
setSelectedD(d);
|
||
setWalkPosition(0);
|
||
setWalkStep(0);
|
||
setIsWalking(false);
|
||
}}
|
||
className="w-8 h-8 p-0"
|
||
>
|
||
{d}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<label className="text-sm">Speed:</label>
|
||
<Slider
|
||
value={[1000 - walkSpeed]}
|
||
onValueChange={(v) => setWalkSpeed(1000 - v[0])}
|
||
min={0}
|
||
max={900}
|
||
step={100}
|
||
className="w-24"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Number line visualization */}
|
||
<div className="relative h-32 bg-muted/20 rounded-lg overflow-hidden mb-4">
|
||
{/* Danger zones */}
|
||
<div
|
||
className="absolute top-0 bottom-0 bg-destructive/20 flex items-center justify-center"
|
||
style={{ left: 0, width: `${(discrepancyBound / (discrepancyBound * 2 + 3)) * 100}%` }}
|
||
>
|
||
<span className="text-destructive text-xs font-bold rotate-90">CLIFF</span>
|
||
</div>
|
||
<div
|
||
className="absolute top-0 bottom-0 bg-destructive/20 flex items-center justify-center"
|
||
style={{ right: 0, width: `${(discrepancyBound / (discrepancyBound * 2 + 3)) * 100}%` }}
|
||
>
|
||
<span className="text-destructive text-xs font-bold rotate-90">VIPERS</span>
|
||
</div>
|
||
|
||
{/* Safe zone markers */}
|
||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center">
|
||
{Array.from({ length: discrepancyBound * 2 + 1 }, (_, i) => i - discrepancyBound).map(pos => (
|
||
<div
|
||
key={pos}
|
||
className={`
|
||
w-8 h-8 mx-1 rounded-full flex items-center justify-center text-xs font-bold
|
||
${pos === 0 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}
|
||
${Math.abs(pos) === discrepancyBound ? 'border-2 border-amber-500' : ''}
|
||
`}
|
||
>
|
||
{pos}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Walker position */}
|
||
<div
|
||
className="absolute top-1/2 -translate-y-1/2 transition-all duration-300"
|
||
style={{
|
||
left: `calc(50% + ${walkPosition * 40}px - 12px)`,
|
||
}}
|
||
>
|
||
<div className="w-6 h-6 bg-amber-500 rounded-full flex items-center justify-center text-white text-xs animate-pulse">
|
||
👤
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Walk info */}
|
||
<div className="flex items-center justify-between mb-4 text-sm">
|
||
<span>Position: <strong>{walkPosition}</strong></span>
|
||
<span>Steps taken: <strong>{walkStep}</strong></span>
|
||
<span>Following: positions {selectedPositions.slice(0, 5).join(', ')}{selectedPositions.length > 5 ? '...' : ''}</span>
|
||
</div>
|
||
|
||
{/* Walk controls */}
|
||
<div className="flex gap-2">
|
||
<Button onClick={walkSubsequence} variant="outline" className="flex-1">
|
||
{isWalking ? <Pause className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
|
||
{isWalking ? 'Pause' : 'Walk d=' + selectedD}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setWalkPosition(0);
|
||
setWalkStep(0);
|
||
setIsWalking(false);
|
||
}}
|
||
>
|
||
<RotateCcw className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* Heatmap Tab */}
|
||
<TabsContent value="walk" className="mt-4">
|
||
{/* This is actually handled in the walk tab above */}
|
||
</TabsContent>
|
||
|
||
<TabsContent value="heatmap" className="mt-4">
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg">Discrepancy Heatmap</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-muted-foreground mb-4">
|
||
Each cell shows the sum of values at positions d, 2d, 3d, ..., kd.
|
||
Red cells exceed the bound.
|
||
</p>
|
||
|
||
<div className="overflow-x-auto">
|
||
<table className="text-xs">
|
||
<thead>
|
||
<tr>
|
||
<th className="p-1 text-muted-foreground">d \ k</th>
|
||
{Array.from({ length: Math.min(12, sequence.length) }, (_, i) => i + 1).map(k => (
|
||
<th key={k} className="p-1 w-8 text-center text-muted-foreground">{k}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{Array.from({ length: Math.min(8, sequence.length) }, (_, i) => i + 1).map(d => (
|
||
<tr key={d}>
|
||
<td className="p-1 font-medium text-muted-foreground">{d}</td>
|
||
{Array.from({ length: Math.min(12, sequence.length) }, (_, i) => i + 1).map(k => {
|
||
const discrepancy = getDiscrepancy(d, k);
|
||
const isValid = d * k <= sequence.length;
|
||
|
||
return (
|
||
<td
|
||
key={k}
|
||
className={`
|
||
p-1 w-8 h-8 text-center cursor-pointer transition-all
|
||
${isValid ? getHeatmapColor(discrepancy) : 'bg-transparent'}
|
||
${hoveredCell?.d === d && hoveredCell?.k === k ? 'ring-2 ring-primary' : ''}
|
||
`}
|
||
onMouseEnter={() => {
|
||
if (isValid) {
|
||
setHoveredCell({ d, k });
|
||
const result = allDiscrepancies.find(r => r.d === d && r.k === k);
|
||
if (result) {
|
||
setHighlightedSubsequence(result.positions);
|
||
}
|
||
}
|
||
}}
|
||
onMouseLeave={() => {
|
||
setHoveredCell(null);
|
||
setHighlightedSubsequence([]);
|
||
}}
|
||
>
|
||
{isValid && discrepancy !== null ? discrepancy : ''}
|
||
</td>
|
||
);
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{hoveredCell && (
|
||
<div className="mt-4 p-3 bg-muted/50 rounded-lg text-sm">
|
||
<strong>d={hoveredCell.d}, k={hoveredCell.k}:</strong> Looking at positions{' '}
|
||
{Array.from({ length: hoveredCell.k }, (_, i) => (i + 1) * hoveredCell.d).join(', ')}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* Captor Reveal Phase */}
|
||
{gamePhase === 'captor-reveal' && captorChosenD !== null && (
|
||
<Card className="border-destructive/50 bg-destructive/5">
|
||
<CardContent className="py-6 text-center">
|
||
<Skull className="w-12 h-12 mx-auto text-destructive mb-4" />
|
||
<h3 className="text-xl font-bold mb-2">The Captor Speaks...</h3>
|
||
<p className="text-muted-foreground mb-4">
|
||
"Interesting sequence... Let me see... I choose <strong className="text-destructive text-2xl">d = {captorChosenD}</strong>!"
|
||
</p>
|
||
<p className="text-sm text-muted-foreground mb-4">
|
||
You will follow every {captorChosenD === 1 ? '' : captorChosenD === 2 ? '2nd' : captorChosenD === 3 ? '3rd' : `${captorChosenD}th`} instruction:
|
||
positions {Array.from({ length: Math.floor(sequence.length / captorChosenD) }, (_, i) => (i + 1) * captorChosenD).slice(0, 8).join(', ')}...
|
||
</p>
|
||
<Button onClick={startPrisonerWalk} size="lg" variant="destructive">
|
||
<Play className="w-4 h-4 mr-2" />
|
||
Begin Walking
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Walking Phase */}
|
||
{gamePhase === 'walking' && captorChosenD !== null && (
|
||
<Card>
|
||
<CardContent className="py-6">
|
||
<div className="text-center mb-4">
|
||
<h3 className="text-lg font-bold">Walking with d = {captorChosenD}...</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Step {prisonerStep} | Position: {prisonerPosition}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Tunnel visualization */}
|
||
<div className="relative h-24 bg-gradient-to-r from-destructive/30 via-muted/20 to-destructive/30 rounded-lg overflow-hidden">
|
||
<div className="absolute inset-y-0 left-0 w-8 flex items-center justify-center">
|
||
<span className="text-2xl">🏔️</span>
|
||
</div>
|
||
<div className="absolute inset-y-0 right-0 w-8 flex items-center justify-center">
|
||
<span className="text-2xl">🐍</span>
|
||
</div>
|
||
|
||
<div
|
||
className="absolute top-1/2 -translate-y-1/2 text-3xl transition-all duration-300"
|
||
style={{
|
||
left: `calc(50% + ${prisonerPosition * (100 / (discrepancyBound * 2 + 2))}% - 16px)`
|
||
}}
|
||
>
|
||
🚶
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Fallen Phase */}
|
||
{gamePhase === 'fallen' && (
|
||
<Alert variant="destructive">
|
||
<Skull className="h-4 w-4" />
|
||
<AlertTitle>You Fell!</AlertTitle>
|
||
<AlertDescription>
|
||
After {prisonerStep} steps with d={captorChosenD}, you ended up at position {prisonerPosition}.
|
||
The captor found your weakness! Your sequence lasted {sequence.length} instructions.
|
||
<div className="mt-4 flex gap-2">
|
||
<Button onClick={startGame} variant="outline" size="sm">
|
||
Try Again
|
||
</Button>
|
||
<Button onClick={resetGame} variant="outline" size="sm">
|
||
<RotateCcw className="w-4 h-4 mr-2" />
|
||
Reset
|
||
</Button>
|
||
</div>
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* Survived Phase (temporary - sequence ended) */}
|
||
{gamePhase === 'survived' && (
|
||
<Alert className="border-emerald-500 bg-emerald-500/10">
|
||
<Trophy className="h-4 w-4 text-emerald-500" />
|
||
<AlertTitle className="text-emerald-600 dark:text-emerald-400">Sequence Complete!</AlertTitle>
|
||
<AlertDescription>
|
||
Your {sequence.length}-instruction sequence survived d={captorChosenD}!
|
||
But remember: no sequence can survive forever. Try making it longer!
|
||
<div className="mt-4 flex gap-2">
|
||
<Button onClick={() => setGamePhase('writing')} variant="outline" size="sm">
|
||
Extend Sequence
|
||
</Button>
|
||
<Button onClick={resetGame} variant="outline" size="sm">
|
||
<RotateCcw className="w-4 h-4 mr-2" />
|
||
New Game
|
||
</Button>
|
||
</div>
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Acknowledgement */}
|
||
<Card className="bg-amber-50 dark:bg-amber-950/20 border-amber-200 dark:border-amber-800">
|
||
<CardContent className="py-4">
|
||
<h3 className="font-semibold text-foreground mb-2">Credits & History</h3>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
This puzzle is based on the Erdős Discrepancy Problem, posed by Paul Erdős in the 1930s
|
||
(with a $500 prize!). The "Prisoner's Walk" framing comes from various mathematical expositions,
|
||
popularized by James Grime's singingbanana video.
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
<strong>2014:</strong> Boris Konev & Alexei Lisitsa proved C=2 has maximum length 1,160 using SAT solvers
|
||
(generating a 13GB proof!). <strong>2015:</strong> Terence Tao proved that NO infinite sequence
|
||
can have bounded discrepancy, settling the problem completely.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Social Share */}
|
||
{showSocialShare !== false && (
|
||
<SocialShare
|
||
title="Erdős Discrepancy Problem"
|
||
description="Can you survive the prisoner's tunnel? Explore why no sequence of instructions can keep you safe forever!"
|
||
url={typeof window !== 'undefined' ? `${window.location.origin}/puzzles/erdos-discrepancy` : ''}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ErdosDiscrepancyPuzzle;
|