blogs/sites/vibes/src/components/problems/README.md

100 Prisoners Problem - Interactive Blog Post

This directory contains the interactive React components for the "100 Prisoners Problem" blog post, inspired by the interactive style of Nicky Case's explorable explanations.

Files Created

Blog Post

• src/content/puzzles/100-prisoners.mdx - The main blog post with embedded interactive components

Interactive Components

1. PrisonerGameSimulator.tsx - Interactive game simulation

   • Allows users to play the prisoner game themselves
   • Adjustable number of prisoners (5-100)
   • Manual box clicking to experience the problem
   • Visual feedback for success/failure
   • Tracks current prisoner and attempts remaining

2. ProbabilityChart.tsx - Probability visualization

   • Shows probability curves for naive and loop strategies
   • Uses logarithmic scale for naive strategy (values get extremely small)
   • Interactive SVG chart with proper axes and labels
   • Includes explanatory text

3. PermutationExplorer.tsx - Cycle structure explorer

   • Generates all permutations for n ∈ {3, 4, 5}
   • Displays both standard and cycle notation
   • Filter by presence of long cycles (> n/2)
   • Color-coded display (red for long cycles, green for short)
   • Shows statistics about cycle length distribution

4. StrategyComparison.tsx - Side-by-side strategy comparison

   • Compares naive vs. loop strategy on same chart
   • Shows probabilities up to n=100
   • Includes detailed numerical breakdown
   • Highlights the key 31.18% result at n=100

Features

All components are:

• ✅ Fully interactive with React hooks
• ✅ Styled with Tailwind CSS classes
• ✅ Responsive for mobile and desktop
• ✅ Self-contained with no external dependencies beyond React
• ✅ Client-side only (using client:only="react" in Astro)

How It Works

The Problem

100 prisoners must each find their own number among 100 boxes by opening at most 50 boxes. If all prisoners succeed, they go free. They can agree on a strategy beforehand but cannot communicate during the challenge.

The Naive Strategy

Each prisoner opens 50 random boxes. Probability of success: (1/2)^100 ≈ 0%

The Clever Strategy (Loop Following)

1. Open the box with your own number
2. Look at the number inside
3. Open the box with that number
4. Repeat until you find your number

This exploits the cycle structure of permutations. Success probability: ~31.18%!

Key Mathematical Insight

The prisoners succeed if and only if the permutation of numbers in boxes has no cycle longer than n/2. For n=100, the probability of this is:

P(success) = 1 - Σ(1/k) for k=51 to 100 ≈ 0.3118

As n→∞, this converges to 1 - ln(2) ≈ 0.3069.

Usage in MDX

The components are imported and used like this:

```mdx import PrisonerGameSimulator from '@/components/problems/PrisonerGameSimulator.tsx'; import ProbabilityChart from '@/components/problems/ProbabilityChart.tsx'; import PermutationExplorer from '@/components/problems/PermutationExplorer.tsx'; import StrategyComparison from '@/components/problems/StrategyComparison.tsx';

\`\`\`

Design Philosophy

Inspired by Nicky Case's "Parable of the Polygons", these components aim to:

• Make abstract mathematical concepts tangible through interaction
• Allow readers to explore and discover patterns themselves
• Provide immediate visual feedback
• Balance playfulness with mathematical rigor
• Guide understanding through progressive disclosure

Future Enhancements

Potential additions:

• Auto-play mode for the game simulator using the loop strategy
• Animation showing cycle formation in real-time
• Monte Carlo simulation running multiple trials
• Variant problems (different box-opening rules, malicious director, etc.)
• 3D visualization of cycle structures for larger n

References

• Wikipedia: 100 Prisoners Problem
• Nicky Case's Explorable Explanations
• Original problem: Gál & Miltersen (2003)