demo/with-api.html

<html>

<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="../dist/brackets-viewer.min.css" />
    <script type="text/javascript" src="../dist/brackets-viewer.min.js"></script>

    <title>Demo with API</title>

    <!-- You can choose a default theme or make you own. -->
    <link rel="stylesheet" href="themes/light.css" />

</head>

<body style="background: gray;">

    <!-- This div will be used as the root for the library. It must be **perfectly** empty to prevent a FOUC. -->
    <div id="example" class="brackets-viewer"></div>

    <script type="module">
        const data = await fetch('http://localhost:3000/db')
            .catch(() => alert('Failed to fetch localhost. Please do `npm run db` or use json-server your own way.'))
            .then(res => res.json());

        // You can manually add locales. English will be used as a fallback if keys are missing.
        // You can force browser language detection with: `window.localStorage['i18nextLng'] = 'ru'` and reloading the page.
        window.bracketsViewer.addLocale('ru', {
            "common": {
                "round-name": "раунд {{roundNumber}}",
            }
        });

        // This is optional. You must do it before render().
        window.bracketsViewer.setParticipantImages(data.participant.map(participant => ({
            participantId: participant.id,
            imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
        })));

        await window.bracketsViewer.render({
            stages: data.stage,
            matches: data.match,
            matchGames: data.match_game,
            participants: data.participant,
        }, {
            customRoundName: (info, t) => {
                // You have a reference to `t` in order to translate things.
                // Returning `undefined` will fallback to the default round name in the current language.

                if (info.fractionOfFinal === 1 / 2) {
                    if (info.groupType === 'single-bracket') {
                        // Single elimination
                        return 'Semi Finals'
                    } else {
                        // Double elimination
                        return `${t(`abbreviations.${info.groupType}`)} Semi Finals`
                    }
                }
            },
            onMatchClick: match => console.log('A match was clicked', match),
            selector: '#example',
            participantOriginPlacement: 'before',
            separatedChildCountLabel: true,
            showSlotsOrigin: true,
            showLowerBracketSlotsOrigin: true,
            highlightParticipantOnHover: true,
        })

        console.log('Render finished')
    </script>
</body>

</html>