560 lines
27 KiB
TypeScript
560 lines
27 KiB
TypeScript
import { useInputBindingLabels } from "../input/useInputBindingLabels";
|
|
import { HudSurfaceContext } from "./HudSurface";
|
|
import type { HudElementId, HudElementLayout } from "../game/uiLayout";
|
|
import { DungeonInteractionPrompt } from "./DungeonInteractionPrompt";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
useSyncExternalStore,
|
|
type CSSProperties,
|
|
} from "react";
|
|
import { useProgress } from "@react-three/drei";
|
|
import { classById, raceById } from "../app/characterCatalog";
|
|
import { useShellStore } from "../app/shellStore";
|
|
import { abilityAtLevel, abilityTalentNodeId, learnedAbilityRank, resourceProfileForClass } from "../game/abilityCatalog";
|
|
import { ACTION_CONTROLS, actionBindingId } from "../game/actionBindings";
|
|
import { resolvedAbilityCosts, useCombatStore } from "../game/combatStore";
|
|
import { partyFightStillActive, respawnDefeatedPlayer } from "../game/deathRespawn";
|
|
import { requireDungeonDefinition } from "../game/dungeonRegistry";
|
|
import { resurrectManastormSession } from "../game/manastormSession";
|
|
import { resolveStagePresentation } from "../game/manastormStagePresentation";
|
|
import { useManastormStore } from "../game/manastormStore";
|
|
import { usePartyStore } from "../game/partyStore";
|
|
import { PLAYER_AGGRO_ID } from "../game/aggro";
|
|
import { threatMeterRows } from "../game/threatMeter";
|
|
import { useGameStore } from "../game/store";
|
|
import { ActionBar, type ActionBarItem, type ActionBarItems } from "./ActionBar";
|
|
import { ExperienceBar } from "./ExperienceBar";
|
|
import { Minimap } from "./Minimap";
|
|
import { PlayerStatusPanel } from "./PlayerStatusPanel";
|
|
import { EncounterTimeline } from "./EncounterTimeline";
|
|
import { PartyFrames } from "./PartyFrames";
|
|
import { ResurrectionDestination, useResurrectionCheckpoints } from "./ResurrectionDestination";
|
|
import type { ResurrectionCheckpoint } from "../game/resurrectionCheckpoints";
|
|
import { TimedEffectStrip } from "./TimedEffectStrip";
|
|
import { AuraStrip } from "./AuraStrip";
|
|
import { ShelvedHud } from "@shelvedHud";
|
|
import { ThreatMeterWidget } from "./ThreatMeterWidget";
|
|
import { BossLootWindow } from "./BossLootWindow";
|
|
import { EditableHudElement } from "./EditableHudElement";
|
|
import { DpsMeter } from "./DpsMeter";
|
|
import { useDungeonRunStore } from "../game/dungeonRunStore";
|
|
import { formatDungeonDuration } from "../game/dungeonRunTypes";
|
|
import { DesktopActionBars } from "./DesktopActionBars";
|
|
import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
|
|
import { SummonFrames } from "./SummonFrames";
|
|
import { useOnlineSessionStore } from "../app/onlineSessionStore";
|
|
import { onlineAccountIdFromActor, onlinePlayerActorId } from "../game/onlineSessionRuntime";
|
|
import {
|
|
activeDungeonEncounterRevision,
|
|
activeDungeonRunIsComplete,
|
|
subscribeDungeonEncounterSnapshots,
|
|
} from "../game/dungeonEncounterRuntime";
|
|
|
|
function LoadingOverlay() {
|
|
const activeDungeonId = useGameStore((state) => state.activeDungeonId);
|
|
const gameMode = useGameStore((state) => state.gameMode);
|
|
const encounter = useManastormStore((state) => state.currentEncounter);
|
|
const dungeon = requireDungeonDefinition(activeDungeonId);
|
|
const assetStatus = useGameStore((state) => state.assetStatus);
|
|
const { active, progress, item } = useProgress();
|
|
|
|
if (assetStatus !== "checking" && assetStatus !== "loading") return null;
|
|
const networkComplete = !active && progress >= 100;
|
|
const value = active || networkComplete ? Math.max(3, Math.round(progress)) : 3;
|
|
const statusText = active && item
|
|
? "Streaming dungeon geometry"
|
|
: networkComplete
|
|
? "Finalizing collision and lighting"
|
|
: "Reading expedition assets";
|
|
const stagePresentation = resolveStagePresentation(gameMode, encounter, {
|
|
title: dungeon.title,
|
|
mapId: dungeon.mapId,
|
|
areaName: dungeon.title,
|
|
});
|
|
return (
|
|
<div className="loading-screen" role="status" aria-live="polite">
|
|
<div className="loading-screen__mark" aria-hidden="true">HM</div>
|
|
<p className="eyebrow">{stagePresentation.title} · Map {stagePresentation.mapId}</p>
|
|
<h1>Healer Man</h1>
|
|
<div className="loading-screen__track"><span style={{ width: `${value}%` }} /></div>
|
|
<p className="loading-screen__item">{statusText} - {value}%</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DefeatedPrompt({
|
|
gameMode,
|
|
resurrectionCharges,
|
|
onReturn,
|
|
sharedOnline = false,
|
|
checkpoints = [],
|
|
partyStillFighting = false,
|
|
}: {
|
|
gameMode: "dungeon" | "manastorm";
|
|
resurrectionCharges: number;
|
|
onReturn: (checkpointId?: string) => void;
|
|
sharedOnline?: boolean;
|
|
checkpoints?: readonly ResurrectionCheckpoint[];
|
|
partyStillFighting?: boolean;
|
|
}) {
|
|
const [requestedCheckpoint, setRequestedCheckpoint] = useState("entrance");
|
|
const checkpointId = checkpoints.some((checkpoint) => checkpoint.id === requestedCheckpoint) ? requestedCheckpoint : "entrance";
|
|
const canReturn = !sharedOnline && (gameMode === "dungeon" || resurrectionCharges > 0);
|
|
return (
|
|
<section
|
|
className="defeated-prompt"
|
|
role="dialog"
|
|
aria-modal="false"
|
|
aria-labelledby="defeated-prompt-title"
|
|
>
|
|
<div className="defeated-prompt__panel">
|
|
<p className="eyebrow">Defeated</p>
|
|
<h2 id="defeated-prompt-title">You can still be resurrected</h2>
|
|
<p>
|
|
Stay down and wait for a party member to resurrect you, or choose to return now.
|
|
</p>
|
|
{canReturn ? (
|
|
<>
|
|
{gameMode === "dungeon" && checkpoints.length > 0 ? (
|
|
<ResurrectionDestination checkpoints={checkpoints} value={checkpointId} onChange={setRequestedCheckpoint} />
|
|
) : null}
|
|
<button type="button" className="button button--primary" onClick={() => onReturn(gameMode === "dungeon" ? checkpointId : undefined)}>
|
|
{gameMode === "manastorm"
|
|
? `Resurrect now · ${resurrectionCharges} remaining`
|
|
: checkpointId === "entrance" ? "Respawn at entrance" : "Respawn at checkpoint"}
|
|
</button>
|
|
</>
|
|
) : sharedOnline ? (
|
|
<small>Your shared run is still active. A living player can resurrect you.</small>
|
|
) : (
|
|
<small>No shared resurrection charges remain. A living ally must resurrect you.</small>
|
|
)}
|
|
{gameMode === "dungeon" && !sharedOnline ? (
|
|
<small>{partyStillFighting
|
|
? "Your party will keep fighting where they are. Use Recall if you want to regroup."
|
|
: "Respawning resets the current encounter and restores the party."}</small>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function DungeonCompletePrompt({
|
|
dungeonTitle,
|
|
onFinish,
|
|
onResults,
|
|
durationMs,
|
|
finalBossOnly = false,
|
|
}: {
|
|
readonly dungeonTitle: string;
|
|
readonly onFinish: () => void;
|
|
readonly onResults?: () => void;
|
|
readonly durationMs?: number | null;
|
|
readonly finalBossOnly?: boolean;
|
|
}) {
|
|
return (
|
|
<section className="dungeon-complete-banner" role="status" aria-live="polite">
|
|
<span aria-hidden="true">◆</span>
|
|
<p>
|
|
<strong>{dungeonTitle} complete</strong>
|
|
<small>{finalBossOnly ? "Final boss defeated." : "Every required encounter is defeated."} Loot the room or finish the run.</small>
|
|
{durationMs != null ? <small>Time to final boss: {formatDungeonDuration(durationMs)}</small> : null}
|
|
</p>
|
|
<button type="button" className="button button--primary" onClick={onFinish}>
|
|
Finish dungeon
|
|
</button>
|
|
{onResults ? <button type="button" className="button" onClick={onResults}>Run results</button> : null}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function Hud({ surface = "top", onLayoutChange, completion, onFinish, onResurrect, interaction, onInteract }: {
|
|
surface?: "top" | "bottom";
|
|
onLayoutChange?: (id: HudElementId, update: Partial<HudElementLayout>) => void;
|
|
completion?: boolean;
|
|
onFinish?: () => void;
|
|
onResurrect?: (checkpointId: string) => void;
|
|
interaction?: { prompt: string; name: string; label: string } | null;
|
|
onInteract?: () => void;
|
|
} = {}) {
|
|
const bindingLabel = useInputBindingLabels();
|
|
const ui = useUiLayoutStore();
|
|
const desktopBars = currentUiDevice() === "pc" && (ui.draft ?? ui.preferences.current.pc).wowBars;
|
|
const character = useShellStore((state) => state.activeCharacter);
|
|
const gameMode = useGameStore((state) => state.gameMode);
|
|
const areaName = useGameStore((state) => state.areaName);
|
|
const distance = useGameStore((state) => state.distanceTravelled);
|
|
const playerPosition = useGameStore((state) => state.playerPosition);
|
|
const cameraYaw = useGameStore((state) => state.cameraYaw);
|
|
const hasMoved = useGameStore((state) => state.hasMoved);
|
|
const cameraLookActive = useGameStore((state) => state.cameraLookActive);
|
|
const inputMode = useGameStore((state) => state.inputMode);
|
|
const actionLayer = useGameStore((state) => state.actionLayer);
|
|
const assetStatus = useGameStore((state) => state.assetStatus);
|
|
const assetMessage = useGameStore((state) => state.assetMessage);
|
|
const activeDungeonId = useGameStore((state) => state.activeDungeonId);
|
|
const resurrectionCheckpoints = useResurrectionCheckpoints();
|
|
const dungeon = requireDungeonDefinition(activeDungeonId);
|
|
const encounter = useManastormStore((state) => state.currentEncounter);
|
|
const resurrectionCharges = useManastormStore((state) => state.resurrectionCharges);
|
|
const toggleMap = useGameStore((state) => state.toggleMap);
|
|
const classId = useCombatStore((state) => state.classId);
|
|
const level = useCombatStore((state) => state.level);
|
|
const xp = useCombatStore((state) => state.xp);
|
|
const xpToNext = useCombatStore((state) => state.xpToNext);
|
|
const health = useCombatStore((state) => state.health);
|
|
const maxHealth = useCombatStore((state) => state.maxHealth);
|
|
const resource = useCombatStore((state) => state.resource);
|
|
const maxResource = useCombatStore((state) => state.maxResource);
|
|
const resourcePools = useCombatStore((state) => state.resourcePools);
|
|
const maxResourcePools = useCombatStore((state) => state.maxResourcePools);
|
|
const resourceName = useCombatStore((state) => state.resourceName);
|
|
const abilities = useCombatStore((state) => state.abilities);
|
|
const talentRanks = useCombatStore((state) => state.talentRanks);
|
|
const talentModifiers = useCombatStore((state) => state.talentModifiers);
|
|
const auras = useCombatStore((state) => state.auras);
|
|
const actionBindings = useCombatStore((state) => state.actionBindings);
|
|
const cooldowns = useCombatStore((state) => state.cooldowns);
|
|
const globalCooldownEndsAt = useCombatStore((state) => state.globalCooldownEndsAt);
|
|
const activeCast = useCombatStore((state) => state.activeCast);
|
|
const pendingGroundTarget = useCombatStore((state) => state.pendingGroundTarget);
|
|
const feedback = useCombatStore((state) => state.feedback);
|
|
const target = useCombatStore((state) => state.selectedTargetId ? state.mobs[state.selectedTargetId] ?? null : null);
|
|
const selectedFriendlyActorId = useCombatStore((state) => state.selectedFriendlyActorId);
|
|
const friendlyTarget = usePartyStore((state) => state.selectedMemberId
|
|
? state.members.find((member) => member.id === state.selectedMemberId) ?? null
|
|
: null);
|
|
const selfSelected = usePartyStore((state) => state.selfSelected);
|
|
const partyMembers = usePartyStore((state) => state.members);
|
|
const partyStillFighting = useCombatStore((state) => partyFightStillActive(partyMembers, state.mobs, state.actors));
|
|
const playerRole = usePartyStore((state) => state.playerRole);
|
|
const settings = useCombatStore((state) => state.settings);
|
|
const onlineSession = useOnlineSessionStore((state) => state.snapshot);
|
|
const [clock, setClock] = useState(() => Date.now());
|
|
useSyncExternalStore(
|
|
subscribeDungeonEncounterSnapshots,
|
|
activeDungeonEncounterRevision,
|
|
activeDungeonEncounterRevision,
|
|
);
|
|
const runProgress = useDungeonRunStore((state) => state.progress);
|
|
const finalBossDefeated = runProgress?.dungeonId === activeDungeonId && runProgress.finishedAt !== null;
|
|
const dungeonComplete = completion ?? (gameMode === "dungeon" && (finalBossDefeated || activeDungeonRunIsComplete(activeDungeonId)));
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => setClock(Date.now()), 100);
|
|
return () => window.clearInterval(timer);
|
|
}, []);
|
|
|
|
const updateThreatMeterPosition = useCallback((threatMeterPosition: typeof settings.threatMeterPosition) => {
|
|
useCombatStore.getState().updateSettings({ threatMeterPosition });
|
|
}, []);
|
|
|
|
const classColor = classById(classId).color;
|
|
const resourceTone = resourceProfileForClass(classId).type;
|
|
const assignedAbilities = useMemo(() => {
|
|
const used = new Set(Object.values(actionBindings));
|
|
if (desktopBars) for (const bar of (ui.draft ?? ui.preferences.current.pc).bars) for (const slot of bar.slots) used.add(slot.abilityId);
|
|
return abilities.filter((ability) => used.has(ability.id));
|
|
}, [abilities, actionBindings, desktopBars, ui.draft, ui.preferences]);
|
|
const abilityItems = useMemo<Record<string, ActionBarItem>>(() => Object.fromEntries(assignedAbilities.map((catalogAbility) => {
|
|
const learnedTalentRank = learnedAbilityRank(catalogAbility, talentRanks);
|
|
const ability = abilityAtLevel(catalogAbility, level, learnedTalentRank);
|
|
const talentLocked = Boolean(abilityTalentNodeId(ability)) && !learnedTalentRank;
|
|
const personalRemaining = Math.max(0, (cooldowns[ability.id] ?? 0) - clock);
|
|
const globalRemaining = Math.max(0, globalCooldownEndsAt - clock);
|
|
const remaining = Math.max(personalRemaining, globalRemaining);
|
|
const abilityCosts = resolvedAbilityCosts(ability, talentModifiers, {
|
|
classId,
|
|
maxHealth,
|
|
maxResource,
|
|
maxResourcePools,
|
|
auras,
|
|
});
|
|
const cannotPay = abilityCosts.some((cost) => cost.resource === "health"
|
|
? health <= cost.amount
|
|
: (cost.resource === resourceTone ? resource : resourcePools[cost.resource] ?? 0) < cost.amount);
|
|
const displayCost = abilityCosts[0] ?? { resource: ability.cost.resource, amount: 0 };
|
|
const item: ActionBarItem = {
|
|
id: ability.id,
|
|
name: ability.name,
|
|
shortLabel: ability.sigil,
|
|
iconUrl: ability.icon,
|
|
description: ability.description,
|
|
color: classColor,
|
|
resourceCost: displayCost.amount,
|
|
resourceLabel: displayCost.resource === resourceTone ? resourceName : displayCost.resource.replace("-", " "),
|
|
cooldownRemaining: remaining / 1_000,
|
|
cooldownDuration: (personalRemaining >= globalRemaining ? ability.cooldownMs : ability.gcdMs) / 1_000,
|
|
disabled: talentLocked || level < ability.unlockLevel || health <= 0 || remaining > 0 || Boolean(activeCast) || cannotPay,
|
|
lockedUntilLevel: level < ability.unlockLevel ? ability.unlockLevel : undefined,
|
|
target: ability.target,
|
|
cooldownSeconds: ability.cooldownMs / 1_000,
|
|
castSeconds: ability.castTimeMs / 1_000,
|
|
range: ability.range.max,
|
|
talentLocked,
|
|
};
|
|
return [catalogAbility.id, item];
|
|
})), [assignedAbilities, activeCast, auras, classColor, classId, clock, cooldowns, globalCooldownEndsAt, health, level, maxHealth, maxResource, maxResourcePools, resource, resourceName, resourcePools, resourceTone, talentModifiers, talentRanks]);
|
|
const actionItems = Object.fromEntries(ACTION_CONTROLS.map((control) => [control,
|
|
abilityItems[actionBindings[actionBindingId(actionLayer, control)] ?? ""] ?? null,
|
|
])) as ActionBarItems;
|
|
|
|
const castBinding = (control: (typeof ACTION_CONTROLS)[number]) => useCombatStore.getState().castActionBinding(
|
|
useGameStore.getState().actionLayer,
|
|
control,
|
|
useGameStore.getState().playerPosition,
|
|
Date.now(),
|
|
);
|
|
const targetPercent = target ? Math.max(0, Math.min(100, target.health / target.maxHealth * 100)) : 0;
|
|
const threatRows = target ? threatMeterRows(
|
|
target.threatByActor,
|
|
[
|
|
{
|
|
id: PLAYER_AGGRO_ID,
|
|
name: character?.name ?? "You",
|
|
role: playerRole,
|
|
alive: health > 0,
|
|
},
|
|
...partyMembers.map((member) => ({
|
|
id: member.id,
|
|
name: member.name,
|
|
role: member.role,
|
|
alive: member.health > 0,
|
|
})),
|
|
...(onlineSession?.players ?? [])
|
|
.filter((player) => player.accountId !== onlineSession?.localAccountId)
|
|
.map((player) => ({
|
|
id: onlinePlayerActorId(player.accountId),
|
|
name: player.character?.name ?? player.username,
|
|
role: player.role ?? "damage",
|
|
alive: player.health > 0,
|
|
})),
|
|
],
|
|
target.targetActorId,
|
|
target.forcedTarget,
|
|
clock,
|
|
) : [];
|
|
const onlineFriendlyAccountId = selectedFriendlyActorId
|
|
? onlineAccountIdFromActor(selectedFriendlyActorId)
|
|
: null;
|
|
const onlineFriendly = onlineFriendlyAccountId
|
|
? onlineSession?.players.find((player) => player.accountId === onlineFriendlyAccountId) ?? null
|
|
: null;
|
|
const selectedFriendly = selfSelected
|
|
? {
|
|
name: character?.name ?? "Adventurer",
|
|
detail: `You · Level ${level}`,
|
|
health,
|
|
maxHealth,
|
|
self: true,
|
|
targetId: PLAYER_AGGRO_ID,
|
|
}
|
|
: friendlyTarget
|
|
? {
|
|
name: friendlyTarget.name,
|
|
detail: `${raceById(friendlyTarget.raceId).name} · Level ${friendlyTarget.level}`,
|
|
health: friendlyTarget.health,
|
|
maxHealth: friendlyTarget.maxHealth,
|
|
self: false,
|
|
targetId: friendlyTarget.id,
|
|
}
|
|
: onlineFriendly
|
|
? {
|
|
name: onlineFriendly.character?.name ?? onlineFriendly.username,
|
|
detail: `Online player · Level ${onlineFriendly.character?.level ?? 1}`,
|
|
health: onlineFriendly.health,
|
|
maxHealth: onlineFriendly.maxHealth,
|
|
self: false,
|
|
targetId: onlinePlayerActorId(onlineFriendly.accountId),
|
|
}
|
|
: null;
|
|
const friendlyTargetPercent = selectedFriendly
|
|
? Math.max(0, Math.min(100, selectedFriendly.health / selectedFriendly.maxHealth * 100))
|
|
: 0;
|
|
const castingAbility = activeCast ? abilities.find((ability) => ability.id === activeCast.abilityId) : null;
|
|
const castProgress = activeCast
|
|
? Math.max(0, Math.min(100, (clock - activeCast.startedAt) / (activeCast.completesAt - activeCast.startedAt) * 100))
|
|
: 0;
|
|
const castRemaining = activeCast ? Math.max(0, activeCast.completesAt - clock) / 1_000 : 0;
|
|
const targetCastProgress = target?.activeCast
|
|
? Math.max(0, Math.min(100, (clock - target.activeCast.startedAt)
|
|
/ Math.max(1, target.activeCast.completesAt - target.activeCast.startedAt) * 100))
|
|
: 0;
|
|
const targetCastRemaining = target?.activeCast
|
|
? Math.max(0, target.activeCast.completesAt - clock) / 1_000
|
|
: 0;
|
|
const stagePresentation = resolveStagePresentation(gameMode, encounter, {
|
|
title: dungeon.title,
|
|
mapId: dungeon.mapId,
|
|
areaName,
|
|
});
|
|
const returnFromDefeat = (checkpointId?: string) => {
|
|
if (gameMode === "manastorm") {
|
|
resurrectManastormSession({ kind: "player" });
|
|
return;
|
|
}
|
|
respawnDefeatedPlayer(checkpointId ?? "entrance");
|
|
};
|
|
const finishDungeon = () => {
|
|
useShellStore.getState().saveActiveDungeonRunCheckpoint(null);
|
|
useShellStore.getState().returnToMainMenu();
|
|
};
|
|
|
|
return (
|
|
<HudSurfaceContext.Provider value={{ surface, onChange: onLayoutChange, onResurrect }}>
|
|
<div className={`hud hud-surface-${surface}`} style={{ "--game-ui-scale": settings.uiScale } as CSSProperties}>
|
|
<ShelvedHud />
|
|
<DpsMeter />
|
|
{surface === "top" && <BossLootWindow />}
|
|
<EditableHudElement id="interaction"><DungeonInteractionPrompt interaction={interaction} onInteract={onInteract} /></EditableHudElement>
|
|
<EditableHudElement id="completion">{dungeonComplete ? (
|
|
<DungeonCompletePrompt dungeonTitle={dungeon.title} onFinish={onFinish ?? finishDungeon}
|
|
finalBossOnly={!activeDungeonRunIsComplete(activeDungeonId)} durationMs={runProgress?.timed ? runProgress.durationMs : null}
|
|
onResults={finalBossDefeated ? () => useGameStore.getState().openOverlay("dungeon-results") : undefined} />
|
|
) : null}</EditableHudElement>
|
|
<EditableHudElement id="loot">{feedback?.kind === "loot" ? (
|
|
<section className="loot-reward" role="status" aria-live="polite">
|
|
<span aria-hidden="true">◆</span>
|
|
<p><strong>Loot acquired</strong><small>{feedback.message}</small><em>Press I to inspect and equip</em></p>
|
|
</section>
|
|
) : null}</EditableHudElement>
|
|
<EditableHudElement id="party"><PartyFrames /></EditableHudElement>
|
|
<EditableHudElement id="summons"><SummonFrames now={clock} /></EditableHudElement>
|
|
|
|
{surface === "top" && pendingGroundTarget ? (
|
|
<section className="ground-target-reticle" role="status" aria-live="polite">
|
|
<div aria-hidden="true"><i /><b /></div>
|
|
<strong>Place ground effect</strong>
|
|
<small>Confirm: {bindingLabel(inputMode === "gamepad" ? "controller" : "pc", "ground-confirm")} · Cancel: {bindingLabel(inputMode === "gamepad" ? "controller" : "pc", "ground-cancel")}</small>
|
|
<span>
|
|
<button
|
|
type="button"
|
|
disabled={!pendingGroundTarget.valid}
|
|
onClick={() => useCombatStore.getState().confirmGroundTarget()}
|
|
>Confirm</button>
|
|
<button type="button" onClick={() => useCombatStore.getState().cancelGroundTarget()}>Cancel</button>
|
|
</span>
|
|
</section>
|
|
) : null}
|
|
|
|
<div className="hud-top-right">
|
|
<EditableHudElement id="minimap"><Minimap
|
|
position={playerPosition}
|
|
yaw={cameraYaw}
|
|
areaName={stagePresentation.areaName}
|
|
distanceTravelled={distance}
|
|
rotationMode={settings.minimapRotation}
|
|
onOpenMap={toggleMap}
|
|
/></EditableHudElement>
|
|
<EditableHudElement id="player"><PlayerStatusPanel now={clock} /></EditableHudElement>
|
|
<EditableHudElement id="timeline"><EncounterTimeline now={clock} /></EditableHudElement>
|
|
</div>
|
|
|
|
<EditableHudElement id="target">{target && settings.showTargetFrame && (
|
|
<section className={`target-frame ${target.boss ? "target-frame--boss" : ""}`} aria-label={`Target ${target.name}`}>
|
|
<header><strong>{target.name}</strong><span>{target.boss ? "Boss" : `Level ${target.level}`}</span></header>
|
|
<div className="target-frame__track"><span style={{ width: `${targetPercent}%` }} /></div>
|
|
{target.activeCast ? (
|
|
<div
|
|
className={`target-frame__cast ${target.activeCast.interruptible ? "" : "target-frame__cast--locked"}`}
|
|
aria-label={`${target.activeCast.name}, ${targetCastRemaining.toFixed(1)} seconds remaining`}
|
|
>
|
|
<header><strong>{target.activeCast.name}</strong><span>{targetCastRemaining.toFixed(1)}s</span></header>
|
|
<div className="target-frame__cast-track"><span style={{ width: `${targetCastProgress}%` }} /></div>
|
|
</div>
|
|
) : null}
|
|
<TimedEffectStrip targetId={target.id} kinds={["dot"]} className="timed-effect-strip--target" />
|
|
<AuraStrip targetId={target.id} className="aura-strip--target" />
|
|
<small>{Math.ceil(target.health)} / {target.maxHealth}</small>
|
|
</section>
|
|
)}</EditableHudElement>
|
|
|
|
<EditableHudElement id="threat">{target && settings.showThreatMeter && threatRows.length > 0 && (
|
|
<ThreatMeterWidget
|
|
targetName={target.name}
|
|
rows={threatRows}
|
|
position={settings.threatMeterPosition}
|
|
onPositionChange={updateThreatMeterPosition}
|
|
/>
|
|
)}</EditableHudElement>
|
|
|
|
<EditableHudElement id="friendly">{selectedFriendly && settings.showTargetFrame && (
|
|
<section className="target-frame target-frame--friendly" aria-label={`Friendly target ${selectedFriendly.name}${selectedFriendly.self ? ", self" : ""}`}>
|
|
<header>
|
|
<strong>{selectedFriendly.name}</strong>
|
|
<span>{selectedFriendly.detail}</span>
|
|
</header>
|
|
<div className="target-frame__track"><span style={{ width: `${friendlyTargetPercent}%` }} /></div>
|
|
<TimedEffectStrip
|
|
targetId={selectedFriendly.self ? null : selectedFriendly.targetId}
|
|
className="timed-effect-strip--target"
|
|
/>
|
|
<AuraStrip
|
|
targetId={selectedFriendly.targetId}
|
|
className="aura-strip--target"
|
|
/>
|
|
<small>{Math.ceil(selectedFriendly.health)} / {selectedFriendly.maxHealth}</small>
|
|
</section>
|
|
)}</EditableHudElement>
|
|
|
|
<div className="hud-bottom-stack">
|
|
<EditableHudElement id="cast">{activeCast && castingAbility && (
|
|
<section className={`cast-bar cast-bar--${activeCast.mode}`} aria-label={`${activeCast.mode === "channel" ? "Channeling" : "Casting"} ${castingAbility.name}`}>
|
|
<header><strong>{castingAbility.name}</strong><span>{castRemaining.toFixed(1)}s</span></header>
|
|
<div className="cast-bar__track">
|
|
<span style={{ width: `${activeCast.mode === "channel" ? 100 - castProgress : castProgress}%` }} />
|
|
</div>
|
|
<small>{activeCast.mode === "channel" ? "Channeling" : "Casting"}</small>
|
|
</section>
|
|
)}</EditableHudElement>
|
|
|
|
<EditableHudElement id="hints">{!activeCast && (
|
|
<div className={`control-hint ${hasMoved && cameraLookActive ? "control-hint--settled" : ""}`}>
|
|
{cameraLookActive ? "Release right mouse for cursor · " : "Hold right mouse to look · "}
|
|
Forward: {bindingLabel(inputMode === "gamepad" ? "controller" : "pc", "move-forward")} · Target: {bindingLabel(inputMode === "gamepad" ? "controller" : "pc", "target-next")} · Pause: {bindingLabel(inputMode === "gamepad" ? "controller" : "pc", "pause")}
|
|
</div>
|
|
)}</EditableHudElement>
|
|
|
|
{!desktopBars && <EditableHudElement id="actions"><ActionBar
|
|
items={actionItems}
|
|
activeLayer={actionLayer}
|
|
onActivate={castBinding}
|
|
inputMode={surface === "bottom" ? "gamepad" : inputMode}
|
|
feedback={settings.showFloatingCombatText ? feedback?.message ?? null : null}
|
|
/></EditableHudElement>}
|
|
</div>
|
|
<DesktopActionBars items={abilityItems} />
|
|
<EditableHudElement id="feedback">{desktopBars && settings.showFloatingCombatText && feedback?.message
|
|
? <div className="desktop-action-feedback" role="status">{feedback.message}</div> : null}</EditableHudElement>
|
|
<EditableHudElement id="experience"><ExperienceBar level={level} current={xp} required={xpToNext} /></EditableHudElement>
|
|
|
|
<EditableHudElement id="reticle">{cameraLookActive && <span className="reticle" aria-hidden="true" />}</EditableHudElement>
|
|
|
|
<EditableHudElement id="assets">{assetStatus === "proxy" && (
|
|
<div className="asset-notice" role="status">
|
|
<strong>Cave proxy active</strong>
|
|
<span>{assetMessage ?? `Add ${[
|
|
...dungeon.assets.visual,
|
|
...dungeon.assets.collision,
|
|
].map((asset) => asset.fileName).join(" and ")}.`}</span>
|
|
</div>
|
|
)}</EditableHudElement>
|
|
{surface === "top" && <LoadingOverlay />}
|
|
{surface === "top" && health <= 0 ? (
|
|
<DefeatedPrompt
|
|
gameMode={gameMode}
|
|
resurrectionCharges={resurrectionCharges}
|
|
onReturn={returnFromDefeat}
|
|
checkpoints={resurrectionCheckpoints}
|
|
partyStillFighting={partyStillFighting}
|
|
sharedOnline={onlineSession !== null}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</HudSurfaceContext.Provider>
|
|
);
|
|
}
|