play.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HiKid.Fun — English Learning</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; font-family: sans-serif; }
    #app { width: 100%; height: 100%; position: relative; touch-action: none; }

    /* Loading / Error overlay */
    #loading-overlay {
      position: fixed; inset: 0; background: #1a1a2e;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      color: #fff; z-index: 100;
    }
    #loading-overlay h1 { font-size: 28px; margin-bottom: 16px; }
    #loading-spinner {
      width: 40px; height: 40px;
      border: 4px solid rgba(255,255,255,0.2);
      border-top-color: #4fc3f7;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-bottom: 12px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading-status { font-size: 14px; color: #aaa; }
    #loading-error {
      display: none; color: #f44336; font-size: 14px;
      margin-top: 12px; text-align: center; max-width: 400px;
      line-height: 1.6;
    }

    /* Back to home button */
    #home-btn {
      position: fixed;
      top: 16px;
      left: 16px;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 14px;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: background 0.15s, transform 0.15s;
    }
    #home-btn:hover,
    #home-btn:focus-visible {
      background: rgba(0,0,0,0.8);
      transform: scale(1.08);
    }
    #home-btn:focus-visible {
      outline: 2px solid rgba(255,224,130,0.8);
      outline-offset: 2px;
    }
    #home-btn svg {
      width: 24px;
      height: 24px;
      color: #fff;
    }

    /* Score HUD */
    #score-hud {
      position: fixed;
      top: 16px;
      right: 16px;
      background: rgba(0,0,0,0.7);
      color: #ffd700;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 18px;
      font-weight: bold;
      pointer-events: none;
      z-index: 10;
    }

    /* Mic Button */
    #mic-container {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 10;
    }

    #mic-button {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      border: 3px solid #4caf50;
      background: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      transition: all 0.2s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }
    #mic-button.recording {
      background: #f44336;
      border-color: #d32f2f;
      transform: scale(1.15);
      box-shadow: 0 0 20px rgba(244,67,54,0.5);
    }
    #mic-button.processing {
      background: #ff9800;
      border-color: #f57c00;
      pointer-events: none;
    }

    #mic-label {
      color: #fff;
      font-size: 13px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }

    /* Hint Bubbles */
    #hint-bubbles {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 360px;
    }
    .hint-bubble {
      background: rgba(255,255,255,0.9);
      color: #333;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .hint-bubble:hover {
      background: #e3f2fd;
    }

    /* Interaction Prompt */
    #interaction-prompt {
      position: fixed;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 16px 10px 10px;
      border-radius: 999px;
      background: rgba(20, 20, 20, 0.78);
      color: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,0.25);
      z-index: 11;
      pointer-events: none;
    }

    #interaction-key {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 3px solid #ffd54f;
      background: #fff8d6;
      color: #332400;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 900;
      line-height: 1;
    }

    #interaction-label {
      font-size: 15px;
      font-weight: 800;
      white-space: nowrap;
      text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    }

    #service-notice {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translate(-50%, -12px);
      max-width: min(520px, calc(100vw - 32px));
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(20,20,20,0.82);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s, transform 0.18s;
      z-index: 20;
    }

    #service-notice.visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    /* First-run controls hint */
    #controls-hint {
      position: fixed;
      left: 18px;
      bottom: 18px;
      width: min(340px, calc(100vw - 36px));
      padding: 14px;
      border-radius: 16px;
      background: rgba(18, 25, 39, 0.84);
      color: #fff;
      box-shadow: 0 14px 32px rgba(0,0,0,0.28);
      backdrop-filter: blur(8px);
      z-index: 12;
      transition: opacity 0.28s, transform 0.28s;
    }

    #controls-hint.hidden {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
    }

    .controls-hint-title {
      margin-bottom: 10px;
      color: #ffe082;
      font-size: 15px;
      font-weight: 800;
    }

    .controls-hint-list {
      display: grid;
      gap: 8px;
    }

    .controls-hint-row {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.92);
      font-size: 13px;
      line-height: 1.3;
    }

    .controls-hint-key {
      min-width: 66px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border: 1px solid rgba(255,255,255,0.26);
      border-bottom-color: rgba(0,0,0,0.35);
      border-radius: 8px;
      background: rgba(255,255,255,0.13);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
    }

    #controls-hint-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      color: #fff;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }

    #controls-hint-close:hover,
    #controls-hint-close:focus-visible {
      background: rgba(255,255,255,0.22);
      outline: 2px solid rgba(255,224,130,0.8);
      outline-offset: 2px;
    }

    @media (max-width: 560px) {
      #controls-hint {
        left: 12px;
        right: 12px;
        bottom: 112px;
        width: auto;
      }
    }
  </style>
</head>
<body>
  <div id="loading-overlay">
    <h1>🎮 HiKid.Fun</h1>
    <div id="loading-spinner"></div>
    <div id="loading-status">Starting TTS server...</div>
    <div id="loading-error"></div>
  </div>
  <div id="app">
    <button id="home-btn" type="button" aria-label="返回主页">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5Z"/>
        <path d="M9 21V12h6v9"/>
      </svg>
    </button>
    <div id="score-hud">⭐ 0</div>
    <div id="mic-container" style="display:none;">
      <div id="hint-bubbles"></div>
      <div id="mic-button">🎤</div>
      <div id="mic-label">Hold Q or click mic to speak</div>
    </div>
    <div id="interaction-prompt">
      <div id="interaction-key">E</div>
      <div id="interaction-label">Interact</div>
    </div>
    <aside id="controls-hint" class="hidden" aria-label="操作提示">
      <button id="controls-hint-close" type="button" aria-label="关闭操作提示">×</button>
      <div class="controls-hint-title">操作提示</div>
      <div class="controls-hint-list">
        <div class="controls-hint-row">
          <span class="controls-hint-key">点击地面</span>
          <span>移动角色</span>
        </div>
        <div class="controls-hint-row">
          <span class="controls-hint-key">点击人物</span>
          <span>对话互动</span>
        </div>
        <div class="controls-hint-row">
          <span class="controls-hint-key">点击物品</span>
          <span>收集词汇</span>
        </div>
      </div>
    </aside>
  </div>

  <script>
    // Capture whisper WASM output via Module.print (more reliable than console proxy)
    window.__whisperCollect = null;
    window.Module = {
      print: function(text) {
        console.log(text);
        if (window.__whisperCollect) window.__whisperCollect(text);
      },
      printErr: function(text) {
        console.error(text);
        if (window.__whisperCollect) window.__whisperCollect(text);
      },
    };
  </script>
  <script src="/whisper/whisper.js"></script>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>