diff --git a/public/game.html b/public/game.html
index 278dafc..edb1de9 100644
--- a/public/game.html
+++ b/public/game.html
@@ -12,6 +12,19 @@
+
@@ -19,16 +32,29 @@
function qs(name){ const url = new URL(window.location.href); return url.searchParams.get(name); }
const roomId = qs('roomId');
const playerId = qs('playerId') || undefined;
- document.getElementById('roomId').textContent = roomId || '-';
- document.getElementById('playerId').textContent = playerId || '-';
+ const roomIdEl = document.getElementById('roomId');
+ const playerIdEl = document.getElementById('playerId');
+ if(roomIdEl) roomIdEl.textContent = roomId || '-';
+ if(playerIdEl) playerIdEl.textContent = playerId || '-';
+ // optional UI elements: support removing the sidebar/sections without breaking JS
const logEl = document.getElementById('log');
const fenEl = document.getElementById('fen');
const playersEl = document.getElementById('players');
const boardEl = document.getElementById('board');
let socket = null;
- function log(...args){ logEl.textContent += '\n' + args.map(a=>typeof a==='object'?JSON.stringify(a):a).join(' '); logEl.scrollTop = logEl.scrollHeight; }
+ // safe logger: prefer on-page log if present, otherwise console
+ function log(...args){
+ if(logEl){
+ try{
+ logEl.textContent += '\n' + args.map(a=>typeof a==='object'?JSON.stringify(a):a).join(' ');
+ logEl.scrollTop = logEl.scrollHeight;
+ }catch(e){ console.log(...args); }
+ } else {
+ console.log(...args);
+ }
+ }
if(!roomId){ alert('roomId manquant dans l\'URL'); }
@@ -38,19 +64,29 @@
socket.on('room:update', (data)=>{
log('room:update', data);
- fenEl.textContent = data.fen || '-';
- playersEl.innerHTML = '';
- (data.players||[]).forEach(p=>{
- const li = document.createElement('li');
- li.textContent = p.id + ' (' + p.color + ')';
- playersEl.appendChild(li);
- });
+ if(fenEl) fenEl.textContent = data.fen || '-';
+ if(playersEl){
+ playersEl.innerHTML = '';
+ (data.players||[]).forEach(p=>{
+ const li = document.createElement('li');
+ li.textContent = p.id + ' (' + p.color + ')';
+ playersEl.appendChild(li);
+ });
+ }
+ if(data.size){
+ // ensure grid layout matches requested size and build squares
+ buildGrid(data.size);
+ // adjust board width/height responsively (keep squares roughly proportional)
+ const side = Math.min(800, Math.max(320, data.size * 80));
+ boardEl.style.width = side + 'px';
+ boardEl.style.height = side + 'px';
+ }
if(data.fen) renderFen(data.fen);
});
- socket.on('move:moved', (data)=>{ log('move:moved', data); fenEl.textContent = data.fen; renderFen(data.fen); });
- socket.on('game:over', (data)=>{ log('game:over', data); fenEl.textContent = data.fen; renderFen(data.fen); });
- socket.on('game:started', (data)=>{ log('game:started', data); fenEl.textContent = data.fen || '-'; renderFen(data.fen || ''); });
+ socket.on('move:moved', (data)=>{ log('move:moved', data); if(fenEl) fenEl.textContent = data.fen; renderFen(data.fen); });
+ socket.on('game:over', (data)=>{ log('game:over', data); if(fenEl) fenEl.textContent = data.fen; renderFen(data.fen); });
+ socket.on('game:started', (data)=>{ log('game:started', data); if(fenEl) fenEl.textContent = data.fen || '-'; renderFen(data.fen || ''); });
socket.emit('room:join', { roomId, playerId }, (resp)=>{
if(resp && resp.error){ log('join error', resp); alert(resp.error); return; }
@@ -60,56 +96,104 @@
connectAndJoin();
- document.getElementById('move').addEventListener('click', ()=>{
- if(!socket){ alert('non connecté'); return; }
- const from = document.getElementById('from').value.trim();
- const to = document.getElementById('to').value.trim();
- const promotion = document.getElementById('promo').value.trim() || undefined;
- socket.emit('game:move', { roomId, from, to, promotion }, (resp)=>{
- if(resp && resp.error) { log('move error', resp); alert(resp.error); return; }
- log('move accepted', resp);
+ // allow clicking on the board to request legal moves for a square
+ if(boardEl){
+ boardEl.addEventListener('click', (ev)=>{
+ const sqEl = ev.target.closest && ev.target.closest('.square');
+ if(!sqEl) return;
+ const square = sqEl.getAttribute('data-square');
+ if(!square) return;
+ if(socket){
+ socket.emit('game:legalMoves', { roomId, square }, (resp)=>{
+ if(resp && resp.error){ log('legalMoves error', resp); return; }
+ log('legalMoves for', square, resp.moves || resp);
+ });
+ }
});
- });
+ }
+
+ const moveBtn = document.getElementById('move');
+ if(moveBtn){
+ moveBtn.addEventListener('click', ()=>{
+ if(!socket){ alert('non connecté'); return; }
+ const fromEl = document.getElementById('from');
+ const toEl = document.getElementById('to');
+ const promoEl = document.getElementById('promo');
+ const from = fromEl ? fromEl.value.trim() : '';
+ const to = toEl ? toEl.value.trim() : '';
+ const promotion = promoEl ? promoEl.value.trim() || undefined : undefined;
+ socket.emit('game:move', { roomId, from, to, promotion }, (resp)=>{
+ if(resp && resp.error) { log('move error', resp); alert(resp.error); return; }
+ log('move accepted', resp);
+ });
+ });
+ }
// Board rendering using provided SVG assets. Accepts FEN.
- const pieceSetPath = '/assets/chess-pieces/chess_1Kbyte_gambit';
+ const pieceSetPath = '/assets/chess-pieces/chess_maestro_bw';
// board visual defaults are handled by CSS (background, size, border, position)
function renderFen(fen){
if(!fen) return;
+ // only handle standard FEN for 8x8; for other sizes server should send a 'board' structure
const parts = fen.split(' ');
const rows = parts[0].split('/');
- boardEl.innerHTML = '';
- for(let r=0;r<8;r++){
+ // clear existing pieces but keep squares if present
+ const squares = boardEl.querySelectorAll('.square');
+ squares.forEach(s=> s.innerHTML = '');
+
+ // place pieces according to FEN (assume 8x8)
+ for(let r=0;r= 1; rank--){
+ for(let file = 0; file < size; file++){
+ const fileLetter = String.fromCharCode('a'.charCodeAt(0) + file);
+ const squareName = `${fileLetter}${rank}`;
+ const sq = document.createElement('div');
+ // color squares in checker pattern
+ const dark = ((file + rank) % 2) === 0;
+ sq.className = 'square ' + (dark ? 'dark' : 'light');
+ sq.setAttribute('data-square', squareName);
+ boardEl.appendChild(sq);
+ }
+ }
+ }