fansunited-frontend-components 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -62,15 +62,16 @@ Interactive quiz component with multiple templates and customization options.
62
62
 
63
63
  #### Optional Props
64
64
 
65
- | Prop | Type | Description |
66
- | ---------------------------- | -------------------- | ------------------------------------------- |
67
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
68
- | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
69
- | `leads` | `LeadsOptions` | Lead collection settings |
70
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
71
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
72
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
73
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
65
+ | Prop | Type | Description |
66
+ | ---------------------------- | ----------------------- | ------------------------------------------- |
67
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
68
+ | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
69
+ | `leads` | `LeadsOptions` | Lead collection settings |
70
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
71
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
72
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
73
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
74
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
74
75
 
75
76
  #### Templates
76
77
 
@@ -323,6 +324,52 @@ const signInCTA: SignInCTADetails = {
323
324
 
324
325
  - When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
325
326
 
327
+ #### Additional CTA Configuration
328
+
329
+ Add an extra call-to-action button to the quiz completion screen using the `additionalCTA` prop.
330
+
331
+ ```tsx
332
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
333
+
334
+ // Custom component
335
+ const additionalCTA: AdditionalCTADetails = {
336
+ component: <CustomCTAButton />,
337
+ };
338
+
339
+ // Basic CTA with onClick handler
340
+ const additionalCTA: AdditionalCTADetails = {
341
+ defaultLabel: "See More",
342
+ onClick: () => {
343
+ // Handle click logic
344
+ console.log("Additional CTA clicked");
345
+ },
346
+ };
347
+
348
+ // CTA with URL navigation
349
+ const additionalCTA: AdditionalCTADetails = {
350
+ defaultLabel: "Visit Website",
351
+ url: "https://your-website.com",
352
+ target: "_blank", // or "_self"
353
+ };
354
+
355
+ <ClassicQuizPlay
356
+ {...otherProps}
357
+ additionalCTA={additionalCTA}
358
+ />;
359
+ ```
360
+
361
+ **Priority Order:**
362
+
363
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
364
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
365
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
366
+
367
+ **Placement:**
368
+
369
+ - **Standard variant**: Displayed after "Play Again" and "Share Result" buttons
370
+ - **Split variant**: Displayed after "Play Again" button in the thank you container
371
+ - **Overlay variant**: Displayed after "Play Again" and "Share Result" buttons
372
+
326
373
  #### TypeScript Support
327
374
 
328
375
  This package is built with TypeScript and provides full type definitions. Import types from `fansunited-frontend-core`:
@@ -412,14 +459,15 @@ Interactive poll voting component with real-time results, multiple choice suppor
412
459
 
413
460
  #### Optional Props
414
461
 
415
- | Prop | Type | Description |
416
- | ---------------------------- | -------------------- | ------------------------------------------- |
417
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
418
- | `leads` | `LeadsOptions` | Lead collection settings |
419
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
420
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
421
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
422
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
462
+ | Prop | Type | Description |
463
+ | ---------------------------- | ----------------------- | ------------------------------------------- |
464
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
465
+ | `leads` | `LeadsOptions` | Lead collection settings |
466
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
467
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
468
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
469
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
470
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
423
471
 
424
472
  #### Templates
425
473
 
@@ -489,6 +537,52 @@ const signInCTA: SignInCTADetails = {
489
537
 
490
538
  - When `userIsLoggedIn` is `false` and the poll requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the poll
491
539
 
540
+ #### Additional CTA Configuration
541
+
542
+ Add an extra call-to-action button to the poll results screen using the `additionalCTA` prop.
543
+
544
+ ```tsx
545
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
546
+
547
+ // Custom component
548
+ const additionalCTA: AdditionalCTADetails = {
549
+ component: <CustomCTAButton />,
550
+ };
551
+
552
+ // Basic CTA with onClick handler
553
+ const additionalCTA: AdditionalCTADetails = {
554
+ defaultLabel: "Learn More",
555
+ onClick: () => {
556
+ // Handle click logic
557
+ console.log("Additional CTA clicked");
558
+ },
559
+ };
560
+
561
+ // CTA with URL navigation
562
+ const additionalCTA: AdditionalCTADetails = {
563
+ defaultLabel: "View Details",
564
+ url: "https://your-website.com/poll-details",
565
+ target: "_blank", // or "_self"
566
+ };
567
+
568
+ <PollVote
569
+ {...otherProps}
570
+ additionalCTA={additionalCTA}
571
+ />;
572
+ ```
573
+
574
+ **Priority Order:**
575
+
576
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
577
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
578
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
579
+
580
+ **Placement:**
581
+
582
+ - **Standard variant**: Displayed before "Vote Again" button
583
+ - **Split variant**: Displayed in the same container as "Vote Again" button
584
+ - **Overlay variant**: Displayed after "Vote Again" button
585
+
492
586
  #### Lead Collection
493
587
 
494
588
  Capture user information before or after voting:
@@ -900,16 +994,17 @@ Interactive personality quiz component that matches users with personas based on
900
994
 
901
995
  #### Optional Props
902
996
 
903
- | Prop | Type | Description |
904
- | ---------------------------- | -------------------- | ------------------------------------------- |
905
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
906
- | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
907
- | `leads` | `LeadsOptions` | Lead collection settings |
908
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
909
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
910
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
911
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
912
- | `optionsLayout` | `OptionsLayout` | Layout for answer options |
997
+ | Prop | Type | Description |
998
+ | ---------------------------- | ----------------------- | ------------------------------------------- |
999
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1000
+ | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
1001
+ | `leads` | `LeadsOptions` | Lead collection settings |
1002
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1003
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1004
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1005
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1006
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
1007
+ | `optionsLayout` | `OptionsLayout` | Layout for answer options |
913
1008
 
914
1009
  #### Templates
915
1010
 
@@ -1012,6 +1107,52 @@ const signInCTA: SignInCTADetails = {
1012
1107
 
1013
1108
  - When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
1014
1109
 
1110
+ #### Additional CTA Configuration
1111
+
1112
+ Add an extra call-to-action button to the quiz results screen using the `additionalCTA` prop.
1113
+
1114
+ ```tsx
1115
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
1116
+
1117
+ // Custom component
1118
+ const additionalCTA: AdditionalCTADetails = {
1119
+ component: <CustomCTAButton />,
1120
+ };
1121
+
1122
+ // Basic CTA with onClick handler
1123
+ const additionalCTA: AdditionalCTADetails = {
1124
+ defaultLabel: "Explore More",
1125
+ onClick: () => {
1126
+ // Handle click logic
1127
+ console.log("Additional CTA clicked");
1128
+ },
1129
+ };
1130
+
1131
+ // CTA with URL navigation
1132
+ const additionalCTA: AdditionalCTADetails = {
1133
+ defaultLabel: "Discover Your Type",
1134
+ url: "https://your-website.com/personality-types",
1135
+ target: "_blank", // or "_self"
1136
+ };
1137
+
1138
+ <PersonalityQuizPlay
1139
+ {...otherProps}
1140
+ additionalCTA={additionalCTA}
1141
+ />;
1142
+ ```
1143
+
1144
+ **Priority Order:**
1145
+
1146
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
1147
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
1148
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
1149
+
1150
+ **Placement:**
1151
+
1152
+ - **Standard variant**: Displayed before "Play Again" button
1153
+ - **Split variant**: Displayed in the thank you container after "Play Again" button
1154
+ - **Overlay variant**: Displayed after "Play Again" button if available
1155
+
1015
1156
  #### Lead Collection
1016
1157
 
1017
1158
  Capture user information before or after taking the personality quiz:
@@ -1148,18 +1289,19 @@ Interactive match prediction quiz component that allows users to make prediction
1148
1289
 
1149
1290
  #### Optional Props
1150
1291
 
1151
- | Prop | Type | Description |
1152
- | ---------------------------- | -------------------- | ------------------------------------------------- |
1153
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1154
- | `leads` | `LeadsOptions` | Lead collection settings |
1155
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1156
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1157
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1158
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1159
- | `showCountdown` | `boolean` | Show countdown timer when Match Quiz is open |
1160
- | `showTeamLabels` | `boolean` | Show team name labels in fixture components |
1161
- | `showPoints` | `boolean` | Show points display for each fixture |
1162
- | `showPredictionDetails` | `boolean` | Show detailed prediction results after completion |
1292
+ | Prop | Type | Description |
1293
+ | ---------------------------- | ----------------------- | ------------------------------------------------- |
1294
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1295
+ | `leads` | `LeadsOptions` | Lead collection settings |
1296
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1297
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1298
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1299
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1300
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
1301
+ | `showCountdown` | `boolean` | Show countdown timer when Match Quiz is open |
1302
+ | `showTeamLabels` | `boolean` | Show team name labels in fixture components |
1303
+ | `showPoints` | `boolean` | Show points display for each fixture |
1304
+ | `showPredictionDetails` | `boolean` | Show detailed prediction results after completion |
1163
1305
 
1164
1306
  #### Templates
1165
1307
 
@@ -1320,6 +1462,52 @@ const signInCTA: SignInCTADetails = {
1320
1462
 
1321
1463
  - When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
1322
1464
 
1465
+ #### Additional CTA Configuration
1466
+
1467
+ Add an extra call-to-action button to the match quiz results screen using the `additionalCTA` prop.
1468
+
1469
+ ```tsx
1470
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
1471
+
1472
+ // Custom component
1473
+ const additionalCTA: AdditionalCTADetails = {
1474
+ component: <CustomCTAButton />,
1475
+ };
1476
+
1477
+ // Basic CTA with onClick handler
1478
+ const additionalCTA: AdditionalCTADetails = {
1479
+ defaultLabel: "View Leaderboard",
1480
+ onClick: () => {
1481
+ // Handle click logic
1482
+ console.log("Additional CTA clicked");
1483
+ },
1484
+ };
1485
+
1486
+ // CTA with URL navigation
1487
+ const additionalCTA: AdditionalCTADetails = {
1488
+ defaultLabel: "Match Details",
1489
+ url: "https://your-website.com/match-details",
1490
+ target: "_blank", // or "_self"
1491
+ };
1492
+
1493
+ <MatchQuizPlay
1494
+ {...otherProps}
1495
+ additionalCTA={additionalCTA}
1496
+ />;
1497
+ ```
1498
+
1499
+ **Priority Order:**
1500
+
1501
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
1502
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
1503
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
1504
+
1505
+ **Placement:**
1506
+
1507
+ - **Standard variant**: Displayed on the same line as the branding logo
1508
+ - **Split variant**: Displayed centered after main content
1509
+ - **Overlay variant**: Displayed on the same line as the branding logo
1510
+
1323
1511
  #### Lead Collection
1324
1512
 
1325
1513
  Capture user information before or after making predictions:
@@ -1416,6 +1604,250 @@ import { WidgetTemplate } from "fansunited-frontend-core";
1416
1604
  />
1417
1605
  ```
1418
1606
 
1607
+ ### EventGamePlay
1608
+
1609
+ 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.
1610
+
1611
+ **Key Features:**
1612
+
1613
+ - Multiple outcome types (Boolean, Number, Enum, Free Input)
1614
+ - Real-time countdown timer for prediction cutoff
1615
+ - Points system with loyalty integration
1616
+ - Leaderboard and ranking system
1617
+ - Prediction summary and editing capabilities
1618
+ - Three responsive templates (Standard, Split, Overlay)
1619
+ - Custom theming
1620
+
1621
+ #### Required Props
1622
+
1623
+ | Prop | Type | Description |
1624
+ | ---------- | -------------------- | --------------------- |
1625
+ | `entityId` | `string` | Event Game identifier |
1626
+ | `sdk` | `FansUnitedSDKModel` | SDK instance |
1627
+ | `template` | `WidgetTemplate` | Layout template |
1628
+ | `language` | `LanguageType` | Display language |
1629
+
1630
+ #### Optional Props
1631
+
1632
+ | Prop | Type | Description |
1633
+ | ---------------------------- | ----------------------- | ------------------------------------------------- |
1634
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1635
+ | `leads` | `LeadsOptions` | Lead collection settings |
1636
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1637
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1638
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1639
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1640
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
1641
+ | `showCountdown` | `boolean` | Show countdown timer when Event Game is open |
1642
+ | `showPoints` | `boolean` | Show points display for each fixture |
1643
+ | `showPredictionDetails` | `boolean` | Show detailed prediction results after completion |
1644
+
1645
+ #### Templates
1646
+
1647
+ ```tsx
1648
+ import { WidgetTemplate, EventGamePlayProps } from "fansunited-frontend-core";
1649
+
1650
+ // Standard template with optional image positioning
1651
+ const standardProps: EventGamePlayProps = {
1652
+ template: WidgetTemplate.STANDARD,
1653
+ imagePosition: "left", // or 'right'
1654
+ // ... other props
1655
+ };
1656
+
1657
+ // Split template - side-by-side layout
1658
+ const splitProps: EventGamePlayProps = {
1659
+ template: WidgetTemplate.SPLIT,
1660
+ // imagePosition not available for non-standard templates
1661
+ // ... other props
1662
+ };
1663
+
1664
+ // Overlay template - full-screen immersive experience
1665
+ const overlayProps: EventGamePlayProps = {
1666
+ template: WidgetTemplate.OVERLAY,
1667
+ // ... other props
1668
+ };
1669
+ ```
1670
+
1671
+ #### Supported Outcome Types
1672
+
1673
+ EventGamePlay supports flexible prediction types for various event scenarios:
1674
+
1675
+ **Boolean Outcomes:**
1676
+
1677
+ - `BOOLEAN` - Yes/No predictions (e.g., "Will the total points exceed 225?")
1678
+
1679
+ **Number Outcomes:**
1680
+
1681
+ - `NUMBER` - Numeric predictions with optional min/max validation (e.g., "How many total points will be scored?")
1682
+
1683
+ **Enum Outcomes:**
1684
+
1685
+ - `ENUM` - Multiple choice selection from predefined options (e.g., "Who will be the game's leading scorer?")
1686
+
1687
+ **Free Input Outcomes:**
1688
+
1689
+ - `FREE_INPUT` - Open text input for custom predictions (e.g., "What will be the exact final score?")
1690
+
1691
+ #### Game Status States
1692
+
1693
+ Event games have 5 distinct status states:
1694
+
1695
+ - **`PENDING`** - Not yet open for predictions
1696
+ - **`OPEN`** - Ready for predictions (default state)
1697
+ - **`LIVE`** - Event has started, no new predictions accepted
1698
+ - **`CLOSED`** - Event finished, backend resolving predictions
1699
+ - **`SETTLED`** - Predictions resolved, leaderboard available
1700
+
1701
+ #### Countdown Timer
1702
+
1703
+ Enable countdown timer to show time remaining for predictions:
1704
+
1705
+ ```tsx
1706
+ <EventGamePlay {...otherProps} showCountdown={true} />
1707
+ ```
1708
+
1709
+ The countdown timer:
1710
+
1711
+ - Displays when Event Game status is `OPEN`
1712
+ - Shows days, hours, minutes, and seconds remaining
1713
+ - Uses `predictionsCutoff` from the Event Game data
1714
+ - Automatically hides when cutoff time is reached
1715
+
1716
+ #### Points System
1717
+
1718
+ Enable points display to show potential rewards:
1719
+
1720
+ ```tsx
1721
+ <EventGamePlay {...otherProps} showPoints={true} />
1722
+ ```
1723
+
1724
+ Points system features:
1725
+
1726
+ - Shows potential points for each fixture
1727
+ - Mobile-friendly tooltip display
1728
+
1729
+ #### Prediction Details
1730
+
1731
+ Show detailed prediction results and explanations:
1732
+
1733
+ ```tsx
1734
+ <EventGamePlay {...otherProps} showPredictionDetails={true} />
1735
+ ```
1736
+
1737
+ When enabled, users see:
1738
+
1739
+ - Tabulated interface showing all predictions
1740
+ - Correct vs incorrect prediction highlighting
1741
+ - Comparison with correct outcomes
1742
+
1743
+ #### Additional CTA Configuration
1744
+
1745
+ Add an extra call-to-action button to the event game results screen using the `additionalCTA` prop.
1746
+
1747
+ ```tsx
1748
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
1749
+
1750
+ // Custom component
1751
+ const additionalCTA: AdditionalCTADetails = {
1752
+ component: <CustomCTAButton />,
1753
+ };
1754
+
1755
+ // Basic CTA with onClick handler
1756
+ const additionalCTA: AdditionalCTADetails = {
1757
+ defaultLabel: "View Leaderboard",
1758
+ onClick: () => {
1759
+ // Handle click logic
1760
+ console.log("Additional CTA clicked");
1761
+ },
1762
+ };
1763
+
1764
+ // CTA with URL navigation
1765
+ const additionalCTA: AdditionalCTADetails = {
1766
+ defaultLabel: "Event Details",
1767
+ url: "https://your-website.com/event-details",
1768
+ target: "_blank", // or "_self"
1769
+ };
1770
+
1771
+ <EventGamePlay
1772
+ {...otherProps}
1773
+ additionalCTA={additionalCTA}
1774
+ />;
1775
+ ```
1776
+
1777
+ **Priority Order:**
1778
+
1779
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
1780
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
1781
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
1782
+
1783
+ **Placement:**
1784
+
1785
+ - **Standard variant**: Displayed after prediction summary
1786
+ - **Split variant**: Displayed after prediction summary
1787
+ - **Overlay variant**: Displayed after prediction summary
1788
+
1789
+ #### Examples
1790
+
1791
+ ##### Basic Event Game
1792
+
1793
+ ```tsx
1794
+ import { EventGamePlay } from "fansunited-frontend-components";
1795
+ import { WidgetTemplate } from "fansunited-frontend-core";
1796
+
1797
+ <EventGamePlay
1798
+ entityId="event-game-123"
1799
+ sdk={sdkInstance}
1800
+ template={WidgetTemplate.STANDARD}
1801
+ language="en"
1802
+ />;
1803
+ ```
1804
+
1805
+ ##### Advanced Event Game
1806
+
1807
+ ```tsx
1808
+ <EventGamePlay
1809
+ entityId="event-game-123"
1810
+ sdk={sdkInstance}
1811
+ template={WidgetTemplate.OVERLAY}
1812
+ language="en"
1813
+ showCountdown={true}
1814
+ showPoints={true}
1815
+ showPredictionDetails={true}
1816
+ themeOptions={{
1817
+ mode: "dark",
1818
+ colorSchemes: {
1819
+ dark: {
1820
+ textPrimary: "#ffffff",
1821
+ surface: "#1a1a1a",
1822
+ },
1823
+ },
1824
+ }}
1825
+ />
1826
+ ```
1827
+
1828
+ ##### Customized Layout
1829
+
1830
+ ```tsx
1831
+ <EventGamePlay
1832
+ entityId="event-game-123"
1833
+ sdk={sdkInstance}
1834
+ template={WidgetTemplate.STANDARD}
1835
+ imagePosition="right"
1836
+ language="en"
1837
+ showCountdown={true}
1838
+ showPoints={true}
1839
+ themeOptions={{
1840
+ mode: "light",
1841
+ customFontFamily: {
1842
+ light: {
1843
+ primary: "Inter, sans-serif",
1844
+ secondary: "Roboto, sans-serif",
1845
+ },
1846
+ },
1847
+ }}
1848
+ />
1849
+ ```
1850
+
1419
1851
  ## Available Components
1420
1852
 
1421
1853
  This package exports the following components:
@@ -1425,6 +1857,7 @@ This package exports the following components:
1425
1857
  - **`CollectLead`** - Lead collection forms with custom fields
1426
1858
  - **`PersonalityQuizPlay`** - Personality assessment with persona matching
1427
1859
  - **`MatchQuizPlay`** - Football match prediction quiz with multiple markets
1860
+ - **`EventGamePlay`** - Event prediction game with flexible outcome types
1428
1861
 
1429
1862
  ## Related Packages
1430
1863
 
package/components.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import { ClassicQuizPlayProps, PollVoteProps, CollectLeadProps, PersonalityQuizPlayProps, MatchQuizPlayProps } from 'fansunited-frontend-core';
1
+ import { ClassicQuizPlayProps, PollVoteProps, CollectLeadProps, PersonalityQuizPlayProps, MatchQuizPlayProps, EventGamePlayProps } from 'fansunited-frontend-core';
2
2
 
3
3
  export declare const ClassicQuizPlay: React.FC<ClassicQuizPlayProps>;
4
4
  export declare const PollVote: React.FC<PollVoteProps>;
5
5
  export declare const CollectLead: React.FC<CollectLeadProps>;
6
6
  export declare const PersonalityQuizPlay: React.FC<PersonalityQuizPlayProps>;
7
7
  export declare const MatchQuizPlay: React.FC<MatchQuizPlayProps>;
8
+ export declare const EventGamePlay: React.FC<EventGamePlayProps>;
8
9
  //# sourceMappingURL=components.d.ts.map
@@ -1 +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"}
1
+ {"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"}