Chance Game

Chance-based game component with three variants: Prize Wheel, Penalty Shootout, and Pick One of X. Game segments, selection mode, animation speed, and per-segment result screens are all configured in the InfoPage entity.

Import

import { ChanceGame } from "fansunited-frontend-components";
import { ChanceGameProps, ChanceGameTemplate, ChanceGameVariant } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entityId`	`string`	Info Page identifier.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`template`	`ChanceGameTemplate`	`EMBED`, `STANDARD`, or `OVERLAY`.
`variant`	`ChanceGameVariant`	`PRIZE_WHEEL`, `PENALTY_SHOOTOUT`, or `PICK_ONE_OF_X`.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`defaultImagePlaceholderUrl`	`string`	Fallback image URL.
`imagePosition`	`"left" \| "right"`	`STANDARD` template only.

Templates

ChanceGame uses its own enum:

enum ChanceGameTemplate {
  EMBED = "embed",
  STANDARD = "standard",
  OVERLAY = "overlay",
}

Template	Description
`EMBED`	Compact radial-gradient layout, fits container width. Best for inline widgets and sidebars.
`STANDARD`	Card-based layout with optional side image. Supports `imagePosition`.
`OVERLAY`	Full-screen background overlay with frosted-glass container. Always dark mode.

Variants

enum ChanceGameVariant {
  PRIZE_WHEEL = "prize_wheel",
  PENALTY_SHOOTOUT = "penalty_shootout",
  PICK_ONE_OF_X = "pick_one_of_x",
}

Prize Wheel

Animated spinning wheel. Supported in all three templates.

Spin animation with configurable pace.
Confetti animation on winning outcomes.
Shake animation on losing outcomes.
Outer ring decoration and pointer indicator.

Penalty Shootout

Soccer penalty kick — users click a target on the goal to shoot. Only supported with the EMBED template.

Soccer stadium field visualisation.
Ball trajectory animations.

Pick One of X

Card or object picking game. Supported in all three templates. Operates in one of two display modes, determined automatically from segment configuration:

Mode	Trigger	Behavior
Flip card	No `images.idle` on segments	Mystery cards with a "?" that flip to reveal a label.
Object	Segments include `images.idle`	Custom objects (e.g. treasure chests) crossfade from idle to revealed state.

When config.revealAll: true, remaining items are revealed one-by-one after the user's pick (200 ms staggered delays).

Game configuration

All game logic comes from the InfoPage body, configured as a JSON string. The component fetches it via the SDK.

{
  "segments": [
    {
      "id": "segment-1",
      "label": "+50 POINTS",
      "isWinning": true,
      "weight": 3,
      "color": "#4CAF50",
      "images": {
        "idle": "https://example.com/chest-closed.png",
        "revealed": "https://example.com/chest-open.png"
      },
      "results": {
        "title": "YOU WON!",
        "description": "Congratulations! Your reward is on its way.",
        "primaryCTA": {
          "title": "YOUR REWARD",
          "description": "Claim your 50 bonus points now.",
          "label": "Claim Reward",
          "link": "https://example.com/claim"
        },
        "secondaryCTA": {
          "label": "Play Again",
          "link": "https://example.com/play"
        }
      }
    }
  ],
  "config": {
    "mode": "weighted",
    "pace": "normal",
    "decorations": false,
    "revealAll": false
  }
}

Segment fields

Field	Type	Required	Description
`id`	`string`	Yes	Unique segment identifier.
`label`	`string`	Yes	Visible label.
`isWinning`	`boolean`	Yes	Whether this is a winning outcome.
`weight`	`number`	Yes	Relative probability weight (used in `weighted` mode).
`color`	`string`	No	Custom hex color.
`images`	`object`	No	`idle` and optional `revealed` URLs (Pick One of X).
`results`	`SegmentResult`	No	Result screen shown after the animation.

SegmentResult fields

Field	Type	Required	Description
`title`	`string`	Yes	Headline.
`description`	`string`	No	Supporting text (supports `\n`).
`primaryCTA`	`SegmentCTA`	No	Featured action button.
`secondaryCTA`	`SegmentCTA`	No	Secondary action button.

SegmentCTA fields

Field	Type	Required	Description
`label`	`string`	Yes	Button label.
`link`	`string`	Yes	URL navigated to.
`title`	`string`	No	Section title above the button.
`description`	`string`	No	Descriptive text above the button.

Selection modes (`config.mode`)

Mode	Behavior
`fair`	All segments have equal probability regardless of `weight`.
`weighted`	Probability proportional to `weight`.
`win`	Outcome is always picked from segments where `isWinning` is `true`.

Other config options

Option	Type	Default	Description
`pace`	`"fast" \| "normal" \| "slow"`	`normal`	Animation speed.
`decorations`	`boolean`	`false`	Visual effects — glowing title, frame, patterns.
`revealAll`	`boolean`	`false`	Pick One of X only — reveal remaining items after selection.

Examples

Basic Prize Wheel

<ChanceGame
  entityId="info-page-123"
  sdk={sdk}
  template={ChanceGameTemplate.EMBED}
  variant={ChanceGameVariant.PRIZE_WHEEL}
  language="en"
/>

Pick One of X with object mode

<ChanceGame
  entityId="info-page-456"
  sdk={sdk}
  template={ChanceGameTemplate.STANDARD}
  variant={ChanceGameVariant.PICK_ONE_OF_X}
  imagePosition="right"
  language="en"
/>

Fully themed overlay Prize Wheel

<ChanceGame
  entityId="info-page-789"
  sdk={sdk}
  template={ChanceGameTemplate.OVERLAY}
  variant={ChanceGameVariant.PRIZE_WHEEL}
  language="en"
  themeOptions={{
    mode: "dark",
    colorSchemes: {
      dark: {
        palette: {
          primary: { plainColor: "#FFD700", primaryContainer: "#FFC107" },
          success: { plainColor: "#4CAF50", softBg: "#042F04" },
        },
        surface: "#1a1a1a",
        textPrimary: "#FAFAFA",
      },
    },
  }}
/>