GameChallenge

Methods

.effectCallback({ challenge, formatScoreSignal })

.define(tag, registry)

.subscribe(context, callback)

CSS Custom Properties

Shadow DOM Parts

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.

Behavior

When a challenge is active the component:

1. Adds the :state(active) CSS state via ElementInternals (switches from display: none to display: block).
2. Renders the opponent's score in a large gradient display.
3. Picks a random taunt message (e.g. "No mercy.", "Prove them wrong.").
4. Changes the start button text in the parent overlay to "Challenge accepted".

Properties

.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 Access

Usage

<div when-some-scene="intro" data-overlay>
  <game-challenge></game-challenge>
  <h1>Reaction Time</h1>
  <button commandfor="game" command="--start">Play</button>
</div>