Boxing Simulation

• 

• 

Inspiration

Shadowboxing and heavy bag workouts are staples in boxing training, but they lack a crucial element: unpredictability. When you train alone, you know exactly what you are going to do, which doesn't train your reaction time or defensive reflexes. I wanted to build a virtual sparring partner—an accessible, web-based tool that throws unpredictable combinations and moves dynamically, forcing the user to react, slip, and counter just like they would in a real ring.

What it does

Virtual Boxing Sparring Simulation is an interactive, video-based training application that acts as your digital opponent.

Customizable Workouts: Users can dive into the settings to configure round duration, rest duration, and the total number of rounds.

Immersive Simulation: Once the timer counts down, the app seamlessly loops randomized point-of-view videos of an opponent throwing jabs, hooks, and combinations, mixed with weaving and idle movements.

Unpredictable Pacing: To simulate a real human opponent, the "idle" and "weaving" videos are programmed to play for randomized durations, keeping the user entirely on their toes.

Fight to the Bell: A built-in feature allows users to hide the timer during the round, creating an immersive experience where you have to keep working until you hear the bell, rather than watching the clock.

Rest Periods: Automatically transitions to a dedicated "Boxer at Rest" video between active rounds to keep the atmosphere authentic.

How we built it

The project was built as a single-page application using React, Tailwind CSS for rapid and responsive styling, and React Router for seamless navigation.

State Management: Used React Context (SettingsContext) to manage user configurations globally across the app.

Core Engine: The heart of the simulation relies heavily on React hooks (useState, useEffect, useRef) to manage the complex interval timers and synchronize them with video playback.

Media Handling: We utilized HTML5 elements, dynamically changing the src attribute between active clips and rest state clips.

UI/UX: We used lucide-react for clean, minimal iconography to ensure the interface stays out of the user's way during a workout.

Challenges I ran into

State Synchronization: Managing the complex state transitions between the initial countdown, active rounds, and rest periods without the timer drifting or skipping was incredibly tricky.

Video Timing & Unpredictability: Creating the "unpredictable" movements required calculating random playback durations for specific videos. I had to use the loadedmetadata event listener to fetch the video's full duration, calculate a random slice, and trigger the next video without breaking the continuous playback loop.

Media Promises & Error Handling: Dealing with HTML5 video play() promises was a hurdle. Sometimes videos wouldn't load fast enough or would throw playback errors. I had to implement a robust .catch() block and an onError handler to ensure the app automatically skips to the next video instead of crashing and ruining the user's workout.

Accomplishments I'm proud of

Seamless Flow: I successfully built an uninterrupted workout loop. The transition between fast-paced sparring videos and the rest period feels natural.

Dynamic Playback Logic: The custom logic that randomizes the duration of the opponent's defensive/idle moves takes the app from a simple "video playlist" to something that actually feels like a reactive sparring partner.

Clean Architecture: Breaking the app down into clean, modular components (Start Page, Simulation Page, Settings Modal) makes the codebase highly scalable for future features.

What I learned

This project was a massive deep dive into the HTML5 Video DOM API and how it interacts with React's virtual DOM. I learned how to handle media promises safely, manipulate video metadata on the fly, and manage complex interval cleanups inside useEffect dependencies to prevent memory leaks and ghost timers.

What's next for Boxing Simulation

Computer Vision Integration: Implementing a pose-estimation library (like MediaPipe or TensorFlow.js) via webcam to track the user's dodges and punches, scoring them based on their reaction time to the video prompts.

Opponent Styles: Adding different video sets for different types of fighters (e.g., Southpaw, Pressure Fighter, Out-boxer) so users can train for specific matchups.

Audio Cues: Adding referee sounds, corner-man advice, and authentic boxing bell sound effects for a richer auditory experience.

Built With

• node.js
• react
• tailwind-css
• typescript