'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Crosshair, Shield, Sword, Wind, Map as MapIcon, Target } from 'lucide-react'; // ----------------------------------------------------------------------------- // Utility & Constants // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const PHASE_DURATION = 5000; // ms per phase // Colors const C_QIN_BLACK = '#0f172a'; // Deep black/slate const C_QIN_RED = '#991b1b'; // Qin dark red const C_BRONZE = '#d97706'; // Bronze/Gold highlights const C_ENEMY = '#d6d3d1'; // Stone grey/earth const C_BG_PAPER = '#f5f5dc'; // Parchment base const C_GRID = 'rgba(21, 94, 117, 0.15)'; // Cyan grid low opacity // ----------------------------------------------------------------------------- // Sub-components // ----------------------------------------------------------------------------- // 1. Background Map Layer const TacticalBackground = () => ( ); // 2. Arrow Rain Effect const ArrowVolley = ({ isActive, targetY }) => { // Generate static arrow paths once const arrows = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => { const startX = 300 + Math.random() * 600; const startY = 550 + Math.random() * 50; const endX = 400 + Math.random() * 400; // Concentrate on enemy center const endY = targetY + Math.random() * 80; const controlY = startY - 300 - Math.random() * 100; // Arc height return { id: i, path: `M ${startX} ${startY} Q ${(startX + endX) / 2} ${controlY} ${endX} ${endY}`, delay: Math.random() * 0.5 }; }); }, [targetY]); return ( ); }; // 3. Qin Infantry Phalanx const QinPhalanx = ({ phase }) => { // Grid of soldiers const rows = 4; const cols = 12; const soldiers = useMemo(() => { const arr = []; for(let r=0; r= 1; const isFlanking = phase === 2; return ( {soldiers.map((s) => (

{/* Spear Animation (Phase 2) */} {/* Soldier Block */} {/* Crossbow Highlight (Phase 1) */} {phase === 0 && s.r === 0 && ( )} {/* Flag (Only on edges) */} {(s.c === 0 || s.c === cols - 1) && (

)}

))} ); }; // 4. Enemy Formation const EnemyFormation = ({ phase }) => { const isHit = phase === 0; const isSurrounded = phase === 2; return ( {Array.from({ length: 30 }).map((_, i) => ( {/* Enemy symbols */}

))} ); }; // 5. Chariot Flanking Units const ChariotUnit = ({ side, phase }) => { // side: 'left' | 'right' const isActive = phase === 2; const startX = side === 'left' ? 100 : WIDTH - 100; const startY = 550; // Bezier path for flanking const endX = side === 'left' ? 300 : WIDTH - 300; const endY = 150; // We use keyframes to simulate the path movement since offset-path support varies or is complex in pure React style without CSS modules const moveVariants = { idle: { x: 0, y: 0, opacity: 0 }, attack: { x: side === 'left' ? [0, 50, 200] : [0, -50, -200], y: [0, -200, -400], opacity: 1, rotate: side === 'left' ? [0, 20, 45] : [0, -20, -45], transition: { duration: 3, ease: "easeInOut" } } }; return (

{side === 'left' ? '左军' : '右军'}

{/* Wheel symbol */}

); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const TacticalDemonstration = () => { const [phase, setPhase] = useState(0); // 0: Ranged, 1: Advance, 2: Flank const [timer, setTimer] = useState(0); // Main Loop useEffect(() => { let startTime = performance.now(); const loop = (now) => { const elapsed = now - startTime; const totalCycle = PHASE_DURATION * 3; const normalizedTime = elapsed % totalCycle; // Determine Phase let currentPhase = 0; if (normalizedTime < PHASE_DURATION) currentPhase = 0; else if (normalizedTime < PHASE_DURATION * 2) currentPhase = 1; else currentPhase = 2; setPhase(currentPhase); setTimer(normalizedTime); requestAnimationFrame(loop); }; const rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, []); // Phase Info Texts const phaseInfo = [ { title: "壹 · 强弩压制", desc: "SURPRESSION", icon: }, { title: "贰 · 步兵推进", desc: "ADVANCE", icon: }, { title: "叁 · 两翼合围", desc: "ENCIRCLEMENT", icon: }, ]; return (

{/* 1. Background */} {/* 2. Game Objects */} {/* 3. UI Overlay */}

秦

帝国战术演示

TACTICAL SIMULATION: QIN DYNASTY

{/* Phase Indicator */}

{phaseInfo.map((info, idx) => ( {info.icon}

{info.title}

{info.desc}

))}

{/* 4. Decorative Map Elements */}

COORDS: 34.15° N, 108.94° E
WIND: NW 12km/h
TERRAIN: PLAINS

{/* Vignette & Grain Overlay for Cinematic feel */}

); };