()
+ for (const [id, effect] of effects) {
+ const age = Number(effect.userData.age ?? 0) + deltaSeconds
+ effect.userData.age = age
+ if (effect.userData.projectile) {
+ const lifetime = 0.62
+ if (age > lifetime) continue
+ active.add(id)
+ const t = Math.max(0, Math.min(1, age / lifetime))
+ const sourceX = Number(effect.userData.sourceX ?? 0)
+ const sourceZ = Number(effect.userData.sourceZ ?? 0)
+ const targetX = Number(effect.userData.targetX ?? sourceX)
+ const targetZ = Number(effect.userData.targetZ ?? sourceZ)
+ const arc = Number(effect.userData.arc ?? 0.42)
+ effect.position.set(
+ THREE.MathUtils.lerp(sourceX, targetX, t),
+ 0.68 + Math.sin(t * Math.PI) * arc,
+ THREE.MathUtils.lerp(sourceZ, targetZ, t),
+ )
+ effect.rotation.y = Math.atan2(targetX - sourceX, targetZ - sourceZ)
+ effect.scale.setScalar(0.72 + Math.sin(t * Math.PI) * 0.28)
+ setObjectOpacity(effect, Math.max(0, 1 - t))
+ continue
+ }
+ const target = getArenaBattleUnits(state).find((unit) => unit.id === effect.userData.targetId)
+ ?? getArenaBattleBosses(state).find((boss) => boss.id === effect.userData.targetId)
+ const lifetime = effect.userData.combatText ? 1.15 : 0.85
+ if (!target || age > lifetime || (effect.userData.stun && (!('stunTimer' in target) || target.stunTimer <= 0))) continue
+ active.add(id)
+ const point = toWorld(target.x, target.y)
+ if (effect.userData.combatText) {
+ const offset = Number(effect.userData.floatOffset ?? 0)
+ effect.position.set(point.x + offset, 1.65 + age * 0.75, point.z)
+ effect.lookAt(camera.position)
+ setObjectOpacity(effect, Math.max(0, 1 - age / lifetime))
+ continue
+ }
+ effect.position.set(point.x, effect.userData.stun ? 1.42 : 0.08, point.z)
+ effect.scale.setScalar(0.6 + age * 1.5)
+ effect.rotation.y += deltaSeconds * 4
+ setObjectOpacity(effect, Math.max(0, 1 - age / lifetime))
+ }
+ pruneObjectMap(effects, active)
+}
+
+function createFloatingCombatText(text: string, color: number) {
+ const canvas = document.createElement('canvas')
+ canvas.width = 256
+ canvas.height = 96
+ const context = canvas.getContext('2d')
+ if (context) {
+ context.clearRect(0, 0, canvas.width, canvas.height)
+ context.font = '700 44px monospace'
+ context.textAlign = 'center'
+ context.textBaseline = 'middle'
+ context.lineWidth = 8
+ context.strokeStyle = 'rgba(0, 0, 0, 0.9)'
+ context.strokeText(text, canvas.width / 2, canvas.height / 2)
+ context.lineWidth = 3
+ context.strokeStyle = 'rgba(255, 255, 255, 0.55)'
+ context.strokeText(text, canvas.width / 2, canvas.height / 2)
+ context.fillStyle = `#${color.toString(16).padStart(6, '0')}`
+ context.fillText(text, canvas.width / 2, canvas.height / 2)
+ }
+ const texture = new THREE.CanvasTexture(canvas)
+ texture.colorSpace = THREE.SRGBColorSpace
+ const material = new THREE.MeshBasicMaterial({
+ depthTest: false,
+ map: texture,
+ side: THREE.DoubleSide,
+ transparent: true,
+ })
+ const mesh = new THREE.Mesh(new THREE.PlaneGeometry(1.35, 0.5), material)
+ mesh.renderOrder = 12
+ const group = new THREE.Group()
+ group.add(mesh)
+ return group
+}
+
+function createAbilityProjectile(kind: 'ranged' | 'spell', color: number) {
+ const group = new THREE.Group()
+ if (kind === 'ranged') {
+ const wood = new THREE.MeshStandardMaterial({ color: 0x8a5a2f, roughness: 0.78 })
+ const metal = new THREE.MeshStandardMaterial({ color: 0xf3f5ff, emissive: color, emissiveIntensity: 0.28, roughness: 0.32, metalness: 0.42 })
+ const shaft = new THREE.Mesh(new THREE.BoxGeometry(0.035, 0.035, 0.74), wood)
+ group.add(shaft)
+ const tip = new THREE.Mesh(new THREE.ConeGeometry(0.065, 0.16, 8), metal)
+ tip.position.z = -0.45
+ tip.rotation.x = -Math.PI / 2
+ group.add(tip)
+ return group
+ }
+
+ const material = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.92 })
+ const core = new THREE.Mesh(new THREE.SphereGeometry(0.13, 14, 10), material)
+ group.add(core)
+ const ring = new THREE.Mesh(new THREE.TorusGeometry(0.22, 0.014, 8, 24), material)
+ ring.rotation.x = Math.PI / 2
+ group.add(ring)
+ const trail = new THREE.Mesh(new THREE.ConeGeometry(0.08, 0.34, 10), material)
+ trail.position.z = 0.25
+ trail.rotation.x = Math.PI / 2
+ group.add(trail)
+ return group
+}
+
+function getAbilityEventColor(school: string) {
+ if (school === 'fire') return 0xff7043
+ if (school === 'frost') return 0x8edcff
+ if (school === 'arcane') return 0xb184ff
+ if (school === 'shadow') return 0x8e68c4
+ if (school === 'nature') return 0x7ed957
+ if (school === 'holy') return 0xfff1a8
+ return 0xe5b95f
+}
diff --git a/src/components/AuthScreen.tsx b/src/components/AuthScreen.tsx
index 5931f4d..325eccc 100644
--- a/src/components/AuthScreen.tsx
+++ b/src/components/AuthScreen.tsx
@@ -7,10 +7,11 @@ import {
type AuthScreenProps = {
onAuthenticated: (session: AuthSession) => void
+ onPlayOffline: () => void
serverMessage?: string
}
-export function AuthScreen({ onAuthenticated, serverMessage = '' }: AuthScreenProps) {
+export function AuthScreen({ onAuthenticated, onPlayOffline, serverMessage = '' }: AuthScreenProps) {
const [mode, setMode] = useState<'login' | 'register'>('login')
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
@@ -117,6 +118,15 @@ export function AuthScreen({ onAuthenticated, serverMessage = '' }: AuthScreenPr
+
+
{message || serverMessage || (
mode === 'register'
diff --git a/src/components/BulldromeBossSlice.tsx b/src/components/BulldromeBossSlice.tsx
index 1ec47ee..3a98c6c 100644
--- a/src/components/BulldromeBossSlice.tsx
+++ b/src/components/BulldromeBossSlice.tsx
@@ -1,123 +1,142 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import Phaser from 'phaser'
-import { BulldromeScene } from '../actionBoss/BulldromeScene'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { ThreeActionSceneHandle } from './ThreeActionScene'
import {
- getActionDifficultyTier,
+ type ActionCharacter,
type ActionDifficulty,
type ActionRunMode,
} from '../actionMode'
+import { createActionCombatProfile } from '../actionCombatProfile'
+import {
+ getActionSpellbook,
+ getActionSpellDefinition,
+ getActionSpellIconUrl,
+ getActionSpellManaCost,
+ getActionSpellTarget,
+ getActionSpellTooltip,
+} from '../actionCombatCore'
import {
createBulldromeState,
getEncounterHp,
getEncounterTitle,
- getEnemyFrames,
getRaidFrames,
- SPELLS,
type BulldromeState,
type ActionDungeonId,
- type EnemyFrame,
- type RaidFrame,
- type SpellDefinition,
type SpellSlot,
-} from '../actionBoss/bulldromeSimulation'
+} from '../actionBoss/actionCombatSimulation'
+import { CombatActionBar, CombatPartyFrames, CombatTargetFrame, type CombatActionSlot } from './CombatHud'
+import { playCombatSound } from './CombatAudio'
+import { PauseSettingsMenu } from './CombatPauseMenu'
+import { ActionCharacterMenu, ActionInventoryMenu, ActionMenuOverlay, ActionTalentMenu } from './ActionEquipmentMenus'
type BulldromeBossSliceProps = {
+ character?: ActionCharacter
dungeonId?: ActionDungeonId
difficulty?: ActionDifficulty
runMode?: ActionRunMode
+ onEquipItem?: (itemId: string) => void
onExit: () => void
+ onCharacterChange?: (character: ActionCharacter) => void
onRunComplete?: () => void
}
-function getRunTitle(dungeonId: ActionDungeonId, difficulty: ActionDifficulty, runMode: ActionRunMode) {
- const suffix = runMode === 'marathon' ? 'Marathon' : 'Hunt'
- const tier = getActionDifficultyTier(difficulty).label
- if (dungeonId === 'yian-kut-ku') return `${tier} Yian Kut-Ku ${suffix}`
- return `${tier} Bulldrome ${suffix}`
+const ThreeActionScene = lazy(() => import('./ThreeActionScene'))
+
+const DUNGEON_SFX = {
+ cast: '/audio/sfx/cast_holy.mp3',
+ heal: '/audio/sfx/heal_impact.mp3',
+ buff: '/audio/sfx/buff_apply.mp3',
+ hit: '/audio/sfx/impact_flesh.mp3',
+ hurt: '/audio/sfx/player_hurt.mp3',
+ swing: '/audio/sfx/melee_swing_blade.mp3',
}
export function BulldromeBossSlice({
+ character,
dungeonId = 'bulldrome',
difficulty = 'ilvl-1',
+ onEquipItem,
+ onCharacterChange,
runMode = 'hunt',
onExit,
onRunComplete,
}: BulldromeBossSliceProps) {
- const mountRef = useRef(null)
- const gameRef = useRef(null)
- const sceneRef = useRef(null)
+ const combatProfile = useMemo(() => createActionCombatProfile(character), [character])
+ const threeSceneRef = useRef(null)
const completionSentRef = useRef(false)
const rewardedBossKillsRef = useRef(0)
- const [state, setState] = useState(() => createBulldromeState(difficulty, dungeonId, runMode))
+ const [paused, setPaused] = useState(false)
+ const [pausePanel, setPausePanel] = useState<'settings' | 'character' | 'inventory' | 'talents'>('settings')
+ const [renderUnavailable, setRenderUnavailable] = useState(false)
+ const [state, setState] = useState(() => createBulldromeState(difficulty, dungeonId, runMode, combatProfile.classId, combatProfile.talentModifiers))
+ const audioUnlockedRef = useRef(false)
+ const seenHealEventIdsRef = useRef(new Set())
+ const previousLastHitRef = useRef(null)
+ const handleRenderUnavailable = useCallback(() => {
+ setRenderUnavailable(true)
+ }, [])
const raidFrames = useMemo(() => getRaidFrames(state), [state])
- const enemyFrames = useMemo(() => getEnemyFrames(state), [state])
const encounterHp = useMemo(() => getEncounterHp(state), [state])
const encounterTitle = useMemo(() => getEncounterTitle(state), [state])
-
- const resultLabel = useMemo(() => {
- if (state.result === 'win') return 'Hunt Complete'
- if (state.result === 'loss') return 'Carted'
- if (state.encounterStep === 'trash') return 'Bullfangos'
- return state.boss.phase === 'slamWindup'
- ? 'Slam'
- : state.boss.phase === 'mauling'
- ? 'Tank'
- : state.boss.phase === 'windup'
- ? 'Dodge'
- : state.boss.phase === 'recovering'
- ? 'Punish'
- : 'Fight'
- }, [state.boss.phase, state.encounterStep, state.result])
-
- useEffect(() => {
- if (!mountRef.current || gameRef.current) return
-
- const scene = new BulldromeScene({ difficulty, dungeonId, runMode, onStateChange: setState })
- sceneRef.current = scene
-
- const game = new Phaser.Game({
- type: Phaser.CANVAS,
- parent: mountRef.current,
- width: 960,
- height: 540,
- backgroundColor: '#11151c',
- scale: {
- mode: Phaser.Scale.FIT,
- autoCenter: Phaser.Scale.CENTER_BOTH,
- },
- scene: [scene],
- })
-
- gameRef.current = game
-
- return () => {
- game.destroy(true)
- gameRef.current = null
- sceneRef.current = null
- }
- }, [difficulty, dungeonId, runMode])
+ const selectedTarget = useMemo(() => getDungeonTargetFrame(state), [state])
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.repeat) return
+ if (event.key === 'Escape') {
+ event.preventDefault()
+ setPausePanel('settings')
+ setPaused((current) => !current)
+ return
+ }
+
+ if (paused) return
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault()
const selectedIndex = Math.max(0, raidFrames.findIndex((frame) => frame.selected))
const delta = event.key === 'ArrowDown' ? 1 : -1
const nextFrame = raidFrames[(selectedIndex + delta + raidFrames.length) % raidFrames.length]
- if (nextFrame) sceneRef.current?.selectTarget(nextFrame.id)
+ if (nextFrame) {
+ playCombatSound(DUNGEON_SFX.buff, { unlocked: audioUnlockedRef, volume: 0.22 })
+ threeSceneRef.current?.selectTarget(nextFrame.id)
+ }
}
- if (['1', '2', '3', '4', '5'].includes(event.key)) {
+ if (event.key === 'Tab') {
event.preventDefault()
- sceneRef.current?.castSpell(Number(event.key) as SpellSlot)
+ const target = [state.boss, ...state.adds].find((enemy) => enemy.hp > 0)
+ if (target) {
+ playCombatSound(DUNGEON_SFX.buff, { unlocked: audioUnlockedRef, volume: 0.22 })
+ threeSceneRef.current?.selectTarget(target.id)
+ }
+ }
+
+ const spellKey = event.key === '0' ? 10 : Number(event.key)
+ if (getActionSpellbook(state.player.classId).bar.includes(spellKey as SpellSlot)) {
+ event.preventDefault()
+ playCombatSound(DUNGEON_SFX.cast, { unlocked: audioUnlockedRef })
+ threeSceneRef.current?.castSpell(spellKey as SpellSlot)
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
- }, [raidFrames])
+ }, [paused, raidFrames, state.adds, state.boss, state.player.classId])
+
+ useEffect(() => {
+ for (const event of state.healEvents) {
+ if (seenHealEventIdsRef.current.has(event.id)) continue
+ seenHealEventIdsRef.current.add(event.id)
+ playCombatSound(DUNGEON_SFX.heal, { unlocked: audioUnlockedRef, volume: 0.42 })
+ }
+ if (state.result !== 'playing') return
+ if (state.lastHit && state.lastHit !== previousLastHitRef.current) {
+ if (state.lastHit === 'player') playCombatSound(DUNGEON_SFX.hurt, { unlocked: audioUnlockedRef, volume: 0.38 })
+ if (state.lastHit === 'boss') playCombatSound(DUNGEON_SFX.hit, { unlocked: audioUnlockedRef, volume: 0.35 })
+ }
+ previousLastHitRef.current = state.lastHit
+ }, [state.healEvents, state.lastHit, state.result])
useEffect(() => {
if (runMode === 'marathon') {
@@ -133,214 +152,191 @@ export function BulldromeBossSlice({
}, [onRunComplete, runMode, state.bossKills, state.result])
return (
-
+
-
-
-
Action Boss Prototype
-
{getRunTitle(dungeonId, difficulty, runMode)}
-
-
-
-
+
-
- {encounterTitle}
- {Math.ceil(encounterHp.hp)} / {encounterHp.maxHp}
-
-
-
-
- {state.player.currentCast && (
-
-
- {SPELLS[state.player.currentCast.spell].name}
- {state.player.currentCast.remaining.toFixed(1)}s
-
+
+
+ {
+ playCombatSound(DUNGEON_SFX.buff, { unlocked: audioUnlockedRef, volume: 0.22 })
+ threeSceneRef.current?.selectTarget(id)
+ }}
+ />
+
+
+ {encounterTitle}
+ {Math.ceil(encounterHp.hp)} / {encounterHp.maxHp}
-
+
- )}
-
-
-
-
-
-
-
- Boss
- - {state.boss.phase}
-
-
-
- Time
- - {state.elapsed.toFixed(1)}s
-
-
-
- Stun
- - {state.player.stunTimer > 0 ? `${state.player.stunTimer.toFixed(1)}s` : 'Clear'}
-
-
-
- Target
- - {raidFrames.find((frame) => frame.selected)?.name ?? 'None'}
-
-
-
-
- Controls
- WASD: move
- Up / Down: target frame
- 1-5: healing spells
- R: reset
-
-
+
)
}
-function EnemyRow({ enemy }: { enemy: EnemyFrame }) {
- const percent = Math.max(0, Math.min(100, (enemy.hp / enemy.maxHp) * 100))
-
- return (
-
-
- {enemy.name}
- {Math.ceil(enemy.hp)} / {enemy.maxHp}
-
-
-
-
-
- )
+function createDungeonActionSlots(state: BulldromeState, targetKind: 'ally' | 'enemy'): Array
> {
+ return getActionSpellbook(state.player.classId).bar.map((slot) => {
+ const spell = getActionSpellDefinition(state.player.classId, slot, state.player.talentModifiers)
+ const manaCost = getActionSpellManaCost(state.player.classId, slot, { freeCast: state.player.storedMomentumReady, talentMods: state.player.talentModifiers })
+ const canAfford = state.player.mana >= manaCost
+ const spellTarget = getActionSpellTarget(state.player.classId, slot)
+ const tooltip = getActionSpellTooltip(state.player.classId, slot)
+ const needsEnemy = spellTarget === 'Enemy target'
+ const hasTarget = needsEnemy ? targetKind === 'enemy' : targetKind === 'ally'
+ return {
+ canCast: canAfford && hasTarget,
+ cooldown: state.player.spellCooldowns[slot],
+ cooldownBase: spell.cooldown,
+ globalClassName: `${canAfford ? '' : 'oom'} ${hasTarget ? '' : 'no-target'}`,
+ iconUrl: getActionSpellIconUrl(state.player.classId, slot),
+ id: slot,
+ keybind: slot === 10 ? '0' : String(slot),
+ name: spell.name,
+ tooltip: {
+ cast: spell.castTime > 0 ? `${spell.castTime}s` : 'Instant',
+ cooldown: spell.cooldown > 0 ? `${spell.cooldown}s` : undefined,
+ cost: `${manaCost} mana`,
+ description: tooltip.description,
+ rank: `Rank ${tooltip.rank} · highest at level 20`,
+ school: tooltip.school,
+ target: tooltip.target,
+ },
+ }
+ })
}
-function PartyFrame({
- frame,
- onSelect,
-}: {
- frame: RaidFrame
- onSelect: () => void
-}) {
- const percent = Math.max(0, Math.min(100, (frame.hp / frame.maxHp) * 100))
- const shieldPercent = Math.max(0, Math.min(100 - percent, (frame.shield / frame.maxHp) * 100))
-
- return (
-
- )
-}
-
-function SpellButton({
- cooldown,
- onCast,
- spell,
-}: {
- cooldown: number
- onCast: () => void
- spell: SpellDefinition
-}) {
- const cooldownPercent = spell.cooldown > 0
- ? Math.max(0, Math.min(100, (cooldown / spell.cooldown) * 100))
- : 0
-
- return (
-
- )
-}
-
-function Meter({
- label,
- max,
- tone,
- value,
-}: {
+function getDungeonTargetFrame(state: BulldromeState): {
+ detail: string
+ hp: number
+ kind: 'ally' | 'enemy'
+ kindLabel: string
label: string
- max: number
- tone: 'player' | 'boss'
- value: number
-}) {
- const percent = Math.max(0, Math.min(100, (value / max) * 100))
+ maxHp: number
+ tone: 'ally' | 'enemy'
+} | null {
+ const ally = [state.player, ...state.party].find((unit) => unit.id === state.targetId)
+ if (ally) {
+ return {
+ detail: `${ally.role.toUpperCase()} · ${Math.ceil(ally.hp)} / ${ally.maxHp}`,
+ hp: ally.hp,
+ kind: 'ally',
+ kindLabel: 'Target Ally',
+ label: ally.name,
+ maxHp: ally.maxHp,
+ tone: 'ally',
+ }
+ }
- return (
-
-
- {label}
- {Math.ceil(value)} / {max}
-
-
-
-
-
+ {frames.map((frame) => (
+ onSelect(frame.id) : undefined}
+ />
+ ))}
+
+ )
+}
+
+export function CombatPartyFrame({
+ compact = false,
+ frame,
+ mana,
+ onSelect,
+}: {
+ compact?: boolean
+ frame: CombatPartyFrameData
+ mana?: { value: number, max: number }
+ onSelect?: () => void
+}) {
+ const percent = Math.max(0, Math.min(100, (frame.hp / frame.maxHp) * 100))
+ const rawShieldPercent = Math.max(0, Math.min(100, (frame.shield / frame.maxHp) * 100))
+ const shieldLeft = percent >= 99.5 ? 0 : percent
+ const shieldPercent = percent >= 99.5 ? rawShieldPercent : Math.min(100 - percent, rawShieldPercent)
+ const manaPercent = mana ? Math.max(0, Math.min(100, (mana.value / mana.max) * 100)) : 0
+
+ return (
+
+ )
+}
+
+export function CombatTargetFrame({
+ action,
+ className = '',
+ detail,
+ hp,
+ kindLabel,
+ label,
+ maxHp,
+ tone = 'enemy',
+}: {
+ action?: { label: string, onClick: () => void }
+ className?: string
+ detail: string
+ hp: number
+ kindLabel: string
+ label: string
+ maxHp: number
+ tone?: 'ally' | 'enemy'
+}) {
+ return (
+
+
+ {kindLabel}
+ {label}
+ {detail}
+
+
+
+
+ {action &&
}
+
+ {slots.map((slot) => {
+ const visibleCooldown = Math.max(slot.cooldown, globalCooldown)
+ const cooldownBase = slot.cooldown > 0 ? (slot.cooldownBase ?? 1) : SPELL_GLOBAL_COOLDOWN_SECONDS
+ const cooldownPercent = visibleCooldown > 0 && cooldownBase > 0
+ ? Math.max(0, Math.min(100, (visibleCooldown / cooldownBase) * 100))
+ : 0
+ return (
+
+ )
+ })}
+ {tooltip && (
+
+
+
+
+ {tooltip.name}
+ {tooltip.tooltip.rank}
+
+
+
+ - School
- {tooltip.tooltip.school}
+ - Target
- {tooltip.tooltip.target}
+ - Cost
- {tooltip.tooltip.cost}
+ - Cast
- {tooltip.tooltip.cast}
+ {tooltip.tooltip.cooldown && - Cooldown
- {tooltip.tooltip.cooldown}
}
+
+
{tooltip.tooltip.description}
+ {tooltip.cooldown > 0 &&
{tooltip.cooldown.toFixed(1)}s remaining}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {onOpenCharacter && }
+ {onOpenInventory && }
+ {onOpenTalents && }
+
+
+
+
+
+
+
+
WASD move | drag camera
+
+