80 lines
4.3 KiB
HTML
80 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>ChessNut 1 Partie</title>
|
||
<link rel="stylesheet" href="src/styles.css">
|
||
<style>
|
||
/* Minimal board CSS: keep responsive wrapper but delegate main layout to linked stylesheet */
|
||
.game-page{max-width:1000px;margin:12px auto;padding:8px}
|
||
#board-wrapper{width:100%;max-width:900px;margin:0 auto}
|
||
/* keep a wrapper that forces a square area; the actual .board/.cell layout lives in src/styles.css */
|
||
#board-wrapper .board{width:100%;aspect-ratio:1/1;box-sizing:border-box}
|
||
.cell .piece{width:100%;height:100%;object-fit:contain;display:block}
|
||
.cell.selected{outline:3px solid rgba(0,128,255,0.6);}
|
||
/* grid cells will be created dynamically via JS using grid-template */
|
||
/* checkerboard colors handled by .cell.light/.cell.dark in src/styles.css */
|
||
#meta{margin-top:8px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="game-page">
|
||
<header><h1>Partie</h1></header>
|
||
<div id="meta">Chargement...</div>
|
||
<div id="server-load-indicator" style="margin-top:6px;color:#666">Chargement de l'état du serveur...</div>
|
||
<div id="board-wrapper"><div id="board-container"></div></div>
|
||
<div style="margin-top:8px">
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||
<script src="src/game.js?v=3"></script>
|
||
<script>
|
||
// small bootstrap: fetch initial game state and wire socket updates
|
||
(function(){
|
||
const qs = new URLSearchParams(window.location.search);
|
||
const gid = qs.get('game');
|
||
const meta = document.getElementById('meta');
|
||
if(!gid){ meta.textContent = 'Game ID manquant'; return; }
|
||
meta.textContent = 'Affichage du plateau...';
|
||
// render an empty board immediately so user always sees a board even if backend is slow/unavailable
|
||
try { if(typeof renderBoardFromState === 'function') renderBoardFromState(null); } catch(e){ console.warn('initial empty board render failed', e); }
|
||
// fetch initial state: prefer explicit backend host then fallback to same-origin
|
||
(function(){
|
||
function handleGameObj(g){
|
||
// render board from state or empty board
|
||
if(g && g.state && typeof renderBoardFromState === 'function') renderBoardFromState(g.state);
|
||
else if(typeof renderBoardFromState === 'function') renderBoardFromState(null);
|
||
meta.textContent = 'Partie ' + (g && g.id ? g.id : gid);
|
||
const sli = document.getElementById('server-load-indicator'); if(sli) sli.style.display = 'none';
|
||
// set globals expected by src/game.js so socket handlers attach correctly
|
||
try {
|
||
currentGameId = gid;
|
||
if(g && g.players && g.players[0]) myPlayerId = g.players[0].id;
|
||
if(typeof socket === 'undefined' || !socket){
|
||
socket = io();
|
||
socket.on('connect', () => { socket.emit('join-game', gid); socket.emit('identify', { gameId: gid, playerId: myPlayerId }); });
|
||
socket.on('game-state', (s) => { if(typeof renderBoardFromState === 'function') renderBoardFromState(s); if(typeof setMeta === 'function') setMeta('game-state updated'); });
|
||
socket.on('move', (m) => { if(typeof setMeta === 'function') setMeta('remote move ' + JSON.stringify(m)); });
|
||
socket.on('player-update', (g) => { if(typeof setMeta === 'function') setMeta('players updated'); });
|
||
}
|
||
} catch(e){ console.warn('socket init failed', e); }
|
||
}
|
||
|
||
fetch('http://localhost:4000/api/game/' + gid).then(r => r.ok ? r.json() : null).then(g => {
|
||
if(g) { handleGameObj(g); }
|
||
else {
|
||
// try same-origin
|
||
fetch('/api/game/' + gid).then(r => r.ok ? r.json() : null).then(handleGameObj).catch(()=>{ handleGameObj(null); const sli = document.getElementById('server-load-indicator'); if(sli) sli.textContent = 'Serveur injoignable'; });
|
||
}
|
||
}).catch(()=>{
|
||
fetch('/api/game/' + gid).then(r => r.ok ? r.json() : null).then(handleGameObj).catch(()=>{ handleGameObj(null); const sli = document.getElementById('server-load-indicator'); if(sli) sli.textContent = 'Serveur injoignable'; });
|
||
});
|
||
})();
|
||
|
||
document.getElementById('leave').addEventListener('click', ()=>{ window.location.href = 'waiting.html?game=' + encodeURIComponent(gid); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|