@wasm-gaming/engine-specs 0.2.4 → 0.2.5

package/demo/components/launcher.html

@@ -1,32 +1,34 @@
 <form class="launcher" @submit.prevent="onLaunch">
   <section class="sdk">
-    <CSdkInfo ...sdkInfo />
+    <CSdkInfo ...sdkInfo :messages="messages" />
   </section>
 
   <div class="drop-grid" :class.single="!showBIOS">
     <CDropArea
       :if="showBIOS"
-      :prompt="requiresBIOS ? 'Drop BIOS File (Required)' : 'Drop BIOS File (Optional)'"
-      :asset-hint="biosAssetHint"
+      :prompt="requiresBIOS ? (messages.dropBiosPromptRequired || 'Drop BIOS File (Required)') : (messages.dropBiosPromptOptional || 'Drop BIOS File (Optional)')"
+      :asset-hint="biosAssetHint || (requiresBIOS ? (messages.biosAssetHintRequired || 'required BIOS firmware file') : (messages.biosAssetHintOptional || 'optional BIOS firmware file'))"
       :accept="biosAccept"
-      :button-text="'Pick BIOS'"
+      :button-text="messages.pickBiosButton || 'Pick BIOS'"
       :file-name="biosFile?.name"
+      :messages="messages"
       @select="onBiosSelect"
       @remove="onBiosRemove"
     />
     <CDropArea
-      :prompt="'Drop ROM File'"
-      :asset-hint="romAssetHint"
+      :prompt="messages.dropRomPrompt || 'Drop ROM File'"
+      :asset-hint="romAssetHint || messages.romAssetHint || 'or choose ROM file from computer'"
       :accept="romAccept"
-      :button-text="'Pick ROM'"
+      :button-text="messages.pickRomButton || 'Pick ROM'"
       :file-name="romFile?.name"
+      :messages="messages"
       @select="onRomSelect"
       @remove="onRomRemove"
     />
   </div>
 
   <button type="submit" class="launch-btn" :disabled="!canLaunch">
-    Launch Engine
+    {{ messages.launchButton || 'Launch Engine' }}
   </button>
 
   <div class="status">{{ status }}</div>
@@ -36,19 +38,15 @@
   CSdkInfo,
   CDropArea,
   sdkInfo,
-  onLaunchFiles,
-  onSaveBios,
-  onSaveRom,
-  onRemoveBios,
-  onRemoveRom,
   initialRomFile = null,
   initialBiosFile = null,
   romAccept,
-  romAssetHint = 'or choose ROM file from computer',
+  romAssetHint,
   biosAccept,
-  biosAssetHint = 'optional BIOS firmware file',
+  biosAssetHint,
   requiresBIOS = false,
   showBIOS = false,
+  messages = {},
 }">
   let romFile = initialRomFile;
   let biosFile = initialBiosFile;
@@ -59,13 +57,14 @@
   const updateStatus = () => {
     canLaunch = Boolean(romFile && (!requiresBIOS || biosFile));
     if (requiresBIOS && !biosFile && !romFile) {
-      status = "Ready - Please select ROM and BIOS files to launch.";
+      status = messages.statusSelectBoth || "Ready - Please select ROM and BIOS files to launch.";
     } else if (requiresBIOS && !biosFile) {
-      status = "BIOS file is required to launch.";
+      status = messages.statusBiosRequired || "BIOS file is required to launch.";
     } else if (!romFile) {
-      status = "Ready - Please select a ROM file to launch.";
+      status = messages.statusSelectRom || "Ready - Please select a ROM file to launch.";
     } else {
-      status = `Ready to launch! (${romFile.name}${biosFile ? ' + BIOS' : ''})`;
+      const readyMsg = messages.statusReady || "Ready to launch!";
+      status = `${readyMsg} (${romFile.name}${biosFile ? ' + BIOS' : ''})`;
     }
   };
 
@@ -87,7 +86,7 @@
     }
     romFile = file;
     updateStatus();
-    onSaveRom?.(file);
+    $emit("save:rom", file);
   };
 
   const onBiosSelect = (arg) => {
@@ -98,19 +97,19 @@
     }
     biosFile = file;
     updateStatus();
-    onSaveBios?.(file);
+    $emit("save:bios", file);
   };
 
   const onRomRemove = () => {
     romFile = null;
     updateStatus();
-    onRemoveRom?.();
+    $emit("remove:rom");
   };
 
   const onBiosRemove = () => {
     biosFile = null;
     updateStatus();
-    onRemoveBios?.();
+    $emit("remove:bios");
   };
 
   const onLaunch = async () => {
@@ -119,8 +118,9 @@
       return;
     }
     try {
-      status = `Launching with ${romFile.name}...`;
-      await onLaunchFiles({ rom: romFile, bios: biosFile });
+      const launchingMsg = messages.launchingStatus || "Launching with";
+      status = `${launchingMsg} ${romFile.name}...`;
+      $emit("launch", { rom: romFile, bios: biosFile });
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       status = `Failed to load engine: ${message}`;

package/demo/components/sdk-info.html

@@ -1,11 +1,23 @@
 <h1>{{ name }} ({{ id }})</h1>
 <p>{{ description }}</p>
 <div class="row">
-  <span class="pill">Version {{ version }}</span>
+  <span class="pill">{{ (messages.versionPrefix || 'Version ') + version }}</span>
   <span class="pill">{{ baseWidth }}x{{ baseHeight }}</span>
-  <span class="pill">Asset key: {{ assetKey }}</span>
+  <span class="pill">{{ (messages.assetKeyPrefix || 'Asset key: ') + assetKey }}</span>
 </div>
 
+<script :setup="{
+  name,
+  id,
+  description,
+  version,
+  baseWidth,
+  baseHeight,
+  assetKey,
+  messages = {},
+}">
+</script>
+
 <style>
   h1 {
     margin: 0 0 0.4rem;

package/demo/demo.css

@@ -57,6 +57,11 @@
   --demo-file-info-border: rgba(255, 255, 255, 0.8);
   --demo-file-info-blur: 10px;
 
+  /* ESC Menu Styling */
+  --demo-esc-bg: rgba(0, 0, 0, 0.45);
+  --demo-esc-card-bg: rgba(15, 23, 42, 0.92);
+  --demo-esc-text: #f8fafc;
+
   /* Typography & Fonts */
   --demo-font-sans: "Outfit", system-ui, -apple-system, sans-serif;
   --demo-font-mono: "Space Mono", monospace;