AutoRunnerHUD

AutoRunnerHUD

The heads-up display for Endless Rampage, drawn in the page over the game.

What it shows

• Top: the score and high score, the free-car clock or your spare cars, the level and distance, speed in km/h and an armour bar. A POLICE badge flashes red and blue under the armour while a patrol car chases you, and NO SCORE counts down while a civilian penalty runs.
• Bottom left: each weapon, what is left of it, and its key. A weapon you try while empty flashes red.
• Middle: messages from the director, points that float up from where a kill happened, a red edge when your car takes a hit of 2 or more, and the cards for the title, pause, game over and the weapons truck.

Use it in a scene

{
  "Game": {
    "components": {
      "AutoRunnerHUD": {
        "player": "Player",
        "title": "ENDLESS RAMPAGE",
        "subtitle": "ROAD WAR",
        "accent": "#ff4d3d"
      }
    }
  }
}

The HUD is plain page elements over the canvas, so it looks the same under any renderer. Where there is no document, as in tests, it builds nothing.

Numbers on the dash

Three small functions turn raw numbers into what you read:

/** Score as the cabinet showed it: zero-padded to six digits. */
export function scoreText(score: number): string {
  return String(Math.max(0, Math.floor(score))).padStart(6, '0');
}

/** M:SS. */
export function clockText(seconds: number): string {
  const s = Math.max(0, Math.ceil(seconds));
  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
}

/** Armour colour: green, through amber, to red. */
export function armorColor(fraction: number): string {
  const f = Math.max(0, Math.min(1, fraction));
  if (f > 0.6) return '#4ade80';
  if (f > 0.3) return '#fbbf24';
  return '#f87171';
}

scoreText(4250) is "004250", the way an arcade cabinet shows it. A score past six digits keeps all of them. clockText(95.2) is "1:36": the clock rounds up, so it reads 0:01 until the free time is truly gone. armorColor(0.5) is amber. Every digit is the same width, so the score does not jitter as it climbs.

All of this comes from autoRunner.status, which the director sends ten times a second. The HUD does no game maths of its own.

Cards and messages

The middle of the screen shows one card at a time, picked by the run's state. On the title card the first word of title is white and the rest takes the accent colour, above the controls list, a START button and PRESS ENTER. Pause shows PAUSED, and game over shows the final score and high score with PLAY AGAIN.

When the car docks in the weapons truck (supplyTruck.docked), a card lists the refits on offer, numbered from 1, with an auto-pick countdown. supplyTruck.upgraded or supplyTruck.released closes it.

START, PLAY AGAIN and a refit card send the same events the keys do: autoRunner.start, or supplyTruck.choose with the card's index. So a phone player can tap where a desktop player types.

Messages are one line at a time, with no queue. A new autoRunner.message replaces the one on screen and restarts the timer with its own seconds.

Settings

Events

Needs

• AutoRunnerDirector: the run state, score, messages, kills and status the HUD draws.
• AutoRunnerWeapons: the loadout for the weapon rows.

Without a SupplyTruck in the scene the dock card never shows. The rest still works.