From de17de46e18cb5dd83f520116200f979167de673 Mon Sep 17 00:00:00 2001 From: Cloud Bot Date: Tue, 24 Mar 2026 09:21:18 +0000 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=BA=95=E9=83=A8=E5=A1=94?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=B7=BB=E5=8A=A0=E6=82=AC=E6=B5=AE=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E5=BC=B9=E7=AA=97=E2=80=94=E2=80=94=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E8=A7=92=E8=89=B2=E5=90=8D=E8=A8=80=E3=80=81=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E6=95=B0=E5=80=BC=E3=80=81=E7=89=B9=E6=AE=8A=E6=8A=80=E8=83=BD?= =?UTF-8?q?=E3=80=81=E5=BB=BA=E8=AE=AE=E6=89=93=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/game/page.tsx | 244 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 233 insertions(+), 11 deletions(-) diff --git a/app/game/page.tsx b/app/game/page.tsx index 5f5439b..010f276 100644 --- a/app/game/page.tsx +++ b/app/game/page.tsx @@ -2,15 +2,89 @@ import { useEffect, useRef, useState, useCallback } from 'react' -const TOWER_META = [ - { type: 'outsource', name: '外包程序员', cost: 30, desc: '近战 8伤', color: '#94A3B8', img: '/game-assets/tower-outsource.png', tip: '廉价但30%丢空，5%自伤' }, - { type: 'intern', name: '00后实习生', cost: 50, desc: '近战 15伤', color: '#22C55E', img: '/game-assets/tower-intern.png', tip: '整顿职场：5%概率秒杀' }, - { type: 'hrbp', name: 'HRBP', cost: 80, desc: '辅助+20%攻速', color: '#EC4899', img: '/game-assets/tower-hrbp.png', tip: '打鸡血：周围塔攻速+20%' }, - { type: 'ops', name: '运营专员', cost: 90, desc: '溅射 18伤', color: '#8B5CF6', img: '/game-assets/tower-ops.png', tip: '增长黑客：20%双倍HC' }, - { type: 'ppt', name: 'PPT大师', cost: 100, desc: 'AOE减速', color: '#F59E0B', img: '/game-assets/tower-ppt.png', tip: '黑话领域：减速40%' }, - { type: 'senior', name: 'P6资深开发', cost: 120, desc: '远程 30伤', color: '#3B82F6', img: '/game-assets/tower-senior.png', tip: '代码屎山：附带持续伤害' }, - { type: 'pm', name: '产品经理', cost: 160, desc: '需求变更', color: '#06B6D4', img: '/game-assets/tower-pm.png', tip: '需求变更：每4次把怪打回去' }, -] as const +// ── 塔的完整元数据（用于底部面板 + Tooltip） ────────────────────────────── +interface TowerInfo { + type: string + name: string + cost: number + color: string + img: string + // Tooltip 内容 + quote: string // 人物一句话名言/自我介绍 + atk: string // 攻击类型 + dmg: string // 伤害数值 + range: string // 射程 + speed: string // 攻速 + skill: string // 特殊技能名 + skillDesc: string // 技能描述 + tactics: string // 建议打法 +} + +const TOWER_META: TowerInfo[] = [ + { + type: 'outsource', name: '外包程序员', cost: 30, color: '#94A3B8', + img: '/game-assets/tower-outsource.png', + quote: '"能跑就行，文档？没有！"', + atk: '近战', dmg: '8', range: '2格', speed: '0.7次/s', + skill: 'Bug自助餐', + skillDesc: '每次攻击30%概率丢空；5%概率Bug反弹，精力瞬间归零', + tactics: '前期凑数用，价格最便宜。不要指望他，放在路口堵一堵就够了。', + }, + { + type: 'intern', name: '00后实习生', cost: 50, color: '#22C55E', + img: '/game-assets/tower-intern.png', + quote: '"准点下班，法律护身。"', + atk: '近战', dmg: '15', range: '1.5格', speed: '1.5次/s', + skill: '整顿职场', + skillDesc: '每次攻击5%概率直接秒杀普通怪物；每秒有1%概率自动"跑路"，退还25HC', + tactics: '性价比最高的前排，攒够HC先多建几个。秒杀概率虽低但惊喜不断。', + }, + { + type: 'hrbp', name: 'HRBP', cost: 80, color: '#EC4899', + img: '/game-assets/tower-hrbp.png', + quote: '"公司是你家，福报靠大家。"', + atk: '辅助（无伤害）', dmg: '0', range: '1格光环', speed: '每0.5s触发', + skill: '打鸡血', + skillDesc: '持续给周围1格内所有塔附加+20%攻速BUFF；每次消耗自身5点精力', + tactics: '永远放在塔群中央！搭配P6或实习生使用效果翻倍，但别让她精力耗完。', + }, + { + type: 'ops', name: '运营专员', cost: 90, color: '#8B5CF6', + img: '/game-assets/tower-ops.png', + quote: '"数据不好看？A/B测！"', + atk: '远程 范围溅射', dmg: '18', range: '3格', speed: '1.2次/s', + skill: '增长黑客', + skillDesc: '每次命中20%概率触发"双倍HC"，目标死亡时奖励翻倍；命中范围内相邻怪物也受溅射伤害', + tactics: '人多的时候最强，专门对付密集的应届生群体。顺手赚HC。', + }, + { + type: 'ppt', name: 'PPT大师', cost: 100, color: '#F59E0B', + img: '/game-assets/tower-ppt.png', + quote: '"底层逻辑要打通，顶层设计要对齐。"', + atk: 'AOE范围', dmg: '5（范围）', range: '3格圆形', speed: '1.5次/s', + skill: '黑话领域', + skillDesc: '攻击圆形范围内所有怪物并降低移速40%，持续2秒；越多怪物越划算', + tactics: '减速神器！放在路径转弯处效果最佳。搭配P6的DOT伤害组合拳秒杀老员工。', + }, + { + type: 'senior', name: 'P6资深开发', cost: 120, color: '#3B82F6', + img: '/game-assets/tower-senior.png', + quote: '"这行代码谁写的？别问，是我。"', + atk: '远程直线', dmg: '30 + DOT 10/s×3s', range: '5格', speed: '1.0次/s', + skill: '代码屎山', + skillDesc: '子弹命中后附加DOT（每秒10伤，持续3秒）；远程射程5格，直线穿透感', + tactics: '主力输出，射程超长。优先打护盾老员工和Boss，DOT能绕过护盾持续掉血。', + }, + { + type: 'pm', name: '产品经理', cost: 160, color: '#06B6D4', + img: '/game-assets/tower-pm.png', + quote: '"这个需求很简单，下班前能上线吗？"', + atk: '远程曲线', dmg: '20', range: '4格', speed: '0.8次/s', + skill: '需求变更', + skillDesc: '每4次攻击触发"需求变更"，将目标强制打回2个路径节点，大幅拖延到达时间', + tactics: '最贵但效果独特！把Boss和老员工不断打回去，配合其他输出塔可以让怪走不出去。', + }, +] type TowerType = 'outsource' | 'intern' | 'hrbp' | 'ops' | 'ppt' | 'senior' | 'pm' @@ -44,6 +118,130 @@ const PUA_PLACEHOLDERS = [ '大家加油，相信自己！', ] +// ── 塔的悬浮信息卡片 ───────────────────────────────────────────────────────── +function TowerTooltip({ + tower, + pos, + canAfford, +}: { + tower: TowerInfo + pos: { left: number; bottom: number } + canAfford: boolean +}) { + return ( +
+ {/* 小三角指示器 */} +
+ + {/* 头部：头像 + 名字 + 费用 */} +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {tower.name} +
+
+ {tower.name} +
+
+ {tower.cost} HC {!canAfford && '(不足)'} +
+
+
+ + {/* 名言 */} +
+ {tower.quote} +
+ + {/* 数值属性 */} +
+ {[ + ['攻击', tower.atk], + ['射程', tower.range], + ['伤害', tower.dmg], + ['攻速', tower.speed], + ].map(([label, val]) => ( +
+ + {label} + + + {val} + +
+ ))} +
+ + {/* 技能 */} +
+
+ ✦ {tower.skill} +
+
+ {tower.skillDesc} +
+
+ + {/* 打法建议 */} +
+ 💡 {tower.tactics} +
+
+ ) +} + // ── 费用计算：基于当前HC的15%，最低20，最高200，取整到10的倍数 ──────────── function calcPuaCost(hc: number): number { const raw = Math.ceil(hc * 0.15) @@ -501,6 +699,10 @@ export default function GamePage() { } }, []) + // Tooltip 状态 + const [hoveredTower, setHoveredTower] = useState(null) + const [tooltipPos, setTooltipPos] = useState<{ left: number; bottom: number } | null>(null) + useEffect(() => { let mounted = true const initGame = async () => { @@ -730,9 +932,20 @@ export default function GamePage() { return (
+ + {/* 塔 Tooltip 弹窗 */} + {hoveredTower && tooltipPos && ( + = hoveredTower.cost} + /> + )} ) }