feat(game/ui/MapTransitionModal): 新建地图切换过渡弹窗，3秒后自动进入下一关
This commit is contained in:
Cloud Bot
187
game/ui/MapTransitionModal.ts
Normal file
187
game/ui/MapTransitionModal.ts
Normal file
@@ -0,0 +1,187 @@
|
||||
import type { MapConfig } from '../data/mapConfigs'
|
||||
import { ALL_MAPS } from '../data/mapConfigs'
|
||||
import { GameManager } from '../GameManager'
|
||||
|
||||
/**
|
||||
* 地图切换过渡弹窗（DOM 层，覆盖 canvas）
|
||||
* 显示当前地图通关信息，3秒后自动关闭并触发下一张地图加载
|
||||
*/
|
||||
export class MapTransitionModal {
|
||||
private container: HTMLElement | null = null
|
||||
private autoCloseTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
/**
|
||||
* 显示地图过关弹窗
|
||||
* @param clearedMap 刚通关的地图配置
|
||||
* @param onNext 3秒后自动触发的回调（加载下一张地图）
|
||||
*/
|
||||
show(clearedMap: MapConfig, onNext: () => void): void {
|
||||
this.cleanup()
|
||||
const manager = GameManager.getInstance()
|
||||
const nextMapIndex = manager.currentMapIndex + 1
|
||||
const nextMap = ALL_MAPS[nextMapIndex]
|
||||
const isFinalMap = !nextMap
|
||||
|
||||
this.createDOM(clearedMap, nextMap ?? null, isFinalMap, onNext)
|
||||
}
|
||||
|
||||
private createDOM(
|
||||
clearedMap: MapConfig,
|
||||
nextMap: MapConfig | null,
|
||||
isFinalMap: boolean,
|
||||
onNext: () => void
|
||||
): void {
|
||||
const manager = GameManager.getInstance()
|
||||
const kpi = manager.kpi
|
||||
const hcReward = 100
|
||||
|
||||
const overlay = document.createElement('div')
|
||||
overlay.id = 'map-transition-overlay'
|
||||
overlay.style.cssText = `
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.85);
|
||||
z-index: 9998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'VT323', monospace;
|
||||
animation: mtFadeIn 0.4s ease;
|
||||
`
|
||||
|
||||
const card = document.createElement('div')
|
||||
card.style.cssText = `
|
||||
background: #0f1b2d;
|
||||
border: 2px solid #7c3aed;
|
||||
border-radius: 16px;
|
||||
padding: 36px 48px;
|
||||
max-width: 520px;
|
||||
width: 90%;
|
||||
box-shadow: 0 0 60px rgba(124,58,237,0.6);
|
||||
text-align: center;
|
||||
animation: mtSlideIn 0.4s ease;
|
||||
`
|
||||
|
||||
// 过关标题
|
||||
const titleEl = document.createElement('div')
|
||||
titleEl.textContent = isFinalMap ? '全部通关！最终胜利！' : `过关！`
|
||||
titleEl.style.cssText = `
|
||||
font-size: 36px;
|
||||
color: #fbbf24;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 3px;
|
||||
`
|
||||
card.appendChild(titleEl)
|
||||
|
||||
// 地图名称
|
||||
const mapNameEl = document.createElement('div')
|
||||
mapNameEl.textContent = `「${clearedMap.name}」已清场`
|
||||
mapNameEl.style.cssText = `
|
||||
font-size: 22px;
|
||||
color: #a78bfa;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
card.appendChild(mapNameEl)
|
||||
|
||||
// 分割线
|
||||
const hr = document.createElement('div')
|
||||
hr.style.cssText = `
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #7c3aed, transparent);
|
||||
margin-bottom: 16px;
|
||||
`
|
||||
card.appendChild(hr)
|
||||
|
||||
// KPI & 奖励
|
||||
const statsEl = document.createElement('div')
|
||||
statsEl.innerHTML = `KPI: <span style="color:#34d399">${kpi}%</span> | 获得奖励: <span style="color:#fbbf24">+${hcReward} HC</span>`
|
||||
statsEl.style.cssText = `
|
||||
font-size: 20px;
|
||||
color: #e2e8f0;
|
||||
margin-bottom: 24px;
|
||||
`
|
||||
card.appendChild(statsEl)
|
||||
|
||||
// 下一关提示 / 最终胜利提示
|
||||
const nextEl = document.createElement('div')
|
||||
if (isFinalMap) {
|
||||
nextEl.textContent = '恭喜完成全部关卡！你是真正的打工人传奇！'
|
||||
nextEl.style.cssText = `
|
||||
font-size: 18px;
|
||||
color: #fbbf24;
|
||||
background: rgba(251,191,36,0.1);
|
||||
border: 1px solid #fbbf24;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
} else {
|
||||
nextEl.innerHTML = `<span style="color:#9ca3af">下一关：</span> <span style="color:#60a5fa">${nextMap!.name}</span>`
|
||||
nextEl.style.cssText = `
|
||||
font-size: 20px;
|
||||
color: #e2e8f0;
|
||||
background: rgba(96,165,250,0.1);
|
||||
border: 1px solid #3b82f6;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
}
|
||||
card.appendChild(nextEl)
|
||||
|
||||
// 倒计时提示
|
||||
const countdownEl = document.createElement('div')
|
||||
countdownEl.id = 'mt-countdown'
|
||||
countdownEl.textContent = isFinalMap ? '3秒后返回主菜单...' : '3秒后自动进入下一关...'
|
||||
countdownEl.style.cssText = `
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
`
|
||||
card.appendChild(countdownEl)
|
||||
|
||||
// 注入动画
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
@keyframes mtFadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes mtSlideIn { from { transform: scale(0.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
overlay.appendChild(card)
|
||||
document.body.appendChild(overlay)
|
||||
this.container = overlay
|
||||
|
||||
// 给 HC 奖励
|
||||
manager.addHC(hcReward)
|
||||
|
||||
// 3秒自动触发
|
||||
let remaining = 3
|
||||
const tick = () => {
|
||||
remaining--
|
||||
const el = document.getElementById('mt-countdown')
|
||||
if (el) el.textContent = isFinalMap
|
||||
? `${remaining}秒后返回主菜单...`
|
||||
: `${remaining}秒后自动进入下一关...`
|
||||
}
|
||||
const interval = setInterval(tick, 1000)
|
||||
this.autoCloseTimer = setTimeout(() => {
|
||||
clearInterval(interval)
|
||||
this.cleanup()
|
||||
onNext()
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
cleanup(): void {
|
||||
if (this.autoCloseTimer !== null) {
|
||||
clearTimeout(this.autoCloseTimer)
|
||||
this.autoCloseTimer = null
|
||||
}
|
||||
const el = document.getElementById('map-transition-overlay')
|
||||
if (el) el.remove()
|
||||
this.container = null
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.cleanup()
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user