Improve demos

Drarig29 · Apr 9, 2023 · d31883f · d31883f
1 parent 92bb185
commit d31883f
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 135 deletions.
diff --git a/demo/with-api.html b/demo/with-api.html
@@ -18,44 +18,42 @@
     <!-- 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>
-        (async function () {
-            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',
-            })));
-
-            window.bracketsViewer.onMatchClicked = match => console.log(match)
-
-            window.bracketsViewer.render({
-                stages: data.stage,
-                matches: data.match,
-                matchGames: data.match_game,
-                participants: data.participant,
-            }, {
-                selector: '#example',
-                participantOriginPlacement: 'before',
-                separatedChildCountLabel: true,
-                showSlotsOrigin: true,
-                showLowerBracketSlotsOrigin: true,
-                highlightParticipantOnHover: true,
-            }).then(
-                () => console.log('Render finished')
-            );
-        })();
+    <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',
+        })));
+
+        window.bracketsViewer.onMatchClicked = match => console.log(match)
+
+        await window.bracketsViewer.render({
+            stages: data.stage,
+            matches: data.match,
+            matchGames: data.match_game,
+            participants: data.participant,
+        }, {
+            selector: '#example',
+            participantOriginPlacement: 'before',
+            separatedChildCountLabel: true,
+            showSlotsOrigin: true,
+            showLowerBracketSlotsOrigin: true,
+            highlightParticipantOnHover: true,
+        })
+
+        console.log('Render finished')
     </script>
 </body>
 

diff --git a/demo/with-local-storage.html b/demo/with-local-storage.html
@@ -18,53 +18,51 @@
     <!-- 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>
-        (() => {
-            const urlParams = new URLSearchParams(window.location.search);
-            const id = urlParams.get('id');
+    <script type="module">
+        const urlParams = new URLSearchParams(window.location.search);
+        const id = urlParams.get('id');
 
-            const bracketsStore = JSON.parse(localStorage.getItem('brackets'));
+        const bracketsStore = JSON.parse(localStorage.getItem('brackets'));
 
-            if (null === bracketsStore || !(id in bracketsStore)) {
-                alert('Key is not found in data!');
-                return;
-            }
+        if (null === bracketsStore || !(id in bracketsStore)) {
+            alert('Key is not found in data!');
+            return;
+        }
+
+        const data = bracketsStore[id];
+        console.log(data);
 
-            const data = bracketsStore[id];
-            console.log(data);
-
-            // 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',
-            })));
-
-            window.bracketsViewer.onMatchClicked = match => console.log(match)
-
-            window.bracketsViewer.render({
-                stages: data.stage,
-                matches: data.match,
-                matchGames: data.match_game,
-                participants: data.participant,
-            }, {
-                selector: '#example',
-                participantOriginPlacement: 'before',
-                separatedChildCountLabel: true,
-                showSlotsOrigin: true,
-                showLowerBracketSlotsOrigin: true,
-                highlightParticipantOnHover: true,
-            }).then(
-                () => console.log('Render finished')
-            );
-        })()
+        // 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',
+        })));
+
+        window.bracketsViewer.onMatchClicked = match => console.log(match)
+
+        await window.bracketsViewer.render({
+            stages: data.stage,
+            matches: data.match,
+            matchGames: data.match_game,
+            participants: data.participant,
+        }, {
+            selector: '#example',
+            participantOriginPlacement: 'before',
+            separatedChildCountLabel: true,
+            showSlotsOrigin: true,
+            showLowerBracketSlotsOrigin: true,
+            highlightParticipantOnHover: true,
+        })
+
+        console.log('Render finished')
     </script>
 </body>
 

diff --git a/demo/with-printing.html b/demo/with-printing.html
@@ -45,37 +45,34 @@
     <!-- 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>
-        (async function () {
-            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());
-
-
-            window.bracketsViewer.addLocale('en', {
-                "common": {
-                    "group-name-winner-bracket": "{{stage.name}}",
-                    "group-name-loser-bracket": "{{stage.name}} - Repechage",
-                }
-            });
-
-            window.bracketsViewer.render({
-                stages: data.stage,
-                matches: data.match,
-                matchGames: data.match_game,
-                participants: data.participant,
-            }, {
-                selector: '#example',
-                participantOriginPlacement: 'before',
-                separatedChildCountLabel: true,
-                showSlotsOrigin: true,
-                showLowerBracketSlotsOrigin: true,
-                highlightParticipantOnHover: true,
-            }).then(
-                () => console.log('Render finished')
-            );
-        })();
+    <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());
+
+        window.bracketsViewer.addLocale('en', {
+            "common": {
+                "group-name-winner-bracket": "{{stage.name}}",
+                "group-name-loser-bracket": "{{stage.name}} - Repechage",
+            }
+        });
+
+        await window.bracketsViewer.render({
+            stages: data.stage,
+            matches: data.match,
+            matchGames: data.match_game,
+            participants: data.participant,
+        }, {
+            selector: '#example',
+            participantOriginPlacement: 'before',
+            separatedChildCountLabel: true,
+            showSlotsOrigin: true,
+            showLowerBracketSlotsOrigin: true,
+            highlightParticipantOnHover: true,
+        })
+
+        console.log('Render finished')
     </script>
 </body>
 
-</html>
+</html>
diff --git a/demo/with-ui.html b/demo/with-ui.html
@@ -32,7 +32,7 @@
 
     <div id="createNewBracket"></div>
     <script type="text/javascript" src="../dist/stage-form-creator.min.js"></script>
-    <script type="text/javascript">
+    <script>
         const config = {
             parent_id: 'createNewBracket',
             html_name_id: 'name',
@@ -49,31 +49,28 @@
             group_default_size: 1
         }
 
-        window.stageFormCreator(config, function (config) {
-            (async function () {
-                await window.bracketsManager.create(config)
-                    .then(() => {
-                        const rawStoredBrackets = localStorage.getItem(BRACKETS);
+        window.stageFormCreator(config, async (config) => {
+            await window.bracketsManager.create(config)
 
-                        if (null === rawStoredBrackets || '' === rawStoredBrackets) {
-                            localStorage.setItem(BRACKETS, JSON.stringify({
-                                0: window.inMemoryDatabase.data,
-                            }));
+            const rawStoredBrackets = localStorage.getItem(BRACKETS);
 
-                            window.location.href = '?id=0';
-                        }
+            if (null === rawStoredBrackets || '' === rawStoredBrackets) {
+                localStorage.setItem(BRACKETS, JSON.stringify({
+                    0: window.inMemoryDatabase.data,
+                }));
 
-                        let storedBrackets = JSON.parse(rawStoredBrackets);
-                        console.log(storedBrackets);
+                window.location.href = '?id=0';
+            }
 
-                        let index = Object.keys(storedBrackets).length;
-                        storedBrackets[index] = window.inMemoryDatabase.data;
+            let storedBrackets = JSON.parse(rawStoredBrackets);
+            console.log(storedBrackets);
 
-                        localStorage.setItem(BRACKETS, JSON.stringify(storedBrackets));
+            let index = Object.keys(storedBrackets).length;
+            storedBrackets[index] = window.inMemoryDatabase.data;
 
-                        window.location.href = '?id=' + index;
-                    });
-            })();
+            localStorage.setItem(BRACKETS, JSON.stringify(storedBrackets));
+
+            window.location.href = '?id=' + index;
         });
     </script>
 
@@ -92,7 +89,7 @@ <h3></h3>
         </div>
     </div>
 
-    <script type="text/javascript">
+    <script>
         const BRACKETS = 'brackets';
         const INPUT_MASK = 'input-mask';
         const INPUT_SUBMIT = 'input-submit';
@@ -225,4 +222,4 @@ <h3></h3>
     </script>
 </body>
 
-</html>
+</html>