[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

[KaranCK0]

How we put this label in brackets.

[KaranCK0]

I want a label inside the next matches.
You can see inside the image I already marked it.

[Drarig29]

I made the choice to not have labels when the source of the participant is obvious thanks to the gray line connectors, directly connected to the previous match. Those labels are only present in double elimination brackets, for connections between the winner bracket and the loser bracket which are not obvious at all.

[Drarig29]

Is this something you really need? @KaranCK0

IIRC the property on which the viewer relies to show this label is populated by the manager only when it's not obvious (to quote my previous message), so both the manager and the viewer would have to be updated in order to have the information available (I prefer not to have too much complex logic in the viewer, and keep it as "dumb" as possible).

[KaranCK0]

We want feature winner bracket matches labels.

also we need to add date and time on the round name ( round 1 - 12 Jun, 2025) like this.
can we do this? @Drarig29

[Drarig29]

First, "want" is not polite. Second, please create a feature request in the Issues tab, and stop using this thread in an unrelated discussion. Thank you.