stack-chan

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../assets/stackchan-favicon-32.png" type="image/png" />
    <link rel="apple-touch-icon" href="../assets/stackchan-apple-touch-icon.png" />
    <title>Webシミュレーター | ｽﾀｯｸﾁｬﾝ</title>
    <link rel="stylesheet" href="../global.css" />
    <link rel="stylesheet" href="./simulator.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.164.1/build/three.module.js"
        },
        "integrity": {
          "https://unpkg.com/three@0.164.1/build/three.module.js": "sha384-wlK04bYFr3nyu6ipQq5N4n7KKGByMS1Yu1T8IrNtEnHiJ5WcGDt9dZBZFpRZjXEE",
          "https://unpkg.com/three@0.164.1/examples/jsm/controls/OrbitControls.js": "sha384-BZPDnhvqQ9HQ5XsmqEusjwpN9TIaiGbsJ5XWilDEuRu9Psbw4ZyYk67DUO0nbP3z",
          "https://unpkg.com/three@0.164.1/examples/jsm/geometries/RoundedBoxGeometry.js": "sha384-S52/WAm3DaIIFna675h5dmavqea/akLlPFtPdnzgWWhnz+/nMqR6PPsSXPOd8Gpw",
          "https://unpkg.com/three@0.164.1/examples/jsm/loaders/STLLoader.js": "sha384-iUykpV7CnAlHYQ2KS0JYVxQcsk6JdCjM1k3R0BuPqwd5p2g2A8HioqUrteJrWZKo"
        }
      }
    </script>
    <script
      src="https://unpkg.com/lucide@1.24.0/dist/umd/lucide.min.js"
      integrity="sha384-mooE85Luwgx+AyykX7e90VcN8/QCFTSIwPuHLmvcsLVoA0en7lKYb9XlOzn5G2co"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <a class="brand-link" href="../"
          ><img src="../assets/stackchan-symbol.png" alt="" /><span
            >ｽﾀｯｸﾁｬﾝ<span class="surface-name"> Webシミュレーター</span></span
          ></a
        >
        <p id="simulator-info" role="status">WASMを読み込み中</p>
      </header>

      <div class="simulator-layout">
        <section class="simulator-stage" aria-label="ｽﾀｯｸﾁｬﾝ3Dシミュレーター">
          <canvas id="stackchan-viewport" aria-label="3D Stack-chan simulator"></canvas>
          <canvas id="simulator-screen" width="320" height="240" aria-label="Stack-chan screen canvas"></canvas>
        </section>

        <aside class="inspector" aria-label="シミュレーター操作">
          <section class="tool-section" aria-labelledby="mod-heading">
            <div class="section-heading">
              <h2 id="mod-heading">MOD</h2>
              <div class="icon-actions">
                <a
                  class="icon-button"
                  href="./samples/stackchan-sample-mod.xsa"
                  download="stackchan-sample-mod.xsa"
                  aria-label="サンプルMODをダウンロード"
                  title="サンプルMODをダウンロード"
                >
                  <i data-lucide="download" aria-hidden="true"></i>
                </a>
                <button
                  class="icon-button"
                  id="simulator-restart-button"
                  type="button"
                  aria-label="シミュレーターを再起動"
                  title="シミュレーターを再起動"
                >
                  <i data-lucide="rotate-cw" aria-hidden="true"></i>
                </button>
                <button
                  class="icon-button danger"
                  id="mod-clear-button"
                  type="button"
                  aria-label="MODを削除"
                  title="MODを削除"
                >
                  <i data-lucide="trash-2" aria-hidden="true"></i>
                </button>
              </div>
            </div>
            <label class="command-button" for="mod-archive-input">
              <i data-lucide="upload" aria-hidden="true"></i>
              <span>MODを追加</span>
            </label>
            <input id="mod-archive-input" type="file" accept=".xsa,application/octet-stream" />
            <p id="mod-install-status" role="status">MODなし</p>
          </section>

          <section class="tool-section" aria-labelledby="camera-heading">
            <h2 id="camera-heading">カメラ</h2>
            <button id="browser-camera-button" class="command-button" type="button">
              <i data-lucide="camera" aria-hidden="true"></i>
              <span>カメラを接続</span>
            </button>
            <p id="browser-camera-status" role="status">未接続</p>
          </section>

          <section class="trace-section" aria-labelledby="trace-heading">
            <h2 id="trace-heading">ログ</h2>
            <pre id="trace-log" aria-label="firmware trace log"></pre>
          </section>
        </aside>
      </div>
    </main>

    <script type="module" src="../tool-navigation.mjs"></script>
    <script type="module" src="./simulator.mjs"></script>
    <script>
      globalThis.lucide?.createIcons()
    </script>
  </body>
</html>