feat(ui): 实现底部塔选择面板(DOM覆盖层)和HUD辅助工具
This commit is contained in:
Cloud Bot
176
game/ui/HUD.ts
Normal file
176
game/ui/HUD.ts
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
import type Phaser from 'phaser'
|
||||||
|
import { GAME_WIDTH, HUD_HEIGHT } from '../constants'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 游戏 HUD 辅助工具
|
||||||
|
* 负责管理"召唤下一波"按钮和波次提示横幅
|
||||||
|
*/
|
||||||
|
export class HUD {
|
||||||
|
private scene: Phaser.Scene
|
||||||
|
private waveBtn: Phaser.GameObjects.Text | null = null
|
||||||
|
private waveBannerTimeout: (() => void) | null = null
|
||||||
|
|
||||||
|
constructor(scene: Phaser.Scene) {
|
||||||
|
this.scene = scene
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建"召唤下一波"按钮
|
||||||
|
* @param onClick 点击回调
|
||||||
|
*/
|
||||||
|
createWaveButton(onClick: () => void): void {
|
||||||
|
if (this.waveBtn) this.waveBtn.destroy()
|
||||||
|
|
||||||
|
this.waveBtn = this.scene.add
|
||||||
|
.text(GAME_WIDTH - 160, HUD_HEIGHT + 20, '▶ 召唤下一波', {
|
||||||
|
fontFamily: "'Press Start 2P', monospace",
|
||||||
|
fontSize: '9px',
|
||||||
|
color: '#A78BFA',
|
||||||
|
backgroundColor: '#1e3a5f',
|
||||||
|
padding: { x: 10, y: 6 },
|
||||||
|
})
|
||||||
|
.setOrigin(0, 0)
|
||||||
|
.setDepth(20)
|
||||||
|
.setInteractive({ useHandCursor: true })
|
||||||
|
|
||||||
|
this.waveBtn.on('pointerover', () => {
|
||||||
|
if (this.waveBtn) {
|
||||||
|
this.waveBtn.setStyle({ backgroundColor: '#2d5a8e' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.waveBtn.on('pointerout', () => {
|
||||||
|
if (this.waveBtn) {
|
||||||
|
this.waveBtn.setStyle({ backgroundColor: '#1e3a5f' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.waveBtn.on('pointerdown', () => {
|
||||||
|
onClick()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 更新按钮文字（如禁用状态） */
|
||||||
|
setWaveButtonText(text: string): void {
|
||||||
|
this.waveBtn?.setText(text)
|
||||||
|
}
|
||||||
|
|
||||||
|
disableWaveButton(): void {
|
||||||
|
if (!this.waveBtn) return
|
||||||
|
this.waveBtn.setStyle({ color: '#4B5563', backgroundColor: '#0F172A' })
|
||||||
|
this.waveBtn.removeAllListeners('pointerdown')
|
||||||
|
}
|
||||||
|
|
||||||
|
enableWaveButton(): void {
|
||||||
|
if (!this.waveBtn) return
|
||||||
|
this.waveBtn.setStyle({ color: '#A78BFA', backgroundColor: '#1e3a5f' })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示波次开始横幅
|
||||||
|
* @param waveNumber 当前波次（1-based）
|
||||||
|
*/
|
||||||
|
showWaveBanner(waveNumber: number, totalWaves: number): void {
|
||||||
|
const isBoss = waveNumber === totalWaves
|
||||||
|
const label = isBoss
|
||||||
|
? `!! 第${waveNumber}波：空降VP来袭 !!`
|
||||||
|
: `第 ${waveNumber} 波来袭！`
|
||||||
|
const color = isBoss ? '#FBBF24' : '#F43F5E'
|
||||||
|
const bg = isBoss ? '#7C2D12' : '#0A1628'
|
||||||
|
|
||||||
|
const banner = this.scene.add
|
||||||
|
.text(GAME_WIDTH / 2, HUD_HEIGHT + 60, label, {
|
||||||
|
fontFamily: "'Press Start 2P', monospace",
|
||||||
|
fontSize: isBoss ? '16px' : '14px',
|
||||||
|
color,
|
||||||
|
backgroundColor: bg,
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
})
|
||||||
|
.setOrigin(0.5, 0.5)
|
||||||
|
.setDepth(40)
|
||||||
|
.setAlpha(0)
|
||||||
|
|
||||||
|
this.scene.tweens.add({
|
||||||
|
targets: banner,
|
||||||
|
alpha: 1,
|
||||||
|
duration: 300,
|
||||||
|
yoyo: true,
|
||||||
|
hold: 1800,
|
||||||
|
onComplete: () => banner.destroy(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 显示周报触发提示 */
|
||||||
|
showWeeklyReportAlert(): void {
|
||||||
|
const banner = this.scene.add
|
||||||
|
.text(GAME_WIDTH / 2, HUD_HEIGHT + 120, '📋 季度周报截止！效率翻倍！', {
|
||||||
|
fontFamily: "'Press Start 2P', monospace",
|
||||||
|
fontSize: '11px',
|
||||||
|
color: '#FCD34D',
|
||||||
|
backgroundColor: '#78350F',
|
||||||
|
padding: { x: 16, y: 8 },
|
||||||
|
})
|
||||||
|
.setOrigin(0.5, 0.5)
|
||||||
|
.setDepth(40)
|
||||||
|
.setAlpha(0)
|
||||||
|
|
||||||
|
this.scene.tweens.add({
|
||||||
|
targets: banner,
|
||||||
|
alpha: 1,
|
||||||
|
duration: 400,
|
||||||
|
yoyo: true,
|
||||||
|
hold: 2500,
|
||||||
|
onComplete: () => banner.destroy(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 显示胜利画面 */
|
||||||
|
showVictory(): void {
|
||||||
|
const overlay = this.scene.add.graphics()
|
||||||
|
overlay.fillStyle(0x000000, 0.6)
|
||||||
|
overlay.fillRect(0, 0, GAME_WIDTH, 720)
|
||||||
|
overlay.setDepth(50)
|
||||||
|
|
||||||
|
this.scene.add
|
||||||
|
.text(GAME_WIDTH / 2, 300, '🎉 大厂保卫成功！', {
|
||||||
|
fontFamily: "'Press Start 2P', monospace",
|
||||||
|
fontSize: '22px',
|
||||||
|
color: '#A78BFA',
|
||||||
|
backgroundColor: '#0A1628',
|
||||||
|
padding: { x: 24, y: 12 },
|
||||||
|
})
|
||||||
|
.setOrigin(0.5, 0.5)
|
||||||
|
.setDepth(55)
|
||||||
|
|
||||||
|
this.scene.add
|
||||||
|
.text(GAME_WIDTH / 2, 380, 'KPI 绩效已发放！', {
|
||||||
|
fontFamily: 'VT323, monospace',
|
||||||
|
fontSize: '24px',
|
||||||
|
color: '#A78BFA',
|
||||||
|
})
|
||||||
|
.setOrigin(0.5, 0.5)
|
||||||
|
.setDepth(55)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 显示失败画面 */
|
||||||
|
showGameOver(): void {
|
||||||
|
const overlay = this.scene.add.graphics()
|
||||||
|
overlay.fillStyle(0x000000, 0.7)
|
||||||
|
overlay.fillRect(0, 0, GAME_WIDTH, 720)
|
||||||
|
overlay.setDepth(50)
|
||||||
|
|
||||||
|
this.scene.add
|
||||||
|
.text(GAME_WIDTH / 2, 300, 'KPI 归零！被裁了！', {
|
||||||
|
fontFamily: "'Press Start 2P', monospace",
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#EF4444',
|
||||||
|
backgroundColor: '#0A1628',
|
||||||
|
padding: { x: 24, y: 12 },
|
||||||
|
})
|
||||||
|
.setOrigin(0.5, 0.5)
|
||||||
|
.setDepth(55)
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(): void {
|
||||||
|
this.waveBtn?.destroy()
|
||||||
|
if (this.waveBannerTimeout) this.waveBannerTimeout()
|
||||||
|
}
|
||||||
|
}
|
||||||
235
game/ui/TowerPanel.ts
Normal file
235
game/ui/TowerPanel.ts
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
import { TOWER_COSTS, type TowerType } from '../towers/TowerManager'
|
||||||
|
import { GameManager } from '../GameManager'
|
||||||
|
|
||||||
|
const TOWER_META: {
|
||||||
|
type: TowerType
|
||||||
|
name: string
|
||||||
|
desc: string
|
||||||
|
color: string
|
||||||
|
icon: string
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
type: 'intern',
|
||||||
|
name: '00后实习生',
|
||||||
|
desc: '近战 15伤 1.5/s',
|
||||||
|
color: '#22C55E',
|
||||||
|
icon: '🧑💻',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'senior',
|
||||||
|
name: 'P6资深开发',
|
||||||
|
desc: '远程 30伤 5格',
|
||||||
|
color: '#3B82F6',
|
||||||
|
icon: '</>',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'ppt',
|
||||||
|
name: 'PPT大师',
|
||||||
|
desc: 'AOE 5伤 减速',
|
||||||
|
color: '#F59E0B',
|
||||||
|
icon: '📊',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'hrbp',
|
||||||
|
name: 'HRBP',
|
||||||
|
desc: '辅助 +攻速',
|
||||||
|
color: '#EC4899',
|
||||||
|
icon: '❤',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export class TowerPanel {
|
||||||
|
private container: HTMLElement
|
||||||
|
private cards: Map<TowerType, HTMLElement> = new Map()
|
||||||
|
private selectedType: TowerType | null = null
|
||||||
|
private onSelectCallback?: (type: TowerType | null) => void
|
||||||
|
|
||||||
|
constructor(parentId: string) {
|
||||||
|
this.container = document.createElement('div')
|
||||||
|
this.container.id = 'tower-panel'
|
||||||
|
this.applyContainerStyles()
|
||||||
|
|
||||||
|
this.buildCards()
|
||||||
|
|
||||||
|
const parent = document.getElementById(parentId)
|
||||||
|
if (parent) {
|
||||||
|
parent.style.position = 'relative'
|
||||||
|
parent.appendChild(this.container)
|
||||||
|
} else {
|
||||||
|
document.body.appendChild(this.container)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听 HC 变化更新可用状态
|
||||||
|
GameManager.getInstance().onHCChange.push(() => this.refreshCardStates())
|
||||||
|
this.refreshCardStates()
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyContainerStyles(): void {
|
||||||
|
Object.assign(this.container.style, {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '0',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
display: 'flex',
|
||||||
|
gap: '8px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
background: 'rgba(10,22,40,0.92)',
|
||||||
|
borderTop: '2px solid #1e3a5f',
|
||||||
|
zIndex: '100',
|
||||||
|
borderRadius: '8px 8px 0 0',
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private buildCards(): void {
|
||||||
|
for (const meta of TOWER_META) {
|
||||||
|
const card = document.createElement('div')
|
||||||
|
card.id = `tower-card-${meta.type}`
|
||||||
|
this.applyCardStyles(card, meta.color)
|
||||||
|
|
||||||
|
const icon = document.createElement('div')
|
||||||
|
icon.textContent = meta.icon
|
||||||
|
icon.style.fontSize = '20px'
|
||||||
|
icon.style.textAlign = 'center'
|
||||||
|
|
||||||
|
const name = document.createElement('div')
|
||||||
|
name.textContent = meta.name
|
||||||
|
name.style.fontSize = '11px'
|
||||||
|
name.style.fontWeight = 'bold'
|
||||||
|
name.style.color = meta.color
|
||||||
|
name.style.fontFamily = 'VT323, monospace'
|
||||||
|
name.style.textAlign = 'center'
|
||||||
|
|
||||||
|
const cost = document.createElement('div')
|
||||||
|
cost.id = `tower-cost-${meta.type}`
|
||||||
|
cost.textContent = `${TOWER_COSTS[meta.type]} HC`
|
||||||
|
cost.style.fontSize = '10px'
|
||||||
|
cost.style.color = '#A78BFA'
|
||||||
|
cost.style.textAlign = 'center'
|
||||||
|
|
||||||
|
const desc = document.createElement('div')
|
||||||
|
desc.textContent = meta.desc
|
||||||
|
desc.style.fontSize = '10px'
|
||||||
|
desc.style.color = '#94A3B8'
|
||||||
|
desc.style.textAlign = 'center'
|
||||||
|
|
||||||
|
card.appendChild(icon)
|
||||||
|
card.appendChild(name)
|
||||||
|
card.appendChild(cost)
|
||||||
|
card.appendChild(desc)
|
||||||
|
|
||||||
|
card.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
this.onCardClick(meta.type)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.container.appendChild(card)
|
||||||
|
this.cards.set(meta.type, card)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyCardStyles(card: HTMLElement, accentColor: string): void {
|
||||||
|
Object.assign(card.style, {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '2px',
|
||||||
|
padding: '6px 10px',
|
||||||
|
background: '#0F1B2D',
|
||||||
|
border: `2px solid #1e3a5f`,
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
minWidth: '80px',
|
||||||
|
transition: 'all 0.15s ease',
|
||||||
|
userSelect: 'none',
|
||||||
|
})
|
||||||
|
card.setAttribute('data-accent', accentColor)
|
||||||
|
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
if (!card.classList.contains('disabled') && !card.classList.contains('selected')) {
|
||||||
|
card.style.background = '#1e3a5f'
|
||||||
|
card.style.transform = 'translateY(-2px)'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
if (!card.classList.contains('selected')) {
|
||||||
|
card.style.background = '#0F1B2D'
|
||||||
|
card.style.transform = 'translateY(0)'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private onCardClick(type: TowerType): void {
|
||||||
|
const card = this.cards.get(type)
|
||||||
|
if (!card || card.classList.contains('disabled')) return
|
||||||
|
|
||||||
|
if (this.selectedType === type) {
|
||||||
|
this.clearSelection()
|
||||||
|
} else {
|
||||||
|
this.setSelected(type)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setSelected(type: TowerType): void {
|
||||||
|
this.clearSelection()
|
||||||
|
this.selectedType = type
|
||||||
|
const card = this.cards.get(type)
|
||||||
|
if (card) {
|
||||||
|
const accent = card.getAttribute('data-accent') ?? '#7C3AED'
|
||||||
|
card.classList.add('selected')
|
||||||
|
card.style.border = `2px solid ${accent}`
|
||||||
|
card.style.background = '#1e3a5f'
|
||||||
|
card.style.boxShadow = `0 0 8px ${accent}88`
|
||||||
|
}
|
||||||
|
this.onSelectCallback?.(type)
|
||||||
|
}
|
||||||
|
|
||||||
|
private clearSelection(): void {
|
||||||
|
if (this.selectedType) {
|
||||||
|
const card = this.cards.get(this.selectedType)
|
||||||
|
if (card) {
|
||||||
|
card.classList.remove('selected')
|
||||||
|
card.style.border = '2px solid #1e3a5f'
|
||||||
|
card.style.background = '#0F1B2D'
|
||||||
|
card.style.boxShadow = ''
|
||||||
|
card.style.transform = 'translateY(0)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.selectedType = null
|
||||||
|
this.onSelectCallback?.(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshCardStates(): void {
|
||||||
|
const hc = GameManager.getInstance().hc
|
||||||
|
for (const meta of TOWER_META) {
|
||||||
|
const card = this.cards.get(meta.type)
|
||||||
|
if (!card) continue
|
||||||
|
const affordable = hc >= TOWER_COSTS[meta.type]
|
||||||
|
if (!affordable) {
|
||||||
|
card.classList.add('disabled')
|
||||||
|
card.style.opacity = '0.4'
|
||||||
|
card.style.cursor = 'not-allowed'
|
||||||
|
} else {
|
||||||
|
card.classList.remove('disabled')
|
||||||
|
card.style.opacity = '1'
|
||||||
|
card.style.cursor = 'pointer'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect(cb: (type: TowerType | null) => void): void {
|
||||||
|
this.onSelectCallback = cb
|
||||||
|
}
|
||||||
|
|
||||||
|
getSelectedType(): TowerType | null {
|
||||||
|
return this.selectedType
|
||||||
|
}
|
||||||
|
|
||||||
|
deselect(): void {
|
||||||
|
this.clearSelection()
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(): void {
|
||||||
|
this.container.remove()
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user