@wasm-gaming/engine-specs 0.2.6 → 0.3.0

package/demo/components/launcher.html

@@ -1,220 +0,0 @@
-<form class="launcher" @submit.prevent="onLaunch">
-  <section class="sdk">
-    <CSdkInfo ...sdkInfo :messages="messages" />
-  </section>
-
-  <div class="drop-grid" :class.single="!showBIOS">
-    <CDropArea
-      :if="showBIOS"
-      :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="messages.pickBiosButton || 'Pick BIOS'"
-      :file-name="biosFile?.name"
-      :messages="messages"
-      @select="onBiosSelect"
-      @remove="onBiosRemove"
-    />
-    <CDropArea
-      :prompt="messages.dropRomPrompt || 'Drop ROM File'"
-      :asset-hint="romAssetHint || messages.romAssetHint || 'or choose ROM file from computer'"
-      :accept="romAccept"
-      :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">
-    {{ messages.launchButton || 'Launch Engine' }}
-  </button>
-
-  <div class="status">{{ status }}</div>
-</form>
-
-<script :setup="{
-  CSdkInfo,
-  CDropArea,
-  sdkInfo,
-  initialRomFile = null,
-  initialBiosFile = null,
-  romAccept,
-  romAssetHint,
-  biosAccept,
-  biosAssetHint,
-  requiresBIOS = false,
-  showBIOS = false,
-  messages = {},
-}">
-  let romFile = initialRomFile;
-  let biosFile = initialBiosFile;
-
-  let canLaunch = Boolean(romFile && (!requiresBIOS || biosFile));
-  let status = "";
-
-  const updateStatus = () => {
-    canLaunch = Boolean(romFile && (!requiresBIOS || biosFile));
-    if (requiresBIOS && !biosFile && !romFile) {
-      status = messages.statusSelectBoth || "Ready - Please select ROM and BIOS files to launch.";
-    } else if (requiresBIOS && !biosFile) {
-      status = messages.statusBiosRequired || "BIOS file is required to launch.";
-    } else if (!romFile) {
-      status = messages.statusSelectRom || "Ready - Please select a ROM file to launch.";
-    } else {
-      const readyMsg = messages.statusReady || "Ready to launch!";
-      status = `${readyMsg} (${romFile.name}${biosFile ? ' + BIOS' : ''})`;
-    }
-  };
-
-  updateStatus();
-
-  const extractFile = (arg) => {
-    if (!arg) return null;
-    if (arg instanceof File) return arg;
-    if (arg.detail instanceof File) return arg.detail;
-    if (arg.detail) return extractFile(arg.detail);
-    return null;
-  };
-
-  const onRomSelect = (arg) => {
-    const file = extractFile(arg);
-    if (!file) {
-      onRomRemove();
-      return;
-    }
-    romFile = file;
-    updateStatus();
-    $emit("save:rom", file);
-  };
-
-  const onBiosSelect = (arg) => {
-    const file = extractFile(arg);
-    if (!file) {
-      onBiosRemove();
-      return;
-    }
-    biosFile = file;
-    updateStatus();
-    $emit("save:bios", file);
-  };
-
-  const onRomRemove = () => {
-    romFile = null;
-    updateStatus();
-    $emit("remove:rom");
-  };
-
-  const onBiosRemove = () => {
-    biosFile = null;
-    updateStatus();
-    $emit("remove:bios");
-  };
-
-  const onLaunch = async () => {
-    if (!canLaunch) {
-      updateStatus();
-      return;
-    }
-    try {
-      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}`;
-    }
-  };
-</script>
-
-<style>
-  form.launcher {
-    width: min(740px, 100%);
-    border: 1px solid var(--demo-panel-border, rgba(255, 255, 255, 0.4));
-    border-radius: var(--demo-panel-radius, 12px);
-    background: var(--demo-panel-bg, rgba(255, 255, 255, 0.25));
-    box-shadow: var(--demo-panel-shadow, inset 0 0 0 1px rgba(255, 255, 255, 0.5));
-    backdrop-filter: blur(var(--demo-panel-blur, 24px));
-    -webkit-backdrop-filter: blur(var(--demo-panel-blur, 24px));
-    padding: 1.5rem;
-    display: grid;
-    gap: 1.25rem;
-    position: relative;
-    overflow: hidden;
-  }
-
-  form.launcher::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, transparent 50%, var(--demo-accent, #ff007f) 50%);
-    opacity: 0.8;
-  }
-
-  .sdk {
-    border: 1px solid var(--demo-subpanel-border, rgba(255, 255, 255, 0.3));
-    border-radius: var(--demo-subpanel-radius, 8px);
-    padding: 1.25rem;
-    background: var(--demo-subpanel-bg, rgba(255, 255, 255, 0.35));
-    backdrop-filter: blur(var(--demo-subpanel-blur, 12px));
-    -webkit-backdrop-filter: blur(var(--demo-subpanel-blur, 12px));
-    box-shadow: var(--demo-subpanel-shadow, inset 0 0 0 1px rgba(255, 255, 255, 0.6));
-  }
-
-  .drop-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1rem;
-  }
-
-  .drop-grid.single {
-    grid-template-columns: 1fr;
-  }
-
-  .launch-btn {
-    width: 100%;
-    padding: 0.9rem 1.5rem;
-    font-size: 1.1rem;
-    font-weight: 700;
-    font-family: var(--demo-font-sans, sans-serif);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--demo-launch-text, #ffffff);
-    background: var(--demo-launch-bg, var(--demo-accent, #ff007f));
-    border: none;
-    border-radius: var(--demo-subpanel-radius, 8px);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: var(--demo-accent-glow, 0 0 15px rgba(255, 0, 127, 0.3));
-  }
-
-  .launch-btn:hover:not(:disabled) {
-    filter: brightness(1.1);
-    transform: translateY(-1px);
-  }
-
-  .launch-btn:active:not(:disabled) {
-    transform: translateY(0);
-  }
-
-  .launch-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    box-shadow: none;
-    background: var(--demo-muted, #475569);
-  }
-
-  .status {
-    min-height: 1.2rem;
-    color: var(--demo-text, #0f172a);
-    font-family: var(--demo-font-mono, monospace);
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    opacity: 0.8;
-  }
-</style>

package/demo/components/sdk-info.html

@@ -1,54 +0,0 @@
-<h1>{{ name }} ({{ id }})</h1>
-<p>{{ description }}</p>
-<div class="row">
-  <span class="pill">{{ (messages.versionPrefix || 'Version ') + version }}</span>
-  <span class="pill">{{ baseWidth }}x{{ baseHeight }}</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;
-    font-size: 1.4rem;
-    font-weight: 800;
-    color: var(--demo-text, var(--text, #0f172a));
-    letter-spacing: 0.05em;
-  }
-
-  p {
-    margin: 0;
-    color: var(--demo-muted, var(--muted, #475569));
-    font-size: 0.95rem;
-  }
-
-  .row {
-    margin-top: 0.9rem;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.6rem;
-  }
-
-  .pill {
-    border: 1px solid var(--demo-pill-border, var(--demo-accent, var(--accent, #ff007f)));
-    border-radius: 2px;
-    padding: 0.3rem 0.75rem;
-    font-family: var(--demo-font-mono, var(--font-mono, monospace));
-    font-size: 0.8rem;
-    color: var(--demo-pill-text, var(--demo-accent, var(--accent, #ff007f)));
-    background: var(--demo-pill-bg, rgba(255, 0, 127, 0.1));
-    box-shadow: var(--demo-pill-shadow, inset 0 0 5px rgba(255, 0, 127, 0.3));
-    text-transform: uppercase;
-  }
-</style>