XChess/main.js 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
import Phaser from 'phaser';
import { GameScene } from './src/GameScene.js';
import { ChessEngine } from './src/core/ChessEngine.js';

const engine = new ChessEngine();

const config = {
  type: Phaser.AUTO,
  width: 720,
  height: 720,
  parent: 'game-container',
  backgroundColor: '#000000',
  transparent: true,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: GameScene
};

const game = new Phaser.Game(config);
game.scene.start('GameScene', { engine });

// Theme Toggle
const btnTheme = document.getElementById('btn-theme');
btnTheme.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  if (currentTheme === 'light') {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
  }
});

// Start Game Logic
const startOverlay = document.getElementById('start-overlay');
const btnPlayWhite = document.getElementById('btn-play-white');
const btnPlayBlack = document.getElementById('btn-play-black');

function startGame(color) {
  document.getElementById('start-overlay').style.display = 'none';
  if (game && game.scene.keys.GameScene) {
    game.scene.keys.GameScene.startGame(color);
  }
}

btnPlayWhite.addEventListener('click', () => startGame('white'));
btnPlayBlack.addEventListener('click', () => startGame('black'));

// ── ELO Slider live update ────────────────────────────────────────────────
const eloSlider = document.getElementById('bot-elo');
const eloDisplay = document.getElementById('elo-display');
const eloTier = document.getElementById('elo-tier');

function getEloTier(elo) {
  if (elo < 600) return { label: 'Beginner', color: '#64748b' };
  if (elo < 900) return { label: 'Novice', color: '#10b981' };
  if (elo < 1200) return { label: 'Casual', color: '#22d3ee' };
  if (elo < 1500) return { label: 'Intermediate', color: '#3b82f6' };
  if (elo < 1800) return { label: 'Club Player', color: '#8b5cf6' };
  if (elo < 2100) return { label: 'Advanced', color: '#d946ef' };
  if (elo < 2400) return { label: 'Expert', color: '#f59e0b' };
  if (elo < 2700) return { label: 'Master', color: '#ef4444' };
  return { label: 'Grandmaster', color: '#ff6b35' };
}

function updateEloUI() {
  const elo = parseInt(eloSlider.value, 10);
  const tier = getEloTier(elo);
  if (eloDisplay) eloDisplay.textContent = elo;
  if (eloTier) {
    eloTier.textContent = tier.label;
    eloTier.style.color = tier.color;
  }
  // Gradient track fill to show progress visually
  const pct = ((elo - 100) / (3500 - 100)) * 100;
  eloSlider.style.background = `linear-gradient(to right, ${tier.color} 0%, ${tier.color} ${pct}%, rgba(100,116,139,0.2) ${pct}%)`;
}

if (eloSlider) {
  eloSlider.addEventListener('input', updateEloUI);
  updateEloUI(); // initialise on load
}