Top X management

Welcome to Fans United Top X Management Widget. The widget allows staff members with sufficient permissions to create new 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. Top X is a game where users must predict a specified number of correct scores for a prize. With successfull installiation, you can create and edit a Top X game or see the report about specific game.

Installation and usage

The easiest way to use fansunited-widget-top-x-management is to install it from npm as follows:

npm  install  fansunited-widget-top-x

or:

yarn  add  fansunited-widget-top-x

Here is an example how you can integrate Fans United Top X Management Widget:

import  'fansunited-widget-top-x/style.css';
import { TopXManager } from  'fansunited-widget-top-x';

const  App = () => {
return (
<TopXManager
	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-top-x/style.css';

N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-top-x/style.css there as well

Easy translation in every language. For more information check our Translation heading.

Props

type  TopXManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	labels?: LabelsModel;
};

Fans United Top X 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 Top X 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-top-x/style.css';
import { TopXManager } from  'fansunited-widget-top-x';

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.",
	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 Top X edition.',
	description:  'Description',
	descriptionPlaceholder:  'Please describe your game.',
	matchSelection:  'Match selection',
	matchSelectionDescription:  'Select a number of matches to include in your game.',
	matchNumber:  'Match Number',
	selectTeamPlaceholder:  'Type your team...',
	selectTeamNoTeamFound:  'No Team Found',
	selectTeamNoMatchesFound:  'No matches were found',
	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',
	cutoffTimeDescriptionOnCreate:  'Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played.',
	cutoffTimeDescriptionOnEdit:  "Predictions will be accepted until this time. Keep in mind that this field SHOUT NOT be empty.",
	editGame:  'Edit game',
	addFixture:  'Add fixture',
	removeFixture:  'Remove fixture',
	back:  'Back',
	reportFor:  'Report for',
	position:  'Position',
	points:  'Points',
	results:  'Results',
	goldenGoal:  'Golden Goal',
	predictions:  'Predictions',
	gameNotSettledMessage:  'Not all matches have been played and therefore no points awarded yet. Please come back after the matches finish to see the leaderboard.',
	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.',
	minFixturesMessage:  'There is a requirement how many minimum fixtures you need to provide to create/update game and it is:',
	sameChosenMatchMessage:  'Some of selected matches are repeating',
	invalidCutoffTimeMessage:  'Some of the provided matches start before cutoff time. Please choose cutoff time that is before the earliest 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 (
<TopXManager
	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.
`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	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	Created at
`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 fixture	Upcoming
`inProgress`	Status of match for fixture	In progress
`finished`	Status of match for fixture	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`	Placeholder for icon button edit.	Edit
`report`	Placeholder for icon button report.	Report
`timeFormat`	Timeformat for displaying dates. Widgets uses dayjs as a date dependency.	DD.MM.YYYY, HH:mm
`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 Top X 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	Select a number of matches to include in your game.
`matchNumber`	Title when you are adding a fixture	Match Number
`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
`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
`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
`cutoffTimeDescriptionOnCreate`	Description about choosing a cutoff time for creating game.	Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played.
`cutoffTimeDescriptionOnEdit`	Description about choosing a cutoff time for editing game.	Predictions will be accepted until this time. Keep in mind that this field SHOUT NOT be empty.
`editGame`	Used as label on create button and as a title on screen when editing a game.	Edit game
`addFixture`	Label for add button. Add button is displayed when you have fixtures less than your maxFixtures provided by your features from `Client API`	Add fixture
`removeFixture`	Label for remove button. Remove button is displayed always on your fixture.	Remove fixture
`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
`results`	Label in header's report table	Results
`goldenGoal`	Label in header's report table	Golden Goal
`predictions`	Label in header's report table	Predictions
`gameNotSettledMessage`	Model message when client clicks on report button for game that is NOT settled.	Not all matches have been played and therefore no points awarded yet. Please come back after the matches finish to see the leaderboard.
`clear`	Tooltip for clearing button (circled X). Button clears current choosen game cuttof time.	Clear
`loadingMessage`	When creating/editing a game 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.
`minFixturesMessage`	When creating/editing a game displaying a react-toastify warning message about minimum fixtures.	There is a requirement how many minimum fixtures you need to provide to create/update game and it is:
`sameChosenMatchMessage`	When creating/editing a game displaying a react-toastify warning message about same chosen match for different fixtures.	Some of selected matches are repeating
`invalidCutoffTimeMessage`	When creating/editing a game displaying a react-toastify warning message about invalid cutoff time for game.	Some of the provided matches start before cutoff time. Please choose cutoff time that is before the earliest 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`	When editing a game displaying a react-toastify error message.	There was a problem with displaying leaderboard. Please try again.
`gamePredictionsErrorMessage`	When editing a game displaying a react-toastify error message.	There was a problem with getting predictions for users. Please try again.