zelda-dungeon/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zelda Dungeon Quest</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      font-family: monospace;
      user-select: none;
    }
    #game-container {
      position: relative;
      width: 640px;
      height: 480px;
    }
    canvas {
      border: 2px solid #555;
      image-rendering: pixelated;
      display: block;
    }
    #menu-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 640px;
      height: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 10;
    }
    #menu-overlay.active {
      pointer-events: auto;
    }
    .menu-title {
      font-size: 36px;
      font-weight: bold;
      color: #FFD700;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
      margin-bottom: 20px;
    }
    .menu-subtitle {
      font-size: 16px;
      color: #AAAAAA;
      margin-bottom: 30px;
    }
    .menu-button {
      font-family: monospace;
      font-size: 16px;
      color: #FFFFFF;
      background: rgba(0,0,0,0.6);
      border: 2px solid #FFD700;
      padding: 8px 24px;
      margin: 4px 0;
      cursor: pointer;
      transition: all 0.15s;
      pointer-events: auto;
    }
    .menu-button:hover, .menu-button.selected {
      background: #FFD700;
      color: #000;
    }
    .menu-button:disabled {
      opacity: 0.3;
      cursor: default;
      border-color: #444;
    }
    .menu-button:disabled:hover {
      background: rgba(0,0,0,0.6);
      color: #FFFFFF;
    }
    .dungeon-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 3px;
      max-width: 600px;
      margin: 10px 0;
    }
    .dungeon-cell {
      width: 56px;
      height: 42px;
      font-family: monospace;
      font-size: 10px;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
      border: 1px solid #555;
      transition: all 0.1s;
      pointer-events: auto;
    }
    .dungeon-cell:hover:not(.locked) {
      transform: scale(1.1);
      border-color: #FFD700;
    }
    .dungeon-cell.selected {
      border: 2px solid #FFD700;
      box-shadow: 0 0 6px rgba(255,215,0,0.5);
    }
    .dungeon-cell.locked {
      opacity: 0.3;
      cursor: default;
    }
    .dungeon-cell.completed {
      border-color: #00FF00;
    }
    .dungeon-cell.completed::after {
      content: '✓';
      position: absolute;
      bottom: 1px;
      right: 2px;
      font-size: 8px;
      color: #00FF00;
    }
    .filter-tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 10px;
    }
    .filter-tab {
      font-family: monospace;
      font-size: 11px;
      padding: 3px 8px;
      background: rgba(0,0,0,0.5);
      border: 1px solid #555;
      color: #AAA;
      cursor: pointer;
      pointer-events: auto;
    }
    .filter-tab.active {
      background: #FFD700;
      color: #000;
      border-color: #FFD700;
    }
    .info-panel {
      font-family: monospace;
      font-size: 12px;
      color: #CCC;
      background: rgba(0,0,0,0.7);
      border: 1px solid #555;
      padding: 8px 12px;
      margin-top: 8px;
      max-width: 400px;
      text-align: center;
      pointer-events: auto;
    }
    .info-panel .name {
      color: #FFD700;
      font-weight: bold;
      font-size: 14px;
    }
    .info-panel .difficulty {
      color: #FF6347;
    }
    .info-panel .theme {
      color: #87CEEB;
    }
    .info-panel .rooms {
      color: #90EE90;
    }
    .controls-hint {
      font-size: 11px;
      color: #888;
      margin-top: 15px;
    }
    .debug-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 640px;
      height: 480px;
      pointer-events: none;
      z-index: 20;
      font-family: monospace;
      font-size: 10px;
      color: #0F0;
      display: none;
    }
    .debug-overlay.visible {
      display: block;
    }
    #debug-canvas {
      position: absolute;
      top: 0; left: 0;
      pointer-events: none;
      z-index: 19;
      display: none;
    }
    #debug-canvas.visible {
      display: block;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <canvas id="game" width="640" height="480"></canvas>
    <canvas id="debug-canvas" width="640" height="480"></canvas>
    <div id="menu-overlay"></div>
    <div id="debug-overlay" class="debug-overlay"></div>
  </div>

  <!-- Browser polyfill: enables module.exports/require in browser -->
  <script src="src/browser-polyfill.js"></script>

  <!-- Core -->
  <script src="src/core/constants.js"></script>
  <script src="src/core/rng.js"></script>
  <script src="src/core/utils.js"></script>

  <!-- Data -->
  <script src="src/data/themes.js"></script>
  <script src="src/data/dungeons.js"></script>
  <script src="src/data/enemies.js"></script>
  <script src="src/data/weapons.js"></script>
  <script src="src/data/bosses.js"></script>
  <script src="src/data/items.js"></script>

  <!-- Generator -->
  <script src="src/generator/rooms.js"></script>
  <script src="src/generator/puzzles.js"></script>
  <script src="src/generator/placement.js"></script>
  <script src="src/generator/dungeon.js"></script>

  <!-- Save -->
  <script src="src/save/save.js"></script>

  <!-- Game Engine -->
  <script src="src/game/state.js"></script>
  <script src="src/game/movement.js"></script>
  <script src="src/game/combat.js"></script>
  <script src="src/game/ai.js"></script>
  <script src="src/game/items.js"></script>
  <script src="src/game/transitions.js"></script>

  <!-- Input -->
  <script src="src/input/keyboard.js"></script>
  <script src="src/input/actions.js"></script>

  <!-- Rendering -->
  <script src="src/rendering/renderer.js"></script>
  <script src="src/rendering/draw-enemies.js"></script>
  <script src="src/rendering/draw-bosses.js"></script>
  <script src="src/rendering/draw-weapons.js"></script>
  <script src="src/rendering/hud.js"></script>
  <script src="src/rendering/effects.js"></script>

  <!-- Menu -->
  <script src="src/menu/title-screen.js"></script>
  <script src="src/menu/dungeon-select.js"></script>
  <script src="src/menu/hud-overlay.js"></script>
  <script src="src/menu/screens.js"></script>

  <!-- Bootstrap -->
  <script src="src/app.js"></script>
</body>
</html>