UI Components
HTMLGameKit ships a set of ready-to-use custom elements for common game UI
patterns. All components read signals from the shell automatically — drop
them inside <game-shell> and they work.
For layout patterns that use plain elements rather than custom elements, see GameShell (Scene Visibility & Overlays), Game Area, and HUD.
HUD & In-Game Display
| Element | Description |
|---|---|
<game-round-counter> |
Round counter with progress bar |
<game-stat> |
Single stat display (e.g. streak, tier) |
<game-signal> |
Live signal value text binding |
<game-timer> |
Round timer with visual progress bar |
<game-between> |
Between-rounds feedback overlay |
Feedback & Effects
| Element | Description |
|---|---|
<game-flash> |
Pass/fail color flash overlay |
<game-toast> |
Trigger-activated toast notifications |
Results & Scoring
| Element | Description |
|---|---|
<game-result-stat> |
Animated result score display |
<game-result-message> |
Conditional result screen message picker |
<game-score-form> |
Leaderboard score submission form |
<game-leaderboard> |
Score leaderboard with table and histogram |
<game-score-histogram> |
Score distribution histogram chart |
Social & Multiplayer
| Element | Description |
|---|---|
<game-share> |
Share/copy result button |
<game-challenge> |
Challenge mode opponent score display |
<game-trophy> |
Achievement trophy with auto-unlock conditions |
Settings
| Element | Description |
|---|---|
<game-preferences> |
User preferences UI panel |
<game-preference> |
Single preference declaration (data element) |
Game Logic
| Element | Description |
|---|---|
<game-quiz> |
Multiple-choice quiz game component |
<game-tile-input> |
Letter tile input grid (Wordle-style) |
<game-word-source> |
Word fetch and distribution for word-guessing games |
Primitives
| Element | Description |
|---|---|
<game-icon> |
Conditional SVG sprite icon |
Audio
| Element | Description |
|---|---|
<game-audio> |
Audio/vibration controller for game sounds |
<game-sample> |
Individual sound/vibration sample definition |
<game-sequencer> |
Background music sequencer (sequence or hum mode) |
CSS Custom Properties
All components respect these CSS custom properties for theming. Set them on <game-shell> or any ancestor. The defaults below match the values in game-base.css.
| Property | Default | Description |
|---|---|---|
--game-bg |
#111 |
Primary background color |
--game-text |
#eee |
Primary text color |
--game-accent |
#fff |
Accent color (timer bar, progress bar) |
--game-overlay-bg |
rgba(0, 0, 0, 0.8) |
Overlay background |
--game-btn-bg |
#fff |
Button background |
--game-btn-text |
#111 |
Button text color |
--game-btn-border |
rgba(255, 255, 255, 0.5) |
Button border color |
--game-result-gradient-from |
#6ee7b7 |
Result stat gradient start |
--game-result-gradient-to |
#3b82f6 |
Result stat gradient end |
--game-toast-color |
var(--game-text, #eee) |
Toast text color |
--game-flash-pass |
rgba(50, 220, 120, 0.35) |
Flash color on pass |
--game-flash-fail |
rgba(230, 40, 40, 0.3) |
Flash color on fail |
--game-between-bg |
#111 |
Between-rounds background |