implement "itch.io support"

web/src/index.html

@@ -12,7 +12,7 @@
         <div id="centered">
             <canvas id="screen" width="320" height="240"></canvas>
             <div id="message"></div>
-            <button id="cartButton">Load cart...</button>
+            <button id="cartButton" style="visibility:hidden">Load cart...</button>
         </div>
         <div id="footer">
             <a href="http://unlicense.org/" ref="license">Unlicense</a>

web/src/main.js

@@ -221,7 +221,12 @@ async function runModule(data, keepUrl) {
 }
 
 async function runModuleFromURL(url, keepUrl) {
-    runModule(await (await fetch(url)).arrayBuffer(), keepUrl);
+    let response = await fetch(url);
+    let type = response.headers.get('Content-Type');
+    if(type && type.includes('html')) {
+        throw false;
+    }
+    runModule(await response.arrayBuffer(), keepUrl);
 }
 
 function runModuleFromHash() {
@@ -238,28 +243,56 @@ function runModuleFromHash() {
 }
 
 window.onhashchange = runModuleFromHash;
-runModuleFromHash();
 
-document.getElementById('cartButton').onclick = () => {
+let setupLoad = () => {
-    let fileInput = document.createElement('input');
+    let loadButton = document.getElementById('cartButton');
-    fileInput.type = 'file';
+    loadButton.style = '';
-    fileInput.accept = '.wasm,.uw8,application/wasm';
+    loadButton.onclick = () => {
-    fileInput.onchange = () => {
+        let fileInput = document.createElement('input');
-        if (fileInput.files.length > 0) {
+        fileInput.type = 'file';
-            runModuleFromURL(URL.createObjectURL(fileInput.files[0]));
+        fileInput.accept = '.wasm,.uw8,application/wasm';
-        }
+        fileInput.onchange = () => {
+            if (fileInput.files.length > 0) {
+                runModuleFromURL(URL.createObjectURL(fileInput.files[0]));
+            }
+        };
+        fileInput.click();
     };
-    fileInput.click();
+    
-};
+    screen.ondragover = (e) => {
-
-screen.ondragover = (e) => {
-    e.preventDefault();
-};
-
-screen.ondrop = (e) => {
-    let files = e.dataTransfer && e.dataTransfer.files;
-    if(files && files.length == 1) {
         e.preventDefault();
-        runModuleFromURL(URL.createObjectURL(e.dataTransfer.files[0]));
+    };
+    
+    screen.ondrop = (e) => {
+        let files = e.dataTransfer && e.dataTransfer.files;
+        if(files && files.length == 1) {
+            e.preventDefault();
+            runModuleFromURL(URL.createObjectURL(e.dataTransfer.files[0]));
+        }
     }
-}
+
+    runModuleFromHash();
+};
+
+let location = window.location;
+if(location.hash.length != 0) {
+    setupLoad();
+} else {
+    (async () => {
+        let url = location.href;
+        if(url.endsWith('.html')) {
+            url = url.slice(0, url.length - 4) + 'uw8';
+        } else {
+            if(!url.endsWith('/')) {
+                url += '/';
+            }
+            url += 'cart.uw8';
+        }
+        try {
+            await runModuleFromURL(url, true);
+        } catch(e) {
+            setupLoad();
+        }
+    })();
+}
+

web/src/style.css

@@ -81,4 +81,17 @@ button:active {
         width: 960px;
         height: 720px;
     }
-}
+}
+
+@media (width:640px) and (height:480px) {
+    #screen {
+        width: 640px;
+        height: 480px;
+        border: 0;
+        margin: 0;
+    }
+    body {
+        overflow: hidden;
+    }
+  }
+