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.

...

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:

...

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: The scores of each team. An image representing the team (shield, logo, flags or alternative image). Venue where the match is played. Status of the match (pre-match, live or post-match/final). Team names, in case the team name is too large, it will be displayed in a short version. Additional information, depending on the sport relevant information can be displayed. In football for example, penalties are rendered as additional information
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): Fouls Attacks Cards etc. Substitutions Possessions Free kicks 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: T-shirt number Player name Player position Player image 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.

...

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 for our customers it is important that each Game Tracker matches the look and feel of the parent site, for this reason we have a series of attributes ready to be modified according to the interest 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

       "partialTheme": {
          "typography": {
            "fontFamily": "Roboto Condensed"
          }
        }

The result is as follows

...

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.

        "components": {
          "component":{
            "defaultBehavior": [
              {
                "sportIds": [],
                "competitionIds": [],
                "props": {
                  ...
                },
                "default": true
              }
            ],
            "override": []
          }
       }

...

These two objects exist so that we can have a configuration so that as Genius Sports we can have a default configuration (defaultBehavior) and customers can use the (override) object for their customizations.

• defaultBehavior: Will identify the default configurations of the components with the behaviors that we want as Genius Sports

• override: Will be the list of configurations requested by the customer for particular cases that will be prioritized against the defaultBehavior.

These attributes will be conformed by a list of objects that have the following characteristics

• sportIds: List the IDs of the sports that have a different behavior.

• competitionIds: List the IDs of the competitions that have different behaviors.

• props: It is an object that contains the configurations that will be applied to the components.

• default: It is a boolean value that will indicate if it is the default configuration, this value should only be true for one object in the whole list.

The order of prioritization is as follows:

1. competitionIds

2. sportIds

3. default

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.

Note: The sports ids are as follows

• Basketball: “4”

• Football (soccer): “10”

• American Football: “17”

Show/Hide team logos

Default configuration:

          "showTeamLogos":{
            "defaultBehavior": [
              {
                "sportIds": [],
                "competitionIds": [],
                "props": {
                  "value": true
                },
                "default": true
              }
            ],
            "override": []
          }

Customization:

For example, if a customer wants to configure all game trackers to hide the logos, the next step is to add an object in the override attribute as follows.

          "showTeamLogos":{
            "defaultBehavior": [
              {
                "sportIds": [],
                "competitionIds": [],
                "props": {
                  "value": true
                },
                "default": true
              }
            ],
            "override": [
             {
                "sportIds": ["4", "10", "17"],  <------- Restricted ids are added
                "competitionIds": [],
                "props": {
                  "value": false  <-------- Hide logos
                },
                "default": true
              }
            ]
          }

You can also add more conditions, for example if you want to disable the logos for Football and for an American Football competition only, you can combine them like this:

          "showTeamLogos":{
            "defaultBehavior": [
              {
                "sportIds": [],
                "competitionIds": [],
                "props": {
                  "value": true
                },
                "default": true
              }
            ],
            "override": [
              {
                "sportIds": [],
                "competitionIds": [],
                "props": {
                  "value": true  <--- enabling the logos
                },
                "default": true  <--- defines its default object
              },
              {
                "sportIds": ["10"], <--- restricted sport (Football/Soccer)
                "competitionIds": ["1035"], <--- restricted competition (CFL)
                "props": {
                  "value": false  <--- disable the logos
                },
                "default": false <--- Only one object can exist by default
              }
            ]
          }

Change the Basketball court color

Although the Basketball court color can be customized, we always recommend consulting first on what clients want to do to maintain the product integrity.

"partialTheme": {
                    "palette": {
                        "mode": "dark",
                        "background": {
                            "default": "#000000"
                        }
                    },
                    "components": {
                        "GameTrackerBasketballCourt": { <--- this will change the basketball court color only
                            "styleOverrides": {
                                "basketballCourtSVG": {
                                    "color": "rgb(116, 86, 55)"
                                }
                            }
                        }
                    }
                },

Is the away team first

Default configuration:

        "components": {
          "isAwayTeamFirstBySport": {
            "defaultBehavior": [
              {
                "sportIds": [],       <--- It is not necessary to put sports and competitions
                "competitionIds": [], <--- in the default because this approach works as a
                "props": {                 black list.
                  "value": false
                },
                "default": true
              },
              {
                "sportIds": ["17"], <--- By default American football has this set to true
                "competitionIds": [],
                "props": {
                  "value": true
                }
              }
            ],
            "override": []
          }
        }

Customization:

For example, if a customer wants to configure all game trackers to show the away team first, the next step is to add an object in the override attribute as follows.

        "components": {
          "isAwayTeamFirstBySport": {
            "defaultBehavior": [
              {
                "sportIds": [],
                "competitionIds": [],
                "props": {
                  "value": false
                },
                "default": true
              },
              {
                "sportIds": ["17"],
                "competitionIds": [],
                "props": {
                  "value": true
                }
              }
            ],
            "override": [
              {
                "sportIds": ["4", "10", "17"],  <-- Show away first ids are added
                "competitionIds": [],
                "props": {
                  "value": true  <-------- away team first
                },
                "default": true
              }
            ]
          }

You can also add more conditions, for example if you want to Show the away team first for Football and for an American Football competition only, you can combine them like this:

          "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.

...

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": {
               "palettetext": {
                       
"custom": {             "primary": "#151B34"
            }
  "awayTeam": "#FAF",  <-  color defined for away team
                            "homeTeam": "#555"  <- color defined for home team      }

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

       "partialTheme": }{
                },
  "typography": {
         },

...

Default configuration

Some teams bring colors configured within an object that comes from our data services, when we can not get the colors from the data we use the following default colors:

...

Team

...

Color

...

Home

...

#6383D6

...

Away

...

#F93939

Customization

We have added a section from the configuration manager to facilitate the customization of these colors.

...

Fallback

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.

...

   "fontFamily": "Roboto Condensed"
          }
        }

The result is as follows

...

Advanced customization

If you require an advanced customization for the Multisport for NFL Game Tracker, please consult the following link.https://geniussports.atlassian.net/wiki/spaces/GSM/pages/3416752637/NFL+GameTracker+Customization#Advanced-customization:

Multisport GameTracker for NFL Customization