XChess/index.html at main · btkcodedev/XChess · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>XChess</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="error-log"
    style="position:fixed;top:0;left:0;z-index:9999;background:rgba(255,0,0,0.8);color:white;padding:10px;display:none;pointer-events:none;">
  </div>
  <script>
    window.onerror = function (msg, url, line, col, error) {
      const el = document.getElementById('error-log');
      el.style.display = 'block';
      el.innerHTML += `<br>Error: ${msg} at ${line}:${col}`;
    };
    window.onunhandledrejection = function (event) {
      const el = document.getElementById('error-log');
      el.style.display = 'block';
      el.innerHTML += `<br>Promise Error: ${event.reason}`;
    };
  </script>
  <div id="app">
    <div id="game-container">
      <!-- Start Game Overlay -->
      <div id="start-overlay">
        <h1>Welcome to XChess</h1>
        <p>Xtra rules, Xtra fun on chess</p>
        <div class="start-buttons">
          <button id="btn-play-white">Play as White</button>
          <button id="btn-play-black">Play as Black</button>
        </div>
      </div>
    </div>


    <!-- UI Overlay -->
    <div id="ui-panel">
      <div class="panel-header">
        <h1>XChess</h1>
        <div class="header-controls">
          <button id="btn-theme" class="icon-btn">🌓</button>
          <button id="btn-music" class="icon-btn">🎵</button>
          <div id="turn-indicator" data-turn="white">White's Turn</div>
        </div>
      </div>

      <div class="timers">
        <div id="clock-white" class="clock clock-white">10:00</div>
        <div id="clock-black" class="clock clock-black">10:00</div>
      </div>

      <div class="panel-section">
        <h2>Xtra Rules</h2>
        <div id="xtra-rules-panel">
          <!-- Rules dynamically populated by GameScene.js -->
        </div>
      </div>

      <div class="panel-section elo-section">
        <div class="elo-header">
          <h2>Bot ELO</h2>
          <div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0">
            <span id="elo-tier"
              style="font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em"></span>
            <span id="elo-display">1500</span>
          </div>
        </div>
        <input type="range" id="bot-elo" min="100" max="3500" step="50" value="1500" class="elo-slider">
      </div>

      <button id="btn-restart">Restart Game</button>
      <button id="btn-undo" style="display:none;background:rgba(251,191,36,0.15);color:#fbbf24;border:1px solid rgba(251,191,36,0.4);margin-top:0.5rem">↩ Undo Move</button>
    </div>
  </div>

  <!-- Task 4: Pawn Promotion Picker Modal -->
  <div id="promotion-modal" class="promotion-modal">
    <div class="promotion-modal-inner">
      <p class="promo-title">Promote Pawn</p>
      <div class="promo-options">
        <button class="promo-option" data-piece="queen">
          <span class="promo-icon">♕</span>
          <span class="promo-label">Queen</span>
        </button>
        <button class="promo-option" data-piece="rook">
          <span class="promo-icon">♖</span>
          <span class="promo-label">Rook</span>
        </button>
        <button class="promo-option" data-piece="knight">
          <span class="promo-icon">♘</span>
          <span class="promo-label">Knight</span>
        </button>
        <button class="promo-option" data-piece="bishop">
          <span class="promo-icon">♗</span>
          <span class="promo-label">Bishop</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Ambient Music -->
  <audio id="ambient-music" loop>
    <source src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Gymnop%C3%A9die_no._1_%28Satie%29.ogg"
      type="audio/ogg">
  </audio>

  <script type="module" src="./main.js"></script>
</body>

</html>