Generic event prediction component for sports and entertainment events. Supports flexible outcome types — boolean, number, enum, free input — with countdown timers, points display, and detailed result breakdowns.
tsx
import { EventGamePlay } from "fansunited-frontend-components";
import { EventGamePlayProps, WidgetTemplate } from "fansunited-frontend-core";
Prop Type Description entityIdstringEvent Game identifier. sdkFansUnitedSDKModelSDK instance. templateWidgetTemplateSTANDARD, SPLIT, or OVERLAY.languageLanguageTypeDisplay language.
Prop Type Description themeOptionsCustomThemeOptionsSee Theming . leadsLeadsOptionsLead collection is not supported on this component; this prop is reserved. imagePosition"left" | "right"STANDARD template only.defaultImagePlaceholderUrlstringFallback image URL. userIsLoggedInbooleanHost auth state. signInCTASignInCTADetailsSee Sign-in CTA . additionalCTAAdditionalCTADetailsSee Additional CTA . showCountdownbooleanShow countdown timer while the game is OPEN. showPointsbooleanShow points display per fixture. showPredictionDetailsbooleanShow detailed prediction results after settling. rulesDisplayRulesDisplaySee Rules Display .
EventGamePlay supports four flexible outcome types per fixture, configured in the Fans United backend:
Type Description Example BOOLEANYes/No prediction "Will the total points exceed 225?" NUMBERNumeric prediction (with optional min/max validation) "How many total points will be scored?" ENUMMultiple-choice selection from predefined options "Who will be the game's leading scorer?" FREE_INPUTOpen text input "What will be the exact final score?"
Status Behavior PENDINGNot yet open for predictions. OPENDefault playable state. LIVEEvent has started — no new predictions accepted. CLOSEDBackend resolving predictions. SETTLEDPredictions resolved; leaderboard available.
tsx
<EventGamePlay
entityId="event-game-123"
sdk={sdk}
template={WidgetTemplate.STANDARD}
language="en"
/>
tsx
<EventGamePlay
entityId="event-game-123"
sdk={sdk}
template={WidgetTemplate.OVERLAY}
language="en"
showCountdown
showPoints
showPredictionDetails
themeOptions={{
mode: "dark",
colorSchemes: {
dark: {
textPrimary: "#ffffff",
surface: "#1a1a1a",
},
},
}}
/>