GameTimer

Attributes

duration .duration: number Defaults to 10.
countdown .countdown: number Defaults to 0.
warn-at .warnAt: number Defaults to 0.6.
danger-at .dangerAt: number Defaults to 0.8.

Methods

.effectCallback({ scene })
.start()
.stop()
.reset()
.define(tag, registry)
.subscribe(context, callback)

Events

game-timer-tick GameTimerTickEvent: Fires on every animation frame with remaining time and elapsed fraction
game-timer-expired GameTimerExpiredEvent: Fires when the timer reaches zero
game-timer-countdown GameTimerCountdownEvent: Fires each second during the final countdown phase

Custom States

State	Description
`:state(ok)`	Timer is in the normal phase
`:state(warn)`	Timer has passed the warn-at threshold
`:state(danger)`	Timer has passed the danger-at threshold

CSS Custom Properties

Property	Default	Description
`--game-timer-bar`	`var(--game-accent, #fff)`	Color of the timer bar in the normal phase
`--game-timer-warn`	`#f59e0b`	Color of the timer bar in the warn phase
`--game-timer-danger`	`#ef4444`	Color of the timer bar in the danger phase

A visual countdown timer bar that renders as a thin progress bar at the top of the screen. Auto-starts when the game enters the playing scene and auto-stops when it leaves. The bar changes color as time runs out: accent color by default, yellow past 60%, red past 80%.

Methods

.start(): Start or restart the countdown from full duration. Resets the bar to 100% and begins ticking.
.stop(): Stop the timer. Cancels the animation loop and freezes the bar at its current position.
.reset(): Stop the timer and reset the bar to full duration without starting it.

Visibility

Visible during playing and between states. Hidden otherwise.

Signal Access

Signal	Usage
Shell signals	Reads `scene` signal from the shell to auto-start/stop and toggle visibility

Usage

<game-timer when-some-scene="playing between paused" duration="5"></game-timer>

Adjust the duration per-round from a progression or lifecycle listener:

shell.addEventListener("game-lifecycle", (e) => {
  if (e.action === "playing") {
    const timer = document.querySelector("game-timer");
    timer.duration = e.state.difficulty?.speed / 1000 || 5;
  }
});