Isle-Slingers/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Isle Slingers</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='%23e2452e'/><circle cx='62' cy='40' r='10' fill='white'/><circle cx='65' cy='42' r='4' fill='black'/><path d='M80 52 L98 58 L79 64 Z' fill='%23f5a623'/></svg>">
</head>
<body>
  <div id="stage">
    <canvas id="game"></canvas>

    <div id="hud">
      <div class="hud-left">
        <span id="hud-level">Level 1</span>
        <span id="hud-birds"></span>
      </div>
      <div class="hud-right">
        <span id="hud-score">0</span>
        <button id="btn-pause" class="hud-btn" title="Pause (P)">II</button>
        <button id="btn-mute" class="hud-btn" title="Mute">&#128266;</button>
      </div>
    </div>

    <div id="screen-start" class="screen">
      <div class="panel">
        <h1 class="title">ISLE<br>SLINGERS</h1>
        <p class="tagline">Slingshot showdown on the tropical isle. Pick a slinger, break a fort, pop the mogs.</p>
        <button id="btn-play" class="btn big">PLAY</button>
        <p class="hint">Drag from the sling to aim · release to launch · tap mid-flight to use each slinger's move</p>
        <p class="credit">Original characters &amp; art · runs fully offline</p>
      </div>
    </div>

    <div id="screen-select" class="screen">
      <div class="panel wide">
        <h2>Choose a perch</h2>
        <div id="level-grid"></div>
        <button id="btn-back-start" class="btn">Back</button>
      </div>
    </div>

    <div id="screen-pause" class="screen dim">
      <div class="panel">
        <h2>Paused</h2>
        <div class="btnrow">
          <button id="btn-pause-resume" class="btn">Resume</button>
          <button id="btn-pause-restart" class="btn">Restart</button>
          <button id="btn-pause-menu" class="btn">Menu</button>
        </div>
      </div>
    </div>

    <div id="screen-win" class="screen dim">
      <div class="panel">
        <h2>Perch cleared!</h2>
        <div id="win-stars"></div>
        <p id="win-score" class="score-line"></p>
        <div class="btnrow">
          <button id="btn-next" class="btn big">Next</button>
          <button id="btn-win-retry" class="btn">Replay</button>
          <button id="btn-win-menu" class="btn">Menu</button>
        </div>
      </div>
    </div>

    <div id="screen-lose" class="screen dim">
      <div class="panel">
        <h2>The mogs hold on…</h2>
        <p class="tagline">Out of slingers. Take aim again.</p>
        <div class="btnrow">
          <button id="btn-lose-retry" class="btn big">Retry</button>
          <button id="btn-lose-menu" class="btn">Menu</button>
        </div>
      </div>
    </div>
  </div>

 <!-- RC-375D84 S-2: modularized tree. Order matters:
      physics submodules (shared scope) -> physics aggregator (ISLE_CORE)
      -> levels helpers + data (shared scope) -> levels aggregator (ISLE_LEVELS)
      -> audio -> render -> app -->
  <script src="js/physics/constants/index.js"></script>
  <script src="js/physics/state/index.js"></script>
  <script src="js/physics/aim/index.js"></script>
  <script src="js/physics/abilities/index.js"></script>
  <script src="js/physics/damage/index.js"></script>
  <script src="js/physics/step/index.js"></script>
  <script src="js/physics/collision/index.js"></script>
  <script src="js/physics/topple/index.js"></script>
  <script src="js/physics/rules/index.js"></script>
  <script src="js/physics/camera/index.js"></script>
  <script src="js/physics/index.js"></script>
  <script src="js/levels/helpers/index.js"></script>
  <script src="js/levels/data/level-1.js"></script>
  <script src="js/levels/data/level-2.js"></script>
  <script src="js/levels/data/level-3.js"></script>
  <script src="js/levels/data/level-4.js"></script>
  <script src="js/levels/data/level-5.js"></script>
  <script src="js/levels/index.js"></script>
  <script src="js/audio/index.js"></script>
  <script src="js/render/index.js"></script>
  <script src="js/app/index.js"></script>
</body>
</html>