```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // CONFIGURATION & CONSTANTS // ========================================== const WIDTH = 1200; const HEIGHT = 700; const BACKGROUND_COLOR = '#0f172a'; const FPS = 60; // Base configuration: 6 bases in a ring const BASE_COLORS = [ '#ef4444', // Red '#3b82f6', // Blue '#10b981', // Green '#f59e0b', // Orange '#8b5cf6', // Purple '#06b6d4', // Cyan ]; const BASE_NAMES = [ 'ALPHA_NODE', 'BETA_GATE', 'GAMMA_HUB', 'DELTA_CORE', 'EPSILON_NET', 'ZETA_LINK' ]; // Helper to generate random number const random = (min, max) => Math.random() * (max - min) + min; // ========================================== // GEOMETRY HELPERS (Pseudo-3D) // ========================================== // Project 3D coordinate to 2D screen (Simple Perspective) const project = (x, y, z) => { const scale = 500 / (500 + z); // Perspective scale const x2d = WIDTH / 2 + x * scale; const y2d = HEIGHT / 2 + y * scale * 0.6; // Flatten Y for isometric feel return { x: x2d, y: y2d, scale, zIndex: z }; }; // ========================================== // COMPONENTS // ========================================== export default function CyberDefenseDisplay() { // ---------------------------------------- // STATE & REFS // ---------------------------------------- // We use a tick state to force re-render every frame const [tick, setTick] = useState(0); // Refs for game loop logic to avoid React state batching issues in animation const gameState = useRef({ missiles: [], // { id, from, to, t, speed, color, p0, p1, p2 } explosions: [], // { id, x, y, color, age, maxAge } particles: [], // { id, x, y, vx, vy, life, color } lastAttackTime: 0, frameCount: 0, }); const requestRef = useRef(); // ---------------------------------------- // INITIALIZATION (Memoized) // ---------------------------------------- // Initialize Bases with 3D positions const bases = useMemo(() => { const radius = 350; return BASE_NAMES.map((name, i) => { const angle = (i / 6) * Math.PI * 2; const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; // Use Z for depth const y = 100; // Ground level offset relative to center // Generate random buildings for this base const buildings = []; const numBuildings = 4; for (let b = 0; b < numBuildings; b++) { buildings.push({ bx: (Math.random() - 0.5) * 60, // Local Offset X bz: (Math.random() - 0.5) * 60, // Local Offset Z h: random(40, 100), // Height w: random(15, 25) // Width }); } return { id: i, name, color: BASE_COLORS[i], x3d: x, y3d: y, z3d: z, buildings, ...project(x, y, z) // Pre-calculate screen pos }; }); }, []); // ---------------------------------------- // ANIMATION LOOP // ---------------------------------------- useEffect(() => { const animate = (time) => { const state = gameState.current; state.frameCount++; // 1. SPAWN MISSILES // Chance to spawn an attack every few frames if (time - state.lastAttackTime > 800) { // Every 800ms approx if (Math.random() > 0.3) { const fromIdx = Math.floor(Math.random() * bases.length); let toIdx = Math.floor(Math.random() * bases.length); while (toIdx === fromIdx) toIdx = Math.floor(Math.random() * bases.length); const fromBase = bases[fromIdx]; const toBase = bases[toIdx]; // Calculate trajectory control points (Quadratic Bezier) // Start point (top of a building roughly) const p0 = { x: fromBase.x, y: fromBase.y - 50 }; // End point const p2 = { x: toBase.x, y: toBase.y }; // Control point (High arc in the middle) const midX = (p0.x + p2.x) / 2; const midY = (p0.y + p2.y) / 2 - 300; // Arc height const p1 = { x: midX, y: midY }; state.missiles.push({ id: `m-${state.frameCount}`, from: fromIdx, to: toIdx, t: 0, // Progress 0 to 1 speed: random(0.005, 0.01), color: fromBase.color, p0, p1, p2 }); state.lastAttackTime = time; } } // 2. UPDATE MISSILES for (let i = state.missiles.length - 1; i >= 0; i--) { const m = state.missiles[i]; m.t += m.speed; // Check impact if (m.t >= 1) { // Create Explosion state.explosions.push({ id: `e-${state.frameCount}-${i}`, x: m.p2.x, y: m.p2.y, color: m.color, age: 0, maxAge: 40 }); // Create Particles (Debris) for(let p=0; p<8; p++) { state.particles.push({ id: `p-${state.frameCount}-${i}-${p}`, x: m.p2.x, y: m.p2.y, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6, life: 1.0, color: m.color }); } // Remove missile state.missiles.splice(i, 1); } } // 3. UPDATE EXPLOSIONS for (let i = state.explosions.length - 1; i >= 0; i--) { const e = state.explosions[i]; e.age++; if (e.age > e.maxAge) { state.explosions.splice(i, 1); } } // 4. UPDATE PARTICLES for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.x += p.vx; p.y += p.vy; p.life -= 0.03; if (p.life <= 0) { state.particles.splice(i, 1); } } // Trigger Render setTick(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [bases]); // Dependency array is bases (static), effectively [] // ---------------------------------------- // RENDER HELPERS // ---------------------------------------- // Draw a 3D building block const Building = ({ x, y, w, h, color, scale }) => { // Basic isometric-ish projection for the block itself relative to base center // We already have screen X, Y. We just need to draw the volume up. // Scale dimensions based on depth const sW = w * scale; const sH = h * scale; // Faces const roofColor = color; const leftColor = adjustColor(color, -40); // Darker const rightColor = adjustColor(color, -80); // Even darker // Vertices // Center Bottom: x, y // Center Top: x, y - sH const depthSkew = sW * 0.5; // Slight skew for 3D look // Front Face (Rectangle) // Actually, let's do a proper extruded hexagon or simple cube logic // Let's do a simple "Corner looking" cube // p2 // / \ // p1 p3 // | | // p0 p4 // \ / // p5 // Adjusted for "Top down" view slightly const p5 = { x: x, y: y }; // Bottom Center const p0 = { x: x - sW, y: y - sW * 0.5 }; // Bottom Left const p4 = { x: x + sW, y: y - sW * 0.5 }; // Bottom Right const p1 = { x: x - sW, y: y - sW * 0.5 - sH }; // Top Left const p3 = { x: x + sW, y: y - sW * 0.5 - sH }; // Top Right const pCenterTop = { x: x, y: y - sH }; // Top Center (Front) - wait, this is ambiguous. // Simpler: Just 3 faces: Top, Left Side, Right Side // Center Point of the "Y" junction const cy = y - sH; return ( {/* Left Face */} {/* Right Face */} {/* Top Face */} {/* Windows / Tech Details */} ); }; // ---------------------------------------- // RENDER // ---------------------------------------- // Sort bases by Z-index (painter's algorithm) so front bases cover back bases const sortedBases = [...bases].sort((a, b) => a.zIndex - b.zIndex); return (

); } // ---------------------------------------- // UTILS // ---------------------------------------- // Helper to darken/lighten hex color function adjustColor(color, amount) { const clamp = (val) => Math.min(Math.max(val, 0), 255); const removeHash = color.replace('#', ''); const num = parseInt(removeHash, 16); let r = (num >> 16) + amount; let g = ((num >> 8) & 0x00FF) + amount; let b = (num & 0x0000FF) + amount; return `#${(g | (b << 8) | (r << 16)).toString(16).padStart(6, '0')}`; } ```