[Feature] Provide onclick event (function) for match

[yongshun950824]

Feature:

Provide on-click event (function) for match.

Description:

When clicking the match / or any team (within the redbox as the attached screenshot), able to perform the action as provided Javascript/Typescript function.

Coding & Concept:

Settings for bracketsViewer

window.bracketsViewer.render({
    stages: data.stage,
    matches: data.match,
    matchGames: data.match_game,
    participants: data.participant,
}, {
    selector: '#example',
    ...  // Other settings
    onMatchClick: onMatchClick // Add new onclick event with pass the method setting
})

Method to be passed with expected to receive match as an input parameter.

onMatchClick(match) {
   // Following implementation
}

Able to get the match info as Match (class) structure.

{
    "id": 0,
    "number": 1,
    "stage_id": 0,
     "group_id": 0,
     "round_id": 0,
     "child_count": 0,
     "status": 4,
     "opponent1": {
         "id": 0,
         "position": 1,
         "score": 16,
         "result": "win"
     },
     "opponent2": {
        "id": 1,
        "position": 2,
        "score": 12,
        "result": "loss"
    }
}

Ideas:

1. Toornament Bracket & Match flow [Reference: [http://www.toornament.com])

Flow:
a. Toornament Bracket Match to be clicked.

b. After the click, redirect to next page.

2. jQuery Bracket on-mouse click & on-mouse hover [Reference: [http://www.aropupu.fi/bracket/#matches])

[Drarig29]

Actually the onclick event already exists:

• Implemented here
• Example of use here

Currently it's a class property so you need to set it directly. But I like your idea of passing it as a prop in the settings.

I won't do it for now because I don't have the time and it's not a high priority issue since it already exists.

[yongshun950824]

Okay nice one, the feature is enough for me.

Thanks for the assists. =)

[Drarig29]

Fixed in #81