v0.9 工单修复部署
This commit is contained in:
Executable
+667
@@ -0,0 +1,667 @@
|
||||
"use client";
|
||||
// 回响星核 / Echo Nexus — 中央晶体集群 + 主动脉冲（v0.7 Canvas 粒子系统）
|
||||
import { useRef, useState, useCallback, useEffect } from "react";
|
||||
import { useGameStore } from "@/store/gameStore";
|
||||
import { formatNum } from "@/lib/game/config";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { sfx } from "@/hooks/useAudio";
|
||||
import { PULSE_WHISPERS, maybeWhisper } from "@/lib/game/narrative";
|
||||
|
||||
interface FloatNum {
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
text: string;
|
||||
born: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
// ===== Canvas 粒子系统类型 =====
|
||||
interface EnergyParticle {
|
||||
// 环绕能量粒子（持续）
|
||||
angle: number;
|
||||
radius: number;
|
||||
baseRadius: number;
|
||||
speed: number;
|
||||
size: number;
|
||||
color: string;
|
||||
alpha: number;
|
||||
phase: number;
|
||||
}
|
||||
|
||||
interface AmbientParticle {
|
||||
// 环境星尘（缓慢漂浮）
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
size: number;
|
||||
alpha: number;
|
||||
twinkle: number;
|
||||
}
|
||||
|
||||
interface ShockRing {
|
||||
// 冲击波环（点击触发）
|
||||
born: number;
|
||||
color: string;
|
||||
maxRadius: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
interface BurstParticle {
|
||||
// 爆发粒子（点击触发，径向发散）
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
size: number;
|
||||
color: string;
|
||||
born: number;
|
||||
life: number;
|
||||
}
|
||||
|
||||
const COLORS = {
|
||||
emerald: "#34d399",
|
||||
fuchsia: "#e879f9",
|
||||
rose: "#fb7185",
|
||||
amber: "#fbbf24",
|
||||
white: "#ffffff",
|
||||
};
|
||||
|
||||
function comboColor(combo: number): string {
|
||||
if (combo >= 5) return COLORS.amber;
|
||||
if (combo >= 3) return COLORS.fuchsia;
|
||||
return COLORS.emerald;
|
||||
}
|
||||
|
||||
export function CrystalOrb() {
|
||||
const pulse = useGameStore((s) => s.pulse);
|
||||
const crystals = useGameStore((s) => s.crystals);
|
||||
const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
|
||||
const crystalCap = useGameStore((s) => s.crystalCap);
|
||||
const combo = useGameStore((s) => s._combo);
|
||||
const { toast } = useToast();
|
||||
|
||||
const [floats, setFloats] = useState<FloatNum[]>([]);
|
||||
const idRef = useRef(0);
|
||||
|
||||
// Canvas refs
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const pulseAnimRef = useRef(0);
|
||||
const [pulseAnim, setPulseAnim] = useState(0); // 触发 SVG 环动画
|
||||
|
||||
// 粒子状态 refs（不触发 re-render）
|
||||
const energyParticlesRef = useRef<EnergyParticle[]>([]);
|
||||
const ambientParticlesRef = useRef<AmbientParticle[]>([]);
|
||||
const shockRingsRef = useRef<ShockRing[]>([]);
|
||||
const burstParticlesRef = useRef<BurstParticle[]>([]);
|
||||
|
||||
const comboRef = useRef(combo);
|
||||
const fillPctRef = useRef(0);
|
||||
const crystalsRef = useRef(crystals);
|
||||
const crystalCapRef = useRef(crystalCap);
|
||||
useEffect(() => {
|
||||
comboRef.current = combo;
|
||||
crystalsRef.current = crystals;
|
||||
crystalCapRef.current = crystalCap;
|
||||
}, [combo, crystals, crystalCap]);
|
||||
|
||||
const mouseRef = useRef<{ x: number; y: number; inside: boolean }>({
|
||||
x: 0,
|
||||
y: 0,
|
||||
inside: false,
|
||||
});
|
||||
|
||||
// ===== 初始化粒子 =====
|
||||
const initParticles = useCallback((w: number, h: number) => {
|
||||
const cx = w / 2;
|
||||
const cy = h / 2;
|
||||
const baseR = Math.min(w, h) * 0.28;
|
||||
|
||||
// 环绕能量粒子（3 层，每层不同速度方向）
|
||||
const energy: EnergyParticle[] = [];
|
||||
const layers = [
|
||||
{ count: 14, rMul: 0.95, speed: 0.6, color: COLORS.emerald },
|
||||
{ count: 10, rMul: 1.15, speed: -0.4, color: COLORS.fuchsia },
|
||||
{ count: 8, rMul: 1.35, speed: 0.3, color: COLORS.rose },
|
||||
];
|
||||
layers.forEach((layer) => {
|
||||
for (let i = 0; i < layer.count; i++) {
|
||||
energy.push({
|
||||
angle: (Math.PI * 2 * i) / layer.count + Math.random() * 0.3,
|
||||
radius: baseR * layer.rMul,
|
||||
baseRadius: baseR * layer.rMul,
|
||||
speed: layer.speed * (0.8 + Math.random() * 0.4),
|
||||
size: 1.5 + Math.random() * 2,
|
||||
color: layer.color,
|
||||
alpha: 0.5 + Math.random() * 0.4,
|
||||
phase: Math.random() * Math.PI * 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
energyParticlesRef.current = energy;
|
||||
|
||||
// 环境星尘
|
||||
const ambient: AmbientParticle[] = [];
|
||||
for (let i = 0; i < 40; i++) {
|
||||
ambient.push({
|
||||
x: Math.random() * w,
|
||||
y: Math.random() * h,
|
||||
vx: (Math.random() - 0.5) * 8,
|
||||
vy: (Math.random() - 0.5) * 8,
|
||||
size: 0.5 + Math.random() * 1.5,
|
||||
alpha: 0.2 + Math.random() * 0.5,
|
||||
twinkle: Math.random() * Math.PI * 2,
|
||||
});
|
||||
}
|
||||
ambientParticlesRef.current = ambient;
|
||||
void cx;
|
||||
void cy;
|
||||
}, []);
|
||||
|
||||
// ===== 触发脉冲效果（Canvas 部分）=====
|
||||
const triggerPulseEffect = useCallback(
|
||||
(x: number, y: number, res: { combo: number; gain: number }) => {
|
||||
const color = comboColor(res.combo);
|
||||
const now = performance.now();
|
||||
|
||||
// 冲击波环（多层错峰）
|
||||
shockRingsRef.current.push({
|
||||
born: now,
|
||||
color: COLORS.emerald,
|
||||
maxRadius: 140,
|
||||
duration: 700,
|
||||
});
|
||||
if (res.combo >= 3) {
|
||||
shockRingsRef.current.push({
|
||||
born: now + 100,
|
||||
color: COLORS.fuchsia,
|
||||
maxRadius: 170,
|
||||
duration: 800,
|
||||
});
|
||||
}
|
||||
if (res.combo >= 5) {
|
||||
shockRingsRef.current.push({
|
||||
born: now + 200,
|
||||
color: COLORS.amber,
|
||||
maxRadius: 200,
|
||||
duration: 900,
|
||||
});
|
||||
}
|
||||
|
||||
// 径向爆发粒子
|
||||
const pcount = 10 + Math.min(10, res.combo) * 2;
|
||||
for (let i = 0; i < pcount; i++) {
|
||||
const angle = (Math.PI * 2 * i) / pcount + Math.random() * 0.4;
|
||||
const speed = 120 + Math.random() * 180;
|
||||
burstParticlesRef.current.push({
|
||||
x,
|
||||
y,
|
||||
vx: Math.cos(angle) * speed,
|
||||
vy: Math.sin(angle) * speed,
|
||||
size: 2 + Math.random() * 3,
|
||||
color,
|
||||
born: now,
|
||||
life: 600 + Math.random() * 300,
|
||||
});
|
||||
}
|
||||
|
||||
// 让能量粒子被"推开"再回弹
|
||||
energyParticlesRef.current.forEach((p) => {
|
||||
p.radius = p.baseRadius * (1.25 + Math.random() * 0.15);
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// ===== 点击处理 =====
|
||||
const handleClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const res = pulse();
|
||||
if (!res) return;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
const id = idRef.current++;
|
||||
const floatColor = comboColor(res.combo);
|
||||
setFloats((f) => [
|
||||
...f,
|
||||
{
|
||||
id,
|
||||
x,
|
||||
y,
|
||||
text: `+${res.gain.toFixed(1)}`,
|
||||
born: Date.now(),
|
||||
color: floatColor,
|
||||
},
|
||||
]);
|
||||
triggerPulseEffect(x, y, res);
|
||||
setPulseAnim((n) => n + 1);
|
||||
sfx(res.combo >= 3 ? "pulseCombo" : "pulse", { combo: res.combo });
|
||||
setTimeout(() => {
|
||||
setFloats((f) => f.filter((it) => it.id !== id));
|
||||
}, 900);
|
||||
if (res.combo >= 5 && res.combo % 5 === 0) {
|
||||
// v0.9 叙事融入：高连击时注入世界观低语
|
||||
const whisper = maybeWhisper(PULSE_WHISPERS, 0.6);
|
||||
toast({
|
||||
title: `×${res.combo} 连击！`,
|
||||
description: whisper ? `「${whisper}」` : "谐振叠加，产能飙升。",
|
||||
});
|
||||
} else if (res.combo >= 3 && res.combo % 3 === 0) {
|
||||
// 3 连击时也有概率出现叙事
|
||||
const whisper = maybeWhisper(PULSE_WHISPERS, 0.3);
|
||||
if (whisper) {
|
||||
toast({ title: "低语", description: `「${whisper}」` });
|
||||
}
|
||||
}
|
||||
},
|
||||
[pulse, toast, triggerPulseEffect]
|
||||
);
|
||||
|
||||
// ===== Canvas 动画循环 =====
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const container = containerRef.current;
|
||||
if (!canvas || !container) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
let rafId = 0;
|
||||
let lastTime = performance.now();
|
||||
let dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
|
||||
const resize = () => {
|
||||
const rect = container.getBoundingClientRect();
|
||||
dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
canvas.width = Math.max(1, Math.floor(rect.width * dpr));
|
||||
canvas.height = Math.max(1, Math.floor(rect.height * dpr));
|
||||
canvas.style.width = `${rect.width}px`;
|
||||
canvas.style.height = `${rect.height}px`;
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
initParticles(rect.width, rect.height);
|
||||
};
|
||||
resize();
|
||||
const ro = new ResizeObserver(resize);
|
||||
ro.observe(container);
|
||||
|
||||
const draw = (now: number) => {
|
||||
const dt = Math.min(0.05, (now - lastTime) / 1000);
|
||||
lastTime = now;
|
||||
const w = canvas.width / dpr;
|
||||
const h = canvas.height / dpr;
|
||||
const cx = w / 2;
|
||||
const cy = h / 2;
|
||||
const baseR = Math.min(w, h) * 0.28;
|
||||
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// === 1. 环境星尘 ===
|
||||
ambientParticlesRef.current.forEach((p) => {
|
||||
p.x += p.vx * dt;
|
||||
p.y += p.vy * dt;
|
||||
p.twinkle += dt * 2;
|
||||
if (p.x < 0) p.x = w;
|
||||
if (p.x > w) p.x = 0;
|
||||
if (p.y < 0) p.y = h;
|
||||
if (p.y > h) p.y = 0;
|
||||
const tw = 0.5 + 0.5 * Math.sin(p.twinkle);
|
||||
ctx.globalAlpha = p.alpha * tw;
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// === 2. 外层辉光（呼吸）===
|
||||
const breath = 0.85 + 0.15 * Math.sin(now * 0.001);
|
||||
const glowGrad = ctx.createRadialGradient(
|
||||
cx,
|
||||
cy,
|
||||
baseR * 0.3,
|
||||
cx,
|
||||
cy,
|
||||
baseR * 2.2
|
||||
);
|
||||
glowGrad.addColorStop(0, `rgba(52,211,153,${0.18 * breath})`);
|
||||
glowGrad.addColorStop(0.5, `rgba(232,121,249,${0.1 * breath})`);
|
||||
glowGrad.addColorStop(1, "rgba(0,0,0,0)");
|
||||
ctx.fillStyle = glowGrad;
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
// === 3. 进度填充环（背景 + 进度）===
|
||||
ctx.lineWidth = 2.5;
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.06)";
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, baseR * 1.45, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
|
||||
const fp = Math.min(
|
||||
100,
|
||||
(crystalsRef.current / Math.max(1, crystalCapRef.current)) * 100
|
||||
);
|
||||
fillPctRef.current = fp;
|
||||
const ringR = baseR * 1.45;
|
||||
const grad = ctx.createLinearGradient(
|
||||
cx - ringR,
|
||||
cy - ringR,
|
||||
cx + ringR,
|
||||
cy + ringR
|
||||
);
|
||||
grad.addColorStop(0, COLORS.emerald);
|
||||
grad.addColorStop(0.5, COLORS.fuchsia);
|
||||
grad.addColorStop(1, COLORS.rose);
|
||||
ctx.strokeStyle = grad;
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineCap = "round";
|
||||
ctx.shadowBlur = 8;
|
||||
ctx.shadowColor = COLORS.emerald;
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
cx,
|
||||
cy,
|
||||
ringR,
|
||||
-Math.PI / 2,
|
||||
-Math.PI / 2 + (Math.PI * 2 * fp) / 100
|
||||
);
|
||||
ctx.stroke();
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// === 4. 环绕能量粒子 ===
|
||||
energyParticlesRef.current.forEach((p) => {
|
||||
p.angle += p.speed * dt;
|
||||
// 回弹到 baseRadius
|
||||
p.radius += (p.baseRadius - p.radius) * Math.min(1, dt * 4);
|
||||
const px = cx + Math.cos(p.angle) * p.radius;
|
||||
const py = cy + Math.sin(p.angle) * p.radius;
|
||||
const flicker = 0.7 + 0.3 * Math.sin(now * 0.005 + p.phase);
|
||||
ctx.globalAlpha = p.alpha * flicker;
|
||||
ctx.fillStyle = p.color;
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowColor = p.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, p.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// 拖尾（向心方向的小线段）
|
||||
ctx.globalAlpha = p.alpha * flicker * 0.4;
|
||||
ctx.strokeStyle = p.color;
|
||||
ctx.lineWidth = p.size * 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(px, py);
|
||||
ctx.lineTo(
|
||||
cx + Math.cos(p.angle - p.speed * 0.08) * (p.radius - 2),
|
||||
cy + Math.sin(p.angle - p.speed * 0.08) * (p.radius - 2)
|
||||
);
|
||||
ctx.stroke();
|
||||
});
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// === 5. 中央晶核 ===
|
||||
const coreR = baseR * 0.95;
|
||||
// 鼠标接近时晶核轻微偏移（视差感）
|
||||
let coreOffsetX = 0;
|
||||
let coreOffsetY = 0;
|
||||
if (mouseRef.current.inside) {
|
||||
const dx = mouseRef.current.x - cx;
|
||||
const dy = mouseRef.current.y - cy;
|
||||
const dist = Math.hypot(dx, dy);
|
||||
if (dist > 0.1) {
|
||||
coreOffsetX = (dx / dist) * Math.min(8, dist * 0.05);
|
||||
coreOffsetY = (dy / dist) * Math.min(8, dist * 0.05);
|
||||
}
|
||||
}
|
||||
const ccx = cx + coreOffsetX;
|
||||
const ccy = cy + coreOffsetY;
|
||||
|
||||
// 晶核主体（径向渐变）
|
||||
const coreGrad = ctx.createRadialGradient(
|
||||
ccx - coreR * 0.25,
|
||||
ccy - coreR * 0.3,
|
||||
coreR * 0.1,
|
||||
ccx,
|
||||
ccy,
|
||||
coreR
|
||||
);
|
||||
coreGrad.addColorStop(0, "rgba(255,255,255,0.95)");
|
||||
coreGrad.addColorStop(0.3, `rgba(52,211,153,${0.85 * breath})`);
|
||||
coreGrad.addColorStop(0.65, "rgba(232,121,249,0.55)");
|
||||
coreGrad.addColorStop(1, "rgba(251,113,133,0.2)");
|
||||
ctx.fillStyle = coreGrad;
|
||||
ctx.shadowBlur = 30;
|
||||
ctx.shadowColor = COLORS.emerald;
|
||||
ctx.beginPath();
|
||||
ctx.arc(ccx, ccy, coreR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// 晶核内部六边形纹理
|
||||
ctx.save();
|
||||
ctx.translate(ccx, ccy);
|
||||
ctx.globalAlpha = 0.25;
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.6)";
|
||||
ctx.lineWidth = 0.8;
|
||||
const hexR = coreR * 0.7;
|
||||
for (let layer = 0; layer < 3; layer++) {
|
||||
const r = hexR * (1 - layer * 0.3);
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const a = (Math.PI / 3) * i + now * 0.0002 * (layer % 2 ? 1 : -1);
|
||||
const px = Math.cos(a) * r;
|
||||
const py = Math.sin(a) * r;
|
||||
if (i === 0) ctx.moveTo(px, py);
|
||||
else ctx.lineTo(px, py);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
// 高光
|
||||
ctx.globalAlpha = 0.4;
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(
|
||||
ccx - coreR * 0.25,
|
||||
ccy - coreR * 0.35,
|
||||
coreR * 0.35,
|
||||
coreR * 0.18,
|
||||
-0.4,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// === 6. 冲击波环 ===
|
||||
shockRingsRef.current = shockRingsRef.current.filter((ring) => {
|
||||
const elapsed = now - ring.born;
|
||||
if (elapsed < 0 || elapsed > ring.duration) return elapsed <= ring.duration + 50;
|
||||
const t = elapsed / ring.duration;
|
||||
const r = ring.maxRadius * t;
|
||||
const alpha = (1 - t) * 0.8;
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.strokeStyle = ring.color;
|
||||
ctx.lineWidth = 2.5 * (1 - t * 0.5);
|
||||
ctx.shadowBlur = 12;
|
||||
ctx.shadowColor = ring.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.shadowBlur = 0;
|
||||
return true;
|
||||
});
|
||||
shockRingsRef.current = shockRingsRef.current.filter(
|
||||
(r) => now - r.born < r.duration
|
||||
);
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// === 7. 爆发粒子 ===
|
||||
burstParticlesRef.current = burstParticlesRef.current.filter((p) => {
|
||||
const age = now - p.born;
|
||||
if (age > p.life) return false;
|
||||
p.x += p.vx * dt;
|
||||
p.y += p.vy * dt;
|
||||
p.vx *= 0.96;
|
||||
p.vy *= 0.96;
|
||||
const t = age / p.life;
|
||||
const alpha = 1 - t;
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.fillStyle = p.color;
|
||||
ctx.shadowBlur = 8;
|
||||
ctx.shadowColor = p.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.size * (1 - t * 0.5), 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
return true;
|
||||
});
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
rafId = requestAnimationFrame(draw);
|
||||
};
|
||||
rafId = requestAnimationFrame(draw);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(rafId);
|
||||
ro.disconnect();
|
||||
};
|
||||
}, [initParticles]);
|
||||
|
||||
// ===== 鼠标追踪（视差）=====
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
mouseRef.current = {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
inside: true,
|
||||
};
|
||||
},
|
||||
[]
|
||||
);
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
mouseRef.current.inside = false;
|
||||
}, []);
|
||||
|
||||
// 进度比例（用于显示）
|
||||
const fillPct = Math.min(100, (crystals / Math.max(1, crystalCap)) * 100);
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center gap-4 select-none">
|
||||
{/* 连击显示 */}
|
||||
{combo > 1 && (
|
||||
<div className="absolute -top-2 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-rose-500/20 border border-rose-400/40 text-rose-200 text-xs font-mono animate-pulse z-10">
|
||||
×{combo} 连击
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleClick}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className="relative h-52 w-52 sm:h-64 sm:w-64 rounded-full focus:outline-none group"
|
||||
aria-label="脉冲扫描，获取记忆晶体"
|
||||
>
|
||||
{/* Canvas 粒子层 */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="absolute inset-0 rounded-full overflow-hidden"
|
||||
>
|
||||
<canvas ref={canvasRef} className="block w-full h-full" />
|
||||
</div>
|
||||
|
||||
{/* CSS 旋转外环装饰（与 Canvas 叠加）*/}
|
||||
<div
|
||||
className="absolute inset-2 rounded-full border border-emerald-400/30 pointer-events-none"
|
||||
style={{ animation: "echo-spin 18s linear infinite" }}
|
||||
>
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-emerald-300 shadow-[0_0_8px_#34d399]" />
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 h-1.5 w-1.5 rounded-full bg-rose-300 shadow-[0_0_8px_#fb7185]" />
|
||||
</div>
|
||||
{/* 反向旋转虚线内环 */}
|
||||
<div
|
||||
className="absolute inset-6 rounded-full border border-fuchsia-400/20 border-dashed pointer-events-none"
|
||||
style={{ animation: "echo-spin 24s linear infinite reverse" }}
|
||||
/>
|
||||
|
||||
{/* 脉冲扩散环（点击时，CSS 叠加 Canvas 冲击波）*/}
|
||||
<div
|
||||
key={`ring-${pulseAnim}`}
|
||||
className="absolute inset-8 rounded-full border-2 border-emerald-400/60 pointer-events-none"
|
||||
style={{ animation: "echo-ring 0.7s ease-out forwards" }}
|
||||
/>
|
||||
|
||||
{/* 浮动数字（保留 HTML，便于清晰文字）*/}
|
||||
{floats.map((f) => (
|
||||
<span
|
||||
key={f.id}
|
||||
className="absolute pointer-events-none font-mono font-bold text-sm z-10"
|
||||
style={{
|
||||
left: f.x,
|
||||
top: f.y,
|
||||
color: f.color,
|
||||
transform: "translate(-50%, -50%)",
|
||||
animation: "echo-float 0.9s ease-out forwards",
|
||||
textShadow: `0 0 8px ${f.color}`,
|
||||
}}
|
||||
>
|
||||
{f.text}
|
||||
</span>
|
||||
))}
|
||||
</button>
|
||||
|
||||
{/* 数值显示 */}
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="text-2xl font-mono font-bold text-emerald-300"
|
||||
style={{ textShadow: "0 0 12px rgba(52,211,153,0.5)" }}
|
||||
>
|
||||
{formatNum(crystals)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">
|
||||
记忆晶体 · {crystalsPerSec.toFixed(1)}/s · 上限{" "}
|
||||
{formatNum(crystalCap)}
|
||||
</div>
|
||||
<div className="text-[11px] text-muted-foreground/70 mt-2">
|
||||
点击晶体发起
|
||||
<span className="text-emerald-300">脉冲扫描</span>，连击叠加加成
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground/50 mt-1 tabular-nums">
|
||||
仓库 {fillPct.toFixed(1)}% · 连击 ×{Math.max(1, combo)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes echo-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes echo-float {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -180%) scale(1.3);
|
||||
}
|
||||
}
|
||||
@keyframes echo-ring {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user