game.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" type="image/svg+xml" href="assets/6-Icons/forest-rpg-icon.svg?v=20260803-12" />
    <title>Forest RPG — Play</title>
    <meta name="description" content="Fullscreen game iframe (no UI chrome)." />
    <link rel="stylesheet" href="src/shared/settings-panel.css?v=20260803-5" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        background: #000;
        overflow: hidden;
      }

      #game-root {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #0a1f04;
        background-image: url('assets/1-Background/2-Game/1-Forest/tile_1.png');
        background-repeat: repeat;
        background-size: 64px 64px;
        -webkit-tap-highlight-color: transparent;
      }

      #game-root canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
        image-rendering: pixelated;
        background: transparent;
      }

      ::-webkit-scrollbar {
        display: none;
      }
      html {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      @font-face {
        font-family: 'PixelGameFont';
        src: url('assets/3-GUI/font.ttf');
        font-display: swap;
      }
      #gd-loading-overlay {
        font-family: 'PixelGameFont', 'Courier New', monospace !important;
        background-color: #000000 !important;
        color: #ffcc00;
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        z-index: 2147483647; user-select: none; opacity: 1;
      }
      .gd-loading-message {
        font-size: 40px; text-transform: uppercase; margin-bottom: 16px;
        text-shadow: 2px 2px 0px #111; letter-spacing: 2px;
      }
      .gd-progress-container {
        width: 220px; max-width: 60%; height: 16px; border: 1px solid #ffcc00;
        background-color: #111; padding: 1px; margin-bottom: 4px;
      }
      .gd-progress-fill {
        height: 100%; width: 0%; background-color: #ffcc00; transition: width 0.1s linear;
      }
      .gd-progress-text { font-size: 14px; color: #888; }
      #gd-loading-content {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        transform-origin: center center; transition: transform 0.1s ease-out;
      }
    </style>
  </head>
  <body>
    <div id="gd-loading-overlay">
      <div id="gd-loading-content">
        <div class="gd-loading-message">LOADING MAP...</div>
        <div class="gd-progress-container">
          <div class="gd-progress-fill"></div>
        </div>
        <div class="gd-progress-text">0%</div>
      </div>
    </div>
    <div id="game-root" aria-live="polite" aria-busy="true"></div>

    <script src="src/shared/startup.js?v=20261005-1"></script>

    <!-- PixiJS v7 (IIFE global PIXI) — loaded before p5 so PIXI is available in setup() -->
    <script defer src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.3/dist/pixi.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/addons/p5.sound.min.js"></script>

    <script defer src="src/shared/shared-constants.js?v=20260804-1"></script>
    <script defer src="src/shared/shared-ui.js?v=20260804-4"></script>
    <script defer src="src/game/game-globals.js?v=20261005-1"></script>

    <script defer src="src/game/runtime/loading-state.js?v=20261005-1"></script>

    <!-- Runtime layers (input / loop / scenes / render / assets / HUD / perf).
         Loaded after globals, before game-core.js which orchestrates them. -->
    <script defer src="src/game/runtime/perf-overlay.js?v=20260803-4"></script>
    <script defer src="src/game/runtime/game-loop.js?v=20260804-1"></script>
    <script defer src="src/game/runtime/input-state.js?v=20261005-1"></script>
    <script defer src="src/game/runtime/scene-manager.js?v=20261005-1"></script>
    <script defer src="src/game/runtime/renderer.js?v=20260803-4"></script>
    <script defer src="src/game/runtime/hud-cache.js?v=20260803-4"></script>
    <script defer src="src/game/runtime/asset-cache.js?v=20260803-4"></script>
    <script defer src="src/game/runtime/camera-shake.js?v=20260803-1"></script>

    <!-- Pixi render layer — loaded after globals, before game-core.js -->
    <script defer src="src/game/runtime/pixi-app.js?v=20261005-1"></script>
    <script defer src="src/game/runtime/pixi-world-renderer.js?v=20261005-1"></script>
    <script defer src="src/game/runtime/pixi-entity-renderer.js?v=20260803-4"></script>
    <script defer src="src/game/game-assets.js?v=20261005-1"></script>
    <script defer src="src/game/game-map.js?v=20261005-1"></script>
    <script defer src="src/game/game-combat.js?v=20260804-1"></script>
    <script defer src="src/game/game-enemies.js?v=20261005-1"></script>
    <script defer src="src/game/game-movement.js?v=20261005-1"></script>
    <script defer src="src/game/game-hud.js?v=20261005-2"></script>
    <script defer src="src/game/game-ui.js?v=20260804-1"></script>
    <script defer src="src/game/game-settings.js?v=20260804-2"></script>
    <script defer src="src/game/game-io.js?v=20261005-1"></script>
    <script defer src="src/game/game-terminal.js?v=20261005-1"></script>
    <script defer src="src/game/game-tutorial.js?v=20261005-1"></script>
    <script defer src="src/game/game-input.js?v=20261005-1"></script>
    <script defer src="src/game/game-world.js?v=20261005-1"></script>
    <script defer src="src/game/game-utils.js?v=20261005-1"></script>
    <script defer src="src/game/game-weather.js?v=20260804-2"></script>
    <script defer src="src/game/game-core.js?v=20261005-1"></script>

    <script>
      (function () {
        const root = document.getElementById("game-root");

        function adoptCanvas() {
          // In Pixi mode the WebGL canvas (#pixi-canvas) is already in root.
          // Find the p5 canvas — any canvas that is NOT #pixi-canvas.
          const allCanvases = document.querySelectorAll("canvas");
          let canvas = null;
          for (let i = 0; i < allCanvases.length; i++) {
            if (allCanvases[i].id !== "pixi-canvas") {
              canvas = allCanvases[i];
              break;
            }
          }
          if (!canvas) return false;

          if (canvas.parentElement !== root) {
            root.appendChild(canvas);
          }

          canvas.style.width = "100%";
          canvas.style.height = "100%";
          canvas.style.objectFit = "fill";
          canvas.style.imageRendering = "pixelated";
          canvas.style.display = "block";
          canvas.style.position = "absolute";
          canvas.style.inset = "0";
          // In Pixi mode, p5 canvas is a transparent overlay on top of the Pixi canvas.
          // The background must be transparent so the WebGL terrain shows through.
          const isPixiMode = typeof RENDER_BACKEND !== 'undefined' && RENDER_BACKEND === 'pixi';
          if (isPixiMode && document.getElementById("pixi-canvas")) {
            canvas.style.background = "transparent";
          }
          canvas.setAttribute("tabindex", "0");
          // World finalization owns aria-busy; a canvas alone is not readiness.
          try {
            canvas.focus();
          } catch (e) {}
          try {
            window.focus();
          } catch (e) {}
          return true;
        }

        if (adoptCanvas()) return;
        let tries = 0;
        const poll = setInterval(() => {
          tries++;
          if (adoptCanvas() || tries > 50) {
            clearInterval(poll);
            if (tries > 50) {
              console.warn(
                "game.html: no canvas found after polling — check game.js for errors.",
              );
            }
          }
        }, 100);

        try {
          if (window.parent && window.parent !== window) {
            window.parent.postMessage({ type: "game-iframe-ready" }, window.location.origin);
          }
        } catch (e) {}
      })();
    </script>
  </body>
</html>