fansunited-widget-standing

v1.4.0

Published

3 days ago

0High
0Medium
0Low

viktorfansunited

dobromirpenchev

borislavfansunited

Custom Standing Game Management Widget

Welcome to Fans United Custom Standing Game Management Widget. The widget allows staff members with sufficient permissions to create new games. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create games. Standing Game is a game where users must predict the standing when a game is finished. With successful installation, you can create and edit a Standing Game.

Installation and usage

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

npm  install  fansunited-widget-standing

or:

yarn  add  fansunited-widget-standing

Here is an example how you can integrate Fans United Standing Game Management Widget:

import  'fansunited-widget-standing/style.css';
import { StandingManager } from  'fansunited-widget-standing';

const  App = () => {
return (
<StandingManager
	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 Joy UI which is based on headless unstyle react components. 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-standing/style.css';

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

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

Props

type  StandingManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	fansUnitedEnvironment?: string;
	sportal365Project?: string;
	sportal365Infrastructure?: 'shared' | 'betway';
	labels?: LabelsModel;
	hideSignOutButton?: boolean;
};

Fans United Standing Game 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), Romanian (ro), Greek (el), Slovak (sk), Serbian (sr) and Hungarian (hu). If no value given it will be set to English (en).
fansUnitedEnvironment - You can run the widget in the following environments: staging and production. If no value given it will be set to production (prod).
labels - you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Standing Game Management Widget is available in English so if no value is given, the widget will be translated in English.
sportal365Project - The Sportal365 project. Used as a request header when communicating with Sportal365 APIs.
sportal365Infrastructure - The Sportal365 infrastructure. Used to determine what authorization should be used when communicating with Sportal365 APIs. If no value given (when sportal365Project props is provided) it will be set to shared .
hideSignOutButton - The prop is used to hide the sign out button which is positioned on the top right corner on the main screen of the widget.

Translation

You can easily translate Fans United Standing Game 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-standing/style.css';
import { StandingManager } from  'fansunited-widget-standing';

const labels = {
    userNotFound: 'User not found. Please try again.',
    noGamesFound: "No games were found. You can create a game by clicking the button 'Create'",
    create: 'Create',
    signOut: 'Sign out',
    name: 'Name',
    status: 'Status',
    statusDescription: 'Select the status of the game.',
    participants: 'Participants',
    creationDate: 'Created at',
    acceptUntil: 'Accept Until',
    actions: 'Actions',
    pending: 'Pending',
    settled: 'Settled',
    live: 'Live',
    open: 'Open',
    canceled: 'Canceled',
    closed: 'Closed',
    sortOrder: 'Sort order',
    ascending: 'Ascending',
    descending: 'Descending',
    itemsPerPage: 'Items per page',
    back: 'Back',
    manageGameTitle: 'Manage Standing Game',
    manageGameDescription: 'Using this form, you can manage Standing games.',
    title: 'Title',
    description: 'Description',
    cutoffTime: 'Cutoff time',
    configuration: 'Configuration',
    id: 'ID',
    points: 'Points',
    pointsDescription: 'Set the number of points awarded for each correct prediction. Points will be added to users rankings.'
    customFields: 'Custom fields',
    type: 'Type',
    relationship: 'Relationship',
    entity: 'Entity',
    images: 'Images'
    mainImage: 'Main',
    coverImage: 'Cover',
    mobileImage: 'Mobile',
    uploadImage: 'Upload Image',
    sportal365Images: 'Sportal365 Images',
    search: 'Search',
    searchImage: 'Search image',
    hideFilters: 'Hide filters',
    showFilters: 'Show filters',
    urlCopiedToClipboardMessage: 'URL copied to clipboard',
    imageDeletedMessage: 'Image deleted',
    imageResetMessage: 'The initial size of the image has been restored',
    uploadingImageMessage: 'You have successfully uploaded image',
    generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
    uploadingImageErrorMessage: 'There was a problem with uploading image to bucket. Please try again',
    encryptingImageErrorMessage: 'There was a problem with encrypting image before uploading it to bucket. Please try again',
    searchSportal365ImagesErrorMessage: 'There was a problem with searching images from Sportal 365 API. Please try again',
    clearImage: 'Clear image',
    copyUrl: 'Copy URL',
    viewImage: 'View image',
    cropImage: 'Crop image',
    aspectRatio: 'Aspect ratio',
    crop: 'Crop',
    reset: 'Reset',
    hideMoreImages: 'Hide more images',
    showMoreImages: 'Show more images',
    addImages: 'Add images',
    participantsDescription: 'Add participants to the game.',
    additionalFields: 'Additional fields',
    addParticipant: 'Add participant',
    participantNumber: 'Participant number',
    group: 'Group',
    undecided: 'Undecided',
    removeParticipant: 'Remove participant'
    related: 'Related',
    rules: 'Rules',
    timeFormat: 'DD.MM.YYYY, HH:mm',
    edit: 'Edit',
    clone: 'Clone',
    close: 'Close',
    pageNo: 'Page No',
    save: 'Save',
    keyDynamicFields: 'Key',
    valueDynamicFields: 'Value',
    add: 'Add',
    delete: 'Delete',
    cloneGameTitle: 'Clone Standing Game',
    resolvePredictions: 'Resolve predictions',
    outcome: "Outcome",
    noItemsToDisplay: 'No items to display',
    dragToReorder: 'Drag to reorder',
    provideIdGameErrorMessage: 'You need to provide an ID to your game!',
    provideTitleGameErrorMessage: 'You need to provide a title to your game!',
    gamesErrorMessage: 'There was a problem retrieving information about the games.',
    createGameMessage: 'You have successfully created a game.',
    editGameMessage: 'You have successfully edited a game.',
    createGameErrorMessage: 'There was a problem with creating the game. Please try again.',
    editGameErrorMessage: 'There was a problem with editing the game. Please try again.',
    requiredFieldValidationMessage: 'The following field is required: ',
    participantsValidationMessage: 'Participant __participantNumber__: __propertyLabel__ is required!',
    relatedEntitiesErrorMessage: 'There was a problem with fetching entities for related. Please try again.',
    predictionsStartingToResolveInfoMessage: 'Predictions for game __gameTitle__ are starting to resolve. Keep in mind that this operation can take a while if there are thousands of predictions.',
    resolvingPredictionsInProgressInfoMessage: 'Resolving game predictions is already in progress...',
    resolvingPredictionsMessage: 'Predictions for game __gameTitle__ are successfully resolved! Total resolved predictions: __predictionsLength__',
    branding: 'Branding',
    brandingTemplateLabel: 'Select branding',
    brandingTemplatePlaceholder: 'Choose existing branding',
    colors: 'Colors',
    urls: 'URLs',
    mainLogo: 'Main Logo',
    mobileLogo: 'Mobile logo',
    primaryColor: 'Primary color',
    secondaryColor: 'Secondary color',
    contentColor: 'Content color',
    backgroundColor: 'Background color',
    borderColor:  'Border color',
    additionalColor: 'Additional color',
    primaryUrl: 'Primary URL',
    secondaryUrl: 'Secondary URL',
    privacyPolicyUrl: 'Privacy policy URL',
    termsAndConditionsUrl: 'Terms and conditions URL',
    additionalUrl:  'Additional URL',
    backgroundImage: 'Background image',
    mobileBackgroundImage: 'Mobile background image',
    additionalImage: 'Additional image',
    selectRules: 'Select rules',
	  format: 'Format',
	  minify: 'Minify',
	  invalidJsonFormat: 'Invalid JSON format',
	  cannotMinifyInvalidJson: 'Cannot minify invalid JSON',
    language: 'Language',
    languageDescription: 'Select the language for your game.',
    flags: 'Flags',
    flagsPlaceholder: 'Type your flag and press Enter',
    translateTo: 'Translate to _language_',
    languagesModalTitle: 'Manage languages',
    languagesModalDescription: 'Select the languages you want to translate this game into.',
    languagesModalSave: 'Save',
    translationErrorMessage: 'There was a problem with translating the game. Please try again.'
};

const  App = () => {
return (
<StandingManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'}
	labels={labels}/>
);
}

Here is all information about LabelsModel:

Changelog

1.4.0 - 2026-04-07

Added:
- Multi-language support
- Language and flags filter in the games list
- Language column in the games table
- Flags accordion in game management
- Language select in the Configuration section
- Language tabs and Manage Languages modal for creating and switching between translations
- Translate button for applying Google Translate to title, description and participant names

1.3.0 - 2026-02-17

Added:
- Dropdown in Rules for selecting predefined content from info pages

1.2.0 - 2026-01-08

Added:
- Branding configuration in sidebar

1.1.1 - 2025-11-07

Changed:
- Updated related entities to support only classic quiz and bonusPointsGame relationships (previous version supported all entities and relationships, but backend did not support it)
- Upgraded internal consuming management components library version and updated component props
Fixed:
- Fixed condition for list games visualization and no games found message
- Cloned games are now created with PENDING status

1.1.2 - 2025-11-07

Changed:
- Color of OPEN status chip is changed from neutral to primary

1.1.3 - 2025-12-10

Changed:
- Resolve predictions button is now disabled until the game's predictions cutoff date/time has passed