[V0_FILE]typescriptreact:file="utils/format-time.ts" isMerged="true" export function formatTime(timestamp: number): string { const date = new Date(timestamp) return date.toLocaleString() } export function formatTimeAgo(timestamp: number): string { const now = Date.now() const timeMs = timestamp const diffMs = now - timeMs const seconds = Math.floor(diffMs / 1000) const minutes = Math.floor(seconds / 60) const hours = Math.floor(minutes / 60) const days = Math.floor(hours / 24) if (days > 0) return `${days}d ago` if (hours > 0) return `${hours}h ago` if (minutes > 0) return `${minutes}m ago` return `${seconds}s ago` } [V0_FILE]typescriptreact:file="types/scoreboard.ts" isMerged="true" export type BloodType = "Unaccepted" | "FirstBlood" | "SecondBlood" | "ThirdBlood" | "Normal" export type ChallengeCategory = | "Misc" | "Crypto" | "Pwn" | "Web" | "Reverse" | "Blockchain" | "Forensics" | "Hardware" | "Mobile" | "PPC" | "AI" | "Pentest" | "OSINT" export interface TimelineItem { time: number score: number } export interface TeamTimeline { id: number name: string items: TimelineItem[] } export interface SolvedChallenge { id: number score: number type: BloodType userName: string | null time: number } export interface TeamInfo { id: number name: string bio: string | null division: string | null avatar: string | null score: number rank: number divisionRank: number | null lastSubmissionTime: number solvedChallenges: SolvedChallenge[] solvedCount: number } export interface BloodInfo { id: number name: string avatar: string | null submitTimeUtc: number | null } export interface ChallengeInfo { id: number title: string category: ChallengeCategory score: number solved: number bloods: BloodInfo[] disableBloodBonus: boolean } export interface ScoreboardResponse { updateTimeUtc: number bloodBonus: number timeLines: Record items: TeamInfo[] challenges: Record challengeCount: number } [V0_FILE]typescriptreact:file="services/scoreboard-service.ts" isMerged="true" import type { ScoreboardResponse } from "@/types/scoreboard" const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL export async function getScoreboard(gameId: string): Promise { const response = await fetch(`${BASE_URL}/api/game/${gameId}/scoreboard`, { credentials: "include", // This enables sending cookies with cross-origin requests }) if (!response.ok) { throw new Error(`Failed to fetch scoreboard: ${response.status} ${response.statusText}`) } return response.json() } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { // Redirect to a default game ID // In a real app, you might want to fetch available games or show a selection screen redirect("/scoreboard/9") } [V0_FILE]typescriptreact:file="types/events.ts" isMerged="true" export type EventType = "Normal" | "ContainerStart" | "ContainerDestroy" | "FlagSubmit" | "CheatDetected" export interface GameEvent { type: EventType values: string[] time: number user?: string team?: string } export type EventsResponse = GameEvent[] [V0_FILE]typescriptreact:file="services/events-service.ts" isMerged="true" import type { EventsResponse } from "@/types/events" const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL export async function getEvents(gameId: string): Promise { const response = await fetch(`${BASE_URL}/api/game/${gameId}/events?hideContainer=true&count=30&skip=0`, { credentials: "include", // This enables sending cookies with cross-origin requests }) if (!response.ok) { throw new Error(`Failed to fetch events: ${response.status} ${response.statusText}`) } return response.json() } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", success: "border-transparent bg-green-500 text-white hover:bg-green-500/80", warning: "border-transparent bg-orange-500 text-white hover:bg-orange-500/80", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="types/game.ts" isMerged="true" export type TeamStatus = "Pending" | "Accepted" | "Rejected" | "Suspended" | "Unsubmitted" export interface GameDetail { id: number title: string summary: string content: string hidden: boolean divisions: string[] | null inviteCodeRequired: boolean writeupRequired: boolean poster: string | null limit: number teamCount: number division: string | null teamName: string | null practiceMode: boolean status: TeamStatus start: number end: number } [V0_FILE]typescriptreact:file="services/game-service.ts" isMerged="true" import type { GameDetail } from "@/types/game" const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL export async function getGameDetail(gameId: string): Promise { const response = await fetch(`${BASE_URL}/api/game/${gameId}`, { credentials: "include", }) if (!response.ok) { throw new Error(`Failed to fetch game details: ${response.status} ${response.statusText}`) } return response.json() } [V0_FILE]typescriptreact:file="types/challenge.ts" isMerged="true" export interface Challenge { id: number title: string category: string score: number solved: number bloods: Array<{ id: number name: string avatar: string | null submitTimeUtc: number | null }> disableBloodBonus: boolean } export interface ChallengeDetail { id: number title: string category: string content: string hints: Array<{ id: number content: string cost: number }> attachments: Array<{ id: number name: string url: string }> score: number solved: number bloods: Array<{ id: number name: string avatar: string | null submitTimeUtc: number | null }> disableBloodBonus: boolean } export interface GameDetails { id: number title: string summary: string content: string hidden: boolean divisions: string[] | null inviteCodeRequired: boolean writeupRequired: boolean poster: string | null limit: number teamCount: number division: string | null teamName: string | null practiceMode: boolean status: string start: number end: number challenges: Record } [V0_FILE]typescriptreact:file="services/challenge-service.ts" isMerged="true" import type { ChallengeDetail, GameDetails } from "@/types/challenge" const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL export async function getGameDetails(gameId: string): Promise { const response = await fetch(`${BASE_URL}/api/game/${gameId}/details`, { credentials: "include", }) if (!response.ok) { throw new Error(`Failed to fetch game details: ${response.status} ${response.statusText}`) } return response.json() } export async function getChallengeDetail(gameId: string, challengeId: number): Promise { const response = await fetch(`${BASE_URL}/api/game/${gameId}/challenges/${challengeId}`, { credentials: "include", }) if (!response.ok) { throw new Error(`Failed to fetch challenge detail: ${response.status} ${response.statusText}`) } return response.json() } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.7.3" } } [V0_FILE]typescriptreact:file="components/rotation-status.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface RotationStatusProps { isRotating: boolean currentGroup: number totalGroups: number rotationInterval: number // in milliseconds } export function RotationStatus({ isRotating, currentGroup, totalGroups, rotationInterval }: RotationStatusProps) { const [timeLeft, setTimeLeft] = useState(rotationInterval / 1000) const [progress, setProgress] = useState(0) useEffect(() => { if (!isRotating || totalGroups <= 1) return const startTime = Date.now() const interval = setInterval(() => { const elapsed = Date.now() - startTime const remaining = Math.max(0, rotationInterval - (elapsed % rotationInterval)) const progressPercent = ((rotationInterval - remaining) / rotationInterval) * 100 setTimeLeft(Math.ceil(remaining / 1000)) setProgress(progressPercent) }, 100) return () => clearInterval(interval) }, [isRotating, currentGroup, rotationInterval, totalGroups]) } [V0_FILE]typescriptreact:file="app/glow-effects.css" isEdit="true" isQuickEdit="true" isMerged="true" /* 宇宙战场主题 - 深空色彩系统 */ :root { --deep-space-blue: #0a192f; --gradient-gray-start: #1e2a3a; --gradient-gray-end: #0f1722; --neon-ice-blue: #67e8f9; --neon-pink-purple: #d8b4fe; --neon-orange-yellow: #facc15; --neon-grass-green: #84cc16; --success-green: #4ade80; --warning-yellow: #fde047; --danger-red: #ef4444; } @keyframes neonGlow { 0%, 100% { text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 15px #00bfff; box-shadow: 0 0 5px #00bfff; } 50% { text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 30px #00bfff; box-shadow: 0 0 10px #00bfff; } } @keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes rotate3d { 0% { transform: rotateY(0deg) rotateX(10deg); } 100% { transform: rotateY(360deg) rotateX(10deg); } } @keyframes floatUp { 0% { transform: translateY(0px); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } } .cyber-bg { background: linear-gradient(135deg, #0a1428 0%, #1a2744 50%, #0f1b2e 100%); position: relative; } .cyber-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, rgba(0, 191, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 191, 255, 0.1) 0%, transparent 50%); pointer-events: none; } .cyber-panel { background: rgba(10, 20, 40, 0.9); border: 1px solid rgba(0, 191, 255, 0.3); border-radius: 8px; backdrop-filter: blur(10px); box-shadow: 0 0 20px rgba(0, 191, 255, 0.1), inset 0 0 20px rgba(0, 191, 255, 0.05); } .cyber-panel-header { background: linear-gradient(90deg, rgba(0, 191, 255, 0.2), rgba(0, 191, 255, 0.1)); border-bottom: 1px solid rgba(0, 191, 255, 0.3); padding: 8px 12px; font-weight: bold; color: #00bfff; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; } .neon-text { color: #00bfff; text-shadow: 0 0 10px #00bfff; } .center-stage { perspective: 1000px; display: flex; justify-content: center; align-items: center; height: 100%; position: relative; } .stage-3d { width: 400px; height: 400px; position: relative; transform-style: preserve-3d; animation: rotate3d 20s linear infinite; } .stage-platform { width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 191, 255, 0.2), rgba(0, 100, 200, 0.1)); border: 2px solid #00bfff; border-radius: 50%; position: absolute; box-shadow: 0 0 50px rgba(0, 191, 255, 0.3), inset 0 0 50px rgba(0, 191, 255, 0.1); } .stage-ring { position: absolute; border: 1px solid rgba(0, 191, 255, 0.5); border-radius: 50%; animation: pulse 3s infinite; } .stage-ring:nth-child(1) { width: 120%; height: 120%; top: -10%; left: -10%; animation-delay: 0s; } .stage-ring:nth-child(2) { width: 140%; height: 140%; top: -20%; left: -20%; animation-delay: 1s; } .stage-ring:nth-child(3) { width: 160%; height: 160%; top: -30%; left: -30%; animation-delay: 2s; } .floating-node { position: absolute; width: 20px; height: 20px; background: radial-gradient(circle, #00bfff, rgba(0, 191, 255, 0.3)); border-radius: 50%; box-shadow: 0 0 20px #00bfff; animation: pulse 2s infinite; } .top-badge { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ffd700, #ffb347); color: #000; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 14px; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); z-index: 10; } .score-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #00bfff; font-size: 48px; font-weight: bold; text-shadow: 0 0 20px #00bfff; z-index: 5; } .team-name-display { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; font-weight: bold; text-align: center; z-index: 5; } @keyframes spiral { 0% { transform: rotateY(0deg) translateZ(300px) rotateY(0deg); } 100% { transform: rotateY(360deg) translateZ(300px) rotateY(-360deg); } } @keyframes overtake { 0% { transform: translateY(0px) scale(1); filter: brightness(1); } 50% { transform: translateY(-50px) scale(1.2); filter: brightness(2) drop-shadow(0 0 20px #ffff00); } 100% { transform: translateY(0px) scale(1); filter: brightness(1); } } @keyframes beamPulse { 0%, 100% { opacity: 0.8; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.5); } } @keyframes targetHit { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); } 25% { transform: scale(1.3) rotate(90deg); filter: brightness(3) hue-rotate(180deg); } 50% { transform: scale(1.1) rotate(180deg); filter: brightness(2) hue-rotate(360deg); } 75% { transform: scale(1.2) rotate(270deg); filter: brightness(2.5) hue-rotate(180deg); } 100% { transform: scale(1) rotate(360deg); filter: brightness(1); } } @keyframes thrusterBoost { 0%, 100% { box-shadow: 0 0 10px rgba(255, 100, 0, 0.5); } 50% { box-shadow: 0 0 30px rgba(255, 100, 0, 1), 0 0 50px rgba(255, 200, 0, 0.8); } } .cyber-arena-3d { perspective: 1200px; perspective-origin: center center; transform-style: preserve-3d; } .spaceship-3d { transform-style: preserve-3d; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .spaceship-3d.overtaking { animation: overtake 2s ease-in-out; z-index: 100; } .spaceship-3d.boosting { animation: thrusterBoost 0.5s infinite; } .target-3d { transform-style: preserve-3d; transition: all 0.2s ease-out; } .target-3d.hit { animation: targetHit 1s ease-out; } .beam-3d { animation: beamPulse 0.3s ease-in-out; filter: drop-shadow(0 0 10px currentColor); } .particle-trail { position: absolute; pointer-events: none; background: radial-gradient(circle, rgba(0, 150, 255, 0.8), transparent); border-radius: 50%; animation: floatUp 2s linear forwards; } .status-3d { backdrop-filter: blur(15px); background: rgba(0, 20, 40, 0.9); border: 1px solid rgba(0, 255, 255, 0.5); box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1); } .arena-container { background: radial-gradient(ellipse at top, rgba(0, 50, 100, 0.3), transparent), radial-gradient(ellipse at bottom, rgba(100, 0, 100, 0.3), transparent), linear-gradient(180deg, #000011 0%, #001122 50%, #000011 100%); } /* 深空背景渐变 */ .deep-space-bg { background: radial-gradient(ellipse at top, rgba(26, 42, 58, 0.4), transparent), radial-gradient(ellipse at bottom, rgba(15, 23, 34, 0.6), transparent), linear-gradient(180deg, var(--deep-space-blue) 0%, var(--gradient-gray-start) 30%, var(--gradient-gray-end) 100%); position: relative; } .deep-space-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 20%, rgba(103, 232, 249, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(216, 180, 254, 0.08) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(250, 204, 21, 0.06) 0%, transparent 50%); pointer-events: none; } /* 玻璃材质面板 */ .glass-panel { background: rgba(10, 25, 47, 0.85); border: 1px solid rgba(103, 232, 249, 0.2); border-radius: 12px; backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(103, 232, 249, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .glass-panel-header { background: linear-gradient(90deg, rgba(103, 232, 249, 0.15), rgba(103, 232, 249, 0.08), rgba(103, 232, 249, 0.15)); border-bottom: 1px solid rgba(103, 232, 249, 0.25); padding: 12px 16px; font-weight: 600; color: var(--neon-ice-blue); text-transform: uppercase; font-size: 11px; letter-spacing: 1.2px; position: relative; } .glass-panel-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--neon-ice-blue), transparent); opacity: 0.3; } /* 霓虹灯管立体字效 */ /* 赛事标题专用霓虹样式：发光范围更大，颜色更贴合宇宙主题 */ .neon-tube-text { color: #ffffff; /* 基础白色，确保文字本身清晰 */ /* 多层发光：内层亮青色+外层淡蓝，模拟灯管光晕，模糊半径适配大字体 */ text-shadow: 0 0 8px rgba(34, 211, 238, 0.9), /* 内层强光（青色），贴近文字 */ 0 0 16px rgba(59, 130, 246, 0.7), /* 中层柔光（蓝色），扩大光晕范围 */ 0 0 24px rgba(14, 165, 233, 0.5); /* 外层弱光（淡蓝），增强层次感 */ transition: text-shadow 0.3s ease; /* hover时轻微增强效果（可选） */ } /* hover互动：鼠标移上去时霓虹更亮，增加交互感 */ .neon-tube-text:hover { text-shadow: 0 0 12px rgba(34, 211, 238, 1), 0 0 24px rgba(59, 130, 246, 0.9), 0 0 32px rgba(14, 165, 233, 0.7); } @keyframes neonTubeFlicker { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.5; } } /* 数字跳动动效 */ .digital-counter { font-family: "Courier New", monospace; font-weight: bold; color: var(--neon-ice-blue); text-shadow: 0 0 10px currentColor; animation: digitalPulse 1s ease-in-out infinite; } @keyframes digitalPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* 环形进度条 */ .circular-progress { position: relative; width: 60px; height: 60px; } .circular-progress svg { transform: rotate(-90deg); width: 100%; height: 100%; } .circular-progress .progress-ring { fill: none; stroke-width: 3; stroke-linecap: round; } .circular-progress .progress-bg { stroke: rgba(103, 232, 249, 0.2); } .circular-progress .progress-fill { stroke: var(--neon-ice-blue); stroke-dasharray: 157; /* 2 * π * 25 */ stroke-dashoffset: 157; transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease; filter: drop-shadow(0 0 5px currentColor); } /* 迷你趋势图 */ .mini-trend-chart { width: 50%; height: 20px; background: rgba(0, 0, 0, 0.3); border-radius: 4px; overflow: hidden; position: relative; } .trend-line { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--neon-ice-blue), var(--neon-pink-purple)); transform-origin: left bottom; transition: all 0.3s ease; } /* 3D节点效果 */ .node-3d { position: relative; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 70%); box-shadow: 0 0 20px rgba(103, 232, 249, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .node-3d:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 5px 25px rgba(103, 232, 249, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2); } /* 金属质感按钮 */ .metal-button { background: linear-gradient(145deg, #2a3441, #1a2332); border: 1px solid rgba(103, 232, 249, 0.3); border-radius: 8px; color: var(--neon-ice-blue); padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .metal-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .metal-button:hover::before { left: 100%; } .metal-button:hover { background: linear-gradient(145deg, #3a4451, #2a3441); border-color: var(--neon-ice-blue); box-shadow: 0 0 15px rgba(103, 232, 249, 0.3); transform: translateY(-1px); } /* 折叠侧边栏 */ .collapsible-sidebar { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .collapsible-sidebar.collapsed { width: 60px; min-width: 60px; } .collapsible-sidebar.collapsed .sidebar-content { opacity: 0; transform: translateX(-20px); } .sidebar-content { transition: all 0.3s ease; } /* 浮窗指引 */ .guide-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.5s ease; } .guide-content { background: var(--deep-space-blue); border: 2px solid var(--neon-ice-blue); border-radius: 16px; padding: 32px; max-width: 500px; text-align: center; box-shadow: 0 0 50px rgba(103, 232, 249, 0.3); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 响应式适配 */ @media (max-width: 1280px) { .mini-trend-chart { display: none; } .glass-panel-header { font-size: 10px; padding: 8px 12px; } .node-3d { min-width: 15px; min-height: 15px; } } @media (min-width: 1920px) { .main-layout { grid-template-columns: minmax(300px, 1fr) 4fr minmax(300px, 1fr); } } /* 玻璃面板基础样式 */ .glass-panel { background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); border: 1px solid rgba(103, 232, 249, 0.2); border-radius: 8px; } /* 霓虹边框（hover时生效） */ .neon-border { border-color: rgba(103, 232, 249, 0.5); box-shadow: 0 0 8px rgba(103, 232, 249, 0.3); } /* 入场动画 */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; } /* 脉冲动画（仅TOP1用） */ @keyframes pulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.7); } } [V0_FILE]typescriptreact:file="app/scoreboard/[gameId]/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { ThemeProvider } from "@/contexts/theme-context" import "@/app/glow-effects.css" import "@/app/theme-styles.css" export const metadata: Metadata = { title: "实时计分板", description: "网络安全攻防竞赛实时计分板", } export default function ScoreboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/scoreboard/[gameId]/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useParams } from "next/navigation" import { getScoreboard } from "@/services/scoreboard-service" import { getEvents } from "@/services/events-service" import { getGameDetail } from "@/services/game-service" import { getGameDetails } from "@/services/challenge-service" import type { ScoreboardResponse } from "@/types/scoreboard" import type { EventsResponse } from "@/types/events" import type { GameDetail } from "@/types/game" import type { GameDetails } from "@/types/challenge" import { TeamRankings } from "@/components/team-rankings" import { EventsFeed } from "@/components/events-feed" import { CountdownTimer } from "@/components/countdown-timer" import { InteractiveArena } from "@/components/interactive-arena" import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { RotationStatus } from "@/components/rotation-status" import { ThemeToggle } from "@/components/theme-toggle" export default function ScoreboardPage() { const { gameId } = useParams() as { gameId: string } const [scoreboard, setScoreboard] = useState(null) const [events, setEvents] = useState([]) const [gameDetail, setGameDetail] = useState(null) const [gameDetails, setGameDetails] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [currentGroupIndex, setCurrentGroupIndex] = useState(0) const [rotationInterval, setRotationInterval] = useState(null) const [isRotating, setIsRotating] = useState(true) const [totalGroups, setTotalGroups] = useState(0) useEffect(() => { async function fetchData() { try { setError(null) const [scoreboardData, eventsData, gameDetailData, gameDetailsData] = await Promise.all([ getScoreboard(gameId), getEvents(gameId), getGameDetail(gameId), getGameDetails(gameId), ]) setScoreboard(scoreboardData) setEvents(eventsData) setGameDetail(gameDetailData) setGameDetails(gameDetailsData) } catch (err) { console.error("Failed to fetch data:", err) setError("系统连接失败，请稍后重试") } finally { setLoading(false) } } if (gameId) { fetchData() const intervalId = setInterval(fetchData, 15000) return () => clearInterval(intervalId) } }, [gameId]) // Dynamic ranking rotation system useEffect(() => { if (!scoreboard?.items || scoreboard.items.length === 0) return // Calculate total groups (10 teams per group) const teamsPerGroup = 10 const calculatedTotalGroups = Math.ceil(scoreboard.items.length / teamsPerGroup) setTotalGroups(calculatedTotalGroups) // Only rotate if there are multiple groups if (calculatedTotalGroups <= 1) { setIsRotating(false) setCurrentGroupIndex(0) return } setIsRotating(true) // Clear existing interval if (rotationInterval) { clearInterval(rotationInterval) } // Set up rotation interval (15 seconds per group) const interval = setInterval(() => { setCurrentGroupIndex((prev) => (prev + 1) % calculatedTotalGroups) }, 15000) setRotationInterval(interval) return () => { if (interval) { clearInterval(interval) } } }, [scoreboard?.items]) // Cleanup rotation interval on unmount useEffect(() => { return () => { if (rotationInterval) { clearInterval(rotationInterval) } } }, [rotationInterval]) // Get teams for current group const getCurrentGroupTeams = () => { if (!scoreboard?.items) return [] const teamsPerGroup = 10 const startIndex = currentGroupIndex * teamsPerGroup const endIndex = Math.min(startIndex + teamsPerGroup, scoreboard.items.length) return scoreboard.items.slice(startIndex, endIndex) } const currentGroupTeams = getCurrentGroupTeams() if (loading) { return (

系统初始化中...

) } if (error) { return (

系统错误 {error}

) } if (!scoreboard || !gameDetail || !gameDetails) { return (

数据加载中...

) } return (

{/* Header */}

{/* 左侧：CTF图标 */}

ZJCTF

{/* 中间：标题容器 */}

{gameDetail.title}

{/* 右侧：主题切换 + 倒计时 */}

{/* 主题切换按钮 */}

{/* 倒计时 */}

{/* Main Content */}

{/* Left Panel - Rankings */} {/* Center - Interactive Arena */}

{/* Add rotation status indicator */}

{/* Right Panel - Events */}

实时操作动态

) } [V0_FILE]typescriptreact:file="contexts/theme-context.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" interface ThemeContextType { theme: Theme toggleTheme: () => void isDark: boolean } const ThemeContext = createContext(undefined) export function ThemeProvider({ children }: { children: React.ReactNode }) { const [theme, setTheme] = useState("dark") const [mounted, setMounted] = useState(false) useEffect(() => { try { // 从localStorage读取保存的主题设置 const savedTheme = localStorage.getItem("ctf-theme") as Theme if (savedTheme && (savedTheme === "dark" || savedTheme === "light")) { setTheme(savedTheme) } else { // 检测系统主题偏好 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches setTheme(prefersDark ? "dark" : "light") } } catch (error) { // 如果localStorage不可用，使用默认主题 console.warn("Failed to load theme from localStorage:", error) setTheme("dark") } setMounted(true) }, []) useEffect(() => { if (mounted) { try { // 保存主题设置到localStorage localStorage.setItem("ctf-theme", theme) } catch (error) { console.warn("Failed to save theme to localStorage:", error) } // 更新document的data-theme属性 if (typeof document !== "undefined") { document.documentElement.setAttribute("data-theme", theme) // 更新body的class document.body.className = theme === "dark" ? "theme-dark" : "theme-light" } } }, [theme, mounted]) const toggleTheme = () => { setTheme((prev) => (prev === "dark" ? "light" : "dark")) } const value = { theme, toggleTheme, isDark: theme === "dark", } // 避免hydration不匹配 if (!mounted) { return (

{children}

) } return {children} } export function useTheme() { const context = useContext(ThemeContext) if (context === undefined) { // 提供fallback值而不是抛出错误 console.warn("useTheme must be used within a ThemeProvider. Using default values.") return { theme: "dark" as Theme, toggleTheme: () => {}, isDark: true, } } return context } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true" "use client" import { useTheme } from "@/contexts/theme-context" import { Moon, Sun } from "lucide-react" import { useState } from "react" export function ThemeToggle() { const { theme, toggleTheme, isDark } = useTheme() const [isAnimating, setIsAnimating] = useState(false) const handleToggle = () => { setIsAnimating(true) toggleTheme() // 动画完成后重置状态 setTimeout(() => { setIsAnimating(false) }, 600) } return ( ) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { Clock } from "lucide-react" import { formatTime } from "@/utils/format-time" import { useTheme } from "@/contexts/theme-context" interface CountdownTimerProps { endTimeUtc: number startTimeUtc: number title: string } export function CountdownTimer({ endTimeUtc, startTimeUtc, title }: CountdownTimerProps) { const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, isStarted: false, isEnded: false, progress: 0, }) const [currentTime, setCurrentTime] = useState(Date.now()) const initialMountTime = useRef(Date.now()) const initialTotalDuration = useRef(0) const currentTimeTimer = useRef(null) const themeContext = useTheme() let isDark = true try { isDark = themeContext.isDark } catch (error) { console.warn("Theme context not available, using default dark theme") } const calculateTimeLeft = () => { const now = Date.now() const isStarted = now >= startTimeUtc const isEnded = now >= endTimeUtc if (initialTotalDuration.current === 0) { if (isEnded) { initialTotalDuration.current = 1 } else if (isStarted) { initialTotalDuration.current = Math.max(1, endTimeUtc - startTimeUtc) } else { initialTotalDuration.current = Math.max(1, startTimeUtc - initialMountTime.current) } } let difference = 0 if (isEnded) { difference = 0 } else if (isStarted) { difference = endTimeUtc - now } else { difference = startTimeUtc - now } let progress = 0 if (isEnded) { progress = 1 } else if (isStarted) { const elapsed = now - startTimeUtc progress = Math.min(1, Math.max(0, elapsed / initialTotalDuration.current)) } else { const elapsedWait = now - initialMountTime.current progress = Math.min(1, Math.max(0, 1 - elapsedWait / initialTotalDuration.current)) } const days = Math.floor(difference / (1000 * 60 * 60 * 24)) const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)) const seconds = Math.floor((difference % (1000 * 60)) / 1000) setTimeLeft({ days, hours, minutes, seconds, isStarted, isEnded, progress, }) } useEffect(() => { initialMountTime.current = Date.now() calculateTimeLeft() const countdownTimer = setInterval(calculateTimeLeft, 1000) const updateCurrentTime = () => { setCurrentTime(Date.now()) } updateCurrentTime() currentTimeTimer.current = setInterval(updateCurrentTime, 1000) return () => { clearInterval(countdownTimer) if (currentTimeTimer.current) { clearInterval(currentTimeTimer.current) } } }, [endTimeUtc, startTimeUtc]) const getProgressColor = () => { if (timeLeft.isEnded) return "#EF4444" if (timeLeft.progress > 0.8) return "#EF4444" if (timeLeft.progress > 0.5) return "#FDE047" return "#4ADE80" } const progressColor = getProgressColor() const circleRadius = 25 const circleCircumference = 2 * Math.PI * circleRadius const strokeDashoffset = circleCircumference - timeLeft.progress * circleCircumference return (

{timeLeft.isEnded ? ( 比赛已结束 ) : timeLeft.isStarted ? (

剩余时间

{timeLeft.days > 0 && ( <> {timeLeft.days} 天 )} {timeLeft.hours.toString().padStart(2, "0")} : {timeLeft.minutes.toString().padStart(2, "0")} : {timeLeft.seconds.toString().padStart(2, "0")}

) : (

开始倒计时

{timeLeft.days > 0 && ( <> {timeLeft.days} 天 )} {timeLeft.hours.toString().padStart(2, "0")} : {timeLeft.minutes.toString().padStart(2, "0")} : {timeLeft.seconds.toString().padStart(2, "0")}

)}

{formatTime(currentTime)}

) } [V0_FILE]css:file="app/theme-styles.css" isEdit="true" isMerged="true" /* 主题变量定义 */ :root { /* 深色主题变量 */ --deep-space-blue: #0a192f; --gradient-gray-start: #1e2a3a; --gradient-gray-end: #0f1722; --neon-ice-blue: #67e8f9; --neon-pink-purple: #d8b4fe; --neon-orange-yellow: #facc15; --neon-grass-green: #84cc16; --success-green: #4ade80; --warning-yellow: #fde047; --danger-red: #ef4444; /* 通用变量 */ --text-primary: #ffffff; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --border-primary: rgba(103, 232, 249, 0.3); --border-secondary: rgba(103, 232, 249, 0.1); --glass-bg: rgba(10, 25, 47, 0.85); --glass-border: rgba(103, 232, 249, 0.2); --panel-bg: rgba(10, 20, 40, 0.9); --panel-header-bg: linear-gradient( 90deg, rgba(103, 232, 249, 0.15), rgba(103, 232, 249, 0.08), rgba(103, 232, 249, 0.15) ); } /* 浅色主题变量 - 全新配色方案 */ [data-theme="light"] { /* 主背景：浅蓝渐变，模拟"赛博天空" */ --deep-space-blue: #e0f7fa; --gradient-gray-start: #f5f7fa; --gradient-gray-end: #e0f7fa; /* 核心色彩：冷调浅蓝系 */ --neon-ice-blue: #00bcd4; --neon-pink-purple: #ce93d8; --neon-orange-yellow: #ffe082; --neon-grass-green: #aed581; --success-green: #aed581; --warning-yellow: #ffe082; --danger-red: #f8bbd0; /* 文字层次：深灰蓝主导 */ --text-primary: #263238; --text-secondary: #455a64; --text-muted: #90a4ae; /* 边框与分割线：亮蓝系 */ --border-primary: rgba(0, 188, 212, 0.4); --border-secondary: rgba(129, 212, 250, 0.3); /* 玻璃面板：毛玻璃效果 */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(129, 212, 250, 0.4); /* 面板背景：统一浅色调 */ --panel-bg: rgba(255, 255, 255, 0.9); --panel-header-bg: linear-gradient( 90deg, rgba(179, 229, 252, 0.6), rgba(179, 229, 252, 0.3), rgba(179, 229, 252, 0.6) ); /* 3D场景专用色彩 */ --arena-star-color: rgba(135, 206, 235, 0.6); --arena-bg-primary: #e0f7fa; --arena-bg-secondary: #f5f7fa; /* 题目类别优化色彩 */ --category-web: #81d4fa; --category-crypto: #ce93d8; --category-reverse: #ffe082; --category-misc: #aed581; --category-pwn: #f8bbd0; --category-forensics: #d1c4e9; --category-blockchain: #f8bbd0; --category-hardware: #c8e6c9; --category-mobile: #4fc3f7; --category-ppc: #ffcc02; --category-ai: #ce93d8; --category-pentest: #f8bbd0; --category-osint: #4fc3f7; /* TOP3排名优化色彩 */ --rank-gold: #ffe082; --rank-silver: #e0e0e0; --rank-bronze: #e9c46a; /* 状态指示色彩 */ --status-success: #aed581; --status-attack: #f8bbd0; --status-info: #cfd8dc; } /* 主题切换过渡动画 */ .theme-loading { transition: all 0.3s ease-in-out; } /* 深色主题样式 */ .theme-dark { color-scheme: dark; } .theme-dark .deep-space-bg { background: radial-gradient(ellipse at top, rgba(26, 42, 58, 0.4), transparent), radial-gradient(ellipse at bottom, rgba(15, 23, 34, 0.6), transparent), linear-gradient(180deg, var(--deep-space-blue) 0%, var(--gradient-gray-start) 30%, var(--gradient-gray-end) 100%); } .theme-dark .deep-space-bg::before { background-image: radial-gradient(circle at 20% 20%, rgba(103, 232, 249, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(216, 180, 254, 0.08) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(250, 204, 21, 0.06) 0%, transparent 50%); } /* 浅色主题样式 - 赛博天空效果 */ .theme-light { color-scheme: light; } .theme-light .deep-space-bg { background: radial-gradient(ellipse at top, rgba(224, 247, 250, 0.9), rgba(245, 247, 250, 0.7)), radial-gradient(ellipse at bottom, rgba(179, 229, 252, 0.3), transparent), linear-gradient(180deg, var(--arena-bg-primary) 0%, var(--gradient-gray-start) 50%, var(--arena-bg-secondary) 100%); } .theme-light .deep-space-bg::before { background-image: radial-gradient(circle at 20% 20%, rgba(135, 206, 235, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(129, 212, 250, 0.12) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(0, 188, 212, 0.08) 0%, transparent 50%); } /* 玻璃面板主题适配 */ .glass-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); transition: all 0.3s ease-in-out; } /* 浅色模式玻璃面板增强 */ .theme-light .glass-panel { backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .theme-light .glass-panel:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateY(-1px); } .glass-panel-header { background: var(--panel-header-bg); border-bottom: 1px solid var(--border-primary); color: var(--neon-ice-blue); transition: all 0.3s ease-in-out; } /* 霓虹文字主题适配 */ .neon-tube-text { color: var(--text-primary); transition: all 0.3s ease-in-out; } .theme-dark .neon-tube-text { text-shadow: 0 0 8px rgba(34, 211, 238, 0.9), 0 0 16px rgba(59, 130, 246, 0.7), 0 0 24px rgba(14, 165, 233, 0.5); } .theme-light .neon-tube-text { text-shadow: 0 0 4px rgba(0, 188, 212, 0.8), 0 0 8px rgba(0, 188, 212, 0.5), 0 0 12px rgba(0, 188, 212, 0.3); font-weight: 700; } /* 数字计数器主题适配 */ .digital-counter { color: var(--neon-ice-blue); text-shadow: 0 0 10px currentColor; transition: all 0.3s ease-in-out; } .theme-light .digital-counter { text-shadow: 0 0 6px currentColor, 0 0 3px rgba(0, 188, 212, 0.3); font-weight: 600; } /* 霓虹边框主题适配 */ .neon-border { border-color: var(--border-primary); transition: all 0.3s ease-in-out; } .theme-dark .neon-border { box-shadow: 0 0 8px rgba(103, 232, 249, 0.3); } .theme-light .neon-border { box-shadow: 0 0 6px rgba(0, 188, 212, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1); } /* 金属按钮主题适配 */ .metal-button { transition: all 0.3s ease-in-out; } .theme-dark .metal-button { background: linear-gradient(145deg, #2a3441, #1a2332); border: 1px solid rgba(103, 232, 249, 0.3); color: var(--neon-ice-blue); } .theme-light .metal-button { background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 250, 0.8)); border: 1px solid var(--border-primary); color: var(--neon-ice-blue); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .theme-light .metal-button:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(240, 244, 248, 0.9)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } /* 主题切换按钮特殊样式 */ .theme-toggle-button { position: relative; overflow: hidden; } .theme-toggle-button::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .theme-toggle-button:hover::after { left: 100%; } /* 文本颜色主题适配 */ .text-primary { color: var(--text-primary); transition: color 0.3s ease-in-out; } .text-secondary { color: var(--text-secondary); transition: color 0.3s ease-in-out; } .text-muted { color: var(--text-muted); transition: color 0.3s ease-in-out; } /* 浅色主题特殊调整 */ .theme-light .cyber-panel { background: var(--panel-bg); border: 1px solid var(--glass-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* 排名卡片浅色模式优化 */ .theme-light .ranking-card { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .theme-light .ranking-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); border-color: var(--neon-ice-blue); } /* TOP3 排名颜色优化 */ .theme-light .rank-gold { color: var(--rank-gold) !important; background-color: rgba(255, 224, 130, 0.2) !important; border-color: rgba(255, 224, 130, 0.5) !important; } .theme-light .rank-silver { color: var(--rank-silver) !important; background-color: rgba(224, 224, 224, 0.2) !important; border-color: rgba(224, 224, 224, 0.5) !important; } .theme-light .rank-bronze { color: var(--rank-bronze) !important; background-color: rgba(233, 196, 106, 0.2) !important; border-color: rgba(233, 196, 106, 0.5) !important; } /* 事件状态颜色优化 */ .theme-light .status-success { color: var(--status-success) !important; } .theme-light .status-attack { color: var(--status-attack) !important; } .theme-light .status-info { color: var(--status-info) !important; } /* 主题切换时的全局过渡 */ * { transition-property: background-color, border-color, color, fill, stroke, box-shadow, text-shadow; transition-duration: 0.3s; transition-timing-function: ease-in-out; } /* 避免某些元素的过渡 */ canvas, video, iframe, img { transition: none !important; } /* 浅色模式下的动画优化 */ .theme-light .animate-pulse { animation: light-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes light-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0, 188, 212, 0.3); } 50% { opacity: 0.8; box-shadow: 0 0 16px rgba(0, 188, 212, 0.5); } } /* 浅色模式下的发光效果 */ .theme-light .glow-effect { box-shadow: 0 0 12px rgba(0, 188, 212, 0.4), 0 0 24px rgba(0, 188, 212, 0.2); } /* 浅色模式下的悬浮效果 */ .theme-light .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } /* 浅色模式下的渐变背景 */ .theme-light .gradient-bg { background: linear-gradient( 135deg, rgba(224, 247, 250, 0.8) 0%, rgba(245, 247, 250, 0.6) 50%, rgba(179, 229, 252, 0.4) 100% ); } [V0_FILE]typescriptreact:file="components/team-rankings.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import type { TeamInfo } from "@/types/scoreboard" import { Trophy, TrendingUp, TrendingDown, Minus } from "lucide-react" import { useTheme } from "@/contexts/theme-context" interface TeamRankingsProps { teams: TeamInfo[] groupInfo?: { currentGroup: number totalGroups: number totalTeams: number } onTeamHover?: (teamId: number | null) => void onTeamClick?: (teamId: number) => void } export function TeamRankings({ teams, groupInfo, onTeamHover, onTeamClick }: TeamRankingsProps) { const [hoveredTeam, setHoveredTeam] = useState(null) const [previousRankings, setPreviousRankings] = useState>({}) const [trendData, setTrendData] = useState>({}) const { isDark } = useTheme() const topThreeTeams = teams.filter((team) => [1, 2, 3].includes(team.rank)) const otherTeams = teams.filter((team) => ![1, 2, 3].includes(team.rank)) useEffect(() => { const newRankings: Record = {} teams.forEach((team) => (newRankings[team.id] = team.rank)) setPreviousRankings(newRankings) }, [teams]) useEffect(() => { if (teams.length === 0) return const newTrendData: Record = {} teams.forEach((team) => { const points = [] let baseScore = Math.max(0, team.score - Math.random() * 500) for (let i = 0; i < 30; i++) { const variation = (Math.random() - 0.5) * 50 baseScore = Math.max(0, baseScore + variation + i * 2) points.push(baseScore) } points[29] = team.score newTrendData[team.id] = points }) setTrendData(newTrendData) }, [teams]) const getRankingChange = (teamId: number, currentRank: number) => { const previousRank = previousRankings[teamId] if (!previousRank) return null return previousRank > currentRank ? "up" : previousRank < currentRank ? "down" : "same" } // 主题适配的题目类别颜色 const getCategoryColor = (category: string) => { if (isDark) { const colors: Record = { Web: "#67E8F9", Crypto: "#D8B4FE", Reverse: "#FACC15", Misc: "#4ADE80", Pwn: "#EF4444", Forensics: "#A78BFA", Blockchain: "#EC4899", Hardware: "#10B981", Mobile: "#3B82F6", PPC: "#F59E0B", AI: "#8B5CF6", Pentest: "#EF4444", OSINT: "#06B6D4", } return colors[category] || "#67E8F9" } else { const colors: Record = { Web: "#81D4FA", Crypto: "#CE93D8", Reverse: "#FFE082", Misc: "#AED581", Pwn: "#F8BBD0", Forensics: "#D1C4E9", Blockchain: "#F8BBD0", Hardware: "#C8E6C9", Mobile: "#4FC3F7", PPC: "#FFCC02", AI: "#CE93D8", Pentest: "#F8BBD0", OSINT: "#4FC3F7", } return colors[category] || "#81D4FA" } } const handleTeamHover = (teamId: number | null) => { setHoveredTeam(teamId) onTeamHover?.(teamId) } const renderMiniTrendChart = (teamId: number, currentScore: number) => { const data = trendData[teamId] || [] if (data.length === 0) return null const maxScore = Math.max(...data, currentScore) const minScore = Math.min(...data, 0) const range = maxScore - minScore || 1 return (

) } const renderTeamItem = (team: TeamInfo, index: number, isTopThree = false) => { const change = getRankingChange(team.id, team.rank) const isHovered = hoveredTeam === team.id // 主题适配的排名颜色 let rankColor = isDark ? "#67E8F9" : "#00BCD4" let badgeStyle = { backgroundColor: isDark ? "rgba(103, 232, 249, 0.1)" : "rgba(0, 188, 212, 0.1)", color: isDark ? "#67E8F9" : "#00BCD4", borderColor: isDark ? "rgba(103, 232, 249, 0.3)" : "rgba(0, 188, 212, 0.3)", } if (isTopThree) { switch (team.rank) { case 1: rankColor = isDark ? "#FFD700" : "#FFE082" badgeStyle = { backgroundColor: isDark ? "rgba(255, 215, 0, 0.15)" : "rgba(255, 224, 130, 0.2)", color: isDark ? "#FFD700" : "#FFE082", borderColor: isDark ? "rgba(255, 215, 0, 0.5)" : "rgba(255, 224, 130, 0.5)", } break case 2: rankColor = isDark ? "#C0C0C0" : "#E0E0E0" badgeStyle = { backgroundColor: isDark ? "rgba(192, 192, 192, 0.15)" : "rgba(224, 224, 224, 0.2)", color: isDark ? "#C0C0C0" : "#E0E0E0", borderColor: isDark ? "rgba(192, 192, 192, 0.5)" : "rgba(224, 224, 224, 0.5)", } break case 3: rankColor = isDark ? "#CD7F32" : "#E9C46A" badgeStyle = { backgroundColor: isDark ? "rgba(205, 127, 50, 0.15)" : "rgba(233, 196, 106, 0.2)", color: isDark ? "#CD7F32" : "#E9C46A", borderColor: isDark ? "rgba(205, 127, 50, 0.5)" : "rgba(233, 196, 106, 0.5)", } break } } return (

handleTeamHover(team.id)} onMouseLeave={() => handleTeamHover(null)} onClick={() => onTeamClick?.(team.id)} >

{team.rank} {team.rank === 1 && }

{team.name} {change === "up" && } {change === "down" && } {change === "same" && }

{team.score.toLocaleString()} pts {team.solvedCount} 题

{renderMiniTrendChart(team.id, team.score)}

{isTopThree && team.solvedChallenges.length > 0 && (

{team.solvedChallenges.slice(0, 4).map((challenge, idx) => (

))}

)}

) } if (!teams || teams.length === 0) { return (

暂无队伍数据

) } return (

{groupInfo && groupInfo.totalGroups > 1 && (

GROUP {groupInfo.currentGroup} / {groupInfo.totalGroups}

显示队伍 {(groupInfo.currentGroup - 1) * 10 + 1} -{" "} {Math.min(groupInfo.currentGroup * 10, groupInfo.totalTeams)} / {groupInfo.totalTeams}

)}

{topThreeTeams.map((team, index) => renderTeamItem(team, index, true))} {otherTeams.map((team, index) => renderTeamItem(team, topThreeTeams.length + index, false))}

) } [V0_FILE]typescriptreact:file="components/events-feed.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import type { GameEvent } from "@/types/events" import { formatTimeAgo } from "@/utils/format-time" import { Flag, Users, Key, Target } from "lucide-react" import { useTheme } from "@/contexts/theme-context" interface EventsFeedProps { events: GameEvent[] onEventClick?: (event: GameEvent) => void } type EventCategory = "solve" | "attack" | "all" export function EventsFeed({ events, onEventClick }: EventsFeedProps) { const { isDark } = useTheme() const [selectedCategory, setSelectedCategory] = useState("all") const [expandedEvents, setExpandedEvents] = useState>(new Set()) const [visibleCount, setVisibleCount] = useState(10) const getEventIcon = (type: string, values?: string[]) => { if (type === "FlagSubmit" && values && values.length > 0) { if (values[0] === "Accepted") { return } else { return } } return } const getEventCategory = (type: string, values?: string[]): EventCategory => { if (type === "FlagSubmit" && values && values[0] === "Accepted") return "solve" if (type === "FlagSubmit") return "attack" return "defense" } const getEventStatus = (type: string, values?: string[]) => { if (type === "FlagSubmit" && values && values.length > 0) { return values[0] === "Accepted" ? "成功解出" : "尝试攻击" } return "系统操作" } const getCategoryColor = (category: EventCategory) => { if (isDark) { const colors = { solve: "#67E8F9", attack: "#EF4444", defense: "#84CC16", all: "#D8B4FE", } return colors[category] } else { const colors = { solve: "#AED581", attack: "#F8BBD0", defense: "#C8E6C9", all: "#CE93D8", } return colors[category] } } const filteredEvents = events.filter((event) => { if (selectedCategory === "all") return true return getEventCategory(event.type, event.values) === selectedCategory }) const sortedEvents = [...filteredEvents].sort((a, b) => b.time - a.time) const visibleEvents = sortedEvents.slice(0, visibleCount) const toggleEventExpansion = (eventId: string) => { const newExpanded = new Set(expandedEvents) if (newExpanded.has(eventId)) { newExpanded.delete(eventId) } else { newExpanded.add(eventId) } setExpandedEvents(newExpanded) } if (!events || events.length === 0) { return (

暂无操作记录

) } return (

{/* 事件统计 - 主题适配 */}

{events.filter((e) => getEventCategory(e.type, e.values) === "solve").length}

成功解题

{events.filter((e) => getEventCategory(e.type, e.values) === "attack").length}

攻击尝试

{events.length}

总操作数

{/* 事件列表 */}

{visibleEvents.map((event, index) => { const eventId = `${event.time}-${index}` const isExpanded = expandedEvents.has(eventId) const category = getEventCategory(event.type, event.values) const categoryColor = getCategoryColor(category) return (

{ toggleEventExpansion(eventId) onEventClick?.(event) }} >

{getEventIcon(event.type, event.values)}

{formatTimeAgo(event.time)}

{event.team && (

{event.team}

)}

{getEventStatus(event.type, event.values)} {event.values && event.values.length > 2 && ( {event.values[2]} )}

) })}

{/* 加载更多按钮 - 主题适配 */} {visibleCount < sortedEvents.length && (

)}

) } [V0_FILE]typescriptreact:file="components/interactive-arena.tsx" isEdit="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import type { GameEvent } from "@/types/events" import type { TeamInfo } from "@/types/scoreboard" import type { GameDetails } from "@/types/challenge" import { useTheme } from "@/contexts/theme-context" interface InteractiveArenaProps { events: GameEvent[] teams: TeamInfo[] gameDetails: GameDetails | null allTeams?: TeamInfo[] } interface PerformanceMetrics { fps: number frameTime: number renderTime: number particleCount: number drawCalls: number memoryUsage: number cpuUsage: number gpuUsage: number averageFps: number minFps: number maxFps: number frameDrops: number } interface PerformanceHistory { timestamps: number[] fpsHistory: number[] frameTimeHistory: number[] renderTimeHistory: number[] } interface AttackAnimation { id: string teamId: number teamName: string challengeCategory: string challengeTitle: string isSuccess: boolean startTime: number duration: number progress: number startPos: { x: number; y: number; z: number } targetPos: { x: number; y: number; z: number } beamIntensity: number } interface Target { category: string x: number y: number z: number rotation: number isActive: boolean hitCount: number waveAnimation: number glowIntensity: number pulsePhase: number sparkleTimer: number shapeType: "circle" | "hexagon" | "triangle" | "square" colorHue: number size: number } interface Spaceship { teamId: number teamName: string x: number y: number z: number angle: number orbitRadius: number orbitSpeed: number orbitHeight: number isActive: boolean rank: number score: number isOvertaking: boolean overtakeProgress: number targetRank: number pulsation: number trailPositions: Array<{ x: number; y: number; z: number; alpha: number }> enginePulse: number verticalPhase: number colorHue: number smoothX: number smoothY: number smoothZ: number orbitOffset: number } interface Particle { x: number y: number z: number vx: number vy: number vz: number life: number maxLife: number color: string size: number } interface DeviceCapabilities { isMobile: boolean isTablet: boolean pixelRatio: number maxParticles: number renderQuality: number maxStars: number enableComplexEffects: boolean } export function InteractiveArena({ events, teams, gameDetails, allTeams }: InteractiveArenaProps) { const canvasRef = useRef(null) const animationRef = useRef(0) const particlesRef = useRef([]) const touchStartRef = useRef<{ x: number; y: number } | null>(null) const lastTouchTimeRef = useRef(0) const { isDark } = useTheme() const shipOrbitConfigRef = useRef< Record< number, { orbitRadius: number orbitSpeed: number orbitHeight: number colorHue: number orbitOffset: number } > >({}) const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) const [targets, setTargets] = useState([]) const [spaceships, setSpaceships] = useState([]) const [attacks, setAttacks] = useState([]) const [lastEventTime, setLastEventTime] = useState(0) const [cameraRotation, setCameraRotation] = useState(0) const [cameraHeight, setCameraHeight] = useState(0) const [stars, setStars] = useState>([]) const [isInitialized, setIsInitialized] = useState(false) const [deviceCapabilities, setDeviceCapabilities] = useState({ isMobile: false, isTablet: false, pixelRatio: 1, maxParticles: 150, renderQuality: 1, maxStars: 250, enableComplexEffects: true, }) const [manualRotation, setManualRotation] = useState(0) const [autoRotate, setAutoRotate] = useState(true) const [showMobileControls, setShowMobileControls] = useState(false) const [performanceMetrics, setPerformanceMetrics] = useState({ fps: 0, frameTime: 0, renderTime: 0, particleCount: 0, drawCalls: 0, memoryUsage: 0, cpuUsage: 0, gpuUsage: 0, averageFps: 0, minFps: Number.POSITIVE_INFINITY, maxFps: 0, frameDrops: 0, }) const [performanceHistory, setPerformanceHistory] = useState({ timestamps: [], fpsHistory: [], frameTimeHistory: [], renderTimeHistory: [], }) const [showPerformancePanel, setShowPerformancePanel] = useState(false) const [performanceMode, setPerformanceMode] = useState<"basic" | "detailed" | "graph">("basic") // 主题适配的颜色获取函数 const getThemeColors = useCallback(() => { if (isDark) { return { background: { primary: "#000511", secondary: "#0a0a2e", tertiary: "#000000", }, stars: "rgba(255, 255, 255, 0.9)", categories: { Web: "#67E8F9", Crypto: "#D8B4FE", Reverse: "#FACC15", Misc: "#4ADE80", Pwn: "#EF4444", Forensics: "#A78BFA", Blockchain: "#EC4899", Hardware: "#10B981", Mobile: "#3B82F6", PPC: "#F59E0B", AI: "#8B5CF6", Pentest: "#EF4444", OSINT: "#06B6D4", }, targets: { glow: "rgba(255, 0, 0, 0.8)", core: "rgba(255, 255, 255, 1)", rings: "rgba(255, 100, 100, 0.7)", }, } } else { return { background: { primary: "#E0F7FA", secondary: "#F5F7FA", tertiary: "#B3E5FC", }, stars: "rgba(135, 206, 235, 0.6)", categories: { Web: "#81D4FA", Crypto: "#CE93D8", Reverse: "#FFE082", Misc: "#AED581", Pwn: "#F8BBD0", Forensics: "#D1C4E9", Blockchain: "#F8BBD0", Hardware: "#C8E6C9", Mobile: "#4FC3F7", PPC: "#FFCC02", AI: "#CE93D8", Pentest: "#F8BBD0", OSINT: "#4FC3F7", }, targets: { glow: "rgba(0, 188, 212, 0.6)", core: "rgba(0, 188, 212, 1)", rings: "rgba(129, 212, 250, 0.8)", }, } } }, [isDark]) // 性能监控相关函数 const performanceMonitorRef = useRef({ frameCount: 0, lastTime: 0, lastFpsUpdate: 0, renderStartTime: 0, fpsBuffer: [] as number[], frameTimeBuffer: [] as number[], renderTimeBuffer: [] as number[], }) const updatePerformanceMetrics = useCallback( (renderTime: number) => { const now = performance.now() const monitor = performanceMonitorRef.current monitor.frameCount++ const frameTime = now - monitor.lastTime monitor.lastTime = now monitor.fpsBuffer.push(1000 / frameTime) monitor.frameTimeBuffer.push(frameTime) monitor.renderTimeBuffer.push(renderTime) const bufferSize = 60 if (monitor.fpsBuffer.length > bufferSize) { monitor.fpsBuffer.shift() monitor.frameTimeBuffer.shift() monitor.renderTimeBuffer.shift() } if (now - monitor.lastFpsUpdate >= 1000) { const avgFps = monitor.fpsBuffer.reduce((a, b) => a + b, 0) / monitor.fpsBuffer.length const minFps = Math.min(...monitor.fpsBuffer) const maxFps = Math.max(...monitor.fpsBuffer) const avgFrameTime = monitor.frameTimeBuffer.reduce((a, b) => a + b, 0) / monitor.frameTimeBuffer.length const avgRenderTime = monitor.renderTimeBuffer.reduce((a, b) => a + b, 0) / monitor.renderTimeBuffer.length const targetFPS = deviceCapabilities.isMobile ? 30 : 60 const frameDrops = monitor.fpsBuffer.filter((fps) => fps < targetFPS * 0.8).length const estimatedMemory = (spaceships.length * 0.5 + targets.length * 0.3 + attacks.length * 0.2 + particlesRef.current.length * 0.1 + stars.length * 0.05) * 1024 const drawCalls = spaceships.length * 3 + targets.length * 2 + attacks.length + Math.ceil(particlesRef.current.length / 10) setPerformanceMetrics({ fps: Math.round(avgFps), frameTime: Math.round(avgFrameTime * 100) / 100, renderTime: Math.round(avgRenderTime * 100) / 100, particleCount: particlesRef.current.length, drawCalls, memoryUsage: Math.round(estimatedMemory), cpuUsage: Math.min(100, Math.round((avgRenderTime / avgFrameTime) * 100)), gpuUsage: Math.min(100, Math.round((drawCalls / 100) * 100)), averageFps: Math.round(avgFps), minFps: Math.round(minFps), maxFps: Math.round(maxFps), frameDrops, }) setPerformanceHistory((prev) => { const maxHistoryLength = 300 const newTimestamps = [...prev.timestamps, now].slice(-maxHistoryLength) const newFpsHistory = [...prev.fpsHistory, avgFps].slice(-maxHistoryLength) const newFrameTimeHistory = [...prev.frameTimeHistory, avgFrameTime].slice(-maxHistoryLength) const newRenderTimeHistory = [...prev.renderTimeHistory, avgRenderTime].slice(-maxHistoryLength) return { timestamps: newTimestamps, fpsHistory: newFpsHistory, frameTimeHistory: newFrameTimeHistory, renderTimeHistory: newRenderTimeHistory, } }) monitor.lastFpsUpdate = now } }, [spaceships.length, targets.length, attacks.length, stars.length, deviceCapabilities.isMobile], ) const getPerformanceColor = useCallback( (value: number, type: "fps" | "cpu" | "memory") => { switch (type) { case "fps": const targetFPS = deviceCapabilities.isMobile ? 30 : 60 if (value >= targetFPS * 0.9) return "#00ff00" if (value >= targetFPS * 0.7) return "#ffff00" if (value >= targetFPS * 0.5) return "#ff9900" return "#ff0000" case "cpu": if (value <= 50) return "#00ff00" if (value <= 70) return "#ffff00" if (value <= 85) return "#ff9900" return "#ff0000" case "memory": if (value <= 10240) return "#00ff00" if (value <= 20480) return "#ffff00" if (value <= 40960) return "#ff9900" return "#ff0000" default: return "#ffffff" } }, [deviceCapabilities.isMobile], ) const renderPerformanceGraph = useCallback( (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number) => { if (performanceHistory.fpsHistory.length < 2) return const targetFPS = deviceCapabilities.isMobile ? 30 : 60 const maxFPS = Math.max(targetFPS * 1.2, Math.max(...performanceHistory.fpsHistory)) ctx.fillStyle = isDark ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.9)" ctx.fillRect(x, y, width, height) ctx.strokeStyle = isDark ? "#00ffff" : "#00BCD4" ctx.lineWidth = 1 ctx.strokeRect(x, y, width, height) const targetY = y + height - (targetFPS / maxFPS) * height ctx.strokeStyle = isDark ? "#ffff00" : "#FFE082" ctx.setLineDash([5, 5]) ctx.beginPath() ctx.moveTo(x, targetY) ctx.lineTo(x + width, targetY) ctx.stroke() ctx.setLineDash([]) ctx.strokeStyle = isDark ? "#00ff00" : "#AED581" ctx.lineWidth = 2 ctx.beginPath() performanceHistory.fpsHistory.forEach((fps, index) => { const plotX = x + (index / (performanceHistory.fpsHistory.length - 1)) * width const plotY = y + height - (fps / maxFPS) * height if (index === 0) { ctx.moveTo(plotX, plotY) } else { ctx.lineTo(plotX, plotY) } }) ctx.stroke() ctx.fillStyle = isDark ? "#ffffff" : "#263238" ctx.font = "10px Arial" ctx.textAlign = "left" ctx.fillText(`FPS: ${performanceMetrics.fps}`, x + 5, y + 15) ctx.fillText(`Target: ${targetFPS}`, x + 5, y + 28) ctx.fillText(`Min: ${performanceMetrics.minFps}`, x + 5, y + 41) ctx.fillText(`Max: ${performanceMetrics.maxFps}`, x + 5, y + 54) }, [performanceHistory, performanceMetrics, deviceCapabilities.isMobile, isDark], ) // 3D投影函数 const project3D = useCallback( (x: number, y: number, z: number) => { const perspective = deviceCapabilities.isMobile ? 1200 : 1400 const centerX = dimensions.width / 2 const centerY = dimensions.height / 2 const totalRotation = autoRotate ? cameraRotation + manualRotation : manualRotation const rotatedX = x * Math.cos(totalRotation) - z * Math.sin(totalRotation) const rotatedZ = x * Math.sin(totalRotation) + z * Math.cos(totalRotation) const adjustedY = y + cameraHeight const safeZ = Math.max(rotatedZ, -perspective + 100) const scale = perspective / (perspective + safeZ) const projectedX = centerX + rotatedX * scale * deviceCapabilities.renderQuality const projectedY = centerY + adjustedY * scale * deviceCapabilities.renderQuality return { x: projectedX, y: projectedY, scale: Math.max(0.1, scale * deviceCapabilities.renderQuality), depth: safeZ, isVisible: scale > 0.1 && projectedX > -150 && projectedX < dimensions.width + 150 && projectedY > -150 && projectedY < dimensions.height + 150, } }, [dimensions.width, dimensions.height, cameraRotation, cameraHeight, manualRotation, autoRotate, deviceCapabilities], ) const lerp = useCallback((start: number, end: number, factor: number) => { return start + (end - start) * factor }, []) const createExplosionParticles = useCallback( (x: number, y: number, z: number, colorHue = 0) => { const newParticles: Particle[] = [] const currentParticles = particlesRef.current if (currentParticles.length > deviceCapabilities.maxParticles) return const themeColors = getThemeColors() const baseColor = colorHue ? `hsl(${colorHue}, 100%, 60%)` : undefined const particleCount = deviceCapabilities.isMobile ? 10 : 20 for (let i = 0; i < particleCount; i++) { const angle = Math.random() * Math.PI * 2 const speed = Math.random() * 10 + 5 const life = Math.random() * 60 + 40 newParticles.push({ x: x + (Math.random() - 0.5) * 25, y: y + (Math.random() - 0.5) * 25, z: z + (Math.random() - 0.5) * 25, vx: Math.cos(angle) * speed, vy: (Math.random() - 0.5) * speed * 0.6, vz: Math.sin(angle) * speed, life, maxLife: life, color: baseColor || (isDark ? "#ff6600" : "#00BCD4"), size: Math.random() * 5 + 2, }) } particlesRef.current = [...currentParticles, ...newParticles] }, [deviceCapabilities, getThemeColors, isDark], ) // 触摸控制处理 const handleTouchStart = useCallback((e: TouchEvent) => { e.preventDefault() const touch = e.touches[0] touchStartRef.current = { x: touch.clientX, y: touch.clientY } lastTouchTimeRef.current = Date.now() }, []) const handleTouchMove = useCallback( (e: TouchEvent) => { e.preventDefault() if (!touchStartRef.current) return const touch = e.touches[0] const deltaX = touch.clientX - touchStartRef.current.x const sensitivity = deviceCapabilities.isMobile ? 0.005 : 0.003 setManualRotation((prev) => prev + deltaX * sensitivity) touchStartRef.current = { x: touch.clientX, y: touch.clientY } }, [deviceCapabilities], ) const handleTouchEnd = useCallback((e: TouchEvent) => { e.preventDefault() const touchDuration = Date.now() - lastTouchTimeRef.current if (touchDuration < 200) { setAutoRotate((prev) => !prev) } touchStartRef.current = null }, []) // 设置画布尺寸 useEffect(() => { const handleResize = () => { if (canvasRef.current) { const { width, height } = canvasRef.current.getBoundingClientRect() const scaledWidth = width * deviceCapabilities.renderQuality const scaledHeight = height * deviceCapabilities.renderQuality setDimensions({ width: scaledWidth, height: scaledHeight }) canvasRef.current.width = scaledWidth canvasRef.current.height = scaledHeight canvasRef.current.style.width = `${width}px` canvasRef.current.style.height = `${height}px` } } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, [deviceCapabilities.renderQuality]) // 添加触摸事件监听 useEffect(() => { const canvas = canvasRef.current if (!canvas || !deviceCapabilities.isMobile) return canvas.addEventListener("touchstart", handleTouchStart, { passive: false }) canvas.addEventListener("touchmove", handleTouchMove, { passive: false }) canvas.addEventListener("touchend", handleTouchEnd, { passive: false }) return () => { canvas.removeEventListener("touchstart", handleTouchStart) canvas.removeEventListener("touchmove", handleTouchMove) canvas.removeEventListener("touchend", handleTouchEnd) } }, [handleTouchStart, handleTouchMove, handleTouchEnd, deviceCapabilities.isMobile]) // 初始化3D星星 useEffect(() => { if (dimensions.width > 0 && !isInitialized) { const newStars = [] for (let i = 0; i < deviceCapabilities.maxStars; i++) { newStars.push({ x: (Math.random() - 0.5) * 4000, y: (Math.random() - 0.5) * 2500, z: Math.random() * 2500 - 1250, brightness: Math.random(), }) } setStars(newStars) setIsInitialized(true) } }, [dimensions.width, isInitialized, deviceCapabilities.maxStars]) // 初始化目标 useEffect(() => { if (gameDetails && dimensions.width > 0) { const categories = Object.keys(gameDetails.challenges) const themeColors = getThemeColors() const maxTargets = deviceCapabilities.isMobile ? Math.min(categories.length, 6) : categories.length const selectedCategories = categories.slice(0, maxTargets) const targetLayouts = selectedCategories.map((category, index) => { const angle = (index / selectedCategories.length) * Math.PI * 2 const targetRadius = deviceCapabilities.isMobile ? 220 : 280 const x = Math.cos(angle) * targetRadius const z = Math.sin(angle) * targetRadius const y = Math.sin(index * 1.5) * (deviceCapabilities.isMobile ? 40 : 60) return { category, x, y, z, shapeType: "circle" as const, colorHue: 0, size: deviceCapabilities.isMobile ? 1.0 : 1.2, } }) const newTargets: Target[] = targetLayouts.map((layout) => ({ ...layout, rotation: 0, isActive: false, hitCount: 0, waveAnimation: 0, glowIntensity: 0, pulsePhase: Math.random() * Math.PI * 2, sparkleTimer: Math.random() * 100, })) setTargets(newTargets) } }, [gameDetails, dimensions.width, deviceCapabilities, getThemeColors]) // 首次初始化飞船 useEffect(() => { const teamsToUse = allTeams || teams if (teamsToUse.length > 0 && dimensions.width > 0 && !isInitialized) { const maxShips = deviceCapabilities.isMobile ? 15 : 20 const topTeams = teamsToUse.slice(0, maxShips) const newSpaceships: Spaceship[] = topTeams.map((team, index) => { let orbitRadius: number let orbitHeight: number let orbitSpeed: number let colorHue: number let positionInOrbit: number const radiusScale = deviceCapabilities.isMobile ? 0.8 : 1 if (team.rank <= 3) { orbitRadius = 320 * radiusScale orbitHeight = -80 * radiusScale orbitSpeed = 0.0008 colorHue = team.rank === 1 ? 50 : team.rank === 2 ? 35 : 25 positionInOrbit = team.rank - 1 } else if (team.rank <= 9) { orbitRadius = 450 * radiusScale orbitHeight = 0 orbitSpeed = 0.0006 colorHue = 220 + (team.rank - 4) * 20 positionInOrbit = team.rank - 4 } else { orbitRadius = 580 * radiusScale orbitHeight = 80 * radiusScale orbitSpeed = 0.0004 colorHue = 100 + (team.rank - 10) * 15 positionInOrbit = team.rank - 10 } const teamsInOrbit = team.rank <= 3 ? 3 : team.rank <= 9 ? 6 : Math.min(11, maxShips - 9) const angle = (positionInOrbit / teamsInOrbit) * Math.PI * 2 const orbitOffset = Math.random() * 0.2 const x = Math.cos(angle + orbitOffset) * orbitRadius const z = Math.sin(angle + orbitOffset) * orbitRadius const y = orbitHeight + Math.sin(index * 0.5) * 15 shipOrbitConfigRef.current[team.id] = { orbitRadius, orbitSpeed, orbitHeight, colorHue, orbitOffset, } return { teamId: team.id, teamName: team.name, x, y, z, angle: angle + orbitOffset, orbitRadius, orbitSpeed, orbitHeight, orbitOffset, isActive: false, rank: team.rank, score: team.score, isOvertaking: false, overtakeProgress: 0, targetRank: team.rank, pulsation: Math.random() * Math.PI * 2, trailPositions: [], enginePulse: Math.random() * Math.PI * 2, verticalPhase: Math.random() * Math.PI * 2, colorHue, smoothX: x, smoothY: y, smoothZ: z, } }) setSpaceships(newSpaceships) } }, [allTeams, teams, dimensions.width, isInitialized, deviceCapabilities]) // 同步团队数据更新 useEffect(() => { if (spaceships.length === 0 || !isInitialized) return setSpaceships((prevSpaceships) => prevSpaceships.map((ship) => { const latestTeam = teams.find((t) => t.id === ship.teamId) if (!latestTeam) return ship return { ...ship, teamName: latestTeam.name, rank: latestTeam.rank, score: latestTeam.score, targetRank: latestTeam.rank, } }), ) }, [teams, isInitialized]) // 处理事件和攻击动画 useEffect(() => { if (events.length > 0 && spaceships.length > 0 && targets.length > 0) { const flagEvents = events.filter((event) => event.type === "FlagSubmit" && event.team && event.values.length > 0) const sortedEvents = [...flagEvents].sort((a, b) => b.time - a.time) const newEvents = sortedEvents.filter((event) => event.time > lastEventTime) if (newEvents.length > 0) { newEvents.forEach((event) => { const teamName = event.team || "" const spaceship = spaceships.find((s) => s.teamName === teamName) if (spaceship) { const isSuccess = event.values[0] === "Accepted" const challengeTitle = event.values.length > 2 ? event.values[2] : "Unknown challenge" let challengeCategory = "Misc" if (gameDetails) { for (const [category, challenges] of Object.entries(gameDetails.challenges)) { const challenge = challenges.find((c) => c.title === challengeTitle) if (challenge) { challengeCategory = category break } } } const target = targets.find((t) => t.category === challengeCategory) if (target) { const attackId = `${spaceship.teamId}-${Date.now()}-${Math.random()}` setAttacks((prev) => [ ...prev, { id: attackId, teamId: spaceship.teamId, teamName: spaceship.teamName, challengeCategory, challengeTitle, isSuccess, startTime: Date.now(), duration: deviceCapabilities.isMobile ? 2000 : 2500, progress: 0, startPos: { x: spaceship.smoothX, y: spaceship.smoothY, z: spaceship.smoothZ }, targetPos: { x: target.x, y: target.y, z: target.z }, beamIntensity: 1, }, ]) if (isSuccess) { const currentRank = spaceship.rank const newRank = Math.max(1, currentRank - 1) setSpaceships((prev) => prev.map((ship) => { if (ship.teamId === spaceship.teamId) { return { ...ship, isOvertaking: true, overtakeProgress: 0, targetRank: newRank, } } return ship }), ) setTargets((prev) => prev.map((t) => t.category === challengeCategory ? { ...t, waveAnimation: 1, hitCount: t.hitCount + 1, glowIntensity: 1 } : t, ), ) createExplosionParticles(target.x, target.y, target.z, target.colorHue) } } } }) setLastEventTime(newEvents[0].time) } } }, [events, spaceships, targets, lastEventTime, createExplosionParticles, deviceCapabilities, gameDetails]) // 主动画循环 useEffect(() => { if (!canvasRef.current || dimensions.width === 0) return const ctx = canvasRef.current.getContext("2d") if (!ctx) return let lastFrameTime = 0 const targetFPS = deviceCapabilities.isMobile ? 30 : 60 const frameInterval = 1000 / targetFPS const animate = (currentTime: number) => { const renderStartTime = performance.now() if (currentTime - lastFrameTime < frameInterval) { animationRef.current = requestAnimationFrame(animate) return } lastFrameTime = currentTime const themeColors = getThemeColors() // 清除画布 - 主题适配背景 const gradient = ctx.createRadialGradient( dimensions.width / 2, dimensions.height / 2, 0, dimensions.width / 2, dimensions.height / 2, Math.max(dimensions.width, dimensions.height) / 2, ) if (isDark) { gradient.addColorStop(0, themeColors.background.primary) gradient.addColorStop(0.5, themeColors.background.secondary) gradient.addColorStop(1, themeColors.background.tertiary) } else { gradient.addColorStop(0, themeColors.background.primary) gradient.addColorStop(0.5, themeColors.background.secondary) gradient.addColorStop(1, themeColors.background.tertiary) } ctx.fillStyle = gradient ctx.fillRect(0, 0, dimensions.width, dimensions.height) // 相机旋转 if (autoRotate) { setCameraRotation((prev) => prev + (deviceCapabilities.isMobile ? 0.0002 : 0.0003)) } setCameraHeight((prev) => Math.sin(Date.now() * 0.0003) * (deviceCapabilities.isMobile ? 15 : 25)) // 绘制星星 - 主题适配 if (stars.length > 0) { const starStep = deviceCapabilities.isMobile ? 2 : 1 for (let i = 0; i < stars.length; i += starStep) { const star = stars[i] const projected = project3D(star.x, star.y, star.z) if (projected.isVisible) { const alpha = Math.max(0, Math.min(1, star.brightness * projected.scale * 0.9)) const size = Math.max(0.5, projected.scale * 2.5) ctx.fillStyle = `${themeColors.stars}${Math.floor(alpha * 255) .toString(16) .padStart(2, "0")}` ctx.beginPath() ctx.arc(projected.x, projected.y, size, 0, Math.PI * 2) ctx.fill() } } } // 更新飞船位置 setSpaceships((prev) => prev.map((ship) => { const newShip = { ...ship } newShip.enginePulse += 0.04 newShip.verticalPhase += 0.008 newShip.pulsation += 0.02 let targetX, targetY, targetZ if (!ship.isOvertaking) { newShip.angle += ship.orbitSpeed targetX = Math.cos(newShip.angle) * ship.orbitRadius targetZ = Math.sin(newShip.angle) * ship.orbitRadius targetY = ship.orbitHeight + Math.sin(newShip.verticalPhase) * 12 } else { newShip.overtakeProgress += deviceCapabilities.isMobile ? 0.008 : 0.006 if (newShip.overtakeProgress < 1) { const progress = newShip.overtakeProgress const arcHeight = 120 * Math.sin(progress * Math.PI) const forwardMovement = progress * 0.15 const laneShift = Math.sin(progress * Math.PI) * 30 const currentAngle = ship.angle + forwardMovement const baseX = Math.cos(currentAngle) * ship.orbitRadius const baseZ = Math.sin(currentAngle) * ship.orbitRadius targetX = baseX + Math.cos(currentAngle + Math.PI / 2) * laneShift targetZ = baseZ + Math.sin(currentAngle + Math.PI / 2) * laneShift targetY = ship.orbitHeight + arcHeight + Math.sin(newShip.verticalPhase) * 8 newShip.angle = currentAngle } else { newShip.isOvertaking = false newShip.overtakeProgress = 0 newShip.rank = newShip.targetRank newShip.angle += ship.orbitSpeed targetX = Math.cos(newShip.angle) * ship.orbitRadius targetZ = Math.sin(newShip.angle) * ship.orbitRadius targetY = ship.orbitHeight + Math.sin(newShip.verticalPhase) * 12 } } const smoothFactor = 0.04 newShip.smoothX = lerp(ship.smoothX, targetX, smoothFactor) newShip.smoothY = lerp(ship.smoothY, targetY, smoothFactor) newShip.smoothZ = lerp(ship.smoothZ, targetZ, smoothFactor) newShip.x = newShip.smoothX newShip.y = newShip.smoothY newShip.z = newShip.smoothZ // 尾迹 const trailLength = deviceCapabilities.isMobile ? 6 : 10 newShip.trailPositions = [ { x: newShip.x, y: newShip.y, z: newShip.z, alpha: 1 }, ...ship.trailPositions.map((pos, index) => ({ ...pos, alpha: Math.max(0, 1 - (index + 1) / trailLength), })), ].slice(0, trailLength) // 粒子生成 const particleChance = deviceCapabilities.isMobile ? 0.08 : 0.15 if (Math.random() < particleChance && particlesRef.current.length < deviceCapabilities.maxParticles) { const trailAngle = ship.angle + Math.PI + (Math.random() - 0.5) * 0.08 particlesRef.current = [ ...particlesRef.current, { x: newShip.x + Math.cos(trailAngle) * 10, y: newShip.y + (Math.random() - 0.5) * 5, z: newShip.z + Math.sin(trailAngle) * 10, vx: Math.cos(trailAngle) * 1.5, vy: (Math.random() - 0.5) * 0.8, vz: Math.sin(trailAngle) * 1.5, life: Math.random() * 30 + 30, maxLife: 60, color: `hsl(${ship.colorHue}, 100%, 70%)`, size: Math.random() * 2.5 + 1, }, ] } return newShip }), ) // 按深度排序所有对象 const allObjects = [ ...spaceships.map((ship) => ({ type: "ship", obj: ship, depth: ship.z })), ...targets.map((target) => ({ type: "target", obj: target, depth: target.z })), ].sort((a, b) => b.depth - a.depth) // 绘制所有对象 allObjects.forEach(({ type, obj }) => { if (type === "ship") { drawSpaceship(ctx, obj as Spaceship) } else if (type === "target") { drawTarget(ctx, obj as Target) } }) updateAndDrawAttacks(ctx) setTargets((prev) => prev.map((target) => ({ ...target, rotation: target.rotation + 0.005 * (0.8 + target.size * 0.2), waveAnimation: Math.max(0, target.waveAnimation - 0.008), glowIntensity: Math.max(0, target.glowIntensity - 0.003), pulsePhase: target.pulsePhase + 0.015, sparkleTimer: target.sparkleTimer + 1, })), ) updateAndDrawParticles(ctx) const renderEndTime = performance.now() const renderTime = renderEndTime - renderStartTime updatePerformanceMetrics(renderTime) if (showPerformancePanel && performanceMode === "graph") { renderPerformanceGraph(ctx, dimensions.width - 220, 10, 200, 100) } animationRef.current = requestAnimationFrame(animate) } // 绘制飞船函数 - 主题适配 const drawSpaceship = (ctx: CanvasRenderingContext2D, ship: Spaceship) => { const themeColors = getThemeColors() // 尾迹 if (deviceCapabilities.enableComplexEffects) { ship.trailPositions.forEach((trailPos, index) => { if (index > 0) { const projected = project3D(trailPos.x, trailPos.y, trailPos.z) if (projected.isVisible) { const alpha = trailPos.alpha * 0.7 const size = Math.max(2, projected.scale * 8 * (1 - index / ship.trailPositions.length)) ctx.fillStyle = `hsla(${ship.colorHue}, 100%, 70%, ${alpha})` ctx.beginPath() ctx.arc(projected.x, projected.y, size, 0, Math.PI * 2) ctx.fill() } } }) } // 绘制主飞船 const projected = project3D(ship.x, ship.y, ship.z) if (projected.isVisible) { let baseSize = Math.max( deviceCapabilities.isMobile ? 10 : 12, (projected.scale * (deviceCapabilities.isMobile ? 18 : 22) * ship.orbitRadius) / 500, ) if (ship.rank === 1) baseSize *= deviceCapabilities.isMobile ? 2.0 : 2.5 else if (ship.rank === 2) baseSize *= deviceCapabilities.isMobile ? 1.8 : 2.3 else if (ship.rank === 3) baseSize *= deviceCapabilities.isMobile ? 1.6 : 2 const pulsation = 1 + Math.sin(ship.pulsation) * 0.12 const enginePulse = 0.6 + Math.sin(ship.enginePulse) * 0.4 ctx.save() ctx.translate(projected.x, projected.y) const rotationAngle = ship.angle + Math.PI / 2 ctx.rotate(rotationAngle) if (ship.isOvertaking) { const overtakeScale = 1 + ship.overtakeProgress * 0.5 ctx.scale(overtakeScale, overtakeScale) } // 飞船光晕 - 主题适配 if (deviceCapabilities.enableComplexEffects) { const glowSize = baseSize * pulsation * (ship.rank <= 3 ? 2.2 : 1.8) const glowGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, glowSize) const glowIntensity = ship.rank <= 3 ? 0.9 : 0.6 if (isDark) { glowGradient.addColorStop(0, `hsla(${ship.colorHue}, 100%, 70%, ${glowIntensity})`) glowGradient.addColorStop(0.5, `hsla(${ship.colorHue}, 80%, 50%, ${glowIntensity * 0.4})`) glowGradient.addColorStop(1, `hsla(${ship.colorHue}, 100%, 70%, 0)`) } else { glowGradient.addColorStop(0, `hsla(${ship.colorHue}, 100%, 60%, ${glowIntensity * 0.8})`) glowGradient.addColorStop(0.5, `hsla(${ship.colorHue}, 80%, 40%, ${glowIntensity * 0.3})`) glowGradient.addColorStop(1, `hsla(${ship.colorHue}, 100%, 60%, 0)`) } ctx.fillStyle = glowGradient ctx.beginPath() ctx.arc(0, 0, glowSize, 0, Math.PI * 2) ctx.fill() } // 飞船主体 - 主题适配颜色 const shipGradient = ctx.createLinearGradient(-baseSize / 2, 0, baseSize / 2, 0) if (isDark) { shipGradient.addColorStop(0, `hsl(${ship.colorHue}, 100%, 65%)`) shipGradient.addColorStop(0.3, `hsl(${ship.colorHue}, 100%, 85%)`) shipGradient.addColorStop(0.7, `hsl(${ship.colorHue}, 100%, 85%)`) shipGradient.addColorStop(1, `hsl(${ship.colorHue}, 100%, 65%)`) } else { shipGradient.addColorStop(0, `hsl(${ship.colorHue}, 80%, 50%)`) shipGradient.addColorStop(0.3, `hsl(${ship.colorHue}, 90%, 70%)`) shipGradient.addColorStop(0.7, `hsl(${ship.colorHue}, 90%, 70%)`) shipGradient.addColorStop(1, `hsl(${ship.colorHue}, 80%, 50%)`) } ctx.fillStyle = shipGradient // 主飞船体 ctx.beginPath() ctx.moveTo(baseSize * 0.9, 0) ctx.quadraticCurveTo(baseSize * 0.3, -baseSize * 0.25, -baseSize * 0.1, -baseSize * 0.35) ctx.lineTo(-baseSize * 0.4, -baseSize * 0.15) ctx.lineTo(-baseSize * 0.3, 0) ctx.lineTo(-baseSize * 0.4, baseSize * 0.15) ctx.lineTo(-baseSize * 0.1, baseSize * 0.35) ctx.quadraticCurveTo(baseSize * 0.3, baseSize * 0.25, baseSize * 0.9, 0) ctx.closePath() ctx.fill() // 飞船轮廓 - 主题适配 ctx.strokeStyle = ship.isActive || ship.isOvertaking ? isDark ? "#ffffff" : "#263238" : `hsla(${ship.colorHue}, 100%, ${isDark ? 90 : 70}%, 0.9)` ctx.lineWidth = projected.scale * (ship.rank <= 3 ? 3 : 2) ctx.stroke() // 驾驶舱 - 主题适配 const cockpitGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, baseSize * 0.2) if (isDark) { cockpitGradient.addColorStop(0, "rgba(100, 200, 255, 0.9)") cockpitGradient.addColorStop(1, "rgba(50, 150, 255, 0.3)") } else { cockpitGradient.addColorStop(0, "rgba(0, 188, 212, 0.8)") cockpitGradient.addColorStop(1, "rgba(0, 188, 212, 0.2)") } ctx.fillStyle = cockpitGradient ctx.beginPath() ctx.ellipse(baseSize * 0.2, 0, baseSize * 0.15, baseSize * 0.1, 0, 0, Math.PI * 2) ctx.fill() // 侧翼装饰 if (deviceCapabilities.enableComplexEffects) { ctx.fillStyle = `hsla(${ship.colorHue}, 100%, ${isDark ? 90 : 70}%, 0.8)` ctx.beginPath() ctx.ellipse(-baseSize * 0.2, -baseSize * 0.25, baseSize * 0.08, baseSize * 0.04, 0, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.ellipse(-baseSize * 0.2, baseSize * 0.25, baseSize * 0.08, baseSize * 0.04, 0, 0, Math.PI * 2) ctx.fill() } // 引擎效果 - 主题适配 const engineSize = baseSize * 0.3 * enginePulse const engineGlow = ctx.createRadialGradient(-baseSize * 0.3, 0, 0, -baseSize * 0.3, 0, engineSize * 2) if (isDark) { engineGlow.addColorStop(0, `hsla(${ship.colorHue + 40}, 100%, 90%, ${enginePulse})`) engineGlow.addColorStop(0.5, `hsla(${ship.colorHue + 20}, 100%, 70%, ${enginePulse * 0.7})`) engineGlow.addColorStop(1, `hsla(${ship.colorHue}, 100%, 50%, 0)`) } else { engineGlow.addColorStop(0, `hsla(${ship.colorHue + 40}, 80%, 70%, ${enginePulse * 0.8})`) engineGlow.addColorStop(0.5, `hsla(${ship.colorHue + 20}, 90%, 60%, ${enginePulse * 0.5})`) engineGlow.addColorStop(1, `hsla(${ship.colorHue}, 80%, 40%, 0)`) } ctx.fillStyle = engineGlow ctx.beginPath() ctx.arc(-baseSize * 0.3, 0, engineSize * 2, 0, Math.PI * 2) ctx.fill() // 引擎核心 ctx.fillStyle = `hsl(${ship.colorHue + 60}, 100%, ${isDark ? 95 : 85}%)` ctx.beginPath() ctx.arc(-baseSize * 0.3, 0, engineSize * 0.6, 0, Math.PI * 2) ctx.fill() // 前三名特殊效果 - 主题适配 if (ship.rank <= 3) { ctx.strokeStyle = isDark ? "#ffd700" : "#FFE082" ctx.lineWidth = projected.scale * 2 ctx.beginPath() ctx.arc(0, -baseSize * 0.6, baseSize * 0.2, 0, Math.PI * 2) ctx.stroke() // 排名数字 ctx.fillStyle = isDark ? "#ffd700" : "#FFE082" ctx.font = `bold ${Math.max(8, projected.scale * (deviceCapabilities.isMobile ? 10 : 12))}px Arial` ctx.textAlign = "center" ctx.fillText(ship.rank.toString(), 0, -baseSize * 0.55) } ctx.restore() // 队伍信息 - 主题适配 const fontSize = deviceCapabilities.isMobile ? 8 : 9 const rankFontSize = deviceCapabilities.isMobile ? 6 : 7 ctx.fillStyle = isDark ? "#ffffff" : "#263238" ctx.font = `bold ${Math.max(fontSize, projected.scale * (ship.rank <= 3 ? fontSize + 2 : fontSize))}px Arial` ctx.textAlign = "center" ctx.shadowColor = isDark ? "#000000" : "rgba(255, 255, 255, 0.8)" ctx.shadowBlur = 3 let displayName = ship.teamName if (deviceCapabilities.isMobile && displayName.length > 8) { displayName = displayName.substring(0, 8) + "..." } ctx.fillText(displayName, projected.x, projected.y + baseSize + 15) ctx.fillStyle = ship.rank <= 3 ? (isDark ? "#ffd700" : "#FFE082") : `hsl(${ship.colorHue}, 100%, ${isDark ? 70 : 50}%)` ctx.font = `${Math.max(rankFontSize, projected.scale * (ship.rank <= 3 ? rankFontSize + 1 : rankFontSize))}px Arial` ctx.fillText(`#${ship.rank} - ${ship.score}pts`, projected.x, projected.y + baseSize + 28) ctx.shadowBlur = 0 } } // 绘制目标函数 - 主题适配 const drawTarget = (ctx: CanvasRenderingContext2D, target: Target) => { const projected = project3D(target.x, target.y, target.z) if (projected.isVisible) { const themeColors = getThemeColors() const baseSize = Math.max( deviceCapabilities.isMobile ? 30 : 40, projected.scale * (deviceCapabilities.isMobile ? 60 : 80), ) const size = baseSize // 脉冲光效果 - 主题适配 const pulseIntensity = 0.6 + 0.4 * Math.sin(target.pulsePhase) const pulseRadius = size * (1.2 + pulseIntensity * 0.8) const ringCount = deviceCapabilities.isMobile ? 2 : 4 for (let ring = 0; ring < ringCount; ring++) { const ringRadius = pulseRadius * (0.4 + ring * 0.3) const ringAlpha = (1 - ring * 0.4) * pulseIntensity * 0.6 const pulseGradient = ctx.createRadialGradient( projected.x, projected.y, ringRadius * 0.3, projected.x, projected.y, ringRadius, ) if (isDark) { pulseGradient.addColorStop(0, `rgba(255, 0, 0, ${ringAlpha})`) pulseGradient.addColorStop(0.7, `rgba(255, 100, 100, ${ringAlpha * 0.5})`) pulseGradient.addColorStop(1, `rgba(255, 0, 0, 0)`) } else { pulseGradient.addColorStop( 0, `${themeColors.targets.glow}${Math.floor(ringAlpha * 255) .toString(16) .padStart(2, "0")}`, ) pulseGradient.addColorStop( 0.7, `${themeColors.targets.rings}${Math.floor(ringAlpha * 0.5 * 255) .toString(16) .padStart(2, "0")}`, ) pulseGradient.addColorStop(1, `${themeColors.targets.glow}00`) } ctx.fillStyle = pulseGradient ctx.beginPath() ctx.arc(projected.x, projected.y, ringRadius, 0, Math.PI * 2) ctx.fill() } // 波动效果（命中时）- 主题适配 if (target.waveAnimation > 0) { const waveCount = deviceCapabilities.isMobile ? 2 : 3 for (let i = 0; i < waveCount; i++) { const waveDelay = i * 0.3 if (target.waveAnimation > waveDelay) { const waveProgress = target.waveAnimation - waveDelay const waveRadius = size * (1 + waveProgress * 4) const waveAlpha = waveProgress * 0.8 ctx.strokeStyle = isDark ? `rgba(255, 255, 0, ${waveAlpha})` : `rgba(0, 188, 212, ${waveAlpha})` ctx.lineWidth = projected.scale * (6 - i) ctx.beginPath() ctx.arc(projected.x, projected.y, waveRadius, 0, Math.PI * 2) ctx.stroke() } } } ctx.save() ctx.translate(projected.x, projected.y) ctx.rotate(target.rotation) // 主体发光 - 主题适配 const glowIntensity = 0.8 + target.glowIntensity * 0.2 const targetGlow = ctx.createRadialGradient(0, 0, 0, 0, 0, size * 1.4) if (isDark) { targetGlow.addColorStop(0, `rgba(255, 0, 0, ${glowIntensity})`) targetGlow.addColorStop(0.5, `rgba(255, 50, 50, ${glowIntensity * 0.6})`) targetGlow.addColorStop(1, `rgba(255, 0, 0, 0)`) } else { targetGlow.addColorStop( 0, `${themeColors.targets.glow}${Math.floor(glowIntensity * 255) .toString(16) .padStart(2, "0")}`, ) targetGlow.addColorStop( 0.5, `${themeColors.targets.rings}${Math.floor(glowIntensity * 0.6 * 255) .toString(16) .padStart(2, "0")}`, ) targetGlow.addColorStop(1, `${themeColors.targets.glow}00`) } ctx.fillStyle = targetGlow ctx.beginPath() ctx.arc(0, 0, size * 1.4, 0, Math.PI * 2) ctx.fill() // 主体圆形 - 主题适配 const mainGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, size * 0.9) if (isDark) { mainGradient.addColorStop(0, "rgba(200, 0, 0, 0.9)") mainGradient.addColorStop(0.6, "rgba(150, 0, 0, 0.8)") mainGradient.addColorStop(1, "rgba(100, 0, 0, 0.7)") } else { mainGradient.addColorStop(0, "rgba(0, 188, 212, 0.8)") mainGradient.addColorStop(0.6, "rgba(0, 150, 170, 0.7)") mainGradient.addColorStop(1, "rgba(0, 120, 140, 0.6)") } ctx.fillStyle = mainGradient ctx.beginPath() ctx.arc(0, 0, size * 0.9, 0, Math.PI * 2) ctx.fill() // 外环装饰 - 主题适配 const ringDetailCount = deviceCapabilities.isMobile ? 2 : 3 for (let i = 1; i <= ringDetailCount; i++) { const ringSize = size * 0.9 * (0.3 + i * 0.25) if (isDark) { ctx.strokeStyle = `rgba(255, ${50 + i * 40}, ${50 + i * 40}, ${0.7 + pulseIntensity * 0.3})` } else { ctx.strokeStyle = `rgba(0, ${150 + i * 20}, ${180 + i * 20}, ${0.8 + pulseIntensity * 0.2})` } ctx.lineWidth = projected.scale * 2 ctx.beginPath() ctx.arc(0, 0, ringSize, 0, Math.PI * 2) ctx.stroke() } // 中心核心 - 主题适配 const coreSize = size * 0.25 const coreGlow = ctx.createRadialGradient(0, 0, 0, 0, 0, coreSize * 2) if (isDark) { coreGlow.addColorStop(0, "rgba(255, 255, 255, 1)") coreGlow.addColorStop(0.5, "rgba(255, 200, 200, 0.8)") coreGlow.addColorStop(1, "rgba(255, 100, 100, 0)") } else { coreGlow.addColorStop(0, themeColors.targets.core) coreGlow.addColorStop(0.5, "rgba(0, 188, 212, 0.6)") coreGlow.addColorStop(1, "rgba(0, 188, 212, 0)") } ctx.fillStyle = coreGlow ctx.beginPath() ctx.arc(0, 0, coreSize * 2, 0, Math.PI * 2) ctx.fill() ctx.fillStyle = isDark ? "#ffffff" : themeColors.targets.core ctx.beginPath() ctx.arc(0, 0, coreSize, 0, Math.PI * 2) ctx.fill() // 脉冲射线效果 - 主题适配 if (deviceCapabilities.enableComplexEffects) { const rayCount = deviceCapabilities.isMobile ? 6 : 8 for (let i = 0; i < rayCount; i++) { const rayAngle = (i / rayCount) * Math.PI * 2 + target.rotation * 2 const rayLength = size * (1.2 + pulseIntensity * 0.5) const rayAlpha = pulseIntensity * 0.6 if (isDark) { ctx.strokeStyle = `rgba(255, 0, 0, ${rayAlpha})` } else { ctx.strokeStyle = `rgba(0, 188, 212, ${rayAlpha})` } ctx.lineWidth = projected.scale * 3 ctx.beginPath() ctx.moveTo(Math.cos(rayAngle) * size * 0.3, Math.sin(rayAngle) * size * 0.3) ctx.lineTo(Math.cos(rayAngle) * rayLength, Math.sin(rayAngle) * rayLength) ctx.stroke() } } ctx.restore() // 类别标签 - 主题适配 const labelFontSize = deviceCapabilities.isMobile ? 10 : 12 ctx.fillStyle = isDark ? "#ffffff" : "#263238" ctx.font = `bold ${Math.max(labelFontSize, projected.scale * (labelFontSize + 2))}px Arial` ctx.textAlign = "center" ctx.shadowColor = isDark ? "#000000" : "rgba(255, 255, 255, 0.8)" ctx.shadowBlur = 4 let displayCategory = target.category if (deviceCapabilities.isMobile && displayCategory.length > 6) { displayCategory = displayCategory.substring(0, 6) + "..." } ctx.fillText(displayCategory, projected.x, projected.y - size - 15) // 命中计数 - 主题适配 if (target.hitCount > 0) { ctx.fillStyle = isDark ? "#ff6666" : "#F8BBD0" ctx.font = `bold ${Math.max(8, projected.scale * (deviceCapabilities.isMobile ? 9 : 12))}px Arial` ctx.fillText(`${target.hitCount} HITS`, projected.x, projected.y + size + 30) } ctx.shadowBlur = 0 } } // 更新和绘制攻击 - 主题适配 const updateAndDrawAttacks = (ctx: CanvasRenderingContext2D) => { const now = Date.now() setAttacks((prev) => prev .map((attack) => { const elapsed = now - attack.startTime const progress = Math.min(1, elapsed / attack.duration) const beamIntensity = Math.sin(progress * Math.PI) * 1.2 return { ...attack, progress, beamIntensity } }) .filter((attack) => attack.progress < 1), ) setSpaceships((prev) => prev.map((ship) => ({ ...ship, isActive: attacks.some((attack) => attack.teamId === ship.teamId && attack.progress < 1), })), ) // 绘制攻击光束 - 主题适配 attacks.forEach((attack) => { const currentX = attack.startPos.x + (attack.targetPos.x - attack.startPos.x) * attack.progress const currentY = attack.startPos.y + (attack.targetPos.y - attack.startPos.y) * attack.progress const currentZ = attack.startPos.z + (attack.targetPos.z - attack.startPos.z) * attack.progress const startProjected = project3D(attack.startPos.x, attack.startPos.y, attack.startPos.z) const currentProjected = project3D(currentX, currentY, currentZ) if (startProjected.isVisible && currentProjected.isVisible) { const beamWidth = Math.max(3, currentProjected.scale * (deviceCapabilities.isMobile ? 6 : 8)) const beamColor = attack.isSuccess ? isDark ? "0, 255, 0" : "174, 213, 129" : isDark ? "255, 0, 0" : "248, 187, 208" const intensity = attack.beamIntensity // 多层光束效果 const layerCount = deviceCapabilities.isMobile ? 2 : 3 for (let layer = 0; layer < layerCount; layer++) { const layerWidth = beamWidth * (layerCount - layer) * 0.5 const layerAlpha = intensity * (0.3 + layer * 0.2) const gradient = ctx.createLinearGradient( startProjected.x, startProjected.y, currentProjected.x, currentProjected.y, ) gradient.addColorStop(0, `rgba(${beamColor}, ${layerAlpha * 0.5})`) gradient.addColorStop(0.5, `rgba(${beamColor}, ${layerAlpha})`) gradient.addColorStop(1, `rgba(${beamColor}, ${layerAlpha * 0.5})`) ctx.strokeStyle = gradient ctx.lineWidth = layerWidth ctx.beginPath() ctx.moveTo(startProjected.x, startProjected.y) ctx.lineTo(currentProjected.x, currentProjected.y) ctx.stroke() } // 光束头部 const headSize = Math.max(4, currentProjected.scale * (deviceCapabilities.isMobile ? 10 : 12)) ctx.shadowColor = `rgb(${beamColor})` ctx.shadowBlur = deviceCapabilities.isMobile ? 15 : 20 ctx.fillStyle = `rgba(${beamColor}, ${intensity})` ctx.beginPath() ctx.arc(currentProjected.x, currentProjected.y, headSize, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 // 挑战名称 - 主题适配 if (attack.progress > 0.15 && attack.progress < 0.85) { const textFontSize = deviceCapabilities.isMobile ? 8 : 10 const statusFontSize = deviceCapabilities.isMobile ? 10 : 12 ctx.fillStyle = isDark ? "#ffffff" : "#263238" ctx.font = `bold ${Math.max(textFontSize, currentProjected.scale * textFontSize)}px Arial` ctx.textAlign = "center" ctx.shadowColor = isDark ? "#000000" : "rgba(255, 255, 255, 0.8)" ctx.shadowBlur = 4 let displayTitle = attack.challengeTitle if (deviceCapabilities.isMobile && displayTitle.length > 12) { displayTitle = displayTitle.substring(0, 12) + "..." } ctx.fillText(displayTitle, currentProjected.x, currentProjected.y - 25) ctx.fillStyle = attack.isSuccess ? (isDark ? "#00ff00" : "#AED581") : isDark ? "#ff0000" : "#F8BBD0" ctx.font = `bold ${Math.max(statusFontSize, currentProjected.scale * statusFontSize)}px Arial` ctx.fillText(attack.isSuccess ? "SUCCESS!" : "FAILED!", currentProjected.x, currentProjected.y - 45) ctx.shadowBlur = 0 } } }) } // 更新和绘制粒子 - 主题适配 const updateAndDrawParticles = (ctx: CanvasRenderingContext2D) => { particlesRef.current = particlesRef.current .map((particle) => ({ ...particle, x: particle.x + particle.vx, y: particle.y + particle.vy, z: particle.z + particle.vz, life: particle.life - 1, vx: particle.vx * 0.995, vy: particle.vy * 0.995, vz: particle.vz * 0.995, })) .filter((particle) => particle.life > 0) const particleStep = deviceCapabilities.isMobile ? 2 : 1 for (let i = 0; i < particlesRef.current.length; i += particleStep) { const particle = particlesRef.current[i] const projected = project3D(particle.x, particle.y, particle.z) if (projected.isVisible) { const alpha = particle.life / particle.maxLife const size = particle.size * projected.scale * alpha ctx.fillStyle = `${particle.color}${Math.floor(alpha * 255) .toString(16) .padStart(2, "0")}` ctx.beginPath() ctx.arc(projected.x, projected.y, size, 0, Math.PI * 2) ctx.fill() } } } animate(0) return () => { cancelAnimationFrame(animationRef.current) } }, [ dimensions, project3D, stars, spaceships, attacks, targets, lerp, deviceCapabilities, autoRotate, manualRotation, showPerformancePanel, performanceMode, renderPerformanceGraph, updatePerformanceMetrics, getThemeColors, isDark, ]) if (!teams || teams.length === 0) { return (

🚀 IMMERSIVE 3D BATTLE ARENA 🚀

等待数据加载...

) } return (

🚀 IMMERSIVE 3D BATTLE ARENA 🚀