Warren H
1536 lines
59 KiB
TypeScript
1536 lines
59 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import {
|
|
completeDungeon,
|
|
completeRoguelike,
|
|
loadProfile,
|
|
type DungeonReward,
|
|
rollEncounterLoot,
|
|
type LootRoll,
|
|
} from '../profile'
|
|
import {
|
|
INITIAL_PARTY,
|
|
RAID_PARTY,
|
|
type CombatLogEntry,
|
|
type PartyMember,
|
|
type Spell,
|
|
} from '../game'
|
|
import type {
|
|
Ability,
|
|
CharacterProfile,
|
|
Difficulty,
|
|
Dungeon,
|
|
DungeonEncounter,
|
|
} from '../profile'
|
|
import {
|
|
useGameAction,
|
|
useInput,
|
|
type InputAction,
|
|
} from '../input'
|
|
import { ControllerBindingLabel } from './ControllerIcons'
|
|
import {
|
|
DualScreenTopCombat,
|
|
useDualScreen,
|
|
useDualScreenPublisher,
|
|
type DualScreenCombatState,
|
|
} from '../dualScreen'
|
|
|
|
const TICK_MS = 700
|
|
|
|
type RoguelikeMode = 'dungeon' | 'raid'
|
|
type RoguelikeUpgradeTiming = 'boss' | 'encounter'
|
|
type RoguelikeAbilityLabelMode = 'ability' | 'slot'
|
|
type SlotKey = '1' | '2' | '3' | '4' | '5'
|
|
type RoguelikeMechanic =
|
|
| 'party-pulse'
|
|
| 'searing-mark'
|
|
| 'max-health-cut'
|
|
| 'healing-reduction'
|
|
| 'tank-buster'
|
|
| 'resource-drain'
|
|
| 'ramping-poison'
|
|
|
|
type RoguelikeEncounter = DungeonEncounter & {
|
|
roguelikeMechanics?: RoguelikeMechanic[]
|
|
}
|
|
|
|
type RoguelikeUpgradeId =
|
|
| `slot${SlotKey}-extra-target`
|
|
| `slot${SlotKey}-cost-down`
|
|
| `slot${SlotKey}-cooldown-down`
|
|
| 'fifth-cast-free'
|
|
| 'group-heal-boost'
|
|
| 'shield-boost'
|
|
|
|
type RoguelikeUpgrade = {
|
|
id: RoguelikeUpgradeId
|
|
name: string
|
|
description: string
|
|
}
|
|
|
|
type FloatingCombatText = {
|
|
id: number
|
|
memberId: string
|
|
value: number
|
|
}
|
|
|
|
type SinglePlayerCombatState = {
|
|
party: PartyMember[]
|
|
resource: number
|
|
enemyHealth: number
|
|
cooldowns: Record<string, number>
|
|
elapsedTicks: number
|
|
castsTowardFree: number
|
|
freeCastReady: boolean
|
|
}
|
|
|
|
const ROGUELIKE_MECHANICS: RoguelikeMechanic[] = [
|
|
'party-pulse',
|
|
'searing-mark',
|
|
'max-health-cut',
|
|
'healing-reduction',
|
|
'tank-buster',
|
|
'resource-drain',
|
|
'ramping-poison',
|
|
]
|
|
|
|
function clamp(value: number, min: number, max: number) {
|
|
return Math.min(max, Math.max(min, value))
|
|
}
|
|
|
|
function effectiveMaxHealth(member: PartyMember) {
|
|
return Math.max(1, Math.round(member.maxHealth * (member.maxHealthPenaltyTicks && member.maxHealthPenaltyTicks > 0 ? 0.75 : 1)))
|
|
}
|
|
|
|
function healAmount(member: PartyMember, amount: number) {
|
|
return Math.round(amount * (member.healingReductionTicks && member.healingReductionTicks > 0 ? 0.75 : 1))
|
|
}
|
|
|
|
function healMember(member: PartyMember, amount: number) {
|
|
return clamp(member.health + healAmount(member, amount), 0, effectiveMaxHealth(member))
|
|
}
|
|
|
|
function upgradeStackCount(upgrades: RoguelikeUpgrade[], id: RoguelikeUpgradeId) {
|
|
return upgrades.filter((upgrade) => upgrade.id === id).length
|
|
}
|
|
|
|
function slotLabel(slot: SlotKey, spells: Spell[], labelMode: RoguelikeAbilityLabelMode) {
|
|
const spell = spells.find((candidate) => candidate.key === slot)
|
|
if (labelMode === 'ability' && spell) return spell.name
|
|
return `Slot ${slot}`
|
|
}
|
|
|
|
function buildRoguelikeUpgrades(
|
|
spells: Spell[],
|
|
labelMode: RoguelikeAbilityLabelMode,
|
|
): RoguelikeUpgrade[] {
|
|
const slotUpgrades = (['1', '2', '3', '4', '5'] as SlotKey[]).flatMap((slot) => {
|
|
const label = slotLabel(slot, spells, labelMode)
|
|
return [
|
|
{
|
|
id: `slot${slot}-extra-target` as RoguelikeUpgradeId,
|
|
name: `${label}: +1 target`,
|
|
description: `${label} affects 1 additional ally when possible.`,
|
|
},
|
|
{
|
|
id: `slot${slot}-cost-down` as RoguelikeUpgradeId,
|
|
name: `${label}: -25% cost`,
|
|
description: `${label} costs 25% less resource.`,
|
|
},
|
|
{
|
|
id: `slot${slot}-cooldown-down` as RoguelikeUpgradeId,
|
|
name: `${label}: -25% cooldown`,
|
|
description: `${label} recharges 25% faster.`,
|
|
},
|
|
]
|
|
})
|
|
return [
|
|
...slotUpgrades,
|
|
{
|
|
id: 'fifth-cast-free',
|
|
name: 'Stored Momentum',
|
|
description: 'After 5 spell casts, your next cast is free.',
|
|
},
|
|
{
|
|
id: 'group-heal-boost',
|
|
name: 'Wide Radiance',
|
|
description: 'Party healing is 25% stronger.',
|
|
},
|
|
{
|
|
id: 'shield-boost',
|
|
name: 'Dense Shields',
|
|
description: 'Shield absorbs are 25% stronger.',
|
|
},
|
|
]
|
|
}
|
|
|
|
function summarizeUpgradeStacks(
|
|
upgrades: RoguelikeUpgrade[],
|
|
catalog: RoguelikeUpgrade[],
|
|
) {
|
|
const counts = new Map<RoguelikeUpgradeId, number>()
|
|
upgrades.forEach((upgrade) => counts.set(upgrade.id, (counts.get(upgrade.id) ?? 0) + 1))
|
|
return Array.from(counts.entries())
|
|
.map(([id, count]) => {
|
|
const name = catalog.find((upgrade) => upgrade.id === id)?.name ?? id
|
|
return count > 1 ? `${name} x${count}` : name
|
|
})
|
|
.join(', ')
|
|
}
|
|
|
|
function cooldownMultiplier(spell: Spell, upgrades: RoguelikeUpgrade[]) {
|
|
return 0.75 ** upgradeStackCount(upgrades, `slot${spell.key as SlotKey}-cooldown-down` as RoguelikeUpgradeId)
|
|
}
|
|
|
|
function spellResourceCost(spell: Spell, upgrades: RoguelikeUpgrade[], freeCastReady: boolean) {
|
|
const adjustedCost = Math.ceil(
|
|
spell.cost * (0.75 ** upgradeStackCount(upgrades, `slot${spell.key as SlotKey}-cost-down` as RoguelikeUpgradeId)),
|
|
)
|
|
return freeCastReady && upgradeStackCount(upgrades, 'fifth-cast-free') > 0 ? 0 : adjustedCost
|
|
}
|
|
|
|
function toCombatSpell(ability: Ability, key: string, healingPower: number): Spell {
|
|
const kinds: Record<string, Spell['kind']> = {
|
|
direct_heal: 'direct',
|
|
heal_over_time: 'hot',
|
|
party_heal: 'group',
|
|
absorb: 'shield',
|
|
cleanse: 'cleanse',
|
|
}
|
|
return {
|
|
id: String(ability.id),
|
|
key,
|
|
name: ability.name,
|
|
description: ability.description,
|
|
cost: ability.cost,
|
|
cooldown: ability.cooldown,
|
|
power: ability.power + healingPower,
|
|
glyph: ability.glyph,
|
|
kind: kinds[ability.spellType] ?? 'direct',
|
|
}
|
|
}
|
|
|
|
function getCurrentPart(encounterIndex: number) {
|
|
return Math.floor(encounterIndex / 3) + 1
|
|
}
|
|
|
|
function chooseRandom<T>(items: T[], count: number) {
|
|
const pool = [...items]
|
|
const result: T[] = []
|
|
while (pool.length > 0 && result.length < count) {
|
|
const index = Math.floor(Math.random() * pool.length)
|
|
result.push(pool.splice(index, 1)[0])
|
|
}
|
|
return result
|
|
}
|
|
|
|
function formatEffectTime(ticks: number) {
|
|
const seconds = (ticks * TICK_MS) / 1000
|
|
return Number.isInteger(seconds) ? `${seconds}s` : `${seconds.toFixed(1)}s`
|
|
}
|
|
|
|
function mechanicLabel(mechanic: RoguelikeMechanic) {
|
|
const labels: Record<RoguelikeMechanic, string> = {
|
|
'party-pulse': 'party pulse',
|
|
'searing-mark': 'damage mark',
|
|
'max-health-cut': 'max health cut',
|
|
'healing-reduction': 'healing reduction',
|
|
'tank-buster': 'tank buster',
|
|
'resource-drain': 'resource drain',
|
|
'ramping-poison': 'ramping poison',
|
|
}
|
|
return labels[mechanic]
|
|
}
|
|
|
|
function makeRoguelikeSegment(
|
|
pool: DungeonEncounter[],
|
|
stage: number,
|
|
difficulty: Difficulty,
|
|
mode: RoguelikeMode,
|
|
): RoguelikeEncounter[] {
|
|
const encounterThreat = (encounter: DungeonEncounter) => (
|
|
encounter.maxHealth
|
|
+ encounter.damage * 18
|
|
+ encounter.tankDamage * 10
|
|
+ encounter.partyDamage * 18
|
|
)
|
|
const trashPool = [...pool.filter((encounter) => !encounter.isBoss)]
|
|
.sort((left, right) => encounterThreat(left) - encounterThreat(right))
|
|
const bossPool = [...pool.filter((encounter) => encounter.isBoss)]
|
|
.sort((left, right) => encounterThreat(left) - encounterThreat(right))
|
|
const trashCandidateCount = Math.min(trashPool.length, 4 + stage * (mode === 'raid' ? 1 : 2))
|
|
const bossCandidateCount = Math.min(bossPool.length, 2 + Math.floor((stage + 1) / 2))
|
|
const selectedTrash = chooseRandom(trashPool.slice(0, trashCandidateCount), 2)
|
|
const selectedBoss = chooseRandom(bossPool.slice(0, bossCandidateCount), 1)[0] ?? trashPool[0] ?? pool[0]
|
|
const healthScale = 0.64 + stage * (mode === 'raid' ? 0.15 : 0.11)
|
|
const damageScale = 0.58 + stage * (mode === 'raid' ? 0.13 : 0.1)
|
|
const mechanics = chooseRandom(ROGUELIKE_MECHANICS, Math.min(2 + Math.floor(stage / 3), 4))
|
|
return [...selectedTrash, selectedBoss].map((encounter, index) => {
|
|
const isBoss = index === 2
|
|
return {
|
|
...encounter,
|
|
id: 900000 + stage * 10 + index,
|
|
sequence: (stage - 1) * 3 + index + 1,
|
|
isBoss,
|
|
encounterType: isBoss ? 'boss' : 'trash',
|
|
enemyName: isBoss ? `${encounter.enemyName} ${stage}` : encounter.enemyName,
|
|
description: isBoss
|
|
? `Roguelike boss with ${mechanics.map(mechanicLabel).join(', ')}.`
|
|
: encounter.description,
|
|
maxHealth: Math.round(encounter.maxHealth * difficulty.healthMultiplier * healthScale),
|
|
damage: Math.round(encounter.damage * difficulty.damageMultiplier * damageScale),
|
|
tankDamage: Math.round(encounter.tankDamage * difficulty.damageMultiplier * damageScale),
|
|
partyDamage: Math.round(encounter.partyDamage * (0.9 + stage * 0.05)),
|
|
lootTables: [],
|
|
roguelikeMechanics: isBoss ? mechanics : [],
|
|
}
|
|
})
|
|
}
|
|
|
|
export function CombatScreen({
|
|
difficulty,
|
|
dungeon,
|
|
profile,
|
|
startPart = 1,
|
|
roguelikeMode,
|
|
roguelikeUpgradeTiming = 'boss',
|
|
roguelikeAbilityLabelMode = 'ability',
|
|
roguelikeEncounterPool,
|
|
onExit,
|
|
onProfileUpdated,
|
|
}: {
|
|
difficulty: Difficulty
|
|
dungeon: Dungeon
|
|
profile: CharacterProfile
|
|
startPart?: number
|
|
roguelikeMode?: RoguelikeMode
|
|
roguelikeUpgradeTiming?: RoguelikeUpgradeTiming
|
|
roguelikeAbilityLabelMode?: RoguelikeAbilityLabelMode
|
|
roguelikeEncounterPool?: DungeonEncounter[]
|
|
onExit: () => void
|
|
onProfileUpdated: (profile: CharacterProfile) => void
|
|
}) {
|
|
const staticEncounters = useMemo(
|
|
() => dungeon.encounters.map((encounter) => ({
|
|
...encounter,
|
|
maxHealth: Math.round(encounter.maxHealth * difficulty.healthMultiplier),
|
|
damage: Math.round(encounter.damage * difficulty.damageMultiplier),
|
|
tankDamage: Math.round(encounter.tankDamage * difficulty.damageMultiplier),
|
|
})),
|
|
[difficulty.damageMultiplier, difficulty.healthMultiplier, dungeon.encounters],
|
|
)
|
|
const isRoguelike = Boolean(roguelikeMode)
|
|
const roguelikePool = roguelikeEncounterPool ?? dungeon.encounters
|
|
const [roguelikeStage, setRoguelikeStage] = useState(1)
|
|
const [roguelikeEncounters, setRoguelikeEncounters] = useState<RoguelikeEncounter[]>(() =>
|
|
roguelikeMode ? makeRoguelikeSegment(roguelikePool, 1, difficulty, roguelikeMode) : [],
|
|
)
|
|
const encounters = isRoguelike ? roguelikeEncounters : staticEncounters
|
|
const gameClass = profile.classes.find(
|
|
(candidate) => candidate.id === profile.character.classId,
|
|
)!
|
|
const healingPower = isRoguelike ? 0 : profile.gearStats.healingPower
|
|
const spells = profile.abilitySlots.flatMap((abilityId, index) => {
|
|
const ability = gameClass.spells.find((candidate) => candidate.id === abilityId)
|
|
return ability
|
|
? [toCombatSpell(ability, String(index + 1), healingPower)]
|
|
: []
|
|
})
|
|
const roguelikeUpgradeCatalog = useMemo(
|
|
() => buildRoguelikeUpgrades(spells, roguelikeAbilityLabelMode),
|
|
[roguelikeAbilityLabelMode, spells],
|
|
)
|
|
const maxResource = gameClass.maxResource + (isRoguelike ? 0 : profile.gearStats.maxResourceBonus)
|
|
const partyTemplate = useMemo(
|
|
() => (dungeon.partySize >= 10 ? RAID_PARTY : INITIAL_PARTY).map((member) => ({
|
|
...member,
|
|
name: member.id === 'mira' ? profile.character.name : member.name,
|
|
})),
|
|
[dungeon.partySize, profile.character.name],
|
|
)
|
|
const sectionName = isRoguelike ? 'Stage' : dungeon.contentType === 'raid' ? 'Phase' : 'Part'
|
|
const contentName = isRoguelike ? 'Roguelike' : dungeon.contentType === 'raid' ? 'Raid' : 'Dungeon'
|
|
const initialEncounterIndex = (startPart - 1) * 3
|
|
const initialCombatState = useMemo<SinglePlayerCombatState>(() => ({
|
|
party: partyTemplate,
|
|
resource: maxResource,
|
|
enemyHealth: encounters[initialEncounterIndex].maxHealth,
|
|
cooldowns: {},
|
|
elapsedTicks: 0,
|
|
castsTowardFree: 0,
|
|
freeCastReady: false,
|
|
}), [encounters, initialEncounterIndex, maxResource, partyTemplate])
|
|
const [combatState, setCombatState] = useState<SinglePlayerCombatState>(() => initialCombatState)
|
|
const [selectedId, setSelectedId] = useState(partyTemplate[0].id)
|
|
const [encounterIndex, setEncounterIndex] = useState(initialEncounterIndex)
|
|
const [status, setStatus] = useState<'playing' | 'won' | 'lost' | 'part-complete' | 'upgrade-choice'>('playing')
|
|
const [paused, setPaused] = useState(false)
|
|
const [targetGroup, setTargetGroup] = useState<0 | 1 | 2>(0)
|
|
const [log, setLog] = useState<CombatLogEntry[]>([
|
|
{ id: 1, text: `${dungeon.name} begins.`, tone: 'system' },
|
|
])
|
|
const [reward, setReward] = useState<DungeonReward | null>(null)
|
|
const [rewardError, setRewardError] = useState('')
|
|
const [lootRolls, setLootRolls] = useState<LootRoll[]>([])
|
|
const [showEndLog, setShowEndLog] = useState(false)
|
|
const [floatingTexts, setFloatingTexts] = useState<FloatingCombatText[]>([])
|
|
const [roguelikeUpgrades, setRoguelikeUpgrades] = useState<RoguelikeUpgrade[]>([])
|
|
const [upgradeChoices, setUpgradeChoices] = useState<RoguelikeUpgrade[]>([])
|
|
const rewardClaimedRef = useRef(false)
|
|
const profileRefreshedRef = useRef(false)
|
|
const rolledEncounterIdsRef = useRef(new Set<number>())
|
|
const runTokenRef = useRef(crypto.randomUUID())
|
|
const resourceSpentRef = useRef(0)
|
|
const runStartedAtRef = useRef(0)
|
|
const partStartTimesRef = useRef<Record<number, number>>({})
|
|
const nextLogId = useRef(2)
|
|
const nextFloatingTextId = useRef(1)
|
|
const combatRef = useRef(initialCombatState)
|
|
const selectedIdRef = useRef(partyTemplate[0].id)
|
|
const runCombatTickRef = useRef<() => void>(() => {})
|
|
const combatClockActiveRef = useRef(false)
|
|
const lastCombatTickAtRef = useRef(performance.now())
|
|
const statusRef = useRef(status)
|
|
const pausedRef = useRef(paused)
|
|
const { party, resource, enemyHealth, cooldowns, freeCastReady } = combatState
|
|
const encounter = encounters[encounterIndex]
|
|
const currentPart = getCurrentPart(encounterIndex)
|
|
const firstEncounterIndex = (startPart - 1) * 3
|
|
const expectedLootRolls = encounters
|
|
.slice(firstEncounterIndex, encounterIndex + 1)
|
|
.filter((candidate) => candidate.lootTables.some((entry) => entry.difficultyId === difficulty.id))
|
|
.length
|
|
const isPartBoss = encounter.isBoss && encounterIndex % 3 === 2
|
|
const isFinalBoss = isPartBoss && encounterIndex === encounters.length - 1
|
|
const playerHealer = party.find((member) => member.id === 'mira')
|
|
const playerIsAlive = Boolean(playerHealer && playerHealer.health > 0)
|
|
const upgradesEveryEncounter = roguelikeUpgradeTiming === 'encounter'
|
|
const activeSetEffects = useMemo(
|
|
() => isRoguelike
|
|
? new Set<string>()
|
|
: new Set(profile.setBonuses.filter((bonus) => bonus.active).map((bonus) => bonus.effectType)),
|
|
[isRoguelike, profile.setBonuses],
|
|
)
|
|
const {
|
|
bindings,
|
|
controllerIconStyle,
|
|
directPartyTargeting,
|
|
lastDevice,
|
|
} = useInput()
|
|
const {
|
|
enabled: dualScreenEnabled,
|
|
} = useDualScreen()
|
|
|
|
statusRef.current = status
|
|
pausedRef.current = paused
|
|
|
|
useEffect(() => {
|
|
const now = Date.now()
|
|
runStartedAtRef.current = now
|
|
partStartTimesRef.current = { [startPart]: now }
|
|
}, [startPart])
|
|
|
|
useEffect(() => {
|
|
if (!paused) return
|
|
window.requestAnimationFrame(() => {
|
|
document.querySelector<HTMLButtonElement>('.pause-screen button')?.focus({ preventScroll: true })
|
|
})
|
|
}, [paused])
|
|
|
|
const setCombat = useCallback((
|
|
nextState: SinglePlayerCombatState | ((current: SinglePlayerCombatState) => SinglePlayerCombatState),
|
|
) => {
|
|
const next = typeof nextState === 'function'
|
|
? nextState(combatRef.current)
|
|
: nextState
|
|
combatRef.current = next
|
|
setSelectedId(selectedIdRef.current)
|
|
setCombatState(next)
|
|
}, [])
|
|
|
|
const syncSelectedTargetDom = useCallback((id: string) => {
|
|
document.querySelectorAll<HTMLButtonElement>('[data-party-member-id]').forEach((button) => {
|
|
const selected = button.dataset.partyMemberId === id
|
|
button.classList.toggle('selected', selected)
|
|
button.setAttribute('aria-pressed', String(selected))
|
|
})
|
|
}, [])
|
|
|
|
const setSelectedTargetId = useCallback((id: string) => {
|
|
if (selectedIdRef.current === id) return
|
|
selectedIdRef.current = id
|
|
syncSelectedTargetDom(id)
|
|
}, [syncSelectedTargetDom])
|
|
|
|
useEffect(() => {
|
|
syncSelectedTargetDom(selectedIdRef.current)
|
|
}, [combatState, syncSelectedTargetDom])
|
|
|
|
const addLog = useCallback((text: string, tone: CombatLogEntry['tone']) => {
|
|
const entry = { id: nextLogId.current++, text, tone }
|
|
setLog((current) => [entry, ...current].slice(0, 60))
|
|
}, [])
|
|
|
|
const addFloatingHeal = useCallback((memberId: string, value: number) => {
|
|
if (value <= 0) return
|
|
const id = nextFloatingTextId.current++
|
|
setFloatingTexts((current) => [...current, { id, memberId, value }])
|
|
window.setTimeout(() => {
|
|
setFloatingTexts((current) => current.filter((entry) => entry.id !== id))
|
|
}, 900)
|
|
}, [])
|
|
|
|
const requestLootRoll = useCallback(
|
|
(encounterId: number) => {
|
|
if (rolledEncounterIdsRef.current.has(encounterId)) return
|
|
rolledEncounterIdsRef.current.add(encounterId)
|
|
rollEncounterLoot(encounterId, difficulty.id, runTokenRef.current)
|
|
.then((result) => {
|
|
setLootRolls((current) => [...current, result])
|
|
const awarded = result.items
|
|
.map((item) => `${item.glyph} ${item.name} x${item.quantity}${item.duplicate ? ` (owned x${item.quantityAfter})` : ''}`)
|
|
.join(', ')
|
|
addLog(
|
|
result.dropped && awarded
|
|
? `${result.encounterName} awarded ${awarded}.`
|
|
: `${result.encounterName} dropped no components.`,
|
|
result.dropped ? 'loot' : 'system',
|
|
)
|
|
})
|
|
.catch((reason: unknown) => {
|
|
addLog(
|
|
reason instanceof Error ? reason.message : 'The loot roll failed.',
|
|
'danger',
|
|
)
|
|
})
|
|
},
|
|
[addLog, difficulty.id],
|
|
)
|
|
|
|
const resetRun = useCallback(() => {
|
|
const nextRoguelikeEncounters = roguelikeMode
|
|
? makeRoguelikeSegment(roguelikePool, 1, difficulty, roguelikeMode)
|
|
: []
|
|
const nextEncounters = roguelikeMode ? nextRoguelikeEncounters : staticEncounters
|
|
const freshParty = partyTemplate.map((member) => ({ ...member }))
|
|
setCombat({
|
|
party: freshParty,
|
|
resource: maxResource,
|
|
enemyHealth: nextEncounters[initialEncounterIndex].maxHealth,
|
|
cooldowns: {},
|
|
elapsedTicks: 0,
|
|
castsTowardFree: 0,
|
|
freeCastReady: false,
|
|
})
|
|
if (roguelikeMode) setRoguelikeEncounters(nextRoguelikeEncounters)
|
|
setRoguelikeStage(1)
|
|
setSelectedTargetId(partyTemplate[0].id)
|
|
setEncounterIndex(initialEncounterIndex)
|
|
setStatus('playing')
|
|
setPaused(false)
|
|
setTargetGroup(0)
|
|
setReward(null)
|
|
setRewardError('')
|
|
setLootRolls([])
|
|
setShowEndLog(false)
|
|
setFloatingTexts([])
|
|
setRoguelikeUpgrades([])
|
|
setUpgradeChoices([])
|
|
rewardClaimedRef.current = false
|
|
profileRefreshedRef.current = false
|
|
rolledEncounterIdsRef.current = new Set()
|
|
runTokenRef.current = crypto.randomUUID()
|
|
resourceSpentRef.current = 0
|
|
runStartedAtRef.current = Date.now()
|
|
partStartTimesRef.current = { [startPart]: runStartedAtRef.current }
|
|
setLog([{ id: nextLogId.current++, text: 'A new run begins.', tone: 'system' }])
|
|
}, [difficulty, initialEncounterIndex, maxResource, partyTemplate, roguelikeMode, roguelikePool, setCombat, setSelectedTargetId, startPart, staticEncounters])
|
|
|
|
const castSpell = useCallback(
|
|
(spell: Spell) => {
|
|
const current = combatRef.current
|
|
const effectiveCost = spellResourceCost(spell, roguelikeUpgrades, current.freeCastReady)
|
|
if (status !== 'playing' || current.cooldowns[spell.id] > 0 || current.resource < effectiveCost) return
|
|
const healer = current.party.find((member) => member.id === 'mira')
|
|
if (!healer || healer.health <= 0) return
|
|
const targetId = selectedIdRef.current
|
|
const selected = current.party.find((member) => member.id === targetId)
|
|
if (!selected || selected.health <= 0) return
|
|
const extraTarget = (blockedIds: string[]) => current.party
|
|
.filter((member) => member.health > 0 && !blockedIds.includes(member.id))
|
|
.sort((left, right) => (left.health / left.maxHealth) - (right.health / right.maxHealth))[0]
|
|
const directTargets = new Set([targetId])
|
|
const hotTargets = new Set<string>()
|
|
const shieldTargets = new Set<string>()
|
|
if (spell.kind === 'hot') hotTargets.add(targetId)
|
|
if (spell.kind === 'shield') shieldTargets.add(targetId)
|
|
if (spell.name === 'Mend' && activeSetEffects.has('mend_extra_target')) {
|
|
const extra = extraTarget([targetId])
|
|
if (extra) directTargets.add(extra.id)
|
|
}
|
|
if (spell.name === 'Renew' && activeSetEffects.has('renew_extra_target')) {
|
|
const extra = extraTarget([targetId])
|
|
if (extra) hotTargets.add(extra.id)
|
|
}
|
|
if (spell.name === 'Mend' && activeSetEffects.has('mend_applies_renew')) {
|
|
hotTargets.add(targetId)
|
|
}
|
|
const extraTargets = upgradeStackCount(roguelikeUpgrades, `slot${spell.key as SlotKey}-extra-target` as RoguelikeUpgradeId)
|
|
for (let index = 0; index < extraTargets; index += 1) {
|
|
if (spell.kind === 'group') break
|
|
if (spell.kind === 'hot') {
|
|
const extra = extraTarget([...hotTargets])
|
|
if (extra) hotTargets.add(extra.id)
|
|
continue
|
|
}
|
|
if (spell.kind === 'shield') {
|
|
const extra = extraTarget([...shieldTargets])
|
|
if (extra) shieldTargets.add(extra.id)
|
|
continue
|
|
}
|
|
const extra = extraTarget([...directTargets])
|
|
if (extra) directTargets.add(extra.id)
|
|
}
|
|
|
|
const nextParty = current.party.map((member) => {
|
|
if (member.health <= 0) return member
|
|
if (spell.kind === 'group') {
|
|
const power = Math.round(spell.power * (1.25 ** upgradeStackCount(roguelikeUpgrades, 'group-heal-boost')))
|
|
const nextHealth = healMember(member, power)
|
|
addFloatingHeal(member.id, Math.max(0, nextHealth - member.health))
|
|
return { ...member, health: nextHealth }
|
|
}
|
|
if (!directTargets.has(member.id) && !hotTargets.has(member.id) && !shieldTargets.has(member.id)) return member
|
|
if (spell.kind === 'shield') {
|
|
const power = Math.round(spell.power * (1.25 ** upgradeStackCount(roguelikeUpgrades, 'shield-boost')))
|
|
return { ...member, shield: Math.max(member.shield, power) }
|
|
}
|
|
if (spell.kind === 'cleanse') {
|
|
return {
|
|
...member,
|
|
health: healMember(member, spell.power),
|
|
debuff: undefined,
|
|
debuffTicks: undefined,
|
|
poisonStacks: undefined,
|
|
maxHealthPenaltyTicks: undefined,
|
|
healingReductionTicks: undefined,
|
|
}
|
|
}
|
|
const nextHealth = directTargets.has(member.id)
|
|
? healMember(member, spell.power)
|
|
: member.health
|
|
if (nextHealth > member.health) addFloatingHeal(member.id, nextHealth - member.health)
|
|
return {
|
|
...member,
|
|
health: nextHealth,
|
|
hotTicks: hotTargets.has(member.id) ? 5 : member.hotTicks,
|
|
}
|
|
})
|
|
const freeCastStacks = upgradeStackCount(roguelikeUpgrades, 'fifth-cast-free')
|
|
const nextFreeCastReady = freeCastStacks > 0 && current.freeCastReady
|
|
? false
|
|
: current.freeCastReady
|
|
const nextCastsTowardFree = freeCastStacks > 0
|
|
? current.freeCastReady
|
|
? 0
|
|
: current.castsTowardFree + 1 >= 5
|
|
? 0
|
|
: current.castsTowardFree + 1
|
|
: current.castsTowardFree
|
|
const gainedFreeCast = freeCastStacks > 0
|
|
&& !current.freeCastReady
|
|
&& current.castsTowardFree + 1 >= 5
|
|
resourceSpentRef.current += effectiveCost
|
|
setCombat({
|
|
...current,
|
|
party: nextParty,
|
|
resource: current.resource - effectiveCost,
|
|
cooldowns: {
|
|
...current.cooldowns,
|
|
[spell.id]: spell.cooldown * cooldownMultiplier(spell, roguelikeUpgrades),
|
|
},
|
|
castsTowardFree: nextCastsTowardFree,
|
|
freeCastReady: gainedFreeCast || nextFreeCastReady,
|
|
})
|
|
addLog(`${spell.name} cast on ${spell.kind === 'group' ? 'the party' : selected.name}${effectiveCost === 0 ? ' for free' : ''}.`, 'heal')
|
|
},
|
|
[activeSetEffects, addFloatingHeal, addLog, roguelikeUpgrades, setCombat, status],
|
|
)
|
|
|
|
const finishRun = useCallback(
|
|
(completedPart: number, runStartPart: number) => {
|
|
if (rewardClaimedRef.current) return
|
|
rewardClaimedRef.current = true
|
|
const now = Date.now()
|
|
const pTimes = partStartTimesRef.current
|
|
const partDuration = (part: number) => {
|
|
const start = pTimes[part]
|
|
if (!start) return 0
|
|
const next = pTimes[part + 1] ?? now
|
|
return Math.max(1, Math.round((next - start) / 1000))
|
|
}
|
|
completeDungeon(
|
|
dungeon.id,
|
|
difficulty.id,
|
|
resourceSpentRef.current,
|
|
Math.max(1, Math.round((now - runStartedAtRef.current) / 1000)),
|
|
completedPart,
|
|
runStartPart,
|
|
[partDuration(1), partDuration(2), partDuration(3)],
|
|
)
|
|
.then((result) => {
|
|
setReward(result)
|
|
onProfileUpdated(result.profile)
|
|
setStatus('won')
|
|
})
|
|
.catch((reason: unknown) => {
|
|
setRewardError(
|
|
reason instanceof Error ? reason.message : 'Unable to award experience.',
|
|
)
|
|
})
|
|
},
|
|
[difficulty.id, dungeon.id, onProfileUpdated],
|
|
)
|
|
|
|
const finishRoguelikeRun = useCallback(
|
|
(encountersCleared: number) => {
|
|
if (rewardClaimedRef.current) return
|
|
rewardClaimedRef.current = true
|
|
completeRoguelike(
|
|
dungeon.id,
|
|
difficulty.id,
|
|
encountersCleared,
|
|
resourceSpentRef.current,
|
|
Math.max(1, Math.round((Date.now() - runStartedAtRef.current) / 1000)),
|
|
)
|
|
.then((result) => {
|
|
setReward(result)
|
|
onProfileUpdated(result.profile)
|
|
})
|
|
.catch((reason: unknown) => {
|
|
setRewardError(
|
|
reason instanceof Error ? reason.message : 'Unable to award roguelike experience.',
|
|
)
|
|
})
|
|
},
|
|
[difficulty.id, dungeon.id, onProfileUpdated],
|
|
)
|
|
|
|
const selectRelativeTarget = useCallback((direction: -1 | 1) => {
|
|
const living = combatRef.current.party.filter((member) => member.health > 0)
|
|
if (living.length === 0) return
|
|
const currentIndex = living.findIndex((member) => member.id === selectedIdRef.current)
|
|
const nextIndex = currentIndex < 0
|
|
? 0
|
|
: (currentIndex + direction + living.length) % living.length
|
|
setSelectedTargetId(living[nextIndex].id)
|
|
}, [setSelectedTargetId])
|
|
|
|
const selectDirectionalTarget = useCallback((action: InputAction) => {
|
|
const columns = dungeon.partySize >= 10 ? 6 : 3
|
|
const currentIndex = combatRef.current.party.findIndex((member) => member.id === selectedIdRef.current)
|
|
if (currentIndex < 0) {
|
|
setSelectedTargetId(combatRef.current.party[0].id)
|
|
return
|
|
}
|
|
const currentRow = Math.floor(currentIndex / columns)
|
|
const currentColumn = currentIndex % columns
|
|
const candidates = combatRef.current.party
|
|
.map((member, index) => ({
|
|
member,
|
|
index,
|
|
row: Math.floor(index / columns),
|
|
column: index % columns,
|
|
}))
|
|
.filter(({ index, row, column }) => {
|
|
if (index === currentIndex) return false
|
|
if (action === 'navigateLeft') return row === currentRow && column < currentColumn
|
|
if (action === 'navigateRight') return row === currentRow && column > currentColumn
|
|
if (action === 'navigateUp') return row < currentRow
|
|
return row > currentRow
|
|
})
|
|
.sort((a, b) => {
|
|
const aPrimary = action === 'navigateLeft' || action === 'navigateRight'
|
|
? Math.abs(a.column - currentColumn)
|
|
: Math.abs(a.row - currentRow)
|
|
const bPrimary = action === 'navigateLeft' || action === 'navigateRight'
|
|
? Math.abs(b.column - currentColumn)
|
|
: Math.abs(b.row - currentRow)
|
|
const aSecondary = action === 'navigateLeft' || action === 'navigateRight'
|
|
? 0
|
|
: Math.abs(a.column - currentColumn)
|
|
const bSecondary = action === 'navigateLeft' || action === 'navigateRight'
|
|
? 0
|
|
: Math.abs(b.column - currentColumn)
|
|
return aPrimary - bPrimary || aSecondary - bSecondary
|
|
})
|
|
if (candidates[0]) setSelectedTargetId(candidates[0].member.id)
|
|
}, [dungeon.partySize, setSelectedTargetId])
|
|
|
|
const selectDirectTarget = useCallback((slot: number) => {
|
|
const index = slot + (dungeon.partySize > 6 ? targetGroup * 6 : 0)
|
|
const member = combatRef.current.party[index]
|
|
if (member) setSelectedTargetId(member.id)
|
|
}, [dungeon.partySize, setSelectedTargetId, targetGroup])
|
|
|
|
const chooseRoguelikeUpgrade = useCallback((upgrade: RoguelikeUpgrade) => {
|
|
if (!roguelikeMode) return
|
|
const current = combatRef.current
|
|
const clearedBoss = encounters[encounterIndex]?.isBoss ?? false
|
|
const recoveredParty = current.party.map((member) => ({
|
|
...member,
|
|
health: member.health <= 0
|
|
? 0
|
|
: clamp(member.health + Math.round(member.maxHealth * 0.35), 0, member.maxHealth),
|
|
debuff: undefined,
|
|
debuffTicks: undefined,
|
|
poisonStacks: undefined,
|
|
maxHealthPenaltyTicks: undefined,
|
|
healingReductionTicks: undefined,
|
|
}))
|
|
const nextStage = clearedBoss ? roguelikeStage + 1 : roguelikeStage
|
|
const nextSegment = clearedBoss
|
|
? makeRoguelikeSegment(roguelikePool, nextStage, difficulty, roguelikeMode)
|
|
: []
|
|
const nextEncounter = clearedBoss
|
|
? nextSegment[0]
|
|
: encounters[encounterIndex + 1]
|
|
if (!nextEncounter) return
|
|
setRoguelikeUpgrades((current) => [...current, upgrade])
|
|
if (clearedBoss) {
|
|
setRoguelikeStage(nextStage)
|
|
setRoguelikeEncounters((current) => [...current, ...nextSegment])
|
|
}
|
|
setEncounterIndex((current) => current + 1)
|
|
setCombat({
|
|
...current,
|
|
party: recoveredParty,
|
|
enemyHealth: nextEncounter.maxHealth,
|
|
elapsedTicks: 0,
|
|
cooldowns: {},
|
|
resource: clamp(current.resource + Math.round(maxResource * 0.25), 0, maxResource),
|
|
})
|
|
setUpgradeChoices([])
|
|
setStatus('playing')
|
|
addLog(`${upgrade.name} gained. ${nextEncounter.enemyName} approaches.`, 'system')
|
|
}, [addLog, difficulty, encounterIndex, encounters, maxResource, roguelikeMode, roguelikePool, roguelikeStage, setCombat])
|
|
|
|
useGameAction((action, device) => {
|
|
if (action === 'pause' || (action === 'back' && device === 'pc')) {
|
|
if (status === 'playing') setPaused((value) => !value)
|
|
return
|
|
}
|
|
if (paused || status !== 'playing') return
|
|
if (action.startsWith('navigate')) {
|
|
selectDirectionalTarget(action)
|
|
return
|
|
}
|
|
if (action.startsWith('targetParty')) {
|
|
selectDirectTarget(Number(action.slice('targetParty'.length)) - 1)
|
|
return
|
|
}
|
|
if (action === 'toggleTargetGroup') {
|
|
if (dungeon.partySize <= 6) return
|
|
setTargetGroup((current) => {
|
|
const groupCount = Math.max(1, Math.ceil(combatRef.current.party.length / 6))
|
|
const next = ((current + 1) % groupCount) as 0 | 1 | 2
|
|
const selectedIndex = combatRef.current.party.findIndex((member) => member.id === selectedIdRef.current)
|
|
const nextMember = combatRef.current.party[(selectedIndex < 0 ? 0 : selectedIndex % 6) + next * 6]
|
|
if (nextMember) setSelectedTargetId(nextMember.id)
|
|
return next
|
|
})
|
|
return
|
|
}
|
|
if (action === 'previousTarget') {
|
|
selectRelativeTarget(-1)
|
|
return
|
|
}
|
|
if (action === 'nextTarget') {
|
|
selectRelativeTarget(1)
|
|
return
|
|
}
|
|
if (!action.startsWith('ability')) return
|
|
const slot = Number(action.slice('ability'.length)) - 1
|
|
const spell = spells.find((candidate) => candidate.key === String(slot + 1))
|
|
if (spell) castSpell(spell)
|
|
})
|
|
|
|
const runCombatTick = useCallback(() => {
|
|
const current = combatRef.current
|
|
const nextElapsedTicks = current.elapsedTicks + 1
|
|
const nextCooldowns = Object.fromEntries(
|
|
Object.entries(current.cooldowns).map(([id, seconds]) => [
|
|
id,
|
|
Math.max(0, seconds - TICK_MS / 1000),
|
|
]),
|
|
)
|
|
let nextResource = clamp(current.resource + 2.4, 0, maxResource)
|
|
|
|
const living = current.party.filter((member) => member.health > 0)
|
|
if (living.length === 0) {
|
|
if (isRoguelike) finishRoguelikeRun(encounterIndex)
|
|
setStatus('lost')
|
|
addLog('The party has fallen.', 'danger')
|
|
return
|
|
}
|
|
|
|
const primaryTarget = living[Math.floor(Math.random() * living.length)]
|
|
const mechanics = (encounter as RoguelikeEncounter).roguelikeMechanics ?? []
|
|
const useDefaultBossMechanics = encounter.isBoss && mechanics.length === 0
|
|
const bossPulse = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 7 === 0
|
|
&& (useDefaultBossMechanics || mechanics.includes('party-pulse'))
|
|
const appliesDebuff = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 11 === 0
|
|
&& (useDefaultBossMechanics || mechanics.includes('searing-mark'))
|
|
const appliesMaxHealthCut = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 13 === 0
|
|
&& mechanics.includes('max-health-cut')
|
|
const appliesHealingReduction = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 9 === 0
|
|
&& mechanics.includes('healing-reduction')
|
|
const tankBuster = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 8 === 0
|
|
&& mechanics.includes('tank-buster')
|
|
const resourceDrain = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 10 === 0
|
|
&& mechanics.includes('resource-drain')
|
|
const appliesPoison = encounter.isBoss && nextElapsedTicks > 0 && nextElapsedTicks % 12 === 0
|
|
&& mechanics.includes('ramping-poison')
|
|
if (bossPulse) addLog(`${encounter.enemyName} unleashes party-wide damage.`, 'danger')
|
|
if (appliesDebuff) addLog(`${primaryTarget.name} is afflicted by Searing Mark.`, 'danger')
|
|
if (appliesPoison) addLog(`${primaryTarget.name} is poisoned. Dispel it before it ramps.`, 'danger')
|
|
if (appliesMaxHealthCut) addLog(`${primaryTarget.name}'s max health is reduced.`, 'danger')
|
|
if (appliesHealingReduction) addLog(`${primaryTarget.name} receives reduced healing.`, 'danger')
|
|
if (tankBuster) addLog(`${encounter.enemyName} crushes the tanks.`, 'danger')
|
|
if (resourceDrain) {
|
|
nextResource = clamp(nextResource - 8, 0, maxResource)
|
|
addLog(`${encounter.enemyName} drains ${gameClass.resourceName}.`, 'danger')
|
|
}
|
|
|
|
const healerBeforeDamage = current.party.find((member) => member.id === 'mira')
|
|
const nextParty = current.party.map((member) => {
|
|
if (member.health <= 0) return member
|
|
let damage = member.id === primaryTarget.id ? encounter.damage : 0
|
|
if (member.role === 'Tank') damage += encounter.tankDamage
|
|
if (tankBuster && member.role === 'Tank') damage += Math.round(22 * difficulty.damageMultiplier)
|
|
if (bossPulse) damage += Math.round(12 * difficulty.damageMultiplier)
|
|
if (member.debuff) damage += Math.round(7 * difficulty.damageMultiplier)
|
|
const nextPoisonStacks = appliesPoison && member.id === primaryTarget.id
|
|
? Math.max(1, (member.poisonStacks ?? 0) + 1)
|
|
: member.poisonStacks ?? 0
|
|
if (nextPoisonStacks > 0) damage += Math.round((4 + nextPoisonStacks * 4) * difficulty.damageMultiplier)
|
|
const absorbed = Math.min(member.shield, damage)
|
|
const healing = member.hotTicks > 0 ? healAmount(member, 6) : 0
|
|
if (healing > 0) addFloatingHeal(member.id, healing)
|
|
const nextMaxHealthPenaltyTicks = appliesMaxHealthCut && member.id === primaryTarget.id
|
|
? 15
|
|
: Math.max(0, (member.maxHealthPenaltyTicks ?? 0) - 1)
|
|
const nextHealingReductionTicks = appliesHealingReduction && member.id === primaryTarget.id
|
|
? 15
|
|
: Math.max(0, (member.healingReductionTicks ?? 0) - 1)
|
|
const nextEffectiveMaxHealth = Math.max(1, Math.round(member.maxHealth * (nextMaxHealthPenaltyTicks > 0 ? 0.75 : 1)))
|
|
const nextDebuffTicks = appliesDebuff && member.id === primaryTarget.id
|
|
? 8
|
|
: Math.max(0, (member.debuffTicks ?? 0) - 1)
|
|
return {
|
|
...member,
|
|
health: clamp(member.health - damage + absorbed + healing, 0, nextEffectiveMaxHealth),
|
|
shield: Math.max(0, member.shield - damage),
|
|
hotTicks: Math.max(0, member.hotTicks - 1),
|
|
debuff: nextDebuffTicks > 0
|
|
? (appliesDebuff && member.id === primaryTarget.id ? 'Searing Mark' : member.debuff)
|
|
: undefined,
|
|
debuffTicks: nextDebuffTicks > 0 ? nextDebuffTicks : undefined,
|
|
poisonStacks: nextPoisonStacks,
|
|
maxHealthPenaltyTicks: nextMaxHealthPenaltyTicks,
|
|
healingReductionTicks: nextHealingReductionTicks,
|
|
}
|
|
})
|
|
const healerAfterDamage = nextParty.find((member) => member.id === 'mira')
|
|
|
|
if (
|
|
healerBeforeDamage
|
|
&& healerBeforeDamage.health > 0
|
|
&& healerAfterDamage
|
|
&& healerAfterDamage.health <= 0
|
|
) {
|
|
addLog(`${profile.character.name} has fallen. Healing is no longer available.`, 'danger')
|
|
}
|
|
|
|
if (nextParty.every((member) => member.health <= 0)) {
|
|
setCombat({
|
|
...current,
|
|
party: nextParty,
|
|
resource: nextResource,
|
|
cooldowns: nextCooldowns,
|
|
elapsedTicks: nextElapsedTicks,
|
|
enemyHealth: current.enemyHealth,
|
|
})
|
|
if (isRoguelike) finishRoguelikeRun(encounterIndex)
|
|
setStatus('lost')
|
|
addLog('The party has fallen.', 'danger')
|
|
return
|
|
}
|
|
|
|
const nextEnemyHealth = current.enemyHealth - encounter.partyDamage
|
|
if (nextEnemyHealth > 0) {
|
|
setCombat({
|
|
...current,
|
|
party: nextParty,
|
|
resource: nextResource,
|
|
cooldowns: nextCooldowns,
|
|
elapsedTicks: nextElapsedTicks,
|
|
enemyHealth: nextEnemyHealth,
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!isRoguelike && encounter.lootTables.some((entry) => entry.difficultyId === difficulty.id)) {
|
|
requestLootRoll(encounter.id)
|
|
}
|
|
|
|
if (isRoguelike && (upgradesEveryEncounter || encounter.isBoss)) {
|
|
setCombat({
|
|
...current,
|
|
party: nextParty,
|
|
resource: nextResource,
|
|
cooldowns: nextCooldowns,
|
|
elapsedTicks: nextElapsedTicks,
|
|
enemyHealth: 0,
|
|
})
|
|
setUpgradeChoices(chooseRandom(roguelikeUpgradeCatalog, 3))
|
|
setStatus('upgrade-choice')
|
|
addLog(`${encounter.enemyName} defeated. Choose an upgrade.`, 'loot')
|
|
return
|
|
}
|
|
|
|
if (isPartBoss && !isFinalBoss) {
|
|
setCombat({
|
|
...current,
|
|
party: nextParty,
|
|
resource: nextResource,
|
|
cooldowns: nextCooldowns,
|
|
elapsedTicks: nextElapsedTicks,
|
|
enemyHealth: 0,
|
|
})
|
|
setStatus('part-complete')
|
|
addLog(`${encounter.enemyName} is defeated.`, 'loot')
|
|
return
|
|
}
|
|
|
|
if (encounterIndex === encounters.length - 1) {
|
|
setCombat({
|
|
...current,
|
|
party: nextParty,
|
|
resource: nextResource,
|
|
cooldowns: nextCooldowns,
|
|
elapsedTicks: nextElapsedTicks,
|
|
enemyHealth: 0,
|
|
})
|
|
finishRun(currentPart, startPart)
|
|
addLog(`${encounter.enemyName} is defeated. Rolling its loot table.`, 'loot')
|
|
return
|
|
}
|
|
|
|
const nextEncounter = encounters[encounterIndex + 1]
|
|
const recoveredParty = nextParty.map((member) => ({
|
|
...member,
|
|
health: member.health <= 0
|
|
? 0
|
|
: clamp(member.health + 35, 0, effectiveMaxHealth(member)),
|
|
debuff: undefined,
|
|
debuffTicks: undefined,
|
|
poisonStacks: undefined,
|
|
maxHealthPenaltyTicks: undefined,
|
|
healingReductionTicks: undefined,
|
|
}))
|
|
setEncounterIndex((value) => value + 1)
|
|
setCombat({
|
|
...current,
|
|
party: recoveredParty,
|
|
resource: nextResource,
|
|
cooldowns: nextCooldowns,
|
|
elapsedTicks: 0,
|
|
enemyHealth: nextEncounter.maxHealth,
|
|
})
|
|
addLog(`${encounter.enemyName} defeated. ${nextEncounter.enemyName} approaches.`, 'system')
|
|
}, [
|
|
addLog,
|
|
addFloatingHeal,
|
|
difficulty.damageMultiplier,
|
|
encounter,
|
|
encounterIndex,
|
|
encounters,
|
|
finishRun,
|
|
finishRoguelikeRun,
|
|
isPartBoss,
|
|
isFinalBoss,
|
|
isRoguelike,
|
|
upgradesEveryEncounter,
|
|
roguelikeUpgradeCatalog,
|
|
roguelikeUpgrades,
|
|
maxResource,
|
|
gameClass.resourceName,
|
|
requestLootRoll,
|
|
profile.character.name,
|
|
setCombat,
|
|
startPart,
|
|
currentPart,
|
|
])
|
|
|
|
useEffect(() => {
|
|
runCombatTickRef.current = runCombatTick
|
|
}, [runCombatTick])
|
|
|
|
useEffect(() => {
|
|
if (status === 'playing' && !paused) {
|
|
if (!combatClockActiveRef.current) {
|
|
lastCombatTickAtRef.current = performance.now()
|
|
combatClockActiveRef.current = true
|
|
}
|
|
return
|
|
}
|
|
combatClockActiveRef.current = false
|
|
}, [paused, status])
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => {
|
|
if (
|
|
!combatClockActiveRef.current
|
|
|| statusRef.current !== 'playing'
|
|
|| pausedRef.current
|
|
) return
|
|
const now = performance.now()
|
|
const dueTicks = Math.min(4, Math.floor((now - lastCombatTickAtRef.current) / TICK_MS))
|
|
if (dueTicks <= 0) return
|
|
lastCombatTickAtRef.current += dueTicks * TICK_MS
|
|
for (let index = 0; index < dueTicks; index += 1) {
|
|
if (statusRef.current !== 'playing' || pausedRef.current) return
|
|
runCombatTickRef.current()
|
|
}
|
|
}, 50)
|
|
return () => window.clearInterval(timer)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (
|
|
!reward
|
|
|| lootRolls.length < expectedLootRolls
|
|
|| profileRefreshedRef.current
|
|
) return
|
|
profileRefreshedRef.current = true
|
|
loadProfile()
|
|
.then(onProfileUpdated)
|
|
.catch(() => {
|
|
profileRefreshedRef.current = false
|
|
})
|
|
}, [expectedLootRolls, lootRolls.length, onProfileUpdated, reward])
|
|
|
|
const enemyPercent = (enemyHealth / encounter.maxHealth) * 100
|
|
const dualScreenState = useMemo<DualScreenCombatState>(() => ({
|
|
difficultyName: difficulty.name,
|
|
dungeonName: dungeon.name,
|
|
contentName,
|
|
encounterName: encounter.enemyName,
|
|
encounterDescription: encounter.description,
|
|
encounterHealth: enemyHealth,
|
|
encounterMaxHealth: encounter.maxHealth,
|
|
encounterIsBoss: encounter.isBoss,
|
|
encounterIndex,
|
|
encounterCount: encounters.length,
|
|
party,
|
|
partySize: dungeon.partySize,
|
|
selectedId,
|
|
log,
|
|
status,
|
|
resource,
|
|
maxResource,
|
|
resourceName: gameClass.resourceName,
|
|
playerIsAlive,
|
|
spells: profile.abilitySlots.map((abilityId, slotIndex) => {
|
|
const spell = spells.find((candidate) => candidate.key === String(slotIndex + 1))
|
|
return abilityId && spell
|
|
? {
|
|
...spell,
|
|
cost: spellResourceCost(spell, roguelikeUpgrades, freeCastReady),
|
|
slotIndex,
|
|
remaining: cooldowns[spell.id] ?? 0,
|
|
}
|
|
: null
|
|
}),
|
|
activeDevice: lastDevice,
|
|
bindings: bindings[lastDevice],
|
|
controllerIconStyle,
|
|
directPartyTargeting,
|
|
paused,
|
|
targetGroup,
|
|
}), [
|
|
bindings,
|
|
controllerIconStyle,
|
|
cooldowns,
|
|
contentName,
|
|
difficulty.name,
|
|
dungeon.name,
|
|
dungeon.partySize,
|
|
directPartyTargeting,
|
|
encounter.description,
|
|
encounter.enemyName,
|
|
encounter.isBoss,
|
|
encounter.maxHealth,
|
|
enemyHealth,
|
|
encounterIndex,
|
|
encounters.length,
|
|
gameClass.resourceName,
|
|
log,
|
|
lastDevice,
|
|
maxResource,
|
|
paused,
|
|
party,
|
|
playerIsAlive,
|
|
profile.abilitySlots,
|
|
resource,
|
|
selectedId,
|
|
spells,
|
|
freeCastReady,
|
|
roguelikeUpgrades,
|
|
status,
|
|
targetGroup,
|
|
])
|
|
useDualScreenPublisher(dualScreenState, dualScreenEnabled)
|
|
|
|
return (
|
|
<main
|
|
className={`game-shell ${dualScreenEnabled ? 'dual-top-game-shell' : ''}`}
|
|
data-combat-active={paused ? 'false' : 'true'}
|
|
>
|
|
{!dualScreenEnabled && <header className="topbar">
|
|
<div>
|
|
<p className="eyebrow">{difficulty.name} - Item Level {difficulty.droppedItemLevel}</p>
|
|
<h1>{dungeon.name}</h1>
|
|
</div>
|
|
<div className="combat-header-actions">
|
|
<div className="run-progress" aria-label={`${contentName} progress`}>
|
|
{encounters.map((item, index) => (
|
|
<span className={index < encounterIndex ? 'complete' : index === encounterIndex ? 'active' : ''} key={item.id}>
|
|
{index + 1}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<button className="back-button" onClick={() => setPaused(true)} type="button">Pause</button>
|
|
</div>
|
|
</header>}
|
|
|
|
{!dualScreenEnabled && (
|
|
<>
|
|
<section className="enemy-card">
|
|
<div className="enemy-portrait" aria-hidden="true">
|
|
{encounter.isBoss ? <img src={encounter.imageUrl} alt="" /> : 'M'}
|
|
</div>
|
|
<div className="enemy-info">
|
|
<div className="bar-label">
|
|
<strong>{encounter.enemyName}</strong>
|
|
<span>{Math.ceil(enemyHealth)} / {encounter.maxHealth}</span>
|
|
</div>
|
|
<div className="bar enemy-health"><span style={{ width: `${enemyPercent}%` }} /></div>
|
|
<p>{encounter.description}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="combat-layout">
|
|
<section className="party-panel">
|
|
<div className="party-panel-top">
|
|
<div className="mana-wrap party-mana-wrap">
|
|
<span>
|
|
{playerIsAlive
|
|
? `${gameClass.resourceName} ${Math.floor(resource)} / ${maxResource}`
|
|
: `${profile.character.name} is defeated`}
|
|
</span>
|
|
<div className="bar mana-bar"><span style={{ width: `${(resource / maxResource) * 100}%` }} /></div>
|
|
</div>
|
|
</div>
|
|
<div className={`party-grid ${dungeon.partySize >= 10 ? 'raid-party-grid' : ''}`}>
|
|
{party.map((member) => (
|
|
<button
|
|
className={`party-member ${selectedId === member.id ? 'selected' : ''} ${member.health <= 0 ? 'dead' : ''}`}
|
|
data-party-member-id={member.id}
|
|
key={member.id}
|
|
onClick={() => setSelectedTargetId(member.id)}
|
|
aria-pressed={selectedId === member.id}
|
|
type="button"
|
|
>
|
|
<span className="target-marker" aria-hidden="true">
|
|
<i />
|
|
Target
|
|
</span>
|
|
<div className="member-header">
|
|
<span className={`role role-${member.role.toLowerCase()}`}>{member.role[0]}</span>
|
|
<strong>{member.name}</strong>
|
|
<small>{Math.ceil(member.health)} / {effectiveMaxHealth(member)}</small>
|
|
</div>
|
|
<div className="bar member-health">
|
|
<span style={{ width: `${(member.health / effectiveMaxHealth(member)) * 100}%` }} />
|
|
{member.shield > 0 && <i style={{ width: `${(member.shield / effectiveMaxHealth(member)) * 100}%` }} />}
|
|
<em className="health-text">{Math.ceil(member.health)} / {effectiveMaxHealth(member)}</em>
|
|
</div>
|
|
<div className="floating-combat-texts" aria-hidden="true">
|
|
{floatingTexts
|
|
.filter((entry) => entry.memberId === member.id)
|
|
.map((entry) => <span className="floating-heal" key={entry.id}>+{entry.value}</span>)}
|
|
</div>
|
|
<div className="member-effects">
|
|
{member.hotTicks > 0 && <span className="buff">Renew {formatEffectTime(member.hotTicks)}</span>}
|
|
{member.debuff && member.debuffTicks && <span className="debuff">{member.debuff} {formatEffectTime(member.debuffTicks)}</span>}
|
|
{member.poisonStacks && member.poisonStacks > 0 && <span className="debuff">Poison {member.poisonStacks}</span>}
|
|
{member.maxHealthPenaltyTicks && member.maxHealthPenaltyTicks > 0 && <span className="debuff">Max HP -25% {formatEffectTime(member.maxHealthPenaltyTicks)}</span>}
|
|
{member.healingReductionTicks && member.healingReductionTicks > 0 && <span className="debuff">Healing -25% {formatEffectTime(member.healingReductionTicks)}</span>}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<aside className="combat-log combat-side-rail">
|
|
<div className="panel-heading">
|
|
<div><p className="eyebrow">Actions</p><h2>Skills</h2></div>
|
|
</div>
|
|
<div className="spell-bar six-slots vertical-spell-bar">
|
|
{profile.abilitySlots.map((abilityId, slotIndex) => {
|
|
const spell = spells.find((candidate) => candidate.key === String(slotIndex + 1))
|
|
if (!abilityId || !spell) {
|
|
return (
|
|
<div className="spell empty-spell" key={`rail-empty-${slotIndex}`}>
|
|
<kbd>{slotIndex + 1}</kbd><strong>Empty</strong>
|
|
</div>
|
|
)
|
|
}
|
|
const remaining = cooldowns[spell.id] ?? 0
|
|
const effectiveCost = spellResourceCost(spell, roguelikeUpgrades, freeCastReady)
|
|
return (
|
|
<button
|
|
className="spell"
|
|
disabled={!playerIsAlive || resource < effectiveCost || remaining > 0 || status !== 'playing'}
|
|
key={`rail-${spell.id}`}
|
|
onClick={() => castSpell(spell)}
|
|
title={spell.description}
|
|
type="button"
|
|
>
|
|
<kbd>
|
|
<ControllerBindingLabel
|
|
binding={bindings[lastDevice][`ability${slotIndex + 1}` as InputAction]}
|
|
compact
|
|
iconStyle={controllerIconStyle}
|
|
/>
|
|
</kbd>
|
|
<span className={`spell-icon spell-${spell.kind}`}>{spell.glyph}</span>
|
|
<strong>{spell.name}</strong>
|
|
<small>{effectiveCost} {gameClass.resourceName}</small>
|
|
{remaining > 0 && <i>{remaining.toFixed(1)}</i>}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{dualScreenEnabled && (
|
|
<DualScreenTopCombat
|
|
state={dualScreenState}
|
|
onSelectTarget={setSelectedTargetId}
|
|
/>
|
|
)}
|
|
|
|
{paused && status === 'playing' && (
|
|
<div className="pause-screen" role="dialog" aria-modal="true">
|
|
<div>
|
|
<p className="eyebrow">Game Paused</p>
|
|
<h2>{dungeon.name}</h2>
|
|
<p>Combat is stopped. Resume the fight or leave the current run.</p>
|
|
<button onClick={() => setPaused(false)} type="button">Resume</button>
|
|
<button className="secondary-result-button" onClick={onExit} type="button">
|
|
Leave {contentName}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'upgrade-choice' && (
|
|
<div className="result-screen">
|
|
<div>
|
|
<p className="eyebrow">
|
|
{encounter.isBoss
|
|
? `Roguelike Stage ${roguelikeStage} Complete`
|
|
: `Encounter ${encounterIndex + 1} Complete`}
|
|
</p>
|
|
<h2>Choose Upgrade</h2>
|
|
<p>Pick one upgrade before the next fight.</p>
|
|
<div className="upgrade-choice-grid">
|
|
{upgradeChoices.map((upgrade) => (
|
|
<button key={upgrade.id} onClick={() => chooseRoguelikeUpgrade(upgrade)} type="button">
|
|
<strong>{upgrade.name}</strong>
|
|
<small>{upgrade.description}</small>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{roguelikeUpgrades.length > 0 && (
|
|
<p className="roguelike-upgrade-list">
|
|
Active: {summarizeUpgradeStacks(roguelikeUpgrades, roguelikeUpgradeCatalog)}
|
|
</p>
|
|
)}
|
|
<button className="secondary-result-button" onClick={onExit} type="button">Leave Roguelike</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{status !== 'playing' && status !== 'part-complete' && status !== 'upgrade-choice' && (
|
|
<div className="result-screen">
|
|
<div>
|
|
<p className="eyebrow">{status === 'won' ? `${contentName} Complete` : 'Party Defeated'}</p>
|
|
<h2>{status === 'won' ? 'The Warden Falls' : 'The Ashes Claim You'}</h2>
|
|
{status === 'won' ? (
|
|
<div className="reward-summary">
|
|
{!reward && !rewardError && <p>Recording victory...</p>}
|
|
{rewardError && <p className="reward-error">{rewardError}</p>}
|
|
{reward && (
|
|
<>
|
|
<p>+{reward.experienceGained} XP</p>
|
|
{reward.levelsGained > 0 && (
|
|
<p className="level-gain">
|
|
Level {reward.previousLevel} to {reward.newLevel}
|
|
<small>+{reward.talentPointsGained} talent point</small>
|
|
</p>
|
|
)}
|
|
{reward.unlockedAbilities.map((ability) => (
|
|
<p className="ability-unlock" key={ability.id}>
|
|
<span>{ability.glyph}</span>
|
|
Ability Unlocked: {ability.name}
|
|
</p>
|
|
))}
|
|
{!isRoguelike && (
|
|
<>
|
|
<p>Component tier: item level {reward.droppedItemLevel}.</p>
|
|
<p className="efficiency-result">
|
|
{reward.resourceSpent} {gameClass.resourceName} spent
|
|
<small>
|
|
{reward.durationSeconds}s - iLvl {reward.averageItemLevel.toFixed(1)}
|
|
</small>
|
|
</p>
|
|
<div className="run-loot-rolls">
|
|
{lootRolls.map((roll) => (
|
|
<div className={roll.dropped ? 'dropped' : 'empty'} key={roll.encounterId}>
|
|
<strong>{roll.encounterName}</strong>
|
|
<span>
|
|
{roll.items.length > 0
|
|
? roll.items
|
|
.map((item) => `${item.glyph} ${item.name} x${item.quantity}${item.duplicate ? ` (owned x${item.quantityAfter})` : ''}`)
|
|
.join(', ')
|
|
: 'No components dropped'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{lootRolls.length < expectedLootRolls && (
|
|
<small>Finishing loot rolls...</small>
|
|
)}
|
|
</div>
|
|
{reward.bonusItem && (
|
|
<div className="bonus-item">
|
|
<p className="eyebrow">Full Run Bonus</p>
|
|
<div className="bonus-item-detail">
|
|
<span>{reward.bonusItem.glyph}</span>
|
|
<strong className={`rarity-${reward.bonusItem.rarity}`}>{reward.bonusItem.name}</strong>
|
|
<small>Item Level {reward.bonusItem.itemLevel} x{reward.bonusItem.quantity}</small>
|
|
{reward.bonusItem.duplicate && <small> (owned x{reward.bonusItem.quantityAfter})</small>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
) : isRoguelike ? (
|
|
<div className="reward-summary">
|
|
{!reward && !rewardError && <p>Recording roguelike progress...</p>}
|
|
{rewardError && <p className="reward-error">{rewardError}</p>}
|
|
{reward && (
|
|
<>
|
|
<p>+{reward.experienceGained} XP</p>
|
|
<p>{encounterIndex} encounters cleared.</p>
|
|
{reward.levelsGained > 0 && (
|
|
<p className="level-gain">
|
|
Level {reward.previousLevel} to {reward.newLevel}
|
|
<small>+{reward.talentPointsGained} talent point</small>
|
|
</p>
|
|
)}
|
|
{reward.unlockedAbilities.map((ability) => (
|
|
<p className="ability-unlock" key={ability.id}>
|
|
<span>{ability.glyph}</span>
|
|
Ability Unlocked: {ability.name}
|
|
</p>
|
|
))}
|
|
<p className="efficiency-result">
|
|
{reward.resourceSpent} {gameClass.resourceName} spent
|
|
<small>{reward.durationSeconds}s survived</small>
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p>Balance efficient healing, shields, and cleansing to survive.</p>
|
|
)}
|
|
{log.length > 0 && (
|
|
<>
|
|
<button className="secondary-result-button" onClick={() => setShowEndLog((value) => !value)} type="button">
|
|
{showEndLog ? 'Hide Combat Log' : 'View Combat Log'}
|
|
</button>
|
|
{showEndLog && (
|
|
<div className="result-log">
|
|
{log.slice().reverse().map((entry) => (
|
|
<div className={`log-entry ${entry.tone}`} key={entry.id}>{entry.text}</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
<button onClick={resetRun} type="button">Run Again</button>
|
|
<button className="secondary-result-button" onClick={onExit} type="button">Leave {contentName}</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{status === 'part-complete' && (
|
|
<div className="result-screen">
|
|
<div>
|
|
<p className="eyebrow">{sectionName} Complete</p>
|
|
<h2>{encounter.enemyName} Defeated</h2>
|
|
<p>Proceed to {sectionName} {currentPart + 1} or end the run?</p>
|
|
<button
|
|
onClick={() => {
|
|
const nextIndex = encounterIndex + 1
|
|
partStartTimesRef.current[currentPart + 1] = Date.now()
|
|
const nextEncounter = encounters[nextIndex]
|
|
const current = combatRef.current
|
|
const recoveredParty = current.party.map((member) => ({
|
|
...member,
|
|
health: clamp(member.health + 35, 0, member.maxHealth),
|
|
debuff: undefined,
|
|
debuffTicks: undefined,
|
|
}))
|
|
setEncounterIndex(nextIndex)
|
|
setCombat({
|
|
...current,
|
|
party: recoveredParty,
|
|
enemyHealth: nextEncounter.maxHealth,
|
|
elapsedTicks: 0,
|
|
})
|
|
setStatus('playing')
|
|
addLog(`Proceeding to ${sectionName} ${currentPart + 1}. ${nextEncounter.enemyName} approaches.`, 'system')
|
|
}}
|
|
type="button"
|
|
>
|
|
Continue to {sectionName} {currentPart + 1}
|
|
</button>
|
|
<button className="secondary-result-button" onClick={() => finishRun(currentPart, startPart)} type="button">
|
|
End Run
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|