lobby +wainting room

This commit is contained in:
Didictateur 2025-11-07 20:39:25 +01:00
parent 8d1d718f5f
commit c87c9bb763
2 changed files with 41 additions and 14 deletions

View file

@ -19,6 +19,7 @@
<p>Après création ou connexion, vous serez redirigé·e vers la page de <strong>salle d'attente</strong> dédiée.</p>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script>
function log(...args){ console.log(...args); }
@ -28,13 +29,26 @@
const j = await r.json();
document.getElementById('roomId').value = j.roomId;
log('Room créée', j.roomId);
// redirect to waiting page (creator will auto-join there)
// redirect creator to waiting page
window.location.href = `/waiting.html?roomId=${encodeURIComponent(j.roomId)}`;
});
document.getElementById('join').addEventListener('click', ()=>{
document.getElementById('join').addEventListener('click', async ()=>{
const roomId = document.getElementById('roomId').value.trim();
if(!roomId){ alert('Entrez roomId'); return; }
// verify room exists before redirecting
try{
const resp = await fetch(`/rooms/${encodeURIComponent(roomId)}`);
if(!resp.ok){
const j = await resp.json().catch(()=>({ error: 'room not found' }));
alert(j.error || 'room not found');
return;
}
}catch(e){
alert('Erreur de connexion au serveur');
return;
}
const playerId = document.getElementById('playerId').value.trim() || '';
// redirect to waiting page; playerId optional
const qs = `?roomId=${encodeURIComponent(roomId)}${playerId?`&playerId=${encodeURIComponent(playerId)}`:''}`;

View file

@ -10,12 +10,11 @@
<div>
<div>Room: <strong id="roomId">-</strong></div>
<div>Status: <strong id="status">-</strong></div>
<div>Joueurs:
<ul id="players"></ul>
</div>
<div>Joueurs: <strong id="playerCount">0/2</strong></div>
</div>
<div style="margin-top:8px">
<button id="startBtn" style="display:none">Commencer la partie</button>
<button id="copyInviteBtn" style="margin-left:8px">Copier le lien d'invitation</button>
</div>
<!-- Waiting room: only players list and start button. Events/board/controls removed per request -->
@ -29,7 +28,7 @@
document.getElementById('roomId').textContent = roomId || '-';
const statusEl = document.getElementById('status');
const playersEl = document.getElementById('players');
const playerCountEl = document.getElementById('playerCount');
let socket = null;
let myPlayerId = null;
let myColor = null;
@ -45,16 +44,18 @@
socket.on('room:update', (data)=>{
console.log('room:update', data);
statusEl.textContent = data.status || '-';
playersEl.innerHTML = '';
(data.players||[]).forEach(p=>{
const li = document.createElement('li');
li.textContent = p.id + ' (' + p.color + ')';
playersEl.appendChild(li);
});
const count = (data.players||[]).length;
playerCountEl.textContent = `${count}/2`;
});
socket.emit('room:join', { roomId, playerId }, (resp)=>{
if(resp && resp.error){ log('join error', resp); alert(resp.error); return; }
if(resp && resp.error){
console.warn('join error', resp);
alert(resp.error || 'Impossible de rejoindre la room');
// redirect back to home to let user retry/create
window.location.href = '/';
return;
}
myPlayerId = resp.playerId;
myColor = resp.color;
log('Rejoint room', resp);
@ -76,6 +77,18 @@
});
});
// Copy invite link (hidden link, no display)
document.getElementById('copyInviteBtn').addEventListener('click', async ()=>{
const link = `${window.location.origin}/waiting.html?roomId=${encodeURIComponent(roomId)}`;
try{
await navigator.clipboard.writeText(link);
alert('Lien d\'invitation copié dans le presse-papier');
}catch(e){
// fallback
window.prompt('Copie le lien ci-dessous', link);
}
});
// when server tells us game started, redirect both players to game page with playerId preserved
socket && socket.on && socket.on('game:started', (data)=>{
log('game:started', data);