beyond-simulator-web 0.3.4 → 0.3.6

package/dist/public/play.html

@@ -11,7 +11,7 @@
     <header class="bar">
       <div class="brand"><span class="icon">UI</span><strong>模拟器</strong><select id="deviceSel" class="devsel hidden" aria-label="切换设备画布" title="切换设备画布：以新画布重建运行时，GetUICanvasSize 与预设像素一致"></select><select id="playerCountSel" class="playersel hidden" aria-label="试玩人数" title="试玩人数：最多 8 人，每人一份独立客户端"></select><select id="playerViewSel" class="viewsel hidden" aria-label="当前玩家视角" title="切换当前玩家视角：输入、画面和 PlayerSelf 都跟随该玩家"></select><span class="device">设备 <b id="resolution">准备中…</b></span></div>
       <div class="view-tabs" role="tablist" aria-label="试玩页面"><button class="active" data-view="play" role="tab">试玩</button><button data-view="log" role="tab">日志</button></div>
-      <div class="actions"><button id="pause">Ⅱ 暂停运行</button><button id="step" disabled title="暂停后可单帧调试">▷ 单帧调试</button><button class="stop" id="stop">■ 结束试玩</button><button class="primary hidden" id="restart">↻ 重新开始</button><button id="theme" title="切换亮暗主题">◐</button><button id="close">返回编辑</button></div>
+      <div class="actions"><button id="audio" data-audio-toggle title="点击解锁浏览器音效">开启声音</button><button id="pause">Ⅱ 暂停运行</button><button id="step" disabled title="暂停后可单帧调试">▷ 单帧调试</button><button class="stop" id="stop">■ 结束试玩</button><button class="primary hidden" id="restart">↻ 重新开始</button><button id="theme" title="切换亮暗主题">◐</button><button id="close">返回编辑</button></div>
     </header>
     <div class="views">
       <main class="workspace play-view" id="workspace"><div class="stage-shell veiled" id="shell"><div class="stage-label" id="stageLabel"></div><div class="stage" id="stage"><canvas id="cv" class="stage-canvas"></canvas></div></div><div class="loading" id="loading"><span class="spin"></span>正在准备试玩…</div><div class="fatal hidden" id="fatal"></div></main>

package/dist/public/play.js

@@ -5,6 +5,10 @@
       'use strict'
       const API = '/editor/api/play'
       const sessionId = decodeURIComponent(location.hash.slice(1))
+      const embedded = window.parent !== window && new URLSearchParams(location.search).get('embedded') === '1'
+      let closing = false
+      let stopped = false
+      let embeddedApi = null
       const $ = (id) => document.getElementById(id)
       const stage = $('stage')
       const cv = $('cv')
@@ -27,11 +31,16 @@
         if (!showLog) requestAnimationFrame(() => fitStage(true))
       }
 
-      async function api(action, args = {}) {
+      function api(action, args = {}) {
+        if (closing && action !== 'stop') return Promise.reject(new Error('试玩正在关闭'))
+        return embeddedApi ? embeddedApi(action, args) : request(action, args)
+      }
+      async function request(action, args) {
         const response = await fetch(API, {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ sessionId, action, args }),
+          signal: AbortSignal.timeout(15_000),
         })
         const envelope = await response.json().catch(() => null)
         if (!response.ok || !envelope || envelope.ok !== true) throw new Error(envelope?.error || '试玩请求失败')
@@ -188,6 +197,7 @@
       }
 
       function showError(error) {
+        if (closing) return
         $('loading').classList.add('hidden')
         $('fatal').classList.remove('hidden')
         $('fatal').textContent = error?.message || String(error)
@@ -201,8 +211,14 @@
         onSnapshot: renderChrome,
         onStatus: applyStatus,
         onError: showError,
+        onAudioStatus: status => {
+          $('audio').textContent = !status.unlocked ? '开启声音' : status.muted ? '声音已关闭' : '声音已开启'
+          $('audio').title = status.error || (!status.unlocked ? '点击或在画布内操作以解锁音效' : '切换静音')
+        },
+        isActive: () => !closing,
       })
       play.bindInput(stage, { keysOn: window })
+      $('audio').addEventListener('click', () => play.audio?.toggle())
 
       $('step').addEventListener('click', () => void play.act('step', { dt: 1 / 30 }))
       $('pause').addEventListener('click', () => void play.act(play.snapshot?.paused ? 'resume' : 'pause'))
@@ -263,7 +279,40 @@
           revealStage()
         } catch (error) { showError(error) }
       })
-      $('close').addEventListener('click', async () => { if (play.running) await play.stop().catch(() => {}); window.close() })
+      function quiesce() {
+        closing = true
+        document.querySelector('.app').inert = true
+        play.reset()
+      }
+      function focusStage() {
+        stage.tabIndex = -1
+        stage.focus({ preventScroll: true })
+      }
+      stage.addEventListener('pointerdown', focusStage)
+      function requestEmbeddedClose() {
+        // Custom desktop schemes can serialize their origin as "null".
+        // The parent checks the exact iframe WindowProxy and session id.
+        parent.postMessage({ type: 'qxqy-play-close', sessionId }, location.origin === 'null' ? '*' : location.origin)
+      }
+      addEventListener('keydown', event => {
+        if (embedded && event.key === 'Escape') { event.preventDefault(); requestEmbeddedClose() }
+      })
+      $('close').addEventListener('click', async () => {
+        if (embedded) {
+          requestEmbeddedClose()
+          return
+        }
+        try {
+          quiesce()
+          await api('stop')
+          stopped = true
+          window.close()
+        } catch (error) {
+          closing = false
+          document.querySelector('.app').inert = false
+          showError(error)
+        }
+      })
       $('theme').addEventListener('click', () => { theme = theme === 'dark' ? 'light' : 'dark'; applyTheme() })
       let lastCase = null
       function parseAsserts() {
@@ -290,11 +339,36 @@
       for (const button of document.querySelectorAll('[data-view]')) button.addEventListener('click', () => setView(button.dataset.view))
       addEventListener('resize', () => fitStage(true))
       addEventListener('pagehide', () => {
+        closing = true
         play.destroy()
-        fetch(API, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId, action: 'stop', args: {} }), keepalive: true }).catch(() => {})
+        // Embedded close/unmount is owned by the parent. A late keepalive stop
+        // from the old frame must never terminate the next play session.
+        if (!embedded && !stopped) fetch(API, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId, action: 'stop', args: {} }), keepalive: true }).catch(() => {})
       })
+      if (embedded) {
+        // Closing the whole application document has no awaitable teardown.
+        // This fallback is separate from normal modal close, which awaits stop.
+        const parentPagehide = () => {
+          quiesce()
+          fetch(API, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId, action: 'stop', args: {} }), keepalive: true }).catch(() => {})
+        }
+        parent.addEventListener('pagehide', parentPagehide)
+        addEventListener('pagehide', () => parent.removeEventListener('pagehide', parentPagehide))
+      }
 
       if (!sessionId) showError(new Error('缺少会话 ID'))
-      else play.start().then(() => setTimeout(revealStage, 0)).catch(showError)
+      else if (embedded) {
+        // Wait for the parent's load handler: closing a still-loading iframe
+        // must not race an automatic start from this document.
+        window.qxqyEmbeddedPlay = {
+          start: request => {
+            if (closing) return Promise.resolve()
+            embeddedApi = request
+            return play.start().then(() => { if (closing) play.reset(); else { revealStage(); focusStage() } })
+          },
+          quiesce,
+          focus: focusStage,
+        }
+      } else play.start().then(() => setTimeout(revealStage, 0)).catch(showError)
     })()