import { useState, useEffect } from 'react'; import { FieldCanvas } from './components/FieldCanvas'; import { DrillTimeline } from './components/DrillTimeline'; import { STEPS, getPositionsForStep } from './lib/drill'; import { Play, Pause, RotateCcw, LayoutTemplate, Info, X, SkipBack, SkipForward } from 'lucide-react'; import './index.css'; export default function App() { const [cycle, setCycle] = useState(0); const [step, setStep] = useState(0); const [playing, setPlaying] = useState(false); const [showInfo, setShowInfo] = useState(false); useEffect(() => { if (!playing) return; const currentDuration = STEPS[step].duration; // Automatically transition to the next step const timer = setTimeout(() => { if (step === STEPS.length - 1) { setStep(0); setCycle(c => c + 1); } else { setStep(s => s + 1); } }, currentDuration); return () => clearTimeout(timer); }, [playing, step, cycle]); // Derive all rendered positions mathematically from cycle and step const { pos, discX, discY, markX, markY, markAngle } = getPositionsForStep(cycle, step); return (
{/* Header Navigation */}

Half-Flat Break-Side Pivot

Tactical Drill Simulator

{/* Main Workspace */}
{/* Sidebar Controls */} {/* Tactical Field Visualizer */}
{/* Overlay Legend */}
Handler
Cutter
Defense
{/* Info Modal Overlay */} {showInfo && (

Drill Overview

The Isolation Break Drill focuses on exploiting the defense using handler movement to open up the break side from a half-flatstack setup.

Sequence of Motions

  1. Initiation: The breakside handler drives hard to the open side, threatening a give-and-go cut. The mark tracks this movement.
  2. The Fake: The central handler (with the disc) fakes a throw to the open side, forcing the mark to bite and shift their weight fully into the open lane.
  3. The Pivot: Exploiting the mark's overcommitment, the central handler rapidly pivots back to the breakside, stepping around the off-balance defender.
  4. The Cut: Synchronized perfectly with the thrower's pivot, the cutter on the line (breakside) makes a hard cut parallel to the sideline towards the disc.
  5. The Throw: The handler delivers a breakside pass into space, allowing the cutter to catch it in stride and continue advancing upfield.

Coaching Tip: Ensure the line cutter doesn't start their cut too early. They must wait for the central handler's eyes to snap back to the break side before initiating the horizontal cut so they arrive exactly on time.

)}
{/* Playback Control Bar */}
); }