Skip to content

User Interface

suryanarayanrenjith edited this page Jul 26, 2026 · 2 revisions

User Interface

Home · Controls · Multiplayer · Configuration

In-game HUD

The HUD is a React overlay fed by the Three.js gameplay loop. Confirmed elements include:

Element Purpose
Health and stamina Current health, maximum health, and a circular sprint/stamina meter.
Weapon panel Current weapon, ammo, lock state and score needed for locked weapons, reload status, and mastery sliver.
Ability bar Class ability readiness/cooldown plus the one held-power slot.
Crosshair Dot, cross, circle, or dynamic style; can be hidden and recolored.
Hit markers Body, headshot, and kill confirmation feedback.
Kill feed Kill, headshot, combo, wave, and power notifications; supports equipped cosmetic title prefixes.
Score / wave / combo Run score, enemy kills, wave, combo, streak, and active modifier.
Minimap Tactical radar with player/enemy/boss indicators and an expanded map mode.
Damage direction Short-lived red arc around the reticle pointing toward a local attacker.
Boss health bar Top-centre named bar for the currently-engaged boss or Crowned Elite, with a phase label and a mid-point pip marking the 50% enrage threshold.

Procedural mission cards were removed and no longer appear; see Game-Systems.

HUD updates are coalesced instead of pushed every frame to reduce React work during sustained fire. The boss bar follows the same pattern: the gameplay loop reports the tracked boss every frame and the component throttles itself to roughly 15 updates per second, flushing immediately only on appearance, disappearance, or a phase change. Bosses previously had two phases, summons, and blinks with no HUD representation at all, so a player could not tell whether they were making progress and the phase transition landed as an unexplained difficulty spike.

Menus and overlays

Screen Confirmed purpose
Main Menu Launch Classic, Tutorial, Multiplayer, profile, leaderboard, skills, settings, authentication, and credits.
Classic Menu Difficulty, map, atmosphere, and random-map selection.
Raise the Stakes Generated Classic run-modifier cards; player may select or skip.
Character Select Eight class cards for Classic/Tutorial.
Multiplayer Lobby Create/join lobby, player roster, character pick, map/difficulty/time setup, match mode, time limit, and host kick controls.
Pause Menu Resume, return to menu, skills, and authenticated solo Photo Mode.
Wave Perk Picker Solo Mystery Box choice after a cleared wave.
Tutorial overlay Pauses the world and advances through control/combat instructions.
Shader warmup Staged loading progress: shader compile, material warmup, post-processing prime, and world spawn.
Game-over / spectator Run results, multiplayer results, spectator focus, restart/return options.

Menu presentation uses a shared forest scene, dark green glass panels, HUD brackets, Oswald display typography, Chakra Petch HUD typography, and direction-aware CSS transitions.

Multiplayer UI

Multiplayer adds an ally scoreboard, remote-player nameplates/health bars, chat, quick emotes, mobile badges, a multiplayer minimap, spectator controls, and end-of-match result panels. On touch devices, chat and scoreboards become compact overlays to avoid obstructing controls.

Profile and account UI

Signed-in profiles expose display-name editing, avatar selection, stats privacy, leaderboard opt-in/out, password change, account deletion, solo/multiplayer statistics, achievement/trophy information, skill-tree access, captured photos, and a GitHub-style activity heatmap.

Photo Mode

Photo Mode is available from the authenticated Classic pause menu on non-touch devices. It freezes gameplay, lets the player reposition/free-look the camera, supports scroll FOV zoom, and offers Original, Vivid, Noir, Sepia, Cool, Warm, Dramatic, and Faded presets plus brightness, contrast, and saturation sliders. Captures upload to the profile photo collection, subject to the server-side cap of five.

Accessibility and settings UI

Settings provide audio sliders, sensitivity, FOV, FPS display, frame cap, crosshair style/color, gameplay feedback toggles, graphics presets/custom controls, colorblind correction filters, haptics, and editable keyboard bindings. See Configuration.

Implementation references: src/components/HUD.tsx, src/components/BossHealthBar.tsx, src/components/Minimap.tsx, src/components/MainMenu.tsx, src/components/SettingsMenu.tsx, src/components/PhotoMode.tsx, src/components/ProfileMenu.tsx.

Clone this wiki locally