index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Every one of these is the same wordmark, generated from `art/openwar3-logo.png` by
         tools/make-icon.mjs. The .ico carries 16/24/32/48 for the tab and the pinned shortcut;
         the PNGs are what a phone's home screen and a desktop web app install pick up. -->
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <title>OpenWar3</title>
  </head>
  <body>
    <canvas id="bg" hidden></canvas>
    <!-- mdx-m3-viewer owns its own WebGL1 context, so its renderers each get a
         dedicated canvas: the animated main-menu glue scene (issue #54), single
         models (Phase 3) and full maps (authentic). -->
    <canvas id="menubg" hidden></canvas>
    <canvas id="model" hidden></canvas>
    <canvas id="map" hidden></canvas>
    <div id="ui"></div>
    <!-- The loading screen (issue #78): its art canvas, and the layer its DOM is mounted
         into. Deliberately NOT inside #ui — a match sets `body.in-game`, which puts a
         `transform` on #ui and so makes it the containing block for every fixed thing under
         it, re-boxing them into the 16:9 GAME frame. The loading screen is up across exactly
         that moment and is a full-WINDOW screen (the browser's frame, like the menus), so
         being re-boxed mid-load shifted its whole DOM right and left it 12% too wide against
         its own art. -->
    <div id="loading-layer">
      <canvas id="loading" hidden></canvas>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>