refactor to make code more local

Akatuoro · Apr 23, 2024 · b8fda01 · b8fda01
1 parent b4d501b
commit b8fda01
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 89 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -2,7 +2,7 @@
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": true,
+		"checkJs": false,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,

diff --git a/src/app.html b/src/app.html
@@ -7,8 +7,8 @@
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	%sveltekit.head%
 
-    <title></title>
-    
+    <title>Icon GAN</title>
+
     <style>
         html,
         body {
@@ -258,80 +258,8 @@
         }
 
     </style>
-
-    <script>
-        function load() {
-            const overlay = document.getElementById("overlay")
-            overlay.hidden = false
-            location.href = '/model'
-        }
-
-        function reset() {
-            const overlay = document.getElementById("overlay")
-            overlay.hidden = true
-            location.hash = ''
-        }
-
-        let support
-
-        /** Checks support for worker, webgl and offscreen canvas */
-        function checkSupport() {
-            if (support) return support
-
-            const canvas = document.createElement('canvas')
-            const gl = canvas.getContext('webgl') ||
-                canvas.getContext('experimental-webgl')
-
-            support = {
-                worker: !!window.Worker,
-                webgl: gl && gl instanceof WebGLRenderingContext,
-                offscreen: !!window.OffscreenCanvas
-            }
-            return support
-        }
-
-        function onload() {
-            if (location.hash !== '') {
-                const overlay = document.getElementById("overlay")
-                overlay.hidden = false
-            }
-
-            const supported = checkSupport()
-
-            const setColor = id => {
-                document.getElementById(id).style.color = '#ff9b28'
-            }
-
-            if (supported.webgl) {
-                setColor('webgl')
-
-                if (supported.worker && supported.offscreen) {
-                    setColor('plus')
-                    setColor('worker')
-                }
-            }
-            else if (supported.worker) {
-                setColor('worker')
-            }
-
-            document.getElementById('support').hidden = false
-        }
-
-        function dialogCloseHandler(e) {
-            const target = e.target || e.srcElement
-            if (target.tagName !== 'DIALOG') return
-            const rect = target.getBoundingClientRect()
-            const inside =
-                rect.top <= e.clientY &&
-                rect.bottom >= e.clientY &&
-                rect.left <= e.clientX &&
-                rect.right >= e.clientX
-
-            if (!inside) target.close()
-        }
-    </script>
 </head>
-<body onload="onload()" data-sveltekit-preload-data="hover">
+<body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
 </body>
 </html>

diff --git a/src/lib/browser-support.js b/src/lib/browser-support.js
@@ -0,0 +1,20 @@
+import { readable } from "svelte/store";
+
+let support;
+
+export function getBrowserSupport() {
+    if (support) return support;
+
+    const canvas = document.createElement('canvas')
+    const gl = canvas.getContext('webgl') ||
+        canvas.getContext('experimental-webgl')
+
+    support = {
+        worker: !!window.Worker,
+        webgl: gl && gl instanceof WebGLRenderingContext,
+        offscreen: !!window.OffscreenCanvas
+    }
+    return support;
+}
+
+export const browserSupport = readable(null, (set) => set(getBrowserSupport()));
diff --git a/src/lib/browser-support.svelte b/src/lib/browser-support.svelte
@@ -0,0 +1,14 @@
+<script>
+    import { browserSupport } from "./browser-support";
+
+    $: ({ webgl, worker } = $browserSupport ?? {})
+    $: (both = webgl && worker)
+
+    const highlighted = (condition) => condition? 'color: #ff9b28' : '';
+</script>
+
+<div id="support" hidden={!$browserSupport} style="color: gray; animation: fadein 0.5s;">
+    <span style={highlighted(webgl)}>WebGL</span>
+    <span style={highlighted(both)}> + </span>
+    <span style={highlighted(worker)}>Worker</span>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,25 @@
+<script>
+    import BrowserSupport from "../lib/browser-support.svelte";
 
+    function load() {
+        const overlay = document.getElementById("overlay")
+        overlay.hidden = false
+        location.href = '/model'
+    }
+
+    function dialogCloseHandler(e) {
+        const target = e.target || e.srcElement
+        if (target.tagName !== 'DIALOG') return
+        const rect = target.getBoundingClientRect()
+        const inside =
+            rect.top <= e.clientY &&
+            rect.bottom >= e.clientY &&
+            rect.left <= e.clientX &&
+            rect.right >= e.clientX
+
+        if (!inside) target.close()
+    }
+</script>
 
 <div id="home">
     <div class="container">
@@ -7,18 +28,14 @@
                 <div style="text-align: left;"><noscript>Enable JavaScript!</noscript></div>
                 <div></div>
                 <div style="text-align: right;">
-                    <div id="support" hidden style="color: gray; animation: fadein 0.5s;">
-                        <span id="webgl">WebGL</span>
-                        <span id="plus"> + </span>
-                        <span id="worker">Worker</span>
-                    </div>
+                    <BrowserSupport />
                 </div>
             </div>
 
             <h1>Icon GAN</h1>
             <div class="flex-center btn-container">
                 <div style="position: absolute;">
-                    <button class="btn" onclick="load()">
+                    <button class="btn" on:click={load}>
                         <svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
                             <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
                             <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
@@ -41,7 +58,9 @@
         <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
     </div>
 </div>
-<dialog id="aboutDialog" onclick="dialogCloseHandler(event)">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<dialog id="aboutDialog" on:click={dialogCloseHandler}>
     <p>Icon GAN is a <a href="https://en.wikipedia.org/wiki/Generative_adversarial_network">generative adversarial network</a> for interactively generating favicons.</p>
     <p>
         Usually designers work together with clients to iterate on icon designs, presenting drafts and iterating on the final design.

diff --git a/src/views/Generator.svelte b/src/views/Generator.svelte
@@ -47,12 +47,6 @@
 
         console.info('model loaded, update')
         exploration.update()
-
-        const home = document.getElementById('home')
-        home.hidden = true
-
-        const overlay = document.getElementById('overlay')
-        overlay.hidden = true
     })
 
     let elements = [{