Match Quiz management
Welcome to Fans United Match Quiz Management Widget. The widget allows staff members with sufficient permissions to create new Match Quiz games/editions. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create games. Match Quiz is a game where users must predict a specified number of fixtures for one match for a prize. With successful installation, you can create and edit a Match Quiz game or see the report about specific game.
Installation and usage
The easiest way to use Fans United Match Quiz Widget is to install it from npm as follows:
npm install fansunited-widget-match-quiz
or:
yarn add fansunited-widget-match-quiz
Here is an example how you can integrate Fans United Match Quiz Management Widget:
import 'fansunited-widget-match-quiz/style.css';
import { MatchQuizManager } from 'fansunited-widget-match-quiz';
const App = () => {
return <MatchQuizManager fansUnitedApiKey={'your-api-key'} fansUnitedClientId={'your-client-id'}/>
}
Notes
-
The widget is bundled as a React component and its usage is as simple as the above example
-
Don't worry about your project's CSS. The widget's styling is done with Tailwind CSS and all classes are prefixed to avoid collisions with your existing CSS. This means that the widget's CSS will NOT affect yours. One important thing is that you need to import
style.css
file from package folder:
import 'fansunited-widget-match-quiz/style.css';
N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-match-quiz/style.css
there as well
- Easy translation in every language. For more information check our Translation heading.
Props
type MatchQuizManagerProps = {
fansUnitedApiKey: string;
fansUnitedClientId: string;
fansUnitedLanguage?: string;
labels?: LabelsModel;
};
Fans United Match Quiz Management Widget depends on Fans United JS SDK and Fans United Client API. Thats why fansUnitedApiKey
and fansUnitedClientId
are required. They will be provided to you from Fans United team. For other optional props here is some information:
-
fansUnitedLanguage
- for our sports APIs FansUnited platform supports different languages. For now they are Bulgarian (bg), English (en) and Romanian (ro). If no value given it will be set to English (en). -
labels
- you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in English so if no value is given, the widget will be translated in English.
Translation
You can easily translate Fans United Match Quiz Management Widget in your language! You just need to pass an object to labels
prop with concrete keys and values and that's it! Here's an example how you can do it:
import 'fansunited-widget-match-quiz/style.css';
import { MatchQuizManager } from 'fansunited-widget-match-quiz';
const labels = {
userNotFound: 'User not found. Please try again.',
clientConfigErrorMessage: "There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff.",
featureDisabled: 'Feature disabled!',
noPermissionMessage: 'You have no permission for this feature!',
tryAgainButton: 'Try again',
noGamesFound: "No games were found. You can create a game by clicking the button 'Create game'",
createEdition: 'Create game',
name: 'Name',
status: 'Status',
creationDate: 'Created at',
acceptUntil: 'Accept Until',
actions: 'Actions',
upcoming: 'Upcoming',
inProgress: 'In progress',
finished: 'Finished',
pending: 'Pending',
settled: 'Settled',
live: 'Live',
open: 'Open',
canceled: 'Canceled',
closed: 'Closed',
edit: 'Edit',
report: 'Report',
timeFormat: 'DD-MM-YYYY HH:mm',
previous: 'Previous',
next: 'Next',
namePlaceholder: 'Please provide a name for your Match Quiz edition.',
description: 'Description',
descriptionPlaceholder: 'Please describe your game.',
matchSelection: 'Match selection',
matchSelectionDescription: 'Type a team and select one of the next matches. When you choose a match the defaults market will be displayed.',
selectTeamPlaceholder: 'Type your team...',
selectTeamNoTeamFound: 'No Team Found',
selectTeamNoMatchesFound: 'No matches were found',
atleastThreeCharsMessage: 'Team input must be at least 3 characters',
marketSelection: 'Market Selection',
chosenMarkets: 'Chosen markets',
otherMarkets: 'Other markets',
marketSelectionCreateGameDescription: 'Drag and drop what market users can predict for the specified match. The default markets are automatically dropped in chosen markets.',
marketSelectionEditGameDescription: 'You can add, remove or change loaded markets.',
markets: 'Markets:',
marketFt1x2: 'Full time',
marketHt1x2: 'Half time',
marketBothTeamsScore: 'Both teams score',
marketDoubleChance: 'Double chance',
marketHtFt: 'Half time/Full time',
marketRedCardMatch: 'Red card in match',
marketPenaltyMatch: 'Pentalty in match',
marketCornersMatch: 'Corners in match',
marketCorrectScore: 'Correct score',
marketPlayerScore: 'Player score',
marketPlayerYellowCard: 'Yellow card for player',
marketPlayerRedCard: 'Red card for player',
marketPlayerScoreFirstGoal: 'Player to score first goal',
marketPlayerScoreTwice: 'Player to score twice',
marketPlayerScoreHattrick: 'Player to score hattrick',
marketOverZeroGoals: 'Over zero goals',
marketOverOneGoals: 'Over one goals',
marketOverTwoGoals: 'Over two goals',
marketOverThreeGoals: 'Over three goals',
marketOverFourGoals: 'Over four goals',
marketOverFiveGoals: 'Over five goals',
marketOverSixGoals: 'Over six goals',
marketOverSixCorners: 'Over six corners',
marketOverSevenCorners: 'Over seven corners',
marketOverEightCorners: 'Over eight corners',
marketOverNineCorners: 'Over nine corners',
marketOverTenCorners: 'Over ten corners',
marketOverElevenCorners: 'Over eleven corners',
marketOverTwelveCorners: 'Over twelve corners',
marketOverThirteenCorners: 'Over thirteen corners',
gameStatus: 'Game status',
createGameStatusDescription: 'The provided choices are PENDING and OPEN. Keep in mind that if you choose OPEN you can NOT edit your game.',
editGameStatusDescription: 'The provided choices are PENDING, OPEN and CANCELED. Keep in mind that if you choose OPEN you can NOT edit your game anymore and if you choose CANCELED the game will be canceled.',
rules: 'Rules',
rulesDescription: 'Describe your rules for participating in the game. You can type plain text or html tags.',
flags: 'Flags',
flagsPlaceholder: 'Type your flag and hit enter',
repeatedFlagMessage: 'You have entered a repeated flag. Please enter a different one.',
cutoffTime: 'Cutoff time',
createCutoffTimeDescription: 'Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played.',
editCutoffTimeDescription: "Predictions will be accepted until this time. You need to provide a cutoff time to be able to edit the game. Keep in mind that cutoff time should be ATLEAST 15 minutes before match's kickoff time.",
editGame: 'Edit game',
back: 'Back',
reportFor: 'Report for',
position: 'Position',
points: 'Points',
predictions: 'Predictions',
gameNotSettledMessage: 'Game is not settled and there is no leaderboard yet.',
clear: 'Clear',
loadingMessage: 'Loading...',
createGameMessage: 'You have successfully created a game.',
editGameMessage: 'You have successfully edited a game.',
clearCutoffMessage: 'You have cleared your cutoff time.',
selectMatchErrorMessage: 'You need to select a match to be able to manage a game.',
chooseGameCutoffTimeMessage: 'You need to choose a date to edit the game.',
minimumMarketMessage: 'You need to choose at least ONE market to be able to manage a game.',
invalidCutoffTimeMessage: 'The provided match starts before cutoff time. Please choose cutoff time that is before the chosen match kickoff time.',
createGameErrorMessage: 'There was a problem with creating the game. Please try again.',
editGameErrorMessage: 'There was a problem with editing the game. Please try again.',
leaderboardErrorMessage: 'There was a problem with displaying leaderboard. Please try again.',
gamePredictionsErrorMessage: 'There was a problem with getting predictions for users. Please try again.',
};
const App = () => {
return (
<MatchQuizManager fansUnitedApiKey={'your-api-key'} fansUnitedClientId={'your-client-id'} labels={labels}
/>
);
}
Here is all information about LabelsModel
:
Key | Description | Default Value |
---|---|---|
userNotFound | On login screen when client gives invalid information about email or password | User not found. Please try again. |
clientConfigErrorMessage | react-toastify error message when client is providing invalid value to fansUnitedApiKey or fansUnitedClientId prop | There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff. |
featureDisabled | Title for NoPermissionModal. This Modal is displayed when client does NOT have permission to use Fans United Match Quiz Widget | Feature disabled! |
noPermissionMessage | Description for NoPermissionModal. This Modal is displayed when client does NOT have permission to use Fans United Match Quiz Widget | You have no permission for this feature! |
tryAgainButton | Button for NoPermissionModal. This Modal is displayed when client does NOT have permission to use Fans United Match Quiz Widget. When clicking the button, client will be redirected to Login screen | Try again |
noGamesFound | When there are no created games for specific client, this message will appear on screen. | No games were found. You can create a game by clicking the button 'Create game'. |
createEdition | Used as label on create button and as a title on screen when creating a game. | Create game |
name | Label for name of a game or participant | Name |
status | Displayed in header of list of games. Status of a game | Status |
creationDate | Displayed in header of list of games. Date of created game in same format as given for timeFormat prop | Creation Date |
acceptUntil | Displayed in header of list of games. Date of predictions cutoff in same format as given for timeFormat prop | Accept until |
actions | Displayed in header of list of games. Two icon buttons with different actions. | Actions |
upcoming | Status of match for game | Upcoming |
inProgress | Status of match for game | In progress |
finished | Status of match for game | Finished |
pending | Status for specific game. | Pending |
settled | Status for specific game. | Settled |
live | Status for specific game. | Live |
open | Status for specific game. | Open |
canceled | Status for specific game. | Canceled |
closed | Status for specific game. | Closed |
edit | Tooltip for icon button edit. | Edit |
report | Tooltip for icon button report. | Report |
timeFormat | Timeformat for displaying dates. Widgets uses dayjs as a date dependency. | DD.MM.YYYY, HH:mm |
markets | Markets title. It will appear on each game below the match name. | Markets: |
previous | Label for pagination button. | Previous |
next | Label for pagination button. | Next |
namePlaceholder | Placeholder/desciption about input field for game name when creating/editing a game. | Please provide a name for your Match Quiz edition. |
description | Title for desciption input field when creating/editing a game. | Description |
descriptionPlaceholder | Placeholder/desciption about input field for game description when creating/editing a game. | Please describe your game. |
matchSelection | Title for match selection section | Match selection |
matchSelectionDescription | Description about match selection section | Type a team and select one of the next matches. When you choose a match the defaults market will be displayed. |
selectTeamPlaceholder | Placeholder for option search input field | Type your team... |
selectTeamNoTeamFound | When you insert a name of a team that does not support your competition scope given by your features in Client API | No Team Found |
atleastThreeCharsMessage | Displayed message when you start to type a name of a team. | Team input must be at least 3 characters |
selectTeamNoMatchesFound | When you choose a team from your search result, but it next 5 matches does not support your competition scope given by your features in Client API | No matches were found |
marketSelection | Title for market selection section. | Market Selection |
marketSelectionCreateGameDescription | Description about market selection when client creates a game. | Drag and drop what market users can predict for the specified match. The default markets are automatically dropped in chosen markets. |
marketSelectionEditGameDescription | Description about market selection when client edits a game. | You can add, remove or change loaded markets. |
chosenMarkets | Title for default (or chosen) markets column when creating (or editing) a game. | Chosen markets |
otherMarkets | Title for other (not chosen) markets column when creating (or editing) a game. | Other markets |
marketFt1x2 | Label for market full Time | Full time |
marketHt1x2 | Label for market half Time | Half time |
marketBothTeamsScore | Label for market both teams score | Both teams score |
marketDoubleChance | Label for market double chance | Double chance |
marketHtFt | Label for market half time/full time | Half time/Full time |
marketRedCardMatch | Label for market read card match | Red card in match |
marketPenaltyMatch | Label for market penalty match | Pentalty in match |
marketCornersMatch | Label for market corners match | Corners in match |
marketCorrectScore | Label for market correct score | Correct score |
marketPlayerScore | Label for market player score | Player score |
marketPlayerYellowCard | Label for market player yellow card | Yellow card for player |
marketPlayerRedCard | Label for market player red card | Red card for player |
marketPlayerScoreFirstGoal | Label for market player score first goal | Player to score first goal |
marketPlayerScoreTwice | Label for market player score twice | Player to score twice |
marketPlayerScoreHattrick | Label for market player score hattrick | Player to score hattrick |
marketOverZeroGoals | Label for market over zero goals | Over zero goals |
marketOverOneGoals | Label for market over one goals | Over one goals |
marketOverTwoGoals | Label for market over two goals | Over two goals |
marketOverThreeGoals | Label for market over three goals | Over three goals |
marketOverFourGoals | Label for market over four goals | Over four goals |
marketOverFiveGoals | Label for market over five goals | Over five goals |
marketOverSixGoals | Label for market over six goals | Over six goals |
marketOverSixCorners | Label for market over six corners | Over six corners |
marketOverSevenCorners | Label for market over seven corners | Over seven corners |
marketOverEightCorners | Label for market over eight corners | Over eight corners |
marketOverNineCorners | Label for market over nine corners | Over nine corners |
marketOverTenCorners | Label for market over ten corners | Over ten corners |
marketOverElevenCorners | Label for market over eleven corners | Over eleven corners |
marketOverTwelveCorners | Label for market over twelve corners | Over twelve corners |
marketOverThirteenCorners | Label for market over thirteen corners | Over thirteen corners |
gameStatus | Title for choosing a game status. | Game status |
createGameStatusDescription | Description about choosing a game status.This will be displayed when you CREATE a game! | The provided choices are PENDING and OPEN. Keep in mind that if you choose OPEN you can NOT edit your game. |
editGameStatusDescription | Description about choosing a game status.This will be displayed when you EDIT a game! | The provided choices are PENDING, OPEN and CANCELED. Keep in mind that if you choose OPEN you can NOT edit your game anymore and if you choose CANCELED the game will be canceled. |
rules | Title for choosing game rules. | Rules |
rulesDescription | Description for choosing game rules. | Describe your rules for participating in the game. You can type plain text or html tags. |
flags | Title for choosing game flags. | Flags |
flagsPlaceholder | Placeholder on input field for game flags | Type your flag and hit enter |
repeatedFlagMessage | react-toastify warning message when client submits same flag. | You have entered a repeated flag. Please enter a different one. |
cutoffTime | Title for choosing a cutoff time for game. | Cutoff time |
createCutoffTimeDescription | Description about choosing a cutoff time for creating a game. | Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played. |
editCutoffTimeDescription | Description about choosing a cutoff time for editing a game. | Predictions will be accepted until this time. You need to provide a cutoff time to be able to edit the game. Keep in mind that cutoff time should be ATLEAST 15 minutes before match`s kickoff time. |
editGame | Used as label on create button and as a title on screen when editing a game. | Edit game |
back | Tooltip content for back button (left arrow positioned on top-right corner). You can go back when you create/edit a game or when you visit report screen. | Back |
reportFor | Label positioned on top left side of the screen. Part of Report screen title. | Report for |
position | Label in header's report table | Position |
points | Label in header's report table | Points |
predictions | Label in header's report table | Predictions |
gameNotSettledMessage | Model message when client clicks on report button for game that is NOT settled. | Game is not settled and there is no leaderboard yet. |
clear | Tooltip for clearing button (circled X). Button clears current choosen game cuttof time. | Clear |
loadingMessage | When creating/editing a game or searching of teams displaying a react-toastify loading message. | Loading... |
createGameMessage | When creating a game displaying a react-toastify successful message for created game. | You have successfully created a game. |
editGameMessage | When editing a game displaying a react-toastify successful message for edited game. | You have successfully edited a game. |
clearCutoffMessage | When clearing a cutoff time for a game displaying a react-toastify informational message for cleared input field about cutoff time for game | You have cleared your cutoff time. |
selectMatchErrorMessage | react-toastify warning message when client tries to create or edit a game without selecting a match | You need to select a match to be able to manage a game. |
chooseGameCutoffTimeMessage | react-toastify warning message when client tries to edit a game without choosing a prediction cutoff time. | You need to choose a date to edit the game. |
minimumMarketMessage | react-toastify warning message when client tries to create or edit a game without choosing any markets. | You need to choose at least ONE market to be able to manage a game. |
invalidCutoffTimeMessage | When creating/editing a game displaying a react-toastify warning message about invalid cutoff time for game. | The provided match starts before cutoff time. Please choose cutoff time that is before the chosen match kickoff time. |
createGameErrorMessage | When creating a game displaying a react-toastify error message. | There was a problem with creating the game. Please try again. |
editGameErrorMessage | When editing a game displaying a react-toastify error message. | There was a problem with editing the game. Please try again. |
leaderboardErrorMessage | react-toastify error message when client goes to report screen and widget fails to load the leaderboard. | There was a problem with displaying leaderboard. Please try again. |
gamePredictionsErrorMessage | react-toastify error message when client goes to report screen and widget fails to load the users` predictions. | There was a problem with getting predictions for users. Please try again. |
Updated over 1 year ago