added unlicense, more style, started math imports

web/package.json

@@ -1,4 +1,5 @@
 {
+  "license": "Unlicense",
   "devDependencies": {
     "@parcel/optimizer-data-url": "^2.0.0",
     "@parcel/transformer-inline-string": "^2.0.0",

web/src/index.html

@@ -12,7 +12,11 @@
         <div id="centered">
             <canvas id="screen" width="640" height="512"></canvas>
             <div id="message"></div>
-            <input id="cart" type="file" accept=".wasm,.uw8,application/wasm">
+            <button onclick="document.getElementById('cart').click()">Load cart...</button>
+            <input id="cart" style="visibility: hidden" type="file" accept=".wasm,.uw8,application/wasm">
+        </div>
+        <div id="footer">
+            <a href="http://unlicense.org/" ref="license">Unlicense</a>
         </div>
     </body>
     <script type="module">

web/src/main.js

@@ -1,5 +1,5 @@
-import loaderUrl from "data-url:./uw8loader.wasm";
-import baseUrl from "data-url:./base.wasm";
+import loaderUrl from "data-url:../../platform/loader.wasm";
+import baseUrl from "data-url:../../platform/base.wasm";
 
 async function loadWasm(url, imports) {
     let wasm_module = await (await fetch(url)).arrayBuffer();
@@ -21,8 +21,8 @@ framebufferCanvas.width = 320;
 framebufferCanvas.height = 256;
 let framebufferCanvasCtx = framebufferCanvas.getContext("2d");
 let imageData = framebufferCanvasCtx.createImageData(320, 256);
-let canvasCtx = document.getElementById('screen').getContext('2d');
-canvasCtx.imageSmoothingEnabled = false;
+let screen = document.getElementById('screen');
+let canvasCtx = screen.getContext('2d');
 
 let cancelFunction;
 
@@ -53,6 +53,8 @@ async function runModule(data) {
         history.pushState(null, null, newURL);
     }
 
+    screen.width = screen.width;
+
     try {
 
         let loaderImport = {
@@ -79,6 +81,10 @@ async function runModule(data) {
         let importObject = {
             env: {
                 memory: new WebAssembly.Memory({ initial: 8, maximum: 8 }),
+            },
+            math: {
+                sin: Math.sin,
+                cos: Math.cos
             }
         };
     
@@ -107,6 +113,7 @@ async function runModule(data) {
                     buffer[i * 4 + 3] = 255;
                 }
                 framebufferCanvasCtx.putImageData(imageData, 0, 0);
+                canvasCtx.imageSmoothingEnabled = false;
                 canvasCtx.drawImage(framebufferCanvas, 0, 0, 640, 512);
         
                 window.requestAnimationFrame(mainloop);

web/src/style.css

@@ -1,5 +1,10 @@
+html, body, canvas {
+    padding: 0;
+    margin: 0;
+}
+
 html {
-    font-family: 'Josefin Sans', sans-serif;
+    font-family: 'Josefin Sans', Verdana, 'Arial Black', sans-serif;
     background-color: #202024;
     color: #808070;
     height: 100%;
@@ -7,16 +12,55 @@ html {
 
 body {
     height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: grid;
+    grid-template-rows: 1fr 0fr;
+}
+
+#centered {
+    align-self: center;
+    justify-self: center;
+}
+
+.footer {
+    color: #202420;
+}
+
+a {
+    color: #303630;
+}
+
+a:hover {
+    color: #405040;
 }
 
 canvas {
-    margin: 8px;
+    background-color: #202428;
+    margin-bottom: 8px;
+    border: 4px solid #303040;
     box-shadow: 5px 5px 20px black;
 }
 
-.error {
-    color: red;
+#message {
+    margin-bottom: 8px;
 }
+
+.error {
+    color: #e04030;
+}
+
+button {
+    font-family: inherit;
+    background-color: #303440;
+    color: #808070;
+    padding: 4px;
+    border: 1px solid #404040;
+    border-radius: 4px;
+}
+
+button:hover {
+    background-color: #202010;
+}
+
+button:active {
+    background-color: #504450;
+}