Chess

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chess Game with AI Opponent</title>
<style>
/* ── css: layout ── */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  padding: 20px;
}

.board-container {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 512px;
  height: 512px;
  border: 4px solid #5d4037;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.square.light {
  background-color: #f0d9b5;
}

.square.dark {
  background-color: #b58863;
}

.square.selected {
  background-color: #b5c7ff;
}

.square.valid-move::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 128, 0, 0.5);
}

.square.valid-capture {
  box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.7);
}

.square.last-move {
  box-shadow: inset 0 0 15px rgba(255, 255, 0, 0.8);
}

.square.check {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { box-shadow: inset 0 0 0px rgba(255, 0, 0, 0.8); }
  50% { box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.8); }
  100% { box-shadow: inset 0 0 0px rgba(255, 0, 0, 0.8); }
}

.controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
}

.button {
  padding: 10px 20px;
  background: #8b4513;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.button:hover {
  background: #a0522d;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px);
}

.panel {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 800px;
}

.captured-pieces {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 10px;
  min-width: 150px;
}

.move-history {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 10px;
  flex-grow: 1;
  max-height: 200px;
  overflow-y: auto;
}

.move-history ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.move-history li {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.move-history li:last-child {
  border-bottom: none;
}

.game-status {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
}

.promotion-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.promotion-options {
  display: flex;
  gap: 10px;
  background: #8b4513;
  padding: 15px;
  border-radius: 10px;
}

.piece-option {
  font-size: 48px;
  cursor: pointer;
  transition: transform 0.2s;
}

.piece-option:hover {
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .board-container {
    flex-direction: column;
  }
  
  .panel {
    flex-direction: column;
    align-items: center;
  }
  
  .chess-board {
    width: 300px;
    height: 300px;
  }
  
  .square {
    font-size: 32px;
  }
}
</style>
</head>
<body>
<div id="app"><div class="board-container">
  <div class="chess-board" id="board"></div>
  <div class="panel">
    <div class="captured-pieces">
      <h3>White Captured:</h3>
      <div id="white-captured"></div>
      <h3>Black Captured:</h3>
      <div id="black-captured"></div>
    </div>
    <div class="move-history">
      <h3>Move History</h3>
      <ul id="moves-list"></ul>
    </div>
  </div>
</div>
<div class="game-status" id="status">White's turn</div>
<div class="controls">
  <button class="button" id="flip-board">Flip Board</button>
  <button class="button" id="undo-move">Undo Move</button>
  <button class="button" id="new-game">New Game</button>
  <button class="button" id="mute-toggle">Mute Sound</button>
</div></div>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
// Entry point. Runs after the DOM is parsed and after any classic
// <script> imports, so document queries and CDN globals are available.
// Import your other modules from here.
Object.defineProperty(exports, "__esModule", { value: true });
exports.start = start;
function start() {
    // Replace this with the real startup sequence.
}
start();
};

// ── module: src/constants.ts ──
__mods["src/constants.ts"] = function (exports, require, module) {
"use strict";
// Chess constants and configuration
Object.defineProperty(exports, "__esModule", { value: true });
exports.SOUND_EFFECTS = exports.AI_DEPTH = exports.EVAL_WEIGHTS = exports.PIECE_SQUARE_TABLES = exports.PIECE_VALUES = exports.PIECE_SYMBOLS = exports.BLACK = exports.WHITE = exports.KING = exports.QUEEN = exports.ROOK = exports.BISHOP = exports.KNIGHT = exports.PAWN = exports.EMPTY = exports.RANKS = exports.FILES = exports.BOARD_SIZE = void 0;
exports.BOARD_SIZE = 8;
exports.FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
exports.RANKS = ['1', '2', '3', '4', '5', '6', '7', '8'];
// Piece types
exports.EMPTY = 0;
exports.PAWN = 1;
exports.KNIGHT = 2;
exports.BISHOP = 3;
exports.ROOK = 4;
exports.QUEEN = 5;
exports.KING = 6;
// Piece colors
exports.WHITE = 8;
exports.BLACK = 16;
// Piece symbols (Unicode)
exports.PIECE_SYMBOLS = {
    [exports.WHITE | exports.PAWN]: '♟',
    [exports.WHITE | exports.KNIGHT]: '♞',
    [exports.WHITE | exports.BISHOP]: '♝',
    [exports.WHITE | exports.ROOK]: '♜',
    [exports.WHITE | exports.QUEEN]: '♛',
    [exports.WHITE | exports.KING]: '♚',
    [exports.BLACK | exports.PAWN]: '♙',
    [exports.BLACK | exports.KNIGHT]: '♘',
    [exports.BLACK | exports.BISHOP]: '♗',
    [exports.BLACK | exports.ROOK]: '♖',
    [exports.BLACK | exports.QUEEN]: '♕',
    [exports.BLACK | exports.KING]: '♔'
};
// Piece values for evaluation
exports.PIECE_VALUES = {
    [exports.PAWN]: 100,
    [exports.KNIGHT]: 320,
    [exports.BISHOP]: 330,
    [exports.ROOK]: 500,
    [exports.QUEEN]: 900,
    [exports.KING]: 20000
};
// Piece-square tables (material advantage)
exports.PIECE_SQUARE_TABLES = {
    [exports.PAWN]: [
        0, 0, 0, 0, 0, 0, 0, 0,
        50, 50, 50, 50, 50, 50, 50, 50,
        10, 10, 20, 30, 30, 20, 10, 10,
        5, 5, 10, 25, 25, 10, 5, 5,
        0, 0, 0, 20, 20, 0, 0, 0,
        5, -5, -10, 0, 0, -10, -5, 5,
        5, 10, 10, -20, -20, 10, 10, 5,
        0, 0, 0, 0, 0, 0, 0, 0
    ],
    [exports.KNIGHT]: [
        -50, -40, -30, -30, -30, -30, -40, -50,
        -40, -20, 0, 0, 0, 0, -20, -40,
        -30, 0, 10, 15, 15, 10, 0, -30,
        -30, 5, 15, 20, 20, 15, 5, -30,
        -30, 0, 15, 20, 20, 15, 0, -30,
        -30, 10, 20, 25, 25, 20, 10, -30,
        -40, -20, 0, 5, 5, 0, -20, -40,
        -50, -40, -30, -30, -30, -30, -40, -50
    ],
    [exports.BISHOP]: [
        -20, -10, -10, -10, -10, -10, -10, -20,
        -10, 0, 0, 0, 0, 0, 0, -10,
        -10, 0, 5, 10, 10, 5, 0, -10,
        -10, 5, 5, 10, 10, 5, 5, -10,
        -10, 0, 10, 10, 10, 10, 0, -10,
        -10, 10, 10, 10, 10, 10, 10, -10,
        -10, 5, 0, 0, 0, 0, 5, -10,
        -20, -10, -10, -10, -10, -10, -10, -20
    ],
    [exports.ROOK]: [
        0, 0, 0, 0, 0, 0, 0, 0,
        5, 10, 10, 10, 10, 10, 10, 5,
        -5, 0, 0, 0, 0, 0, 0, -5,
        -5, 0, 0, 0, 0, 0, 0, -5,
        -5, 0, 0, 0, 0, 0, 0, -5,
        -5, 0, 0, 0, 0, 0, 0, -5,
        -5, 0, 0, 0, 0, 0, 0, -5,
        0, 0, 0, 0, 0, 0, 0, 0
    ],
    [exports.QUEEN]: [
        -20, -10, -10, -5, -5, -10, -10, -20,
        -10, 0, 0, 0, 0, 0, 0, -10,
        -10, 0, 5, 5, 5, 5, 0, -10,
        -5, 0, 5, 5, 5, 5, 0, -5,
        0, 0, 5, 5, 5, 5, 0, -5,
        -10, 0, 5, 5, 5, 5, 0, -10,
        -10, 0, 0, 0, 0, 0, 0, -10,
        -20, -10, -10, -5, -5, -10, -10, -20
    ],
    [exports.KING]: [
        -30, -40, -40, -50, -50, -40, -40, -30,
        -30, -40, -40, -50, -50, -40, -40, -30,
        -30, -40, -40, -50, -50, -40, -40, -30,
        -30, -40, -40, -50, -50, -40, -40, -30,
        -20, -30, -30, -40, -40, -30, -30, -20,
        -10, -20, -20, -20, -20, -20, -20, -10,
        20, 20, 0, 0, 0, 0, 20, 20,
        20, 30, 10, 0, 0, 10, 30, 20
    ]
};
// Evaluation weights
exports.EVAL_WEIGHTS = {
    material: 100,
    pieceSquare: 1,
    pawnStructure: 10,
    mobility: 5,
    kingSafety: 20,
    centerControl: 10
};
// AI depths for different difficulties
exports.AI_DEPTH = {
    easy: 2,
    medium: 3,
    hard: 4
};
// Sound effects (using Web Audio API)
exports.SOUND_EFFECTS = {
    move: 'move',
    capture: 'capture',
    check: 'check'
};
};

// ── module: src/utils.ts ──
__mods["src/utils.ts"] = function (exports, require, module) {
"use strict";
// Utility functions for chess game
Object.defineProperty(exports, "__esModule", { value: true });
exports.fileRankToIndex = fileRankToIndex;
exports.indexToFileRank = indexToFileRank;
exports.algebraicToIndex = algebraicToIndex;
exports.indexToAlgebraic = indexToAlgebraic;
exports.isWhitePiece = isWhitePiece;
exports.isBlackPiece = isBlackPiece;
exports.getPieceColor = getPieceColor;
exports.flipBoardIndex = flipBoardIndex;
exports.isSquareAttacked = isSquareAttacked;
exports.deepClone = deepClone;
function fileRankToIndex(file, rank) {
    const fileIndex = file.charCodeAt(0) - 'a'.charCodeAt(0);
    const rankIndex = parseInt(rank) - 1;
    return rankIndex * 8 + fileIndex;
}
function indexToFileRank(index) {
    const file = String.fromCharCode('a'.charCodeAt(0) + (index % 8));
    const rank = Math.floor(index / 8) + 1;
    return [file, rank.toString()];
}
function algebraicToIndex(algebraic) {
    if (algebraic.length !== 2)
        return -1;
    const file = algebraic.charCodeAt(0) - 'a'.charCodeAt(0);
    const rank = parseInt(algebraic[1]) - 1;
    if (file < 0 || file > 7 || rank < 0 || rank > 7)
        return -1;
    return rank * 8 + file;
}
function indexToAlgebraic(index) {
    const file = String.fromCharCode('a'.charCodeAt(0) + (index % 8));
    const rank = Math.floor(index / 8) + 1;
    return file + rank.toString();
}
function isWhitePiece(piece) {
    return piece !== 0 && (piece & 8) === 8;
}
function isBlackPiece(piece) {
    return piece !== 0 && (piece & 16) === 16;
}
function getPieceColor(piece) {
    if (piece === 0)
        return 0;
    return piece & (8 | 16);
}
function flipBoardIndex(index) {
    const rank = Math.floor(index / 8);
    const file = index % 8;
    return (7 - rank) * 8 + file;
}
function isSquareAttacked(board, square, color) {
    // This would be implemented in the full engine
    return false;
}
// Simple deep clone for game state
function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>