@wasm-gaming/engine-specs 0.2.3 → 0.2.5

package/demo/README.md

@@ -6,19 +6,75 @@ This directory contains a standalone, themable web interface template for hostin
 
 1. **Copy the `demo/` folder** into your engine repository.
 
-2. **Connect your engine SDK in `demo/sdk.js`**:
-   Open `demo/sdk.js` and point it to your engine SDK build:
-   ```javascript
-   import sdk from "../src/index.js"; // or "../dist/index.js"
-
-   export async function getSdk() {
-     return sdk;
-   }
+2. **Initialize via ES module script**:
+   ```html
+   <script type="module">
+     import demo from './demo.js'
+     import sdk from './demo.sdk.js' // Or your engine SDK import
+
+     demo
+       .init({
+         messages: {
+           title: 'My Custom Engine Demo',
+         },
+         bios: false, // 'required' | 'optional' | false
+         escMenu: {
+           enabled: true,
+           title: 'Game Pause Menu',
+           items: [
+             { label: 'Toggle Fullscreen', action: (instance) => { document.documentElement.requestFullscreen?.(); } }
+           ],
+         },
+       })
+       .on('file', ({ type, action, file }) => {
+         if (file) {
+           console.log(`[Demo] Selected ${type} file: ${file.name}`)
+         }
+       })
+       .on('launch', async (e) => {
+         const assets = {}
+
+         // if rom loaded
+         if (demo.hasFile('rom')) {
+           assets.rom = await demo.loadToMEMFS('rom')
+         }
+
+         // if bios required and loaded
+         if (demo.hasFile('bios')) {
+           assets.bios = await demo.loadToMEMFS('bios')
+         }
+
+         const instance = await sdk.load({
+           attachTo: e.attachTo,
+           assets,
+           options: { fileName: e.fileName, byteLength: e.byteLength },
+         })
+
+         instance.start()
+         return instance
+       })
+   </script>
    ```
-   *Alternatively*, if embedding in HTML without modifying `sdk.js`, set `window.SDK = myEngineSdk;` before `demo.js` runs.
 
-3. **Serve the demo**:
-   Serve `demo/index.html` using any local development server (e.g. `npx serve demo` or Vite).
+---
+
+## 🎮 Component79 ESC Menu
+
+The demo includes an interactive, customizable in-game ESC pause menu component built with **Component79**.
+
+### ESC Menu Options (`escMenu`)
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `enabled` | `boolean` | `true` | Enable/disable in-game ESC menu overlay. |
+| `title` | `string` | `"Game Menu"` | Title displayed at top of ESC menu modal. |
+| `shortcutKey` | `string` | `"Escape"` | Keyboard key that toggles the menu overlay. |
+| `showTriggerButton` | `boolean` | `true` | Display floating top-right "ESC Menu" trigger badge for mouse/touch access. |
+| `items` | `Array<{label: string, action: function}>` | `[]` | Custom action buttons added to ESC menu. |
+| `onReset` | `function` | `instance.reset()` | Callback when Reset Game button is pressed. |
+| `onExit` | `function` | `instance.destroy()` | Callback when Exit to Launcher button is pressed. |
+| `onSaveState` | `function` | `instance.saveState()` | Callback when Save State button is pressed. |
+| `onLoadState` | `function` | `instance.loadState()` | Callback when Load State button is pressed. |
 
 ---
 
@@ -50,15 +106,10 @@ To apply your custom branding, override any of the `:root` variables in `demo.cs
   --demo-subpanel-bg: rgba(30, 41, 59, 0.6);
   --demo-subpanel-border: rgba(255, 255, 255, 0.1);
 
-  /* Buttons & Dropzone */
-  --demo-drop-bg: rgba(30, 41, 59, 0.4);
-  --demo-picker-bg: rgba(255, 255, 255, 0.1);
-  --demo-picker-hover-bg: rgba(255, 255, 255, 0.2);
-  --demo-picker-text: #ffffff;
-
-  /* Launch button */
-  --demo-launch-bg: var(--demo-accent);
-  --demo-launch-text: #ffffff;
+  /* ESC Menu styling */
+  --demo-esc-bg: rgba(6, 9, 16, 0.85);
+  --demo-esc-card-bg: rgba(15, 23, 42, 0.9);
+  --demo-esc-text: #f8fafc;
 }
 ```
 
@@ -84,8 +135,9 @@ To apply your custom branding, override any of the `:root` variables in `demo.cs
 | `--demo-picker-bg` | Pick File button background | `rgba(255, 255, 255, 0.5)` |
 | `--demo-pill-bg` | Metadata badge background | `rgba(var(--demo-accent-rgb), 0.1)` |
 | `--demo-file-info-bg` | Canvas overlay panel background | `rgba(255, 255, 255, 0.7)` |
-| `--demo-launch-bg` | Launch button background color | `var(--demo-accent)` |
-| `--demo-launch-text` | Launch button text color | `#ffffff` |
+| `--demo-esc-bg` | ESC menu overlay background | `rgba(6, 9, 16, 0.82)` |
+| `--demo-esc-card-bg` | ESC menu card background | `rgba(15, 23, 42, 0.88)` |
+| `--demo-esc-text` | ESC menu text color | `#f8fafc` |
 | `--demo-font-sans` | Primary sans-serif font family | `"Outfit", system-ui, sans-serif` |
 | `--demo-font-mono` | Monospace code font family | `"Space Mono", monospace` |
 
@@ -93,6 +145,7 @@ To apply your custom branding, override any of the `:root` variables in `demo.cs
 
 ## 🛠 Features
 
+- **Component79 ESC Menu**: Customizable pause menu overlay with keydown listeners and touch/mouse badges.
 - **OPFS Asset Persistence**: Automatically stores selected ROM and BIOS files in the Origin Private File System (`navigator.storage.getDirectory()`), restoring them automatically across page reloads.
 - **Split Asset Drop Zones**: Independent drop/picker areas for optional **BIOS** firmware and game **ROM** assets.
 - **Dedicated Launch Trigger**: Prominent launch button that activates once required game assets are selected.

package/demo/components/drop-area.html

@@ -3,11 +3,16 @@
     @dragleave="dragging = false"
     @drop.prevent="onDrop">
     <strong>{{ prompt }}</strong>
-    <p :class.file-selected="selectedName">{{ selectedName ? 'Selected: ' + selectedName : assetHint }}</p>
-    <label class="picker">
-        {{ selectedName ? 'Change File' : buttonText }}
-        <input type="file" :accept="accept" @change="onPick" />
-    </label>
+    <p :class.file-selected="selectedName">{{ selectedName ? ((messages.selectedPrefix || 'Selected: ') + selectedName) : assetHint }}</p>
+    <div class="picker-actions">
+        <label class="picker">
+            {{ selectedName ? (messages.changeFileButton || 'Change File') : buttonText }}
+            <input type="file" :accept="accept" @change="onPick" />
+        </label>
+        <button type="button" :if="selectedName" class="remove-btn" @click.stop="onRemove">
+            {{ messages.removeFileButton || 'Remove' }}
+        </button>
+    </div>
 </section>
 
 <script :setup="{
@@ -16,6 +21,7 @@
   accept,
   buttonText = 'Pick file',
   fileName = '',
+  messages = {},
 }">
   let dragging = false;
   let selectedName = fileName || "";
@@ -30,7 +36,12 @@
   };
 
   const emitFile = (file) => {
-    if (!file) return;
+    if (!file) {
+      selectedName = "";
+      $emit("remove");
+      $emit("select", null);
+      return;
+    }
     selectedName = file.name;
     $emit("select", file);
   };
@@ -45,6 +56,12 @@
     const file = extractFile(event);
     if (file) emitFile(file);
   };
+
+  const onRemove = () => {
+    selectedName = "";
+    $emit("remove");
+    $emit("select", null);
+  };
 </script>
 
 <style>
@@ -94,9 +111,15 @@
         font-weight: 600;
     }
 
-    .picker {
+    .picker-actions {
         display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
         margin-top: 1rem;
+    }
+
+    .picker {
+        display: inline-flex;
         background: var(--demo-picker-bg, rgba(255, 255, 255, 0.5));
         color: var(--demo-picker-text, var(--demo-text, #0f172a));
         border: 1px solid var(--demo-picker-border, rgba(255, 255, 255, 0.6));
@@ -121,4 +144,28 @@
     .picker input {
         display: none;
     }
+
+    .remove-btn {
+        display: inline-flex;
+        align-items: center;
+        background: rgba(239, 68, 68, 0.15);
+        color: #ef4444;
+        border: 1px solid rgba(239, 68, 68, 0.4);
+        border-radius: var(--demo-subpanel-radius, 8px);
+        padding: 0.5rem 0.8rem;
+        cursor: pointer;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 0.85rem;
+        letter-spacing: 0.05em;
+        transition: all 0.2s;
+        backdrop-filter: blur(var(--demo-subpanel-blur, 12px));
+        -webkit-backdrop-filter: blur(var(--demo-subpanel-blur, 12px));
+    }
+
+    .remove-btn:hover {
+        background: rgba(239, 68, 68, 0.3);
+        border-color: rgba(239, 68, 68, 0.8);
+        color: #dc2626;
+    }
 </style>