[Added] Ability to serve the project using nginx on localhost:4600

2024-12-19 22:40:59 +01:00
parent c0bfe9bd13
commit 33f6504b6c
10 changed files with 220 additions and 121 deletions
@@ -0,0 +1,114 @@
+<!doctypehtml>
+    <html lang=EN-us>
+
+    <head>
+        <meta charset=utf-8>
+        <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
+        <title>Jelly Rescue</title>
+        <meta content="Jelly Rescue" name=title>
+        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    </head>
+    <style>
+        html {
+            width: 100vw;
+            height:100vh;
+            background: #0C0D14;
+        }
+        body {
+          margin: 0px;
+          width:100%;
+          height:100%;
+          display:flex;
+        }
+        canvas {
+            margin:auto;
+            cursor:none;
+            background: black;
+        }
+        .media-player {
+            margin:auto;
+            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+            border-radius: 0.4rem;
+            display: flex;
+            flex-direction: column;
+            background: rgb(33, 34, 51);
+            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
+            overflow: hidden;
+        }
+
+        .game-title {
+            color:ivory;
+            margin:0.3rem 0.5rem 0.8rem 0.5rem;
+            font-size: larger;
+             font-family: 'Press Start 2P', cursive;
+             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+        }
+
+        .links {
+            display: flex;
+            justify-content: space-between;
+            margin:1.2rem 0.5rem 0 0.4rem;
+        }
+
+        a {
+            height: 24px;
+        }
+
+        .bi-github {
+            margin-top:0.1rem;
+            width: 24px;
+            height: 24px;
+            fill: white;
+        }
+        .bi-github:hover {
+            transform: scale(1.2);
+        }
+        @media (max-width: 643px) {
+            .media-player {
+                width: 100%; /* Make media-player take full width */
+            }
+            canvas {
+                width:100%;
+            }
+            .game-title {
+                font-size:medium;
+            }
+        }
+    </style>
+    <body>
+    <div class="media-player">
+<canvas id="canvas" width="640" height="544"></canvas>
+<div class="links">
+<span class="game-title">Jelly Rescue</span>
+ <a href="https://github.com/Ninjaws/WebJelly-Rescue" class="github-link" target="_blank">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+</svg>
+</a>
+</div>
+</div>
+<p id="output" />
+<script>
+    var Module = {
+        print: (function() {
+            var element = document.getElementById('output');
+            if (element) element.value = '';
+            return function(text) {
+                if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight;
+                }
+            };
+        })(),
+        canvas: (function() {
+            var canvas = document.getElementById('canvas');
+            return canvas;
+        })()
+    };
+</script>
+         <script src=game.js async></script>
+    </body>
+
+    </html>