GameChallenge
- .effectCallback({ challenge, formatScoreSignal })
- .define(tag, registry)
- .subscribe(context, callback)
| State | Description |
|---|
:state(active) | A decoded challenge is present and the display is shown |
| Property | Default | Description |
|---|
--game-result-gradient-from | #6ee7b7 | Start color of the score gradient |
--game-result-gradient-to | #3b82f6 | End color of the score gradient |
| Part | Description |
|---|
label | The "Their score" heading |
score | The opponent's formatted score |
taunt | The randomly selected taunt text |
Shows the opponent's score in challenge/group play. Hidden by default — only becomes visible when the challenge signal has a value (i.e. the player arrived via a shared result link). Displays the opponent's score and a randomly selected taunt to motivate the player.
When a challenge is active the component:
- Adds the
:state(active) CSS state via ElementInternals (switches from display: none to display: block).
- Renders the opponent's score in a large gradient display.
- Picks a random taunt message (e.g. "No mercy.", "Prove them wrong.").
- Changes the start button text in the parent overlay to "Challenge accepted".
- .formatScore
-
set (function) — Override for formatting the opponent's score. Receives the full challenge object. If not set, the component uses the shell's formatScoreSignal (i.e. shell.formatScore) with challenge.score, which is sufficient for most cases.
Only set this if you need the full challenge object rather than just challenge.score:
const challenge = document.querySelector("game-challenge");
challenge.formatScore = (c) => `${c.score}ms and ${c.rounds} rounds`;
| Signal |
Usage |
| Shell signals |
Reads the challenge and formatScore signals |
<div when-some-scene="intro" data-overlay>
<game-challenge></game-challenge>
<h1>Reaction Time</h1>
<button commandfor="game" command="--start">Play</button>
</div>