GameResultStat

Methods

.attributeChanged(name)

.effectCallback({ scene, score, formatScoreSignal })

.define(tag, registry)

.subscribe(context, callback)

CSS Custom Properties

Shadow DOM Parts

A large score display for the results screen. Observes game signals and renders the score when the game enters the result scene. Supports count-up animation and exposes custom states based on score thresholds, enabling per-game visual styling without modifying the component.

Attributes

label

string -- Label shown above the score (e.g. "Your Score", "Threshold").

format

"ms" | "Ndp" | "plain" -- How to format the score. Same options as <game-stat>:

• "ms" -- Round to integer and append "ms" (e.g. 342ms)
• "Ndp" -- Fixed-point with N decimal places (e.g. "2dp")
• "plain" -- Raw value as string (default)

animate

number -- Duration in milliseconds for a count-up animation from 0 to the final score. If present (even without a value), defaults to 800ms. The animation uses an ease-out curve.

<game-result-stat animate="1000"></game-result-stat>

min-score

number? -- Lower bound for the :state(in-range) custom state. When set, the state activates only if score >= min-score. Can be used together with max-score to define a score band.

max-score

number? -- Upper bound for the :state(in-range) custom state. When set, the state activates only if score <= max-score. Can be used together with min-score to define a score band.

<!-- Activates :state(in-range) for scores 10–15 -->
<game-result-stat min-score="10" max-score="15"></game-result-stat>

score-*

Score threshold attributes. Any attribute starting with score- defines a custom state threshold. The attribute name minus the score- prefix becomes the state name, and the value is the minimum score to activate it. The highest matching threshold wins.

<!-- Activates :state(low) at 0+, :state(mid) at 10+,
     :state(high) at 15+, :state(perfect) at 20 -->
<game-result-stat
  score-low="0"
  score-mid="10"
  score-high="15"
  score-perfect="20"
></game-result-stat>

Custom States

These states enable per-game CSS styling:

game-result-stat:state(perfect) {
  color: gold;
}
game-result-stat:state(high)::part(value) {
  color: #00e5b0;
}
game-result-stat:state(low)::part(value) {
  color: #ff3b5c;
}

Properties

.formatScore

set (function) -- Assign a custom (score) => string function. When set, this overrides the format attribute entirely. Also used during count-up animation to format intermediate values.

const stat = document.querySelector("game-result-stat");
stat.formatScore = (score) => `${score}/20`;

Signal Access

Usage

<div when-some-scene="result" data-overlay>
  <game-result-stat
    label="Your Score"
    animate="800"
    score-low="0"
    score-mid="10"
    score-high="15"
  >
  </game-result-stat>
  <button commandfor="game" command="--restart">Play Again</button>
</div>