import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; // Utility for random numbers (seeded-like behavior for consistency if needed, though simple random is fine here) const random = (min, max) => Math.random() * (max - min) + min; // Helper to generate thunder path const generateThunder = (x1, y1, x2, y2, segments = 10, amp = 20) => { let d = `M ${x1} ${y1}`; let cx = x1; let cy = y1; const dx = (x2 - x1) / segments; const dy = (y2 - y1) / segments; for (let i = 0; i < segments; i++) { cx += dx; cy += dy; const offsetX = (Math.random() - 0.5) * amp; const offsetY = (Math.random() - 0.5) * amp; d += ` L ${cx + offsetX} ${cy + offsetY}`; } d += ` L ${x2} ${y2}`; return d; }; // Component export default function ThunderPrisonVsAbyssSword() { // Animation State const [time, setTime] = useState(0); const reqRef = useRef(); const startTimeRef = useRef(null); // Constants for timing (ms) const T_SLASH_START = 2000; const T_CONTACT = 2500; const T_BITE_DURATION = 3000; // 2500 -> 5500 const T_SHATTER = 5500; const T_TELEPORT = 7000; const T_VOID_SLASH = 7500; const T_BLOOM = 8500; const T_END = 14000; // Animation Loop useEffect(() => { const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // Limit updates to avoid React overload, but keep smooth enough (approx 60fps logic) setTime(elapsed); if (elapsed < T_END) { reqRef.current = requestAnimationFrame(animate); } }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, []); // --- Computed States based on Time --- // 1. Scene Darkening (The "Absorbed Light" effect) const darknessOpacity = useMemo(() => { if (time < T_SLASH_START) return 0; if (time < T_CONTACT) return (time - T_SLASH_START) / 500; // Fade to black if (time < T_SHATTER) return 0.8; // Stay dark during bite if (time < T_TELEPORT) return 0.8 - (time - T_SHATTER) / 1000; // Light returns slightly return 0.2; }, [time]); // 2. Character Positions const supremePos = useMemo(() => { const base = { x: 300, y: 350 }; // Jitter during bite if (time > T_CONTACT && time < T_SHATTER) { base.x += (Math.random() - 0.5) * 5; base.y += (Math.random() - 0.5) * 5; } return base; }, [time]); const demonPos = useMemo(() => { const startX = 900; const targetX = 450; // Close to Supreme if (time < T_SLASH_START) return { x: startX, y: 350, opacity: 1 }; if (time < T_CONTACT) { // Dash const p = (time - T_SLASH_START) / (T_CONTACT - T_SLASH_START); return { x: startX - (startX - targetX) * p, y: 350, opacity: 1 }; } if (time < T_SHATTER) return { x: targetX, y: 350, opacity: 1 }; if (time < T_TELEPORT) return { x: targetX, y: 350, opacity: 1 - (time - T_SHATTER) / 500 }; // Fade out // Teleport behind return { x: 150, y: 350, opacity: Math.min(1, (time - T_TELEPORT) / 500) }; }, [time]); // 3. Thunder Effects (Supreme) const thunderPaths = useMemo(() => { if (time > T_SHATTER + 1000) return []; // Stop thunder after shatter/stun const paths = []; const count = time > T_CONTACT && time < T_SHATTER ? 8 : 3; // More thunder during bite const intensity = time > T_CONTACT && time < T_SHATTER ? 60 : 30; for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const len = 100 + Math.random() * 100; const ex = supremePos.x + Math.cos(angle) * len; const ey = supremePos.y + Math.sin(angle) * len; paths.push(generateThunder(supremePos.x, supremePos.y, ex, ey, 8, intensity)); } return paths; }, [time, supremePos]); // 4. Black Blood Particles const bloodParticles = useMemo(() => { if (time < T_CONTACT) return []; const drops = []; // Deterministic generation based on time slots const duration = T_SHATTER - T_CONTACT; const count = 30; for (let i = 0; i < count; i++) { const spawnTime = T_CONTACT + (i * (duration / count)); if (time > spawnTime) { const age = time - spawnTime; // Physics const startX = 375; // Between them const startY = 350; const velocityY = 0.2; const y = startY + velocityY * age; // "Burning hole" effect when hitting "floor" (virtual floor at y=550) const floorY = 550; const isHit = y >= floorY; drops.push({ id: i, x: startX + (Math.sin(i) * 10), // slight scatter y: isHit ? floorY : y, r: isHit ? 5 + (age - (floorY - startY)/velocityY) * 0.05 : 3, // Expand if hit opacity: isHit ? Math.max(0, 1 - (age - (floorY - startY)/velocityY) * 0.002) : 1, isHit }); } } return drops; }, [time]); // 5. Moon Shards (Shatter) const shards = useMemo(() => { if (time < T_SHATTER) return []; const particles = []; const count = 60; const age = time - T_SHATTER; for (let i = 0; i < count; i++) { // Deterministic pseudo-random based on index const angle = (i * 137.5) * (Math.PI / 180); const speed = 0.1 + (i % 5) * 0.05; const dist = age * speed; particles.push({ x: 375 + Math.cos(angle) * dist, y: 350 + Math.sin(angle) * dist, opacity: Math.max(0, 1 - age / 2000), rotation: age * 0.5 + i * 10 }); } return particles; }, [time]); // 6. Void Flower const flowerPath = useMemo(() => { // Rose curve or similar const points = []; const k = 4; // Petals const radius = 60; for (let theta = 0; theta <= Math.PI * 2; theta += 0.05) { const r = radius * Math.cos(k * theta); const x = r * Math.cos(theta); const y = r * Math.sin(theta); points.push(`${x},${y}`); } return `M ${points.join(' L ')} Z`; }, []); const flowerScale = useMemo(() => { if (time < T_BLOOM) return 0; const age = time - T_BLOOM; return Math.min(1, age / 2000); }, [time]); // 7. Sword Beam / Void Slash const voidSlash = useMemo(() => { if (time < T_VOID_SLASH) return null; const age = time - T_VOID_SLASH; if (age > 500) return null; // Quick slash // A diagonal cut across the screen const width = age * 4; return ( ); }, [time]); return (

{/* Cinematic Vignette Overlay (HTML/CSS) */}

); }