250 lines
7.7 KiB
TypeScript
250 lines
7.7 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
|
||
// 背景装饰黑话词条
|
||
const BUZZ_WORDS = [
|
||
'对齐', '赋能', '闭环', '拉通', '复盘', '抓手', '颗粒度',
|
||
'落地', '沉淀', '方法论', '协同', '降本增效', '去重复化',
|
||
'OKR', 'KPI', 'P8', 'P9', '内卷', '高优', '紧急拉会',
|
||
'JIRA', '绩效', 'HC冻结', '组织架构调整', '并行推进',
|
||
'向上管理', '自驱力', '全链路', '数据驱动', '业务增长',
|
||
]
|
||
|
||
type DifficultyLevel = 'easy' | 'normal' | 'hard'
|
||
|
||
const DIFFICULTY_OPTIONS: {
|
||
key: DifficultyLevel
|
||
label: string
|
||
desc: string
|
||
color: string
|
||
borderColor: string
|
||
glowColor: string
|
||
}[] = [
|
||
{
|
||
key: 'easy',
|
||
label: '简单',
|
||
desc: '带薪摸鱼，准点下班',
|
||
color: '#22C55E',
|
||
borderColor: '#16a34a',
|
||
glowColor: 'rgba(34,197,94,0.35)',
|
||
},
|
||
{
|
||
key: 'normal',
|
||
label: '普通',
|
||
desc: '常规打工，偶有加班',
|
||
color: '#3B82F6',
|
||
borderColor: '#2563eb',
|
||
glowColor: 'rgba(59,130,246,0.35)',
|
||
},
|
||
{
|
||
key: 'hard',
|
||
label: '困难',
|
||
desc: '地狱模式，007全开',
|
||
color: '#EF4444',
|
||
borderColor: '#dc2626',
|
||
glowColor: 'rgba(239,68,68,0.35)',
|
||
},
|
||
]
|
||
|
||
export default function GameCover() {
|
||
const [selectedDifficulty, setSelectedDifficulty] = useState<DifficultyLevel>('normal')
|
||
const router = useRouter()
|
||
|
||
const handleStart = () => {
|
||
if (typeof window !== 'undefined') {
|
||
localStorage.setItem('game-difficulty', selectedDifficulty)
|
||
}
|
||
router.push('/game')
|
||
}
|
||
|
||
return (
|
||
<main
|
||
className="crt-overlay relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden"
|
||
style={{
|
||
backgroundColor: '#0F0F23',
|
||
backgroundImage: 'url(/game-assets/cover-bg.png)',
|
||
backgroundSize: 'cover',
|
||
backgroundPosition: 'center',
|
||
}}
|
||
>
|
||
{/* 深色叠加层 */}
|
||
<div className="absolute inset-0" style={{ backgroundColor: 'rgba(10,10,30,0.72)' }} />
|
||
|
||
{/* CRT 流动扫描线 */}
|
||
<div className="game-cover-scanline" />
|
||
|
||
{/* 背景装饰：大厂黑话浮字 */}
|
||
<div
|
||
className="absolute inset-0 pointer-events-none select-none overflow-hidden"
|
||
aria-hidden="true"
|
||
>
|
||
{BUZZ_WORDS.map((word, i) => {
|
||
const top = (i * 37 + 7) % 95
|
||
const left = (i * 53 + 13) % 90
|
||
const size = 12 + (i % 5) * 4
|
||
const rotation = (i % 2 === 0 ? 1 : -1) * (5 + (i % 15))
|
||
return (
|
||
<span
|
||
key={word}
|
||
className="font-vt323 absolute"
|
||
style={{
|
||
top: `${top}%`,
|
||
left: `${left}%`,
|
||
fontSize: `${size}px`,
|
||
color: '#A78BFA',
|
||
opacity: 0.07 + (i % 4) * 0.02,
|
||
transform: `rotate(${rotation}deg)`,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{word}
|
||
</span>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* 中央主卡片 */}
|
||
<div
|
||
className="neon-border relative z-10 flex flex-col items-center gap-6 px-10 py-12 rounded-2xl"
|
||
style={{
|
||
backgroundColor: 'rgba(15, 15, 35, 0.85)',
|
||
backdropFilter: 'blur(12px)',
|
||
maxWidth: '600px',
|
||
width: '90%',
|
||
}}
|
||
>
|
||
{/* 游戏主标题 */}
|
||
<h1
|
||
className="neon-title font-pixel text-center leading-relaxed"
|
||
style={{ fontSize: 'clamp(18px, 4vw, 28px)', color: '#A78BFA' }}
|
||
>
|
||
大厂保卫战
|
||
</h1>
|
||
|
||
{/* 副标题 */}
|
||
<p
|
||
className="font-vt323 text-center"
|
||
style={{ fontSize: '28px', color: '#E2E8F0', letterSpacing: '0.1em' }}
|
||
>
|
||
最后的打工人
|
||
</p>
|
||
|
||
{/* 英文副标 */}
|
||
<p
|
||
className="font-pixel text-center"
|
||
style={{ fontSize: '10px', color: '#7C3AED', letterSpacing: '0.3em' }}
|
||
>
|
||
THE LAST GRINDER
|
||
</p>
|
||
|
||
{/* 分割线 */}
|
||
<div
|
||
className="w-full"
|
||
style={{ height: '1px', background: 'linear-gradient(90deg, transparent, #7C3AED, transparent)' }}
|
||
/>
|
||
|
||
{/* 描述文字 */}
|
||
<p
|
||
className="font-vt323 text-center"
|
||
style={{ fontSize: '22px', color: '#A78BFA', lineHeight: 1.6 }}
|
||
>
|
||
保住 KPI，战胜空降 VP
|
||
<br />
|
||
部署打工人防线，捍卫最后的 HC
|
||
</p>
|
||
|
||
{/* 难度选择 */}
|
||
<div className="w-full">
|
||
<p
|
||
className="font-pixel text-center mb-3"
|
||
style={{ fontSize: '9px', color: '#7C3AED', letterSpacing: '0.2em' }}
|
||
>
|
||
选择难度
|
||
</p>
|
||
<div className="flex gap-3 justify-center">
|
||
{DIFFICULTY_OPTIONS.map(opt => {
|
||
const isSelected = selectedDifficulty === opt.key
|
||
return (
|
||
<button
|
||
key={opt.key}
|
||
onClick={() => setSelectedDifficulty(opt.key)}
|
||
style={{
|
||
flex: 1,
|
||
padding: '10px 8px',
|
||
backgroundColor: isSelected ? `rgba(${opt.key === 'easy' ? '34,197,94' : opt.key === 'normal' ? '59,130,246' : '239,68,68'},0.15)` : '#0F1B2D',
|
||
border: `2px solid ${isSelected ? opt.color : '#1e3a5f'}`,
|
||
borderRadius: '10px',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.15s ease',
|
||
boxShadow: isSelected ? `0 0 16px ${opt.glowColor}` : 'none',
|
||
transform: isSelected ? 'translateY(-2px)' : 'none',
|
||
}}
|
||
>
|
||
<div
|
||
className="font-vt323"
|
||
style={{ fontSize: '22px', color: opt.color, marginBottom: '2px' }}
|
||
>
|
||
{opt.label}
|
||
</div>
|
||
<div
|
||
className="font-vt323"
|
||
style={{ fontSize: '13px', color: '#9CA3AF', lineHeight: 1.2 }}
|
||
>
|
||
{opt.desc}
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 开始游戏按钮 */}
|
||
<button
|
||
onClick={handleStart}
|
||
className="font-pixel text-white rounded-lg transition-all duration-200 cursor-pointer"
|
||
style={{
|
||
backgroundColor: '#F43F5E',
|
||
padding: '14px 32px',
|
||
fontSize: '12px',
|
||
letterSpacing: '0.1em',
|
||
boxShadow: '0 0 20px rgba(244, 63, 94, 0.4)',
|
||
border: 'none',
|
||
}}
|
||
onMouseEnter={e => {
|
||
const el = e.currentTarget as HTMLButtonElement
|
||
el.style.opacity = '0.9'
|
||
el.style.transform = 'translateY(-2px)'
|
||
el.style.boxShadow = '0 0 30px rgba(244, 63, 94, 0.6)'
|
||
}}
|
||
onMouseLeave={e => {
|
||
const el = e.currentTarget as HTMLButtonElement
|
||
el.style.opacity = '1'
|
||
el.style.transform = 'translateY(0)'
|
||
el.style.boxShadow = '0 0 20px rgba(244, 63, 94, 0.4)'
|
||
}}
|
||
>
|
||
开始游戏
|
||
</button>
|
||
|
||
{/* 提示文字 */}
|
||
<p
|
||
className="font-vt323 text-center"
|
||
style={{ fontSize: '16px', color: '#7C3AED', opacity: 0.7 }}
|
||
>
|
||
PRESS START
|
||
</p>
|
||
</div>
|
||
|
||
{/* 底部版权 */}
|
||
<footer
|
||
className="absolute bottom-4 left-0 right-0 text-center font-pixel pointer-events-none"
|
||
style={{ fontSize: '8px', color: '#7C3AED', opacity: 0.5, letterSpacing: '0.15em' }}
|
||
>
|
||
© 2026 大厂保卫战 | ALL YOUR KPI ARE BELONG TO US
|
||
</footer>
|
||
</main>
|
||
)
|
||
}
|