58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { manastormBubbleFillPercent } from "../game/manastormClientOverlay";
|
|
import { ManastormClientCueBridge } from "../game/ManastormClientCueBridge";
|
|
import { useManastormStore } from "../game/manastormStore";
|
|
import { useGameStore } from "../game/store";
|
|
|
|
export function ManastormClientOverlay() {
|
|
const gameMode = useGameStore((state) => state.gameMode);
|
|
const status = useManastormStore((state) => state.status);
|
|
const countdown = useManastormStore(
|
|
(state) => state.clientOverlay.nextWaveCountdownSeconds,
|
|
);
|
|
const bubble = useManastormStore((state) => state.clientOverlay.safetyBubble);
|
|
const visible = gameMode === "manastorm"
|
|
&& status !== "idle"
|
|
&& status !== "failed"
|
|
&& status !== "completed";
|
|
const showCountdown = visible && countdown !== null;
|
|
const showBubble = visible && bubble.active;
|
|
|
|
return (
|
|
<>
|
|
<ManastormClientCueBridge />
|
|
{showCountdown || showBubble ? (
|
|
<section
|
|
className={`manastorm-client-overlay manastorm-client-overlay--${bubble.severity}`}
|
|
aria-label="Manastorm wave alerts"
|
|
aria-live="polite"
|
|
>
|
|
{showCountdown ? (
|
|
<p className="manastorm-countdown">
|
|
<span>Next wave</span>
|
|
<strong>{countdown}s</strong>
|
|
</p>
|
|
) : null}
|
|
{showBubble ? (
|
|
<div
|
|
className="manastorm-safety-bubble"
|
|
role="progressbar"
|
|
aria-label={`Safety Bubble: ${bubble.distanceRemaining.toFixed(1)} yards remaining`}
|
|
aria-valuemin={0}
|
|
aria-valuemax={bubble.radius}
|
|
aria-valuenow={bubble.distanceRemaining}
|
|
>
|
|
<p>
|
|
<span>Safety bubble</span>
|
|
<strong>{bubble.distanceRemaining.toFixed(1)} yd</strong>
|
|
</p>
|
|
<i aria-hidden="true">
|
|
<b style={{ width: `${manastormBubbleFillPercent(bubble)}%` }} />
|
|
</i>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|