Deploy to GitHub pages

mlange-42 · Mar 18, 2024 · 396dd2f · 396dd2f
commit 396dd2f
Show file tree

Hide file tree

Showing 6 changed files with 731 additions and 0 deletions.
diff --git a/iframe.css b/iframe.css
@@ -0,0 +1,36 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #050505;
+    color: white;
+    overflow: hidden;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+canvas {
+    max-width: 100%;
+}
+
+#loading {
+    width: 50px;
+    height: 50px;
+    margin: auto;
+    margin-top: 210px;
+}
+
+.loader {
+    width: 50px;
+    height: 50px;
+    margin: auto;
+    border: 8px solid #404040;
+    border-top: 8px solid #ffffff;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/iframe.html b/iframe.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body style="overflow: hidden;">
+    <!-- Polyfill for the old Edge browser -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/encoding.min.js"></script>
+    <script src="./wasm_exec.js"></script>
+    <link rel="stylesheet" href="./iframe.css">
+    <script>
+        async function init(url, name) {
+            const go = new Go();
+            const result = await WebAssembly.instantiateStreaming(fetch(url), go.importObject).catch((err) => {
+                console.error(err);
+            });
+            document.getElementById('loading').remove();
+            console.log(result)
+            go.run(result.instance);
+        }
+
+        window.addEventListener('DOMContentLoaded', async () => {
+            const go = new Go();
+            const name = window.location.search.substring(1);
+            let url = `./main.wasm`;
+
+            // Polyfill
+            if (!WebAssembly.instantiateStreaming) {
+                WebAssembly.instantiateStreaming = async (resp, importObject) => {
+                    const source = await (await resp).arrayBuffer();
+                    return await WebAssembly.instantiate(source, importObject);
+                };
+            }
+            await init(url, name);
+        });
+    </script>
+    <noscript>
+        <div style="width:100%; text-align: center; color: #ff9090;">This website requires JavaScript to run properly!</div>
+    </noscript>
+    <div id="loading"><div class="loader"></div></div>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Tiny World</title>
+    <meta name="title" content="Tiny World (dev version)">
+    <meta name="description" content="A tiny, slow-paced world and colony building game.">
+
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://mlange-42.github.io/tiny-world/" />
+    <meta property="og:title" content="Tiny World (dev version)" />
+    <meta property="og:description" content="A tiny, slow-paced world and colony building game." />
+    <meta property="og:image" content="https://github.com/mlange-42/tiny-world/assets/44003176/b3384739-af7c-4f44-996f-8f1cb5097fa3" />
+
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://mlange-42.github.io/tiny-world/" />
+    <meta property="twitter:title" content="Tiny World (dev version)" />
+    <meta property="twitter:description" content="A tiny, slow-paced world and colony building game." />
+    <meta property="twitter:image" content="https://github.com/mlange-42/tiny-world/assets/44003176/b3384739-af7c-4f44-996f-8f1cb5097fa3" />
+
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<div align="center">
+<h1>Tiny World (dev)</h1>
+<div id="canvas-container">
+    <iframe id="iframe" src="./iframe.html" width="920"
+        height="540" allow="autoplay" frameBorder="0" scrolling="no"></iframe>
+</div>
+
+<p>
+    <tt style="font-size: 120%"><a href="https://github.com/mlange-42/tiny-world">github.com/mlange-42/tiny-world</a></tt>
+    <br/>
+    <tt style="font-size: 120%"><a href="https://mlange-42.itch.io/tiny-world">itch.io</a></tt>
+</p>
+</div>
+</body>
+</html>
diff --git a/main.wasm b/main.wasm
diff --git a/style.css b/style.css
@@ -0,0 +1,49 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: #050505;
+    color: #FFFFFF;
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.5;
+}
+
+p {
+    margin: 0px 0px 16px 0px;
+}
+
+a {
+    color: #FFFFFF;
+}
+
+#iframe {
+    max-width: 100%;
+    margin-bottom: -6px;
+}
+
+a:visited {
+    color: #c0c0c0;
+}
+
+.tt {
+    font-family: 'Lucida Console', monospace;
+    font-size: 90%;
+    color: #c0c0c0;
+}
+
+#canvas-container {
+    display: inline-block;
+    border: solid white 2px;
+    min-width: 0px;
+    max-width: 90%;
+    overflow: auto;
+}
+
+#canvas {
+    max-width: 100%;
+}