index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>TETRISSEN</title>
  <style>
    :root {
      --bg: #1b1e36;
      --panel: #45496b;
      --panel-text: #9ea5d6;
      --border: #e6e6e6;
      --cyan: #78d7ff;
      --green: #5cff9d;
      --purple: #bc8cff;
      --amber: #ffbe55;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      color: white;
      font-family: Consolas, "Courier New", monospace;
    }

    .app {
      width: min(1160px, 100vw);
      min-height: 690px;
      padding: 28px 34px 22px;
      background: var(--bg);
    }

    .topbar {
      display: grid;
      grid-template-columns: 160px 1fr 160px;
      align-items: start;
      margin-bottom: 22px;
    }

    .brand {
      display: flex;
      justify-content: center;
      align-items: end;
      gap: 8px;
      line-height: 1;
    }

    .logo {
      font-size: 112px;
      font-weight: 700;
      letter-spacing: -0.12em;
      text-transform: uppercase;
      user-select: none;
    }

    .logo span:nth-child(1) { color: #ffbd59; }
    .logo span:nth-child(2) { color: #ff5a5a; }
    .logo span:nth-child(3) { color: #f0e36c; }
    .logo span:nth-child(4) { color: #57ea89; }
    .logo span:nth-child(5) { color: #b38cff; }
    .logo span:nth-child(6) { color: #57ea89; }
    .logo span:nth-child(7) { color: #ea61bf; }
    .logo span:nth-child(8) { color: #73c2df; }
    .logo span:nth-child(9) { color: #57ea89; }

    .version {
      color: var(--amber);
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .time-panel {
      justify-self: end;
      width: 120px;
    }

    .layout {
      display: grid;
      grid-template-columns: 122px 1fr 122px;
      gap: 44px;
      align-items: start;
    }

    .side {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-top: 28px;
    }

    .panel {
      background: var(--panel);
      padding: 10px;
    }

    .panel-title {
      font-size: 18px;
      margin-bottom: 14px;
      letter-spacing: 0.03em;
    }

    .panel-title.hold { color: var(--green); }
    .panel-title.score { color: var(--cyan); }
    .panel-title.level { color: var(--cyan); }
    .panel-title.time { color: var(--panel-text); }
    .panel-title.next { color: var(--purple); }

    .stat-value {
      min-height: 34px;
      text-align: right;
      font-size: 30px;
      color: var(--cyan);
      font-weight: 700;
      padding-right: 2px;
    }

    .time-value {
      display: inline-block;
      padding: 4px 8px;
      background: rgba(27, 30, 54, 0.45);
      border: 1px solid rgba(230, 230, 230, 0.15);
      font-size: 18px;
      color: var(--panel-text);
    }

    .board-wrap {
      display: flex;
      justify-content: center;
      align-items: start;
    }

    .board-shell {
      padding: 12px;
      border: 12px solid var(--border);
      background: transparent;
    }

    canvas {
      display: block;
      image-rendering: pixelated;
      background: #1b1e36;
    }

    #game {
      width: 220px;
      height: 440px;
    }

    #hold {
      width: 102px;
      height: 136px;
    }

    .score-panel,
    .level-panel {
      width: 122px;
      min-height: 92px;
    }

    .hold-panel {
      width: 122px;
      min-height: 136px;
    }

    .next-panel {
      width: 122px;
      min-height: 390px;
    }

    .next-stack {
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: center;
      padding-top: 4px;
    }

    .next-preview {
      width: 82px;
      height: 92px;
    }

    .controls {
      margin-top: 18px;
      display: flex;
      justify-content: center;
      gap: 12px;
    }

    button {
      padding: 8px 14px;
      border: 1px solid #69719f;
      background: #2b3150;
      color: white;
      font: inherit;
      cursor: pointer;
    }

    button:hover {
      background: #374064;
    }

    @media (max-width: 980px) {
      .app {
        min-height: 100vh;
        padding: 20px;
      }

      .topbar {
        grid-template-columns: 1fr;
        gap: 18px;
        justify-items: center;
      }

      .time-panel {
        justify-self: center;
      }

      .layout {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .side {
        padding-top: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }

      .logo {
        font-size: 72px;
      }
    }
  </style>
</head>
<body>
  <div class="app">
    <div class="topbar">
      <div></div>

      <div class="brand">
        <div class="logo" aria-label="TETRISSEN">
          <span>T</span><span>E</span><span>T</span><span>R</span><span>I</span><span>S</span><span>S</span><span>E</span><span>N</span>
        </div>
        <div class="version">v1</div>
      </div>

      <div class="panel time-panel">
        <div class="panel-title time">[TIME]</div>
        <div id="timer" class="time-value">00:00</div>
      </div>
    </div>

    <div class="layout">
      <div class="side">
        <div class="panel hold-panel">
          <div class="panel-title hold">[HOLD]</div>
          <canvas id="hold" width="102" height="136"></canvas>
        </div>

        <div class="panel score-panel">
          <div class="panel-title score">[SCORE]</div>
          <div id="score" class="stat-value">0</div>
        </div>

        <div class="panel level-panel">
          <div class="panel-title level">[LV]</div>
          <div id="level" class="stat-value">1</div>
        </div>
      </div>

      <div class="board-wrap">
        <div class="board-shell">
          <canvas id="game" width="220" height="440"></canvas>
        </div>
      </div>

      <div class="side">
        <div class="panel next-panel">
          <div class="panel-title next">[NEXT]</div>
          <div class="next-stack">
            <canvas id="next0" class="next-preview" width="82" height="92"></canvas>
            <canvas id="next1" class="next-preview" width="82" height="92"></canvas>
            <canvas id="next2" class="next-preview" width="82" height="92"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button id="btnStart">Start</button>
      <button id="btnReset">Reset</button>
    </div>
  </div>

  <script>
    var Module = {
      onRuntimeInitialized: function() {}
    };
  </script>

  <script async type="text/javascript" src="index.js"></script>

  <script type="module">
    import { attachRendererToModule } from "./renderer.js";

    const prevInit = Module.onRuntimeInitialized;
    Module.onRuntimeInitialized = function () {
      if (prevInit) prevInit();
      attachRendererToModule(Module);
    };

    document.getElementById("btnStart").addEventListener("click", () => {
      if (Module.ccall) Module.ccall("game_start", null, [], []);
    });

    document.getElementById("btnReset").addEventListener("click", () => {
      if (Module.ccall) Module.ccall("game_reset", null, [], []);
    });
  </script>
</body>
</html>