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>ブロックエディタ | ｽﾀｯｸﾁｬﾝ</title>
    <link rel="stylesheet" href="../global.css" />
    <link rel="stylesheet" href="./editor.css" />
    <script
      src="https://unpkg.com/blockly@11.2.2/blockly_compressed.js"
      integrity="sha384-nXdS/O1XBg7d1iom7upZrVOtjvQfnVGDx67ecaCgU823024LIITNe/9Vf3o9ouRl"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/blockly@11.2.2/blocks_compressed.js"
      integrity="sha384-HrJy1eOfAncgHWDhGobRG4+LW7lqYE6yk+XU5mArpfriaJP69d+R+sdziP7jswuL"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/blockly@11.2.2/javascript_compressed.js"
      integrity="sha384-De44udSvZv11/XTEpKugzXvo25LZZR95qk6vZAXaPLMDt3QWmp6ZAZX4tmQvyZG3"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/blockly@11.2.2/msg/ja.js"
      integrity="sha384-vwDwBIqpZ3trnzftlXPz5I2KLW59rnUE3qmcgJ/PRqFMMtz0GRpLJcwHfc0X7s2r"
      crossorigin="anonymous"
    ></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="editor-shell">
      <header class="topbar">
        <a class="brand-link" href="../"
          ><img src="../assets/stackchan-symbol.png" alt="" /><span
            >ｽﾀｯｸﾁｬﾝ<span class="surface-name"> ブロックエディタ</span></span
          ></a
        >
        <div class="project-name-control">
          <button
            id="project-name-display"
            class="project-name-display"
            type="button"
            aria-label="プロジェクト名を編集"
          >
            <span id="project-name-label">はじめてのMOD</span>
            <i data-lucide="pencil"></i>
          </button>
          <input id="project-name" type="text" maxlength="64" aria-label="プロジェクト名" hidden />
        </div>
        <div class="project-controls" aria-label="プロジェクト設定">
          <div class="target-device-control" title="対象機種">
            <i data-lucide="cpu" aria-hidden="true"></i>
            <select id="target-device" aria-label="対象機種"></select>
          </div>
        </div>
        <div class="project-menu-control">
          <button
            id="project-menu-button"
            class="project-menu-button"
            type="button"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-controls="project-menu"
          >
            <span>プロジェクト</span>
            <i data-lucide="chevron-down"></i>
          </button>
          <div id="project-menu" class="project-menu" role="menu" aria-label="プロジェクト操作" hidden>
            <div class="project-menu-context">
              <label class="project-menu-target">
                <span>対象機種</span>
                <select id="mobile-target-device"></select>
              </label>
              <div id="recent-projects-control" class="project-submenu-control">
                <button
                  id="recent-projects-button"
                  class="project-submenu-trigger"
                  type="button"
                  role="menuitem"
                  aria-haspopup="menu"
                  aria-expanded="false"
                  aria-controls="recent-projects-submenu"
                >
                  <i data-lucide="history"></i>
                  <span>最近開いたプロジェクト</span>
                  <i class="project-submenu-chevron" data-lucide="chevron-left"></i>
                </button>
                <div
                  id="recent-projects-submenu"
                  class="project-submenu"
                  role="menu"
                  aria-label="最近開いたプロジェクト"
                  hidden
                >
                  <div id="recent-projects-list" class="recent-projects-list"></div>
                </div>
              </div>
              <div class="project-menu-separator" role="separator"></div>
            </div>
            <div class="project-menu-actions">
              <button id="new-project-button" type="button" role="menuitem">
                <i data-lucide="file-plus-2"></i><span>新しいプロジェクト</span>
              </button>
              <button id="duplicate-project-button" type="button" role="menuitem">
                <i data-lucide="copy-plus"></i><span>プロジェクトを複製</span>
              </button>
              <button id="import-button" type="button" role="menuitem">
                <i data-lucide="folder-open"></i><span>プロジェクトを読み込む</span>
              </button>
              <button id="export-button" type="button" role="menuitem">
                <i data-lucide="download"></i><span>ファイルとして書き出す</span>
              </button>
              <button id="asset-button" type="button" role="menuitem">
                <i data-lucide="image-plus"></i><span>アセットを追加</span>
              </button>
              <button id="sample-button" type="button" role="menuitem">
                <i data-lucide="file-input"></i><span>サンプルを読み込む</span>
              </button>
              <button id="recovery-button" class="warning-button" type="button" role="menuitem" hidden>
                <i data-lucide="shield-alert"></i><span>破損データを書き出す</span>
              </button>
              <div class="project-menu-separator" role="separator"></div>
              <button id="clear-button" class="danger-button" type="button" role="menuitem">
                <i data-lucide="trash-2"></i><span>ワークスペースを消去</span>
              </button>
            </div>
          </div>
          <input id="project-file-input" type="file" accept=".json,.stackchan-blocks.json" hidden />
          <input id="asset-file-input" type="file" multiple hidden />
        </div>
      </header>
      <div class="editor-layout">
        <section id="blockly-workspace" class="workspace" aria-label="Blocklyワークスペース"></section>
        <aside class="editor-inspector" aria-label="MOD、アセットと出力">
          <section class="build-section" aria-labelledby="build-section-heading">
            <div class="section-heading">
              <h1 id="build-section-heading">MOD</h1>
              <p id="build-status" class="status-line" role="status">未ビルド</p>
            </div>
            <button id="build-button" type="button" class="primary-button">
              <i data-lucide="hammer"></i><span>ビルド</span>
            </button>
            <div id="capability-summary" class="capability-summary" aria-live="polite"></div>
            <div class="install-grid">
              <button id="download-button" type="button" disabled title="XSAをダウンロード">
                <i data-lucide="download"></i><span>ダウンロード</span>
              </button>
              <button id="install-simulator-button" type="button" disabled>
                <i data-lucide="play"></i><span>シミュレーターで実行</span>
              </button>
              <button id="install-device-button" type="button" disabled>
                <i data-lucide="usb"></i><span>実機へ書き込み</span>
              </button>
              <button id="remove-device-button" class="danger-button" type="button" disabled>
                <i data-lucide="trash-2"></i><span>実機のMODを削除</span>
              </button>
            </div>
            <progress id="install-progress" max="1" value="0" hidden aria-label="書き込み進行状況"></progress>
          </section>
          <section class="asset-section" aria-labelledby="asset-section-heading">
            <div class="section-heading">
              <h1 id="asset-section-heading">アセット</h1>
            </div>
            <div class="face-selection">
              <span class="face-selection-heading">Face</span>
              <div class="face-selection-control">
                <button
                  id="face-selection-button"
                  class="face-selection-button"
                  type="button"
                  aria-haspopup="menu"
                  aria-expanded="false"
                  aria-controls="face-selection-menu"
                >
                  <i data-lucide="smile"></i>
                  <span id="face-selection-label">標準Face</span>
                  <span class="face-selection-state">使用中</span>
                  <i class="face-selection-chevron" data-lucide="chevron-down"></i>
                </button>
                <div id="face-selection-menu" class="face-selection-menu" role="menu" aria-label="Faceを選択" hidden>
                  <div id="face-selection-list" class="face-selection-list"></div>
                </div>
              </div>
              <button id="edit-face-button" class="edit-face-button" type="button" disabled>
                <i data-lucide="pencil"></i><span>使用中のFaceを編集</span>
              </button>
            </div>
            <div id="asset-summary" class="asset-summary" aria-live="polite"></div>
            <label class="asset-mode">
              <input id="embed-assets" type="checkbox" checked />
              <span>アセットをMODへ埋め込む</span>
            </label>
          </section>
          <section class="output-section">
            <div class="output-tabs" role="tablist" aria-label="出力表示">
              <button
                id="code-tab"
                class="output-tab"
                type="button"
                role="tab"
                aria-selected="true"
                aria-controls="code-panel"
              >
                生成コード
              </button>
              <button
                id="log-tab"
                class="output-tab"
                type="button"
                role="tab"
                aria-selected="false"
                aria-controls="log-panel"
              >
                ログ
              </button>
              <button
                id="diagnostics-tab"
                class="output-tab"
                type="button"
                role="tab"
                aria-selected="false"
                aria-controls="diagnostics-panel"
              >
                診断 <span id="diagnostics-count" class="count-badge">0</span>
              </button>
            </div>
            <div id="code-panel" class="output-panel" role="tabpanel" aria-labelledby="code-tab">
              <pre id="code-preview" aria-label="生成されたmod.js"></pre>
            </div>
            <div id="log-panel" class="output-panel" role="tabpanel" aria-labelledby="log-tab" hidden>
              <pre id="log-output" aria-label="ビルドとインストールのログ"></pre>
            </div>
            <div
              id="diagnostics-panel"
              class="output-panel diagnostics-panel"
              role="tabpanel"
              aria-labelledby="diagnostics-tab"
              hidden
            >
              <ol id="diagnostics-list" aria-label="プロジェクト診断"></ol>
            </div>
          </section>
        </aside>
      </div>
    </main>
    <dialog id="sample-dialog" class="sample-dialog" aria-labelledby="sample-dialog-title">
      <header>
        <div>
          <h2 id="sample-dialog-title">サンプルを選ぶ</h2>
          <p>プロジェクトのワークスペースを選んだサンプルへ置き換えます。</p>
        </div>
        <button id="sample-close" type="button" aria-label="サンプル選択を閉じる"><i data-lucide="x"></i></button>
      </header>
      <div id="sample-list" class="sample-list"></div>
    </dialog>
    <dialog
      id="clear-workspace-dialog"
      class="confirm-dialog"
      aria-labelledby="clear-workspace-dialog-title"
      aria-describedby="clear-workspace-dialog-description"
    >
      <form method="dialog">
        <header>
          <div>
            <h2 id="clear-workspace-dialog-title">ワークスペースを消去しますか？</h2>
            <p id="clear-workspace-dialog-description">
              現在のプロジェクトからすべてのブロックを取り除き、自動保存します。
            </p>
          </div>
        </header>
        <p class="confirm-target">対象：<strong id="clear-workspace-project-name"></strong></p>
        <div class="confirm-dialog-actions">
          <button id="clear-workspace-cancel" type="submit" value="cancel">キャンセル</button>
          <button id="clear-workspace-confirm" class="danger-button" type="submit" value="confirm">
            ワークスペースを消去
          </button>
        </div>
      </form>
    </dialog>
    <dialog id="simulator-dialog" class="simulator-dialog" aria-labelledby="simulator-dialog-title">
      <header>
        <h2 id="simulator-dialog-title">シミュレーター</h2>
        <div class="simulator-controls">
          <button id="simulator-restart" type="button"><i data-lucide="rotate-cw"></i><span>再実行</span></button>
          <button id="simulator-stop" type="button"><i data-lucide="square"></i><span>停止</span></button>
          <button id="simulator-close" type="button"><i data-lucide="x"></i><span>閉じる</span></button>
        </div>
      </header>
      <div class="simulator-inputs" aria-label="シミュレーター入力">
        <span>ボタン入力</span>
        <button type="button" data-simulator-button="a">A</button>
        <button type="button" data-simulator-button="b">B</button>
        <button type="button" data-simulator-button="c">C</button>
      </div>
      <iframe id="simulator-frame" title="Stack-chan Webシミュレーター"></iframe>
    </dialog>
    <script type="module" src="../tool-navigation.mjs"></script>
    <script type="module" src="./editor.mjs"></script>
    <script>
      globalThis.lucide?.createIcons()
    </script>
  </body>
</html>