feat(game/ui): 实现周报结算弹窗，包含10秒倒计时、黑话答题和奖励/惩罚逻辑
This commit is contained in:
Cloud Bot
285
game/ui/WeeklyReportModal.ts
Normal file
285
game/ui/WeeklyReportModal.ts
Normal file
@@ -0,0 +1,285 @@
|
||||
import { GameManager } from '../GameManager'
|
||||
import { generateWeeklyOptions } from '../data/buzzwords'
|
||||
|
||||
export type WeeklyReportCallbacks = {
|
||||
onBossInspection: () => void
|
||||
onFullStamina: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 周报结算弹窗
|
||||
* 每3波结束后触发，仿钉钉/飞书全屏通知风格
|
||||
* 用 DOM 层实现（z-index: 9999），覆盖 canvas
|
||||
*/
|
||||
export class WeeklyReportModal {
|
||||
private container: HTMLElement | null = null
|
||||
private timerInterval: ReturnType<typeof setInterval> | null = null
|
||||
private callbacks: WeeklyReportCallbacks
|
||||
private onClose?: () => void
|
||||
|
||||
constructor(callbacks: WeeklyReportCallbacks) {
|
||||
this.callbacks = callbacks
|
||||
}
|
||||
|
||||
/** 显示弹窗 */
|
||||
show(onClose?: () => void): void {
|
||||
this.onClose = onClose
|
||||
this.createDOM()
|
||||
this.startTimer()
|
||||
}
|
||||
|
||||
private createDOM(): void {
|
||||
// 移除旧弹窗（防止重复）
|
||||
this.cleanup()
|
||||
|
||||
const { options, correctIndex } = generateWeeklyOptions()
|
||||
|
||||
// 背景蒙层
|
||||
const overlay = document.createElement('div')
|
||||
overlay.id = 'weekly-report-overlay'
|
||||
overlay.style.cssText = `
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.82);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'VT323', monospace;
|
||||
animation: fadeInOverlay 0.3s ease;
|
||||
`
|
||||
|
||||
// 弹窗卡片
|
||||
const card = document.createElement('div')
|
||||
card.style.cssText = `
|
||||
background: #1a1a2e;
|
||||
border: 2px solid #7c3aed;
|
||||
border-radius: 12px;
|
||||
padding: 32px 40px;
|
||||
max-width: 520px;
|
||||
width: 90%;
|
||||
box-shadow: 0 0 40px rgba(124,58,237,0.5);
|
||||
position: relative;
|
||||
animation: slideInCard 0.35s ease;
|
||||
`
|
||||
|
||||
// 顶部进度条容器
|
||||
const progressWrap = document.createElement('div')
|
||||
progressWrap.style.cssText = `
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 6px;
|
||||
background: #374151;
|
||||
border-radius: 12px 12px 0 0;
|
||||
overflow: hidden;
|
||||
`
|
||||
const progressBar = document.createElement('div')
|
||||
progressBar.id = 'weekly-progress-bar'
|
||||
progressBar.style.cssText = `
|
||||
height: 100%;
|
||||
background: #ef4444;
|
||||
width: 100%;
|
||||
transition: width linear;
|
||||
`
|
||||
progressWrap.appendChild(progressBar)
|
||||
card.appendChild(progressWrap)
|
||||
|
||||
// 标题
|
||||
const title = document.createElement('div')
|
||||
title.textContent = '📊 周报提交时间！'
|
||||
title.style.cssText = `
|
||||
font-size: 28px;
|
||||
color: #a78bfa;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 2px;
|
||||
`
|
||||
card.appendChild(title)
|
||||
|
||||
// 副标题
|
||||
const subtitle = document.createElement('div')
|
||||
subtitle.textContent = '请选择正确的互联网黑话，提交本周工作总结'
|
||||
subtitle.style.cssText = `
|
||||
font-size: 16px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
`
|
||||
card.appendChild(subtitle)
|
||||
|
||||
// 倒计时文字
|
||||
const timerText = document.createElement('div')
|
||||
timerText.id = 'weekly-timer-text'
|
||||
timerText.textContent = '10'
|
||||
timerText.style.cssText = `
|
||||
font-size: 20px;
|
||||
color: #fcd34d;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
`
|
||||
card.appendChild(timerText)
|
||||
|
||||
// 选项区域
|
||||
const optionsWrap = document.createElement('div')
|
||||
optionsWrap.style.cssText = `
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
|
||||
options.forEach((opt, idx) => {
|
||||
const btn = document.createElement('button')
|
||||
btn.textContent = opt
|
||||
btn.dataset.index = String(idx)
|
||||
btn.style.cssText = `
|
||||
flex: 1;
|
||||
padding: 14px 8px;
|
||||
background: #0f172a;
|
||||
border: 2px solid #4b5563;
|
||||
border-radius: 8px;
|
||||
color: #e2e8f0;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
`
|
||||
btn.addEventListener('mouseenter', () => {
|
||||
if (!btn.disabled) {
|
||||
btn.style.borderColor = '#7c3aed'
|
||||
btn.style.background = '#1e1b4b'
|
||||
}
|
||||
})
|
||||
btn.addEventListener('mouseleave', () => {
|
||||
if (!btn.disabled) {
|
||||
btn.style.borderColor = '#4b5563'
|
||||
btn.style.background = '#0f172a'
|
||||
}
|
||||
})
|
||||
btn.addEventListener('click', () => {
|
||||
this.handleAnswer(idx === correctIndex, options[correctIndex])
|
||||
})
|
||||
optionsWrap.appendChild(btn)
|
||||
})
|
||||
card.appendChild(optionsWrap)
|
||||
|
||||
// 结果区域（初始隐藏）
|
||||
const resultArea = document.createElement('div')
|
||||
resultArea.id = 'weekly-result'
|
||||
resultArea.style.cssText = `
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
`
|
||||
card.appendChild(resultArea)
|
||||
|
||||
// 注入动画样式
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
@keyframes fadeInOverlay { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes slideInCard { from { transform: translateY(-30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
overlay.appendChild(card)
|
||||
document.body.appendChild(overlay)
|
||||
this.container = overlay
|
||||
}
|
||||
|
||||
private startTimer(): void {
|
||||
let remaining = 10
|
||||
const progressBar = document.getElementById('weekly-progress-bar')
|
||||
const timerText = document.getElementById('weekly-timer-text')
|
||||
|
||||
if (progressBar) {
|
||||
// 使用 CSS transition 驱动进度条（10秒内从100%到0%）
|
||||
requestAnimationFrame(() => {
|
||||
progressBar.style.transition = 'width 10s linear'
|
||||
progressBar.style.width = '0%'
|
||||
})
|
||||
}
|
||||
|
||||
this.timerInterval = setInterval(() => {
|
||||
remaining--
|
||||
if (timerText) timerText.textContent = String(remaining)
|
||||
if (remaining <= 0) {
|
||||
this.stopTimer()
|
||||
this.handleAnswer(false, '')
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
private stopTimer(): void {
|
||||
if (this.timerInterval !== null) {
|
||||
clearInterval(this.timerInterval)
|
||||
this.timerInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
private handleAnswer(isCorrect: boolean, correctWord: string): void {
|
||||
this.stopTimer()
|
||||
|
||||
// 禁用所有按钮
|
||||
const buttons = this.container?.querySelectorAll('button')
|
||||
buttons?.forEach(btn => {
|
||||
(btn as HTMLButtonElement).disabled = true
|
||||
;(btn as HTMLButtonElement).style.opacity = '0.5'
|
||||
;(btn as HTMLButtonElement).style.cursor = 'default'
|
||||
})
|
||||
|
||||
const resultArea = document.getElementById('weekly-result')
|
||||
if (!resultArea) return
|
||||
|
||||
if (isCorrect) {
|
||||
// 随机给 HC 或补满精力
|
||||
if (Math.random() > 0.5) {
|
||||
const reward = 50 + Math.floor(Math.random() * 51)
|
||||
GameManager.getInstance().addHC(reward)
|
||||
resultArea.textContent = `✓ 正确！"${correctWord}" 就是本周黑话！获得 ${reward} HC！`
|
||||
resultArea.style.background = 'rgba(16,185,129,0.15)'
|
||||
resultArea.style.border = '1px solid #10b981'
|
||||
resultArea.style.color = '#6ee7b7'
|
||||
} else {
|
||||
this.callbacks.onFullStamina()
|
||||
resultArea.textContent = `✓ 正确！"${correctWord}" 完美！全场精力已补满！`
|
||||
resultArea.style.background = 'rgba(16,185,129,0.15)'
|
||||
resultArea.style.border = '1px solid #10b981'
|
||||
resultArea.style.color = '#6ee7b7'
|
||||
}
|
||||
} else {
|
||||
this.callbacks.onBossInspection()
|
||||
const msg = correctWord
|
||||
? `✗ 答错了！正确答案是"${correctWord}"！老板来视察了！全场禁锢3秒！`
|
||||
: '✗ 超时了！老板来视察了！全场禁锢3秒！'
|
||||
resultArea.textContent = msg
|
||||
resultArea.style.background = 'rgba(239,68,68,0.15)'
|
||||
resultArea.style.border = '1px solid #ef4444'
|
||||
resultArea.style.color = '#fca5a5'
|
||||
}
|
||||
|
||||
resultArea.style.display = 'block'
|
||||
|
||||
// 2秒后自动关闭
|
||||
setTimeout(() => {
|
||||
this.close()
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
private close(): void {
|
||||
this.cleanup()
|
||||
this.onClose?.()
|
||||
}
|
||||
|
||||
private cleanup(): void {
|
||||
this.stopTimer()
|
||||
const existing = document.getElementById('weekly-report-overlay')
|
||||
if (existing) existing.remove()
|
||||
this.container = null
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.cleanup()
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user