'use client'; import React, { useState, useEffect, useRef } from 'react'; export default function CvsJavaAnimation() { // Animation phases: // 0: Init // 1: Java Showing Off (Kung Fu) // 2: C Draws Weapon // 3: C Fires (Beam) // 4: Java Sliced (Impact) // 5: Pause before reset const [phase, setPhase] = useState(0); const [time, setTime] = useState(0); // Used for continuous animations (waving) // Animation Loop for continuous movement (Java's wavy motion) useEffect(() => { let animationFrameId; const animate = () => { setTime(t => t + 0.1); animationFrameId = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(animationFrameId); }, []); // Sequence Controller useEffect(() => { let timeout; const runSequence = async () => { // Phase 1: Java showing off setPhase(1); await new Promise(r => setTimeout(r, 2500)); // Phase 2: C prepares setPhase(2); await new Promise(r => setTimeout(r, 800)); // Phase 3: Fire setPhase(3); await new Promise(r => setTimeout(r, 200)); // Phase 4: Impact/Death setPhase(4); await new Promise(r => setTimeout(r, 3000)); // Loop runSequence(); }; runSequence(); return () => clearTimeout(timeout); }, []); // Constants const GROUND_Y = 500; const C_X = 250; const JAVA_X = 750; const HEAD_RADIUS = 25; const BODY_LENGTH = 70; // Helper to calculate Java's arm rotation based on phase const getJavaArmRotation = () => { if (phase >= 4) return 120; // Dead arm position if (phase === 1) return Math.sin(time * 10) * 40 - 45; // Frantic waving return -45; // Resting pose }; const getJavaSwordRotation = () => { if (phase >= 4) return 90; if (phase === 1) return Math.sin(time * 15) * 60; // Frantic spinning return 0; }; return ( ); }