pokeazure/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#0a0520">
<title id="page-title">PokéAzure — Learn Azure Cloud</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">

  <!-- BOOT SPLASH -->
  <div id="screen-boot" class="screen active">
    <div class="boot-logo">
      <div class="boot-gameboy">GAME BOY<sup>™</sup></div>
      <div class="boot-ding">♪</div>
    </div>
  </div>

  <!-- TITLE -->
  <div id="screen-title" class="screen">
    <div class="title-bg">
      <div class="title-stars"></div>
      <div class="title-main">
        <div class="title-logo">
          <span class="title-poke">POKÉ</span><span class="title-game" id="title-game-text">AZURE</span>
        </div>
        <div class="title-edition" id="title-edition-text">★ AZURE TRAINER ★</div>
        <div class="title-tap blink">PRESS START</div>
      </div>
      <div class="title-footer" id="title-footer-text">PokéAZURE v1.0 · Azure · github.com/JustinOros</div>
    </div>
  </div>

  <!-- CONTINUE OR NEW GAME -->
  <div id="screen-continue" class="screen">
    <div class="continue-bg">
      <div class="continue-logo">POKÉ<span id="continue-logo-text">AZURE</span></div>
      <div class="continue-card" id="continue-card">
        <div class="continue-card-header">📂 CONTINUE</div>
        <div class="save-row"><span class="save-lbl">TRAINER</span><span class="save-val" id="save-name-disp">—</span></div>
        <div class="save-row"><span class="save-lbl">PROGRESS</span><span class="save-val" id="save-prog-disp">—</span></div>
        <div class="save-row"><span class="save-lbl">SCORE</span><span class="save-val" id="save-score-disp">—</span></div>
        <button class="btn-pixel btn-green" id="btn-continue-save">▶ CONTINUE</button>
      </div>
      <div class="continue-or">— OR —</div>
      <button class="btn-pixel btn-red" id="btn-new-game">✦ NEW GAME</button>
      <p class="continue-warn" id="continue-warn"></p>
    </div>
  </div>

  <!-- NAME ENTRY -->
  <div id="screen-name" class="screen">
    <div class="dialog-box name-dialog">
      <div class="dialog-speaker">PROFESSOR OAK</div>
      <div class="dialog-text" id="name-prompt-text"></div>
    </div>
    <div class="name-entry-area">
      <div class="name-display-box"><span id="name-display">_</span></div>
      <div class="keyboard-grid" id="keyboard-grid"></div>
      <div class="name-controls">
        <button class="btn-pixel btn-del" id="btn-backspace">← DEL</button>
        <button class="btn-pixel btn-ok"  id="btn-confirm-name">OK ▶</button>
      </div>
    </div>
  </div>

  <!-- INTRO CUTSCENE -->
  <div id="screen-intro" class="screen">
    <div class="overworld-bg intro-oak-bg">
      <div class="intro-npc intro-npc-centered" id="intro-npc"></div>
    </div>
    <div class="dialog-box intro-dialog">
      <div class="dialog-speaker" id="intro-speaker">PROFESSOR OAK</div>
      <div class="dialog-text" id="intro-text"></div>
      <div class="dialog-arrow blink" id="intro-arrow" style="display:none">▼</div>
    </div>
    <div class="tap-hint blink"><span class="hint-pc">PRESS E TO CONTINUE</span><span class="hint-touch">TAP / PRESS A TO CONTINUE</span></div>
  </div>

  <!-- STARTER POKEMON SELECTION -->
  <div id="screen-starter" class="screen">
    <div class="overworld-bg intro-oak-bg">
      <div class="intro-npc intro-npc-centered" id="starter-oak"></div>
    </div>
    <div class="dialog-box starter-dialog">
      <div class="dialog-speaker">PROFESSOR OAK</div>
      <div class="dialog-text" id="starter-text"></div>
    </div>
    <div class="starter-choices" id="starter-choices"></div>
  </div>

  <!-- STARTER CONFIRM -->
  <div id="screen-starter-confirm" class="screen">
    <div class="starter-confirm-bg">
      <div class="starter-chosen-emoji" id="starter-chosen-emoji"></div>
      <div class="starter-chosen-name" id="starter-chosen-name"></div>
      <div class="starter-chosen-level" id="starter-chosen-level"></div>
      <div class="dialog-box starter-confirm-dialog">
        <div class="dialog-text" id="starter-confirm-text"></div>
      </div>
      <div class="starter-flee-text" id="starter-flee-text"></div>
      <button class="btn-pixel btn-green btn-full" id="btn-starter-continue">LET'S GO! ▶</button>
    </div>
  </div>

  <!-- CATCH SCREEN -->
  <div id="screen-catch" class="screen">
    <div class="catch-scene">
      <div class="catch-wild-pokemon" id="catch-wild-pokemon"></div>
      <div class="catch-wild-name" id="catch-wild-name"></div>
      <div class="catch-wild-level" id="catch-wild-level"></div>
    </div>
    <div class="dialog-box catch-dialog">
      <div class="dialog-text" id="catch-text"></div>
    </div>
    <div class="catch-actions" id="catch-actions"></div>
  </div>

  <!-- CATCH RESULT -->
  <div id="screen-catch-result" class="screen">
    <div class="catch-result-bg">
      <div class="catch-result-emoji" id="catch-result-emoji"></div>
      <div class="catch-result-msg" id="catch-result-msg"></div>
      <button class="btn-pixel btn-blue btn-full" id="btn-catch-continue">CONTINUE ▶</button>
    </div>
  </div>

  <!-- PARTY SELECT -->
  <div id="screen-party-select" class="screen">
    <div class="party-select-header">CHOOSE YOUR POKÉMON!</div>
    <div class="party-select-list" id="party-select-list"></div>
  </div>

  <!-- OVERWORLD MAP -->
  <div id="screen-map" class="screen">
    <div class="map-header">
      <div class="map-left">
        <span class="map-pin">📍</span>
        <span class="map-town-name" id="map-town-name-text">AZURE TOWN</span>
      </div>
      <div class="map-center">
        <div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div>
        <span class="prog-text" id="map-prog-text">0/100</span>
      </div>
      <div class="map-right">
        <span class="pokeball-count" id="pokeball-count" title="Pokéballs"><img src="./favicon.ico" class="pokeball-icon"> 0</span>
        <span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span>
      </div>
    </div>
    <div class="overworld-bg map-world" id="map-world">
      <div class="map-inner" id="map-inner">
        <div class="map-trees" id="map-trees"></div>
      </div>
      <div class="map-npc-wrap" id="map-npc-wrap">
        <div class="npc-bubble" id="npc-bubble">!</div>
        <div class="map-npc" id="map-npc"></div>
      </div>
      <!-- Wild pokemon spawns -->
      <div class="map-wild-wrap" id="map-wild-wrap" style="display:none">
        <div class="wild-bubble">?</div>
        <div class="map-wild" id="map-wild"></div>
      </div>
      <div class="player-bubble" id="player-bubble">...</div>
      <div class="map-player" id="map-player"></div>
      <div class="map-talk-hint" id="map-talk-hint" style="display:none"><span class="hint-pc">Press E</span><span class="hint-touch">Press A</span></div>
      <div class="map-dir-arrow" id="map-dir-arrow" style="display:none">▶</div>
    </div>
    <div class="map-hud">
      <div class="hud-cell"><div class="hud-lbl">TRAINER</div><div class="hud-val" id="hud-name">ASH</div></div>
      <div class="hud-cell"><div class="hud-lbl">SCORE</div><div class="hud-val" id="hud-score">0</div></div>
      <div class="hud-cell"><div class="hud-lbl">STREAK</div><div class="hud-val" id="hud-streak">0</div></div>
      <div class="hud-cell"><div class="hud-lbl">PARTY</div><div class="hud-val" id="hud-party">0</div></div>
    </div>
  </div>

  <!-- BATTLE / QUESTION -->
  <div id="screen-battle" class="screen">
    <div class="battle-scene">
      <div class="battle-npc-side">
        <div class="battle-npc-row">
          <div class="battle-pokemon-float">
            <div class="battle-npc-pokemon-name" id="battle-npc-pokemon-name"></div>
            <div class="battle-npc-pokemon-level" id="battle-npc-pokemon-level"></div>
            <div class="battle-sprite" id="battle-npc-pokemon">🐉</div>
          </div>
          <div class="battle-npc-trainer" id="battle-npc-trainer"></div>
        </div>
        <div class="battle-name-tag" id="battle-npc-name">OAK</div>
      </div>
      <div class="battle-player-side">
        <div class="battle-player-row">
          <div class="battle-player-trainer" id="battle-player-trainer"></div>
          <div class="battle-pokemon-float">
            <div class="battle-player-pokemon-name" id="battle-player-pokemon-name"></div>
            <div class="battle-player-pokemon-level" id="battle-player-pokemon-level"></div>
            <div class="battle-sprite" id="battle-player-pokemon">🔥</div>
          </div>
        </div>
        <div class="battle-name-tag" id="battle-player-name">ASH</div>
      </div>
    </div>
    <div class="dialog-box battle-dialog">
      <div class="dialog-speaker" id="battle-speaker" style="display:none">PROFESSOR OAK</div>
      <div class="dialog-text" id="battle-text"></div>
      <div class="dialog-arrow blink" id="battle-arrow" style="display:none">▼</div>
    </div>
    <div class="battle-choices" id="battle-choices"></div>
    <div class="battle-footer">
      <span>Q <span id="battle-q-num">1</span>/100</span>
      <span class="kbd-hint">Click or tap an answer · 1–4 keys</span>
      <span>PTS: <span id="battle-pts">0</span></span>
    </div>
  </div>

  <!-- BATTLE RESULT ANIMATION -->
  <div id="screen-battle-anim" class="screen">
    <div class="battle-anim-trainer-npc" id="anim-npc-trainer"></div>
    <div class="battle-anim-trainer-player" id="anim-player-trainer"></div>
    <div class="battle-anim-scene">
      <div class="battle-anim-npc">
        <div class="battle-anim-npc-name" id="anim-npc-pokemon-name"></div>
        <div class="battle-anim-npc-sprite" id="anim-npc-pokemon"></div>
        <div class="battle-anim-hp-bar">
          <div class="battle-anim-hp-fill" id="anim-npc-hp"></div>
        </div>
      </div>
      <div class="battle-anim-vs">⚔️</div>
      <div class="battle-anim-player">
        <div class="battle-anim-player-name" id="anim-player-pokemon-name"></div>
        <div class="battle-anim-player-sprite" id="anim-player-pokemon"></div>
        <div class="battle-anim-hp-bar">
          <div class="battle-anim-hp-fill" id="anim-player-hp"></div>
        </div>
      </div>
    </div>
    <div class="battle-anim-msg" id="battle-anim-msg"></div>
  </div>

  <!-- RESULT -->
  <div id="screen-result" class="screen">
    <div class="result-box">
      <div class="result-icon" id="result-icon">✓</div>
      <div class="result-label" id="result-label">CORRECT!</div>
      <div class="result-correct-ans" id="result-correct-ans"></div>
      <div class="result-explanation" id="result-explanation"></div>
      <div class="result-pts" id="result-pts">+100 PTS</div>
      <div class="result-pokeballs" id="result-pokeballs" style="display:none"></div>
      <button class="btn-pixel btn-blue btn-full" id="btn-result-cont">CONTINUE ▶</button>
    </div>
  </div>

  <!-- LEVEL-UP / MILESTONE -->
  <div id="screen-levelup" class="screen">
    <div class="levelup-box">
      <div class="lu-stars blink" id="lu-stars">★ BADGE EARNED! ★</div>
      <div class="lu-sprite"><div class="lu-player-sprite"></div></div>
      <div class="lu-text"><span id="lu-name">ASH</span> gained <span id="exp-label-text">AZURE EXP</span>!</div>
      <div class="lu-badge" id="lu-badge">🏅 CLOUD TRAINEE</div>
      <div class="lu-prog-wrap">
        <div class="lu-prog-outer"><div class="lu-prog-inner" id="lu-prog-inner"></div></div>
        <div class="lu-prog-label" id="lu-prog-label">25 / 100</div>
      </div>
      <button class="btn-pixel btn-green btn-full" id="btn-lu-cont">CONTINUE ▶</button>
    </div>
  </div>

  <!-- COMPLETION -->
  <div id="screen-complete" class="screen">
    <div class="complete-scroll">
      <div class="complete-area">
        <div class="complete-trophy">🏆</div>
        <div class="complete-title">CHAMPION!</div>
        <div class="complete-name" id="complete-name">ASH</div>
        <p class="complete-msg"><span id="complete-msg-text">You've conquered Azure Town and mastered AZ-900! Your Azure journey is just beginning — more towns and exams await!</span></p>
        <div class="complete-stats" id="complete-stats"></div>
        <div class="complete-pokemon" id="complete-pokemon"></div>
        <div class="complete-badges">
          <div class="badge-row"><span id="badge-1">🥉 AZURE EXPLORER — Q25</span></div>
          <div class="badge-row"><span id="badge-2">🥈 AZURE APPRENTICE — Q50</span></div>
          <div class="badge-row"><span id="badge-3">🥇 AZURE PRACTITIONER — Q75</span></div>
          <div class="badge-row"><span id="badge-4">🏆 AZURE CHAMPION — Q100</span></div>
          <div class="badge-row">🗺️ More towns & exams coming soon...</div>
        </div>
        <button class="btn-pixel btn-red btn-full" id="btn-play-again">▶ PLAY AGAIN</button>
      </div>
    </div>
  </div>

  <div id="gba-left" class="gba-controller hidden">
    <div class="dpad" id="dpad">
      <button class="dpad-btn dpad-up"    id="dp-up"    aria-label="Up">▲</button>
      <button class="dpad-btn dpad-left"  id="dp-left"  aria-label="Left">◀</button>
      <button class="dpad-btn dpad-center"               aria-label="Center"></button>
      <button class="dpad-btn dpad-right" id="dp-right" aria-label="Right">▶</button>
      <button class="dpad-btn dpad-down"  id="dp-down"  aria-label="Down">▼</button>
    </div>
    <div class="gba-mid-btns">
      <button class="gba-mid-btn" id="btn-select">SELECT</button>
      <button class="gba-mid-btn" id="btn-start">START</button>
    </div>
  </div>

  <div id="gba-right" class="gba-controller hidden">
    <div class="ab-cluster">
      <button class="ab-btn ab-b" id="btn-b">B</button>
      <button class="ab-btn ab-a" id="btn-a">A</button>
    </div>
  </div>

</div>

<div id="toast" class="toast hidden"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
  set('title-game-text',    CONFIG.titleText);
  set('title-edition-text', CONFIG.titleEdition);
  set('title-footer-text',  CONFIG.titleFooter);
  set('continue-logo-text', CONFIG.continueLogoSuffix);
  set('map-town-name-text', CONFIG.townNameUpper);
  set('exp-label-text',     CONFIG.expLabel);
  set('complete-msg-text',  CONFIG.completeMsg);
  if (CONFIG.badges) {
    CONFIG.badges.forEach((b, i) => set(`badge-${i+1}`, b));
  }
  set('page-title', CONFIG.gameName + ' — Learn ' + CONFIG.subject);
  document.title = CONFIG.gameName + ' — Learn ' + CONFIG.subject;
});
</script>
<script src="config.js"></script>
<script src="game.js"></script>
</body>
</html>