|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Jeu d'Échecs</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
.chess-board { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(8, 1fr); |
|
|
grid-template-rows: repeat(8, 1fr); |
|
|
aspect-ratio: 1; |
|
|
max-width: 600px; |
|
|
border: 4px solid #8b5a2b; |
|
|
} |
|
|
|
|
|
.chess-square { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 2rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.chess-square.light { |
|
|
background-color: #f0d9b5; |
|
|
} |
|
|
|
|
|
.chess-square.dark { |
|
|
background-color: #b58863; |
|
|
} |
|
|
|
|
|
.chess-square.selected { |
|
|
background-color: #7fb069 !important; |
|
|
box-shadow: inset 0 0 0 3px #2d5a27; |
|
|
} |
|
|
|
|
|
.chess-square.legal-move { |
|
|
background-color: #90EE90 !important; |
|
|
} |
|
|
|
|
|
.chess-square.legal-move::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(0, 128, 0, 0.5); |
|
|
} |
|
|
|
|
|
.chess-square.check { |
|
|
background-color: #ff6b6b !important; |
|
|
} |
|
|
|
|
|
.chess-piece { |
|
|
user-select: none; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 min-h-screen"> |
|
|
|
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-4xl font-bold text-white">♔ Jeu d'Échecs</h1> |
|
|
<div class="space-x-4"> |
|
|
<button onclick="startNewGame('human')" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition"> |
|
|
Humain vs Humain |
|
|
</button> |
|
|
<button onclick="startNewGame('ai')" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg transition"> |
|
|
Humain vs IA |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div id="chess-board" class="chess-board mx-auto shadow-2xl"></div> |
|
|
|
|
|
|
|
|
<div class="absolute -left-6 top-0 h-full flex flex-col justify-around text-white font-bold"> |
|
|
<div>8</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div><div>2</div><div>1</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 left-0 w-full flex justify-around text-white font-bold"> |
|
|
<div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-lg p-6 shadow-xl"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">État du Jeu</h3> |
|
|
<div id="game-status" class="status-indicator"> |
|
|
<div class="bg-slate-700 rounded-lg p-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div id="current-player-indicator" class="w-4 h-4 rounded-full bg-white"></div> |
|
|
<span id="current-player-text" class="text-white font-medium">Tour des Blancs</span> |
|
|
</div> |
|
|
<div id="check-indicator" class="mt-2 text-red-400 font-medium hidden"> |
|
|
⚠️ Échec ! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Mode de Jeu</h3> |
|
|
<div id="game-mode" class="bg-slate-700 rounded-lg p-3 text-white"> |
|
|
Sélectionnez un mode |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Historique</h3> |
|
|
<div id="moves-history" class="bg-slate-700 rounded-lg p-3 max-h-48 overflow-y-auto"> |
|
|
<div class="text-slate-400 text-sm">Aucun coup joué</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-3"> |
|
|
<button onclick="resetGame()" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg transition"> |
|
|
Nouvelle Partie |
|
|
</button> |
|
|
<button onclick="undoMove()" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded-lg transition" disabled> |
|
|
Annuler le Coup |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50"> |
|
|
<div class="bg-slate-800 rounded-lg p-8 max-w-md mx-4 text-center"> |
|
|
<h2 id="game-over-title" class="text-3xl font-bold text-white mb-4"></h2> |
|
|
<p id="game-over-message" class="text-slate-300 mb-6"></p> |
|
|
<div class="space-x-4"> |
|
|
<button onclick="closeGameOverModal()" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition"> |
|
|
Fermer |
|
|
</button> |
|
|
<button onclick="resetGame(); closeGameOverModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition"> |
|
|
Nouvelle Partie |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let gameMode = null; |
|
|
let selectedSquare = null; |
|
|
let currentPlayer = 'white'; |
|
|
let gameActive = true; |
|
|
let boardState = null; |
|
|
|
|
|
|
|
|
const pieceSymbols = { |
|
|
'K': '♔', 'Q': '♕', 'R': '♖', 'B': '♗', 'N': '♘', 'P': '♙', |
|
|
'k': '♚', 'q': '♛', 'r': '♜', 'b': '♝', 'n': '♞', 'p': '♟' |
|
|
}; |
|
|
|
|
|
|
|
|
function initializeBoard() { |
|
|
const board = document.getElementById('chess-board'); |
|
|
board.innerHTML = ''; |
|
|
|
|
|
for (let row = 0; row < 8; row++) { |
|
|
for (let col = 0; col < 8; col++) { |
|
|
const square = document.createElement('div'); |
|
|
const isLight = (row + col) % 2 === 0; |
|
|
square.className = `chess-square ${isLight ? 'light' : 'dark'}`; |
|
|
square.dataset.square = String.fromCharCode(97 + col) + (8 - row); |
|
|
square.addEventListener('click', handleSquareClick); |
|
|
board.appendChild(square); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleSquareClick(event) { |
|
|
if (!gameActive) return; |
|
|
|
|
|
const square = event.target.dataset.square; |
|
|
|
|
|
if (selectedSquare === square) { |
|
|
|
|
|
clearSelection(); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (selectedSquare && event.target.classList.contains('legal-move')) { |
|
|
|
|
|
makeMove(selectedSquare + square); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
selectSquare(square); |
|
|
} |
|
|
|
|
|
|
|
|
function selectSquare(square) { |
|
|
clearSelection(); |
|
|
selectedSquare = square; |
|
|
|
|
|
const squareElement = document.querySelector(`[data-square="${square}"]`); |
|
|
squareElement.classList.add('selected'); |
|
|
|
|
|
|
|
|
showLegalMoves(square); |
|
|
} |
|
|
|
|
|
|
|
|
function clearSelection() { |
|
|
selectedSquare = null; |
|
|
document.querySelectorAll('.chess-square').forEach(sq => { |
|
|
sq.classList.remove('selected', 'legal-move'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function showLegalMoves(square) { |
|
|
try { |
|
|
const response = await fetch(`/api/game/legal-moves?square=${square}`); |
|
|
const data = await response.json(); |
|
|
|
|
|
if (data.legal_moves) { |
|
|
data.legal_moves.forEach(targetSquare => { |
|
|
const element = document.querySelector(`[data-square="${targetSquare}"]`); |
|
|
if (element) { |
|
|
element.classList.add('legal-move'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur lors de la récupération des coups légaux:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function makeMove(move) { |
|
|
try { |
|
|
const response = await fetch('/api/game/move', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ move: move }) |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
clearSelection(); |
|
|
await updateGameState(); |
|
|
|
|
|
|
|
|
if (gameMode === 'ai' && result.current_player === 'black' && result.game_status === 'active') { |
|
|
setTimeout(makeAIMove, 500); |
|
|
} |
|
|
} else { |
|
|
alert('Coup invalide: ' + result.error); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur lors du coup:', error); |
|
|
alert('Erreur lors du coup'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function makeAIMove() { |
|
|
try { |
|
|
const response = await fetch('/api/game/ai-move', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
} |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
await updateGameState(); |
|
|
} else { |
|
|
console.error('Erreur IA:', result.error); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur lors du coup de l\'IA:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function updateGameState() { |
|
|
try { |
|
|
const response = await fetch('/api/game/state'); |
|
|
const state = await response.json(); |
|
|
|
|
|
boardState = state; |
|
|
currentPlayer = state.current_player; |
|
|
gameActive = state.game_status === 'active'; |
|
|
|
|
|
updateBoard(state.fen); |
|
|
updateUI(state); |
|
|
|
|
|
if (!gameActive) { |
|
|
showGameOverModal(state.game_status); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur lors de la mise à jour:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateBoard(fen) { |
|
|
const position = fen.split(' ')[0]; |
|
|
const rows = position.split('/'); |
|
|
|
|
|
document.querySelectorAll('.chess-square').forEach(square => { |
|
|
square.textContent = ''; |
|
|
square.classList.remove('check'); |
|
|
}); |
|
|
|
|
|
let squareIndex = 0; |
|
|
for (let row = 0; row < 8; row++) { |
|
|
let col = 0; |
|
|
for (let char of rows[row]) { |
|
|
if (isNaN(char)) { |
|
|
const square = document.querySelectorAll('.chess-square')[squareIndex]; |
|
|
square.textContent = pieceSymbols[char] || ''; |
|
|
squareIndex++; |
|
|
col++; |
|
|
} else { |
|
|
squareIndex += parseInt(char); |
|
|
col += parseInt(char); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (boardState && boardState.is_check) { |
|
|
|
|
|
document.getElementById('check-indicator').classList.remove('hidden'); |
|
|
} else { |
|
|
document.getElementById('check-indicator').classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateUI(state) { |
|
|
|
|
|
const indicator = document.getElementById('current-player-indicator'); |
|
|
const text = document.getElementById('current-player-text'); |
|
|
|
|
|
if (state.current_player === 'white') { |
|
|
indicator.className = 'w-4 h-4 rounded-full bg-white'; |
|
|
text.textContent = 'Tour des Blancs'; |
|
|
} else { |
|
|
indicator.className = 'w-4 h-4 rounded-full bg-gray-800 border-2 border-white'; |
|
|
text.textContent = 'Tour des Noirs'; |
|
|
} |
|
|
|
|
|
|
|
|
updateMovesHistory(state.moves_history); |
|
|
} |
|
|
|
|
|
|
|
|
function updateMovesHistory(moves) { |
|
|
const historyDiv = document.getElementById('moves-history'); |
|
|
|
|
|
if (moves.length === 0) { |
|
|
historyDiv.innerHTML = '<div class="text-slate-400 text-sm">Aucun coup joué</div>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
let html = '<div class="space-y-1 text-sm">'; |
|
|
for (let i = 0; i < moves.length; i += 2) { |
|
|
const moveNumber = Math.floor(i / 2) + 1; |
|
|
const whiteMove = moves[i] || ''; |
|
|
const blackMove = moves[i + 1] || ''; |
|
|
html += `<div class="text-white"> |
|
|
<span class="text-slate-400">${moveNumber}.</span> |
|
|
${whiteMove} ${blackMove} |
|
|
</div>`; |
|
|
} |
|
|
html += '</div>'; |
|
|
|
|
|
historyDiv.innerHTML = html; |
|
|
historyDiv.scrollTop = historyDiv.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function startNewGame(mode) { |
|
|
gameMode = mode; |
|
|
const modeText = mode === 'ai' ? 'Humain vs IA' : 'Humain vs Humain'; |
|
|
document.getElementById('game-mode').textContent = modeText; |
|
|
|
|
|
|
|
|
window.location.href = `/game/${mode}`; |
|
|
} |
|
|
|
|
|
|
|
|
async function resetGame() { |
|
|
try { |
|
|
const response = await fetch('/api/game/reset', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
} |
|
|
}); |
|
|
|
|
|
if (response.ok) { |
|
|
clearSelection(); |
|
|
await updateGameState(); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur lors de la réinitialisation:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showGameOverModal(gameStatus) { |
|
|
const modal = document.getElementById('game-over-modal'); |
|
|
const title = document.getElementById('game-over-title'); |
|
|
const message = document.getElementById('game-over-message'); |
|
|
|
|
|
let titleText = ''; |
|
|
let messageText = ''; |
|
|
|
|
|
switch (gameStatus) { |
|
|
case 'checkmate_white': |
|
|
titleText = '♔ Victoire des Blancs !'; |
|
|
messageText = 'Échec et mat ! Les blancs ont gagné.'; |
|
|
break; |
|
|
case 'checkmate_black': |
|
|
titleText = '♚ Victoire des Noirs !'; |
|
|
messageText = 'Échec et mat ! Les noirs ont gagné.'; |
|
|
break; |
|
|
case 'stalemate': |
|
|
titleText = 'Match Nul'; |
|
|
messageText = 'Pat ! La partie se termine par un match nul.'; |
|
|
break; |
|
|
case 'draw_material': |
|
|
titleText = 'Match Nul'; |
|
|
messageText = 'Match nul par manque de matériel.'; |
|
|
break; |
|
|
default: |
|
|
titleText = 'Partie Terminée'; |
|
|
messageText = 'La partie est terminée.'; |
|
|
} |
|
|
|
|
|
title.textContent = titleText; |
|
|
message.textContent = messageText; |
|
|
modal.classList.remove('hidden'); |
|
|
modal.classList.add('flex'); |
|
|
} |
|
|
|
|
|
function closeGameOverModal() { |
|
|
const modal = document.getElementById('game-over-modal'); |
|
|
modal.classList.add('hidden'); |
|
|
modal.classList.remove('flex'); |
|
|
} |
|
|
|
|
|
function undoMove() { |
|
|
|
|
|
alert('Fonction à implémenter'); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
initializeBoard(); |
|
|
|
|
|
|
|
|
if (window.location.pathname.includes('/game/')) { |
|
|
const mode = window.location.pathname.split('/').pop(); |
|
|
gameMode = mode; |
|
|
const modeText = mode === 'ai' ? 'Humain vs IA' : 'Humain vs Humain'; |
|
|
document.getElementById('game-mode').textContent = modeText; |
|
|
|
|
|
updateGameState(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
