Add logo-only functionality for embed on itch

Maingron · Sep 1, 2024 · ca17858 · ca17858
1 parent c6a144e
commit ca17858
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 23 deletions.
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/css/style.scss b/css/style.scss
@@ -7,29 +7,18 @@ $editbuttonSize: 24px;
 html, body {
     margin: 0;
     padding: 0;
+}
+
+html:has(.clock) {
     background: #000;
 }
 
-body {
+body.clock {
     font-size: 1.4rem;
     display: block;
     position: relative;
     overflow: hidden;
 
-    iframe#itchframe {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        border: 0px solid transparent !important;
-        outline: 0px solid transparent !important;
-        background-color: #000;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-
     &:has(iframe#itchframe) {
         overflow: hidden !important;
     }
@@ -111,7 +100,7 @@ body {
 
 // Editing:
 
-body {
+body.clock {
     &.editing {
         min-height: calc(100vh + 80px);
         overflow: auto;
@@ -210,3 +199,37 @@ body {
         }
     }
 }
+
+// Others:
+
+body.logoonly {
+    img {
+        height: 100vmin;
+        width: 100vmin;
+        aspect-ratio: 1/1;
+        display: inline-block;
+        overflow: hidden;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        image-rendering: pixelated;
+    }
+}
+
+
+body.hasiframe {
+    iframe#itchframe {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border: 0px solid transparent !important;
+        outline: 0px solid transparent !important;
+        background-color: #000;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+    }
+}
diff --git a/index.html b/index.html
@@ -8,24 +8,39 @@
         <link rel="shortcut icon" href="logo.png" type="image/png">
 
         <script>
-            // If using itch.io client, we need to run inside an iframe, because itch is buggy
             window.addEventListener("DOMContentLoaded", function() {
+                let triggerIsNotClock = false;
+
                 if(window.self == window.top) {
                     if(window.navigator.userAgent.indexOf("itch/") > 10 || window.location.protocol.indexOf("itch-cave") > -1) {
+                        // If using itch.io client, we need to run inside an iframe, because itch is buggy
+                        triggerIsNotClock = true;
                         document.body.innerHTML = "<iframe src='index.html?isIframe=true&isItch=true' id='itchframe'></iframe>";
-
-                        config.edit = false;
-                        document.body.classList.remove("editing");
-                        document.title = "Maingrons Custom Clock";
+                        document.body.classList.add("hasiframe");
                     }
                 }
+
+                if(window.location.protocol.indexOf("http") > -1 && window.location.host.indexOf("itch.zone") > -1) {
+                    // If embedded on Itch project page, display only the logo
+                    triggerIsNotClock = true;
+                    document.body.classList.add("logoonly");
+                    document.body.innerHTML = `
+                        <img src="logo.png" alt="">
+                    `;
+                }
+
+                if(triggerIsNotClock) {
+                    config.edit = false;
+                    document.body.classList.remove("clock");
+                    document.title = "Maingrons Custom Clock";
+                }
             });
         </script>
 
         <script src="js/config.js"></script>
         <script src="js/lang.js"></script>
     </head>
-    <body>
+    <body class="clock">
         <main id="main">
             <div class="edittools">
                 <button class="trashbin" ondblclick="window.alert('Resetting Clock, click Ok to proceed, close tab/window to abort'); reset();" title="Doubleclick to reset to default settings">🗑</button>