# Context Driven Markets Display

{% hint style="info" %}
Please note that the code snippets displayed in this article are intended to be used for assessment and testing purposes only. Prior to going liv&#x65;**,** please reach out to <integrations@imgarena.com>.
{% endhint %}

## Context Driven Markets

The Event Centre supports being initialised with a specific UI state. This is achieved by passing in a "Context Update" message object, detailed below, when initialising the Event Centre. These can include specific tournaments, rounds, players etc.

| View                    | Required initial context fields | Optional initial context fields |
| ----------------------- | ------------------------------- | ------------------------------- |
| leaderboard             | view                            |                                 |
| player-detail-hole      | view, teamNo                    | *roundNo*, *holeNo*             |
| player-detail-scorecard | view, teamNo                    | *roundNo*                       |
| player-detail-shots     | view, teamNo                    | *roundNo*                       |
| playoff-detail-hole     | view, groupId                   | *roundNo*, *holeNo°*            |
| playoff-detail-shots    | view, groupId                   | *roundNo*, *holeNo*°            |
| groups                  | view                            |                                 |
| GroupDetail             | view, groupNo, roundNo          | *holeNo*                        |
| group-detail-hole       | view, groupId                   | *roundNo*, *holeNo*             |
| group-detail-scorecard  | view, groupId                   | *roundNo*, *holeNo*             |
| group-detail-shots      | view, groupId                   | *roundNo*, *holeNo*             |
| course                  | view                            |                                 |
| course-live-streams     | view, holeNo                    |                                 |
| course-detail-hole      | view, holeNo                    |                                 |
| course-detail-scorecard | view, holeNo                    | *courseId*                      |
| course-detail-shots     | view, holeNo                    | *courseId*                      |

In the example below, the event centre is sending context updates to the console with different views such as Leaderboard, Groups, Course as the user navigates through.

<div><figure><img src="https://1485305088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ9XC5ZatUENF4oTZ0UUR%2Fuploads%2Fgit-blob-1fa299a18c772bcffefdf9b3c52cec5507d6a83a%2FScreenshot%202023-03-29%20at%2020.57.39.png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://1485305088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ9XC5ZatUENF4oTZ0UUR%2Fuploads%2Fgit-blob-1d09073974aba48224a3e0b6d1c68504a9f50bac%2FScreenshot%202023-03-29%20at%2020.57.47.png?alt=media" alt=""><figcaption></figcaption></figure></div>

In the example below, if a user navigates to a particular hole or group, the event centre sends the relevant data to the console contain group id's, group no's, hole no's etc.

<div><figure><img src="https://1485305088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ9XC5ZatUENF4oTZ0UUR%2Fuploads%2Fgit-blob-2e3d82001af6e9bd2a6aa7544b72e606e9ddbb7b%2FScreenshot%202023-03-29%20at%2021.08.22.png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://1485305088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ9XC5ZatUENF4oTZ0UUR%2Fuploads%2Fgit-blob-5572cc1289033badc97d27d574ce5dcb530507f2%2FScreenshot%202023-03-29%20at%2021.02.20%20(1).png?alt=media" alt=""><figcaption></figcaption></figure></div>

The golf odds feed is integrated with IMG data feed, therefore, the same information can be found within the meta data field.

<figure><img src="https://1485305088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ9XC5ZatUENF4oTZ0UUR%2Fuploads%2Fgit-blob-35ab97fde14c545b945ba4eb95a2af1e191836ad%2FScreenshot%202023-03-30%20at%2010.52.01.png?alt=media" alt=""><figcaption></figcaption></figure>

```json
{
  "mode": "push",
  "type": "market",
  "publish_time": "2023-03-30 09:29:26.941665",
  "msg": {
    "id": "golf_18119_oneball_hole|golfer_ids=100|hole_num=15|round_num=3",
    "name": "Hole Score (Round 3, Hole 15) - Padraig Harrington",
    "event_id": "ev.golf_18119",
    "tags": [
      "sp.golf",
      "comp.golf_603974",
      "ev.golf_18119",
      "mt.oneball_hole"
    ],
    "start_time": null,
    "stage": "pre_play",
    "numwinners": 1,
    "meta": {
      "event_id": "1479",
      "round_num": 3,
      "hole_num": 15,
      "golfer_id": 53,
      "group_id": 8
    }
  }
}
```

#### Golf Match Play (covers Ryder Cup) Views

| View                        | Fields                    | Optional Fields |
| --------------------------- | ------------------------- | --------------- |
| match-play-list             | tournament, view          |                 |
| match-play-detail-hole      | tournament, view, matchNo | holeNo          |
| match-play-detail-scorecard | tournament, view, matchNo | holeNo          |
| match-play-detail-shots     | tournament, view, matchNo | holeNo          |
| match-play-streaming        | tournament, view          |                 |
| match-play-streaming-hole   | tournament, view, holeNo  |                 |

**° For playoff views the holeNo field MUST take it's value from the holeOrder field from DDE feeds**

The following are examples of these message objects and their corresponding UI states:

{% tabs %}
{% tab title="Full Event Centre" %}
**Full Event Centre with Event ID 207**

```javascript
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: '[OPERATOR-NAME]',
  sport: 'golf',
  eventId: '275',
  targetModule: 'full',
  version: 'latest',
  language: 'en',
  targetElementSelector: '#img-arena-event-centre',
});
```

{% endtab %}

{% tab title="Group Detail Page" %}
**A Group Detail Page, with Event Id 207, Round Number 1, Group Number 19. Hole Number is optional.**

```javascript
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: '[OPERATOR-NAME]',
  sport: 'golf',
  eventId: '275',
  targetModule: 'full',
  version: 'latest',
  language: 'en',
  targetElementSelector: '#img-arena-event-centre',
  initialContext: {
    view: 'group-detail-hole',
    roundNo: '4',
    groupId: '75737',
    holeNo: '9'
  }
});
```

{% endtab %}

{% tab title="Hole View" %}
**Hole view for Hole 12. Very useful for directing a user to a specific hole which has Par 3 streaming.**

```javascript
const { EventCentreModules } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: '[OPERATOR-NAME]',
  sport: 'golf',
  eventId: '275',
  targetModule: 'full',
  version: 'latest',
  language: 'en',
  targetElementSelector: '#img-arena-event-centre',
  initialContext: {
    view: 'course-detail-hole',
    holeNo: '12'
  }
  targetElementSelector: '#img-arena-event-centre'
});
```

{% endtab %}
{% endtabs %}

### Subscribing

```javascript
.on(MESSAGE_TOPIC_NAME, (messageData) => {
  // operate on received messageData, see below for returned fields for each topic
})
```

The `on` method is available on the return value from the `eventCentre` initialiser, it is used to subscribe to messages emitted from the Event Centre. The supported message topics are exposed on the `eventCentreUtils` namespace, `eventCentreUtils.MessageTopics`, and are detailed below. The callback receives a single value which is an object containing the respective fields to the message topic subscribed to.

### Emitting

```javascript
// See below the fields to include on object passed for each topic
.emit(MESSAGE_TOPIC_NAME, messageData)
```

The `emit` method is available on the return value from the `eventCentre` initialiser, it is used to send message to the Event Centre. Only supported message topics will be passed to the Event Centre.

**Emitting context updates to synchronize the event centre**

The event centre emits context updates whenever the webpage navigates to a new route. These context updates can be used to keep track of what users are doing in the event centre. For example, these events can be used to display appropriate markets when a user navigates to a certain player, hole or group.

The other scenario is that a user is navigating on your webpage, and you would like to synchronize the event centre to display similar contextual data. In this case it is possible to emit context updates to the event centre. These updates will allow you to control what page/view the event centre is displaying.

*Note: These updates will not re-create the event centre therefore it is not possible to change things like the tournamentId or the theme.*

The list of possible views and their required fields that can passed into the CONTEXT\_UPDATE topic is covered above in the Golf Views section.

*Note: The values that are passed for `initialContext` when creating the `eventCentreInstance` can also be used as data for context updates.*

See below a few examples:

**Navigate to groups list**

```
eventCentreInstance.emit(
  frontRowSeat.eventCentreUtils.MessageTopics.CONTEXT_UPDATE,
  { view: "groups" }
);
```

**Navigate to a player**

```
eventCentreInstance.emit(
  frontRowSeat.eventCentreUtils.MessageTopics.CONTEXT_UPDATE,
  {
    view: "player-detail-hole",
    teamNo: "4", // replace with desired teamNo
  }
);
```

**Navigate to a group's shots view**

```
eventCentreInstance.emit(
  frontRowSeat.eventCentreUtils.MessageTopics.CONTEXT_UPDATE,
  {
    view: "group-detail-shots",
    groupId: "464838", // replace with desired groupId
  }
);
```

### Message Topics

All the tables below detail the data fields present in the message data objects that are **sent and received** for each message topic.

### Handshake Failed `MessageTopics.HANDSHAKE_FAILED`

Dedicated topic to signify the handshake between Event Centre and your site failed to complete. This topic is emitted by the integration library, it **should only be subscribed to, not emitted**.

| Field     |  Type  | Description                         | Required |
| --------- | :----: | ----------------------------------- | :------: |
| timestamp | number | unix timestamp from time of failure |     ✅    |

### Context Update `MessageTopics.CONTEXT_UPDATE`

Topic for covering general UI state updates, for example navigation changes or the user selecting a player in the UI.

| Field        |       Type       | Description                                       | Required |
| ------------ | :--------------: | ------------------------------------------------- | :------: |
| view         |      string      | The name of the active view                       |     ✅    |
| tournamentId | number or string | Identifier for the tournament                     |     ✅    |
| roundNo      | number or string | The round the user is currently viewing data from |     -    |
| holeNo       | number or string | The hole the user is currently viewing data from  |     -    |
| playerNo     | number or string | The player's ID                                   |     -    |
| groupNo      | number or string | The group's ID                                    |     -    |

**From iframe to parent message. List of possible events:**

| View         | Component   | Action        | Sending parameters                                        |
| ------------ | ----------- | ------------- | --------------------------------------------------------- |
| Leaderboard  | Leaderboard | onLoad        | <p>view</p><p>tournamentId</p><p>roundNo</p>              |
| Group List   | GroupList   | onLoad        | view                                                      |
|              |             | onRoundChange | tournamentId                                              |
|              |             |               | roundNo                                                   |
| Course       | Course      | onLoad        | <p>view</p><p>tournamentId</p><p>roundNo</p>              |
|              |             | onRoundChange | <p>view</p><p>tournamentId</p><p>roundNo</p><p>holeNo</p> |
| All Bets     | AllBets     | onLoad        | <p>view</p><p>tournamentId</p><p>roundNo</p>              |
| Group Detail | GroupDetail | onLoad        | view                                                      |
|              |             | onTeamChange  | tournamentId                                              |
|              |             | onHoleChange  | roundNo                                                   |
|              |             |               | holeNo                                                    |
|              |             |               | groupNo                                                   |
|              |             |               | playerNo                                                  |
| Hole         | Hole        | onLoad        | view                                                      |
|              |             | onGroupChange | tournamentId                                              |
|              |             | onTeamChange  | roundNo                                                   |
|              |             | onHoleChange  | <p>holeNo</p><p>groupNo</p><p>playerNo</p>                |
| Player       | Team        | onLoad        | view                                                      |
|              |             | onRoundChange | tournamentId                                              |
|              |             | onHoleChange  | <p>roundNo</p><p>holeNo</p><p>playerNo</p>                |

### Selection Updates `MessageTopics.SELECTION_UPDATE`

Dedicated topic for handling user selection updates. The `selected` field within the message data handles both selecting and deselecting updates.

| Field    |       Type       | Description                                            | Required |
| -------- | :--------------: | ------------------------------------------------------ | :------: |
| marketId | number or string | supplied by Mustard                                    |     ✅    |
| betId    | number or string | supplied by Mustard                                    |     ✅    |
| selected |      boolean     | whether or not the UI state should display as selected |     ✅    |