fansunited-frontend-components 0.0.25 → 0.0.27

package/README.md

@@ -1604,6 +1604,250 @@ import { WidgetTemplate } from "fansunited-frontend-core";
 />
 ```
 
+### EventGamePlay
+
+Interactive event prediction component for sports and entertainment events. Features flexible fixture types, real-time countdown timers, points system, and comprehensive result tracking with leaderboards.
+
+**Key Features:**
+
+- Multiple outcome types (Boolean, Number, Enum, Free Input)
+- Real-time countdown timer for prediction cutoff
+- Points system with loyalty integration
+- Leaderboard and ranking system
+- Prediction summary and editing capabilities
+- Three responsive templates (Standard, Split, Overlay)
+- Custom theming
+
+#### Required Props
+
+| Prop       | Type                 | Description           |
+| ---------- | -------------------- | --------------------- |
+| `entityId` | `string`             | Event Game identifier |
+| `sdk`      | `FansUnitedSDKModel` | SDK instance          |
+| `template` | `WidgetTemplate`     | Layout template       |
+| `language` | `LanguageType`       | Display language      |
+
+#### Optional Props
+
+| Prop                         | Type                    | Description                                       |
+| ---------------------------- | ----------------------- | ------------------------------------------------- |
+| `themeOptions`               | `CustomThemeOptions`    | Theme configuration                               |
+| `leads`                      | `LeadsOptions`          | Lead collection settings                          |
+| `imagePosition`              | `"left" \| "right"`     | Image position (STANDARD template only)           |
+| `defaultImagePlaceholderUrl` | `string`                | URL for default image placeholder                 |
+| `userIsLoggedIn`             | `boolean`               | Determine if the user is logged in                |
+| `signInCTA`                  | `SignInCTADetails`      | Sign in call to action button configuration       |
+| `additionalCTA`              | `AdditionalCTADetails`  | Additional call to action button configuration    |
+| `showCountdown`              | `boolean`               | Show countdown timer when Event Game is open      |
+| `showPoints`                 | `boolean`               | Show points display for each fixture              |
+| `showPredictionDetails`      | `boolean`               | Show detailed prediction results after completion |
+
+#### Templates
+
+```tsx
+import { WidgetTemplate, EventGamePlayProps } from "fansunited-frontend-core";
+
+// Standard template with optional image positioning
+const standardProps: EventGamePlayProps = {
+  template: WidgetTemplate.STANDARD,
+  imagePosition: "left", // or 'right'
+  // ... other props
+};
+
+// Split template - side-by-side layout
+const splitProps: EventGamePlayProps = {
+  template: WidgetTemplate.SPLIT,
+  // imagePosition not available for non-standard templates
+  // ... other props
+};
+
+// Overlay template - full-screen immersive experience
+const overlayProps: EventGamePlayProps = {
+  template: WidgetTemplate.OVERLAY,
+  // ... other props
+};
+```
+
+#### Supported Outcome Types
+
+EventGamePlay supports flexible prediction types for various event scenarios:
+
+**Boolean Outcomes:**
+
+- `BOOLEAN` - Yes/No predictions (e.g., "Will the total points exceed 225?")
+
+**Number Outcomes:**
+
+- `NUMBER` - Numeric predictions with optional min/max validation (e.g., "How many total points will be scored?")
+
+**Enum Outcomes:**
+
+- `ENUM` - Multiple choice selection from predefined options (e.g., "Who will be the game's leading scorer?")
+
+**Free Input Outcomes:**
+
+- `FREE_INPUT` - Open text input for custom predictions (e.g., "What will be the exact final score?")
+
+#### Game Status States
+
+Event games have 5 distinct status states:
+
+- **`PENDING`** - Not yet open for predictions
+- **`OPEN`** - Ready for predictions (default state)
+- **`LIVE`** - Event has started, no new predictions accepted
+- **`CLOSED`** - Event finished, backend resolving predictions
+- **`SETTLED`** - Predictions resolved, leaderboard available
+
+#### Countdown Timer
+
+Enable countdown timer to show time remaining for predictions:
+
+```tsx
+<EventGamePlay {...otherProps} showCountdown={true} />
+```
+
+The countdown timer:
+
+- Displays when Event Game status is `OPEN`
+- Shows days, hours, minutes, and seconds remaining
+- Uses `predictionsCutoff` from the Event Game data
+- Automatically hides when cutoff time is reached
+
+#### Points System
+
+Enable points display to show potential rewards:
+
+```tsx
+<EventGamePlay {...otherProps} showPoints={true} />
+```
+
+Points system features:
+
+- Shows potential points for each fixture
+- Mobile-friendly tooltip display
+
+#### Prediction Details
+
+Show detailed prediction results and explanations:
+
+```tsx
+<EventGamePlay {...otherProps} showPredictionDetails={true} />
+```
+
+When enabled, users see:
+
+- Tabulated interface showing all predictions
+- Correct vs incorrect prediction highlighting
+- Comparison with correct outcomes
+
+#### Additional CTA Configuration
+
+Add an extra call-to-action button to the event game results screen using the `additionalCTA` prop.
+
+```tsx
+import { AdditionalCTADetails } from "fansunited-frontend-core";
+
+// Custom component
+const additionalCTA: AdditionalCTADetails = {
+  component: <CustomCTAButton />,
+};
+
+// Basic CTA with onClick handler
+const additionalCTA: AdditionalCTADetails = {
+  defaultLabel: "View Leaderboard",
+  onClick: () => {
+    // Handle click logic
+    console.log("Additional CTA clicked");
+  },
+};
+
+// CTA with URL navigation
+const additionalCTA: AdditionalCTADetails = {
+  defaultLabel: "Event Details",
+  url: "https://your-website.com/event-details",
+  target: "_blank", // or "_self"
+};
+
+<EventGamePlay
+  {...otherProps}
+  additionalCTA={additionalCTA}
+/>;
+```
+
+**Priority Order:**
+
+1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
+2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
+3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
+
+**Placement:**
+
+- **Standard variant**: Displayed after prediction summary
+- **Split variant**: Displayed after prediction summary
+- **Overlay variant**: Displayed after prediction summary
+
+#### Examples
+
+##### Basic Event Game
+
+```tsx
+import { EventGamePlay } from "fansunited-frontend-components";
+import { WidgetTemplate } from "fansunited-frontend-core";
+
+<EventGamePlay
+  entityId="event-game-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.STANDARD}
+  language="en"
+/>;
+```
+
+##### Advanced Event Game
+
+```tsx
+<EventGamePlay
+  entityId="event-game-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.OVERLAY}
+  language="en"
+  showCountdown={true}
+  showPoints={true}
+  showPredictionDetails={true}
+  themeOptions={{
+    mode: "dark",
+    colorSchemes: {
+      dark: {
+        textPrimary: "#ffffff",
+        surface: "#1a1a1a",
+      },
+    },
+  }}
+/>
+```
+
+##### Customized Layout
+
+```tsx
+<EventGamePlay
+  entityId="event-game-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.STANDARD}
+  imagePosition="right"
+  language="en"
+  showCountdown={true}
+  showPoints={true}
+  themeOptions={{
+    mode: "light",
+    customFontFamily: {
+      light: {
+        primary: "Inter, sans-serif",
+        secondary: "Roboto, sans-serif",
+      },
+    },
+  }}
+/>
+```
+
 ## Available Components
 
 This package exports the following components:
@@ -1613,6 +1857,7 @@ This package exports the following components:
 - **`CollectLead`** - Lead collection forms with custom fields
 - **`PersonalityQuizPlay`** - Personality assessment with persona matching
 - **`MatchQuizPlay`** - Football match prediction quiz with multiple markets
+- **`EventGamePlay`** - Event prediction game with flexible outcome types
 
 ## Related Packages
 

package/components.d.ts

@@ -1,8 +1,9 @@
-import { ClassicQuizPlayProps, PollVoteProps, CollectLeadProps, PersonalityQuizPlayProps, MatchQuizPlayProps } from 'fansunited-frontend-core';
+import { ClassicQuizPlayProps, PollVoteProps, CollectLeadProps, PersonalityQuizPlayProps, MatchQuizPlayProps, EventGamePlayProps } from 'fansunited-frontend-core';
 
 export declare const ClassicQuizPlay: React.FC<ClassicQuizPlayProps>;
 export declare const PollVote: React.FC<PollVoteProps>;
 export declare const CollectLead: React.FC<CollectLeadProps>;
 export declare const PersonalityQuizPlay: React.FC<PersonalityQuizPlayProps>;
 export declare const MatchQuizPlay: React.FC<MatchQuizPlayProps>;
+export declare const EventGamePlay: React.FC<EventGamePlayProps>;
 //# sourceMappingURL=components.d.ts.map

package/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAIlC,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CACjC,CAAC;AAE3B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAqB,CAAC;AAEnE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAwB,CAAC;AAE5E,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CACrC,CAAC;AAE/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAC/B,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAIlC,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CACjC,CAAC;AAE3B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAqB,CAAC;AAEnE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAwB,CAAC;AAE5E,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CACrC,CAAC;AAE/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAC/B,CAAC;AAEzB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAC/B,CAAC"}