Multisport Game Tracker Customizations
- Iryna Antonova
The multisport Game Tracker is a unique widget that has the capability to be used in different sports, so far and at the time of the creation of this document it has support for Football, Basketball and American Football.
This is possible because using the fixtureId (match identifier) the widget can identify the sport to display.
Table of contents:
- 1 Table of contents:
- 2 Components
- 2.1 Scoreboard
- 2.2 Tabs
- 2.3 Court/Pitch
- 2.4 Team Stats
- 2.5 Lineups
- 2.6 Play By Play
- 3 Styling
- 3.1 Background Color
- 3.2 Text
- 3.3 Primary Color
- 3.4 Typography
- 4 Advanced customization
Components
Our game trackers have different shared components that will allow our customers to access different types of information, these can also be used independently as required by the customer.
Component | Description | Image |
|---|---|---|
Scoreboard | The scoreboard is a component that allows us to visualize the state of the match in real time, we can obtain information related to:
|
|
Tabs | The tabs are components that allow us to navigate through the different pieces of content that the widget has available in a particular sport.
|
|
Court/Pitch | The court is the component that displays the different playing fields and the main actions occurring in the matches. These are displayed as real-time animations. | |
Team Stats | Team stats is a component that is responsible for displaying a series of cards with content related to statistics of the teams in the match, you can find information such as (in football GT):
Note: According to the sport this information may change |
|
Lineups | It is a component that is responsible for displaying the players of both teams with their respective positions, you can also find information like:
Depending on the sport the component displays the list of players who started playing the game and those who started on the bench. |
|
Play By Play | It is a component that is responsible for displaying the most important plays minute by minute, where the user can navigate through the different stages of the match and has the ability to view the highlights of the entire match. |
|
Styling
Our components have been developed using material UI tools, this has allowed us to create a theme that groups the most important styles of the component and makes it easy to make changes in the style of the widget such as:
Name | Applies to | Default value | Description |
|---|---|---|---|
primaryColor.main | Possession indicator, Tab highlight, buttons |
| Color used to highlight elements, is implemented in backgrounds, icons and some decorative elements. |
background.default | Game Tracker background |
| Background color for the Game Tracker |
text.primary | Most elements |
| Text color used by default in most elements. |
typography.fontFamily | Most elements |
| Font to be used in the Game Tracker |
By default, we have the light and dark versions.
You can find detailed default colors for both versions in the PDF below:
Version | Image |
|---|---|
Light | |
Dark |
|
As demonstrated above, the game tracker in both light and dark versions appears visually appealing. However, we recognize that it is crucial for our customers that each Game Tracker aligns with the aesthetic of the parent site. Consequently, we have prepared a range of attributes that can be modified to suit the specific preferences of each customer.
All code related documentation is reference for developers.
Background Color
To change the background color, we use the attribute in the partialTheme, inside background with the name default, for example we will change the background to a gray color.
"partialTheme": {
"background": {
"default": "#424949"
}
}The result is as follows
Text
To change the text color, we use the attribute in the partialTheme, inside text with the name primary, for example we will change the text color to a pink color.
"partialTheme": {
"text": {
"primary": "#151B34"
}
}The result is as follows
Primary Color
To change the primary color we use the attribute in the partialTheme, inside primary with the name main, for example we will change the primary color to a cyan color, (focus on tabs)
"partialTheme": {
"primary": {
"main": "#52F9E5"
}
}The result is as follows
Typography
To change the primary color we use the attribute in the partialTheme, inside typography with the name fontFamily, for example we will change the font family to Roboto Condensed
The result is as follows
Please note the following customization requirements:
The font and weights must be provided by the customer.
Amendments to colors concerning the stroke are not part of the tracker.
Amendments regarding specific font weights are not included in the customization options offered in the game tracker.
Advanced customization
If you require an advanced customization for the Multisport for NFL Game Tracker, please consult the following link: