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 +472 -39
- package/components.d.ts +2 -1
- package/components.d.ts.map +1 -1
- package/components.js +63763 -85705
- package/index.d.ts +1 -1
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
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
|
|
66
|
-
| ---------------------------- |
|
|
67
|
-
| `themeOptions` | `CustomThemeOptions`
|
|
68
|
-
| `showAnswerExplanations` | `boolean`
|
|
69
|
-
| `leads` | `LeadsOptions`
|
|
70
|
-
| `imagePosition` | `"left" \| "right"`
|
|
71
|
-
| `defaultImagePlaceholderUrl` | `string`
|
|
72
|
-
| `userIsLoggedIn` | `boolean`
|
|
73
|
-
| `signInCTA` | `SignInCTADetails`
|
|
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
|
|
416
|
-
| ---------------------------- |
|
|
417
|
-
| `themeOptions` | `CustomThemeOptions`
|
|
418
|
-
| `leads` | `LeadsOptions`
|
|
419
|
-
| `imagePosition` | `"left" \| "right"`
|
|
420
|
-
| `defaultImagePlaceholderUrl` | `string`
|
|
421
|
-
| `userIsLoggedIn` | `boolean`
|
|
422
|
-
| `signInCTA` | `SignInCTADetails`
|
|
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
|
|
904
|
-
| ---------------------------- |
|
|
905
|
-
| `themeOptions` | `CustomThemeOptions`
|
|
906
|
-
| `showAnswerExplanations` | `boolean`
|
|
907
|
-
| `leads` | `LeadsOptions`
|
|
908
|
-
| `imagePosition` | `"left" \| "right"`
|
|
909
|
-
| `defaultImagePlaceholderUrl` | `string`
|
|
910
|
-
| `userIsLoggedIn` | `boolean`
|
|
911
|
-
| `signInCTA` | `SignInCTADetails`
|
|
912
|
-
| `
|
|
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
|
|
1152
|
-
| ---------------------------- |
|
|
1153
|
-
| `themeOptions` | `CustomThemeOptions`
|
|
1154
|
-
| `leads` | `LeadsOptions`
|
|
1155
|
-
| `imagePosition` | `"left" \| "right"`
|
|
1156
|
-
| `defaultImagePlaceholderUrl` | `string`
|
|
1157
|
-
| `userIsLoggedIn` | `boolean`
|
|
1158
|
-
| `signInCTA` | `SignInCTADetails`
|
|
1159
|
-
| `
|
|
1160
|
-
| `
|
|
1161
|
-
| `
|
|
1162
|
-
| `
|
|
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
|
package/components.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"
|
|
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"}
|