From c74305c1638e4d9f25a0e8e343a0f4a34fac45f7 Mon Sep 17 00:00:00 2001
From: Marcus Ramse <marcus@ramse.se>
Date: Fri, 12 Apr 2024 01:52:04 +0200
Subject: [PATCH] sim: layouting and controls help (#23)

* sim: layouting and controls help

* sim: fix typescript goofs
---
 simulator/src/ui/app.ts           | 46 ++++++++++++++++++-------------
 simulator/src/ui/leds.ts          |  6 ----
 simulator/src/ui/light-sensor.ts  |  6 ----
 simulator/src/ui/notifications.ts |  2 ++
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/simulator/src/ui/app.ts b/simulator/src/ui/app.ts
index aba0797..fbc335e 100644
--- a/simulator/src/ui/app.ts
+++ b/simulator/src/ui/app.ts
@@ -19,8 +19,6 @@ export class App extends LitElement {
             width: 100%;
             height: 100%;
             display: flex;
-            align-items: center;
-            justify-content: center;
 
             touch-action: none;
             user-select: none;
@@ -31,9 +29,16 @@ export class App extends LitElement {
         }
 
         .content {
-            width: 100vmin;
-            height: 100vmin;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100vw;
+            height: 100vh;
             overflow: hidden;
+            gap: 0.5rem;
+            padding: 0.5rem;
+            box-sizing: border-box;
         }
 
         /** Nudge the game upwards a bit in portrait to make space for the virtual gamepad. */
@@ -44,20 +49,18 @@ export class App extends LitElement {
             }
         }
 
-        .canvas-wrapper {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-        }
-
         canvas {
             width: 100%;
-            height: auto;
+            height: 100%;
+            object-fit: contain;
             image-rendering: pixelated;
             image-rendering: crisp-edges;
         }
+
+        .help {
+            font-size: 0.9em;
+            color: #aaa;
+        }
     `;
 
     private readonly runtime: Runtime;
@@ -267,7 +270,9 @@ export class App extends LitElement {
         window.addEventListener("dragover", e => e.preventDefault());
         window.addEventListener("drop", e => {
             e.preventDefault();
-            this.loadCartFromFile(e.dataTransfer.files[0]);
+            if (e.dataTransfer?.files?.[0]) {
+                this.loadCartFromFile(e.dataTransfer.files[0]);
+            }
         });
 
         const pollPhysicalGamepads = () => {
@@ -423,7 +428,9 @@ export class App extends LitElement {
         input.multiple = false;
 
         input.addEventListener("change", async () => {
-            this.loadCartFromFile(input.files[0]);
+            if (input.files?.[0]) {
+                this.loadCartFromFile(input.files[0]);
+            }
         });
 
         document.body.appendChild(input);
@@ -471,15 +478,16 @@ export class App extends LitElement {
 
     render () {
         return html`
-            <wasm4-light-sensor .app=${this}></wasm4-light-sensor>
             <div class="content">
                 ${this.showMenu ? html`<wasm4-menu-overlay .app=${this}></wasm4-menu-overlay>`: ""}
                 <wasm4-notifications></wasm4-notifications>
-                <div class="canvas-wrapper">
-                    ${this.runtime.canvas}
+                <wasm4-light-sensor .app=${this}></wasm4-light-sensor>
+                ${this.runtime.canvas}
+                <wasm4-leds .app=${this}></wasm4-leds>
+                <div class="help">
+                    Controls: Arrows/WASD, Z/K, X/J, Enter/Y, Backspace/T, Escape
                 </div>
             </div>
-            <wasm4-leds .app=${this}></wasm4-leds>
         `;
         // <wasm4-virtual-gamepad .app=${this}></wasm4-virtual-gamepad>
     }
diff --git a/simulator/src/ui/leds.ts b/simulator/src/ui/leds.ts
index 531a2be..eec9003 100644
--- a/simulator/src/ui/leds.ts
+++ b/simulator/src/ui/leds.ts
@@ -6,12 +6,6 @@ import { unpack888 } from "./utils";
 @customElement("wasm4-leds")
 export class LEDs extends LitElement {
     static styles = css`
-        :host {
-            position: absolute;
-
-            bottom: 20px;
-        }
-
         .leds {
             display: flex;
             gap: 40px;
diff --git a/simulator/src/ui/light-sensor.ts b/simulator/src/ui/light-sensor.ts
index 4a2c60b..2f7a138 100644
--- a/simulator/src/ui/light-sensor.ts
+++ b/simulator/src/ui/light-sensor.ts
@@ -5,12 +5,6 @@ import { App } from "./app";
 @customElement("wasm4-light-sensor")
 export class LightSensor extends LitElement {
     static styles = css`
-        :host {
-            position: absolute;
-
-            top: 30px;
-        }
-
         input[type="range"] {
             position: relative;
             -webkit-appearance: none;
diff --git a/simulator/src/ui/notifications.ts b/simulator/src/ui/notifications.ts
index 243d7bd..c07f788 100644
--- a/simulator/src/ui/notifications.ts
+++ b/simulator/src/ui/notifications.ts
@@ -15,6 +15,8 @@ export class Notifications extends LitElement {
 
             display: flex;
             flex-direction: column;
+
+            z-index: 99;
         }
 
         .notification {