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.
...
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. |  |
...
| View file | ||
|---|---|---|
|
Version | Image |
|---|---|
Light |  |
Dark |  |
As you could see demonstrated above, the game tracker in both light and dark version looks amazing, however we know that versions appears visually appealing. However, we recognize that it is crucial for our customers it is important that each Game Tracker matches the look and feel aligns with the aesthetic of the parent site. Consequently, for this reason we have prepared a series range of attributes ready to that can be modified according to suit the interest 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.
...
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.
...
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)
...
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
...
Customization for sports or competition
In order to allow customers to configure the multisport game tracker for sports or competitions we have created a new standard that has the following structure.
...
competitionIdssportIdsdefault
Supported components
This structure is recent and our goal is that all our components can have this configuration option, we will talk about the components that we have enabled with their respective examples.
...
You can also add more conditions, for example if you want to Show show the away team first for Football and for an American Football competition only, you can combine them like this:
| Code Block | ||
|---|---|---|
| ||
"showTeamLogos":{
"defaultBehavior": [
{
"sportIds": [],
"competitionIds": [],
"props": {
"value": false
},
"default": true
},
{
"sportIds": ["17"],
"competitionIds": [],
"props": {
"value": true
}
}
],
"override": [
{
"sportIds": [],
"competitionIds": [],
"props": {
"value": false <--- do not show the away first
},
"default": true <--- defines its default object
},
{
"sportIds": ["10"], <--- show away first sport (Football/Soccer)
"competitionIds": ["1035"], <--- show away first competition (CFL)
"props": {
"value": true <--- enable away firts
},
"default": false <--- Only one object can exist by default
}
]
} |
Teams Colors
In the configuration you will find the following values that will allow you to define the colors that will be displayed on the teams, giving the possibility that the customer can always display the same colors for the home and the away team.
...
When a customer wants to configure the colors of the teams he can assign the values in the theme home team color and the theme away team color, these colors will be shown as a second option when the colors are not found in the received data.
Mandatory
If the customer wants to force all teams to show the configured colors, he must activate the option "Always use the teams colors".
Advanced customization
Note: this kind of customizations must be approved by the UX team to preserve the essence of our Game Tracker.
If the customer requires an advanced customization, please consult the following link.:
...