From ed31fc4fc43336d3543411f802a8b1d9d592d467 Mon Sep 17 00:00:00 2001
From: corentin <corentin.girard@datadoghq.com>
Date: Sun, 9 Apr 2023 14:39:03 +0200
Subject: [PATCH] Update demos

---
 demo/with-api.html           |  4 +---
 demo/with-local-storage.html | 10 ++++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/demo/with-api.html b/demo/with-api.html
index 7deed26..fa194c3 100644
--- a/demo/with-api.html
+++ b/demo/with-api.html
@@ -37,15 +37,12 @@
             imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
         })));
 
-        window.bracketsViewer.onMatchClicked = match => console.log(match)
-
         await window.bracketsViewer.render({
             stages: data.stage,
             matches: data.match,
             matchGames: data.match_game,
             participants: data.participant,
         }, {
-            // This is optional.
             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.
@@ -53,6 +50,7 @@
                 if (info.fractionOfFinal === 1 / 2)
                     return `${t(`abbreviations.${info.group}`)} Semi Finals`
             },
+            onMatchClick: match => console.log('A match was clicked', match),
             selector: '#example',
             participantOriginPlacement: 'before',
             separatedChildCountLabel: true,
diff --git a/demo/with-local-storage.html b/demo/with-local-storage.html
index 5fd5ecf..f141121 100644
--- a/demo/with-local-storage.html
+++ b/demo/with-local-storage.html
@@ -46,14 +46,20 @@
             imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
         })));
 
-        window.bracketsViewer.onMatchClicked = match => console.log(match)
-
         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)
+                    return `${t(`abbreviations.${info.group}`)} Semi Finals`
+            },
+            onMatchClick: match => console.log('A match was clicked', match),
             selector: '#example',
             participantOriginPlacement: 'before',
             separatedChildCountLabel: true,