improved button

public/game.html

@@ -178,7 +178,7 @@
       return null;
     }
 
-    if(!roomId){ alert('roomId manquant dans l\'URL'); }
+  if(!roomId){ showToast('roomId manquant dans l\'URL', { background: 'rgba(200,60,60,0.95)' }); }
 
     function connectAndJoin(){
       socket = io();
@@ -408,8 +408,8 @@
         try{ log('recv mine:detonated:private', evt); /* could show owner-specific UI later */ }catch(e){}
       });
 
-      socket.emit('room:join', { roomId, playerId }, (resp)=>{
+    socket.emit('room:join', { roomId, playerId }, (resp)=>{
-  if(resp && resp.error){ log('join error', resp); alert(resp.message || resp.error); return; }
+  if(resp && resp.error){ log('join error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); return; }
         log('Rejoint room', resp);
         // remember assigned id/color from server
         if(resp.playerId){
@@ -698,7 +698,7 @@
             if(!occ || occ.color === myShort){ log('select an enemy piece (second)'); return; }
             // emit swap payload: sourceSquare + targetSquare
             socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { sourceSquare: pendingCard.firstTarget, targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
               else { log('inversion played', resp); }
             });
             // cleanup visuals
@@ -710,7 +710,7 @@
             if(occupied){ log('square not empty for mine placement'); return; }
             // send mine placement
             socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
               else { log('card played with target', resp); }
             });
             pendingCard = null; clearTargetHighlights(); return;
@@ -719,7 +719,7 @@
             if(!piece || piece.color !== myShort){ log('select one of your pieces'); return; }
             if(piece.type && piece.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
             socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
               else { log('card played with target', resp); }
             });
             pendingCard = null; clearTargetHighlights(); return;
@@ -736,7 +736,7 @@
                 pendingCard = null; clearTargetHighlights(); return;
               }
               socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square, promotion: promotionChoice } }, (resp)=>{
-                if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+                if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
                 else { log('card played with promotion', resp); }
               });
               pendingCard = null; clearTargetHighlights();
@@ -747,7 +747,7 @@
             if(!occ || occ.color === myShort){ log('select an enemy piece'); return; }
             if(occ.type && occ.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
             socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
               else { log('card played with target', resp);
                 // after server applied the card effect, request legal moves for the selected piece so the client
                 // will receive the updated legal moves (including teleport to empty squares)
@@ -761,7 +761,7 @@
             const occ = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
             if(!occ || occ.color === myShort || !occ.type || occ.type.toLowerCase() !== 'q'){ log('select an enemy queen'); return; }
             socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
               else { log('card played with target', resp);
                 try{ setSelection(square); }catch(_){ }
               }
@@ -773,7 +773,7 @@
             if(!occ){ log('select a piece'); return; }
             if(occ.type && occ.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
             socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); alert(resp.error); }
+              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
               else { log('card played with target', resp); }
             });
             pendingCard = null; clearTargetHighlights(); return;
@@ -795,7 +795,7 @@
           const myShort = (myColor && myColor[0]) || '';
           if(!currentBoardState || currentBoardState.turn !== myShort){ log('not your turn'); return; }
           socket.emit('game:move', { roomId, from, to }, (resp)=>{
-            if(resp && resp.error){ log('move error', resp); alert(resp.message || resp.error); }
+            if(resp && resp.error){ log('move error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
             else { log('move sent', resp); }
           });
           return;
@@ -1136,16 +1136,16 @@
               if(opponents.length === 1){
                 const targetPlayerId = opponents[0];
                 socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: cid, payload: { targetPlayerId } }, (resp)=>{
-                  if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+                      if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-                  else { log('card played (steal card)', resp); }
+                      else { log('card played (steal card)', resp); }
-                });
+                    });
                 return;
               }
               // show modal to pick which player to steal from
               showStealModal(handCounts, (targetPlayerId)=>{
                 if(!targetPlayerId) return; // canceled
                 socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: cid, payload: { targetPlayerId } }, (resp)=>{
-                  if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+                  if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
                   else { log('card played (steal card)', resp); }
                 });
               });
@@ -1159,8 +1159,8 @@
           }
           // immediate-play card (no target required)
           const payload = {};
-          socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: cid, payload }, (resp)=>{
+            socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: cid, payload }, (resp)=>{
-            if(resp && resp.error){ log('card:play error', resp); alert(resp.message || resp.error); }
+            if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
             else { log('card played', resp); }
           });
         }
@@ -1184,7 +1184,7 @@
           if(!socket) return;
           drawBtn.disabled = true;
           socket.emit('player:draw', { roomId }, (resp)=>{
-            if(resp && resp.error){ log('player:draw error', resp); alert(resp.message || resp.error); drawBtn.disabled = false; return; }
+            if(resp && resp.error){ log('player:draw error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); drawBtn.disabled = false; return; }
             log('player:draw ok', resp);
             // server will send room:update which will hide/disable the button as needed
           });

public/index.html

@@ -49,6 +49,7 @@
   </div>
 
   <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+  <script src="/toast.js"></script>
   <script>
     function log(...args){ console.log(...args); }
 
@@ -63,17 +64,17 @@
 
     document.getElementById('join').addEventListener('click', async ()=>{
       const roomId = document.getElementById('roomId').value.trim();
-      if(!roomId){ alert('Entrez roomId'); return; }
+  if(!roomId){ showToast('Entrez roomId', { background: 'rgba(200,60,60,0.95)' }); 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');
+          showToast(j.error || 'room not found', { background: 'rgba(200,60,60,0.95)' });
           return;
         }
       }catch(e){
-        alert('Erreur de connexion au serveur');
+        showToast('Erreur de connexion au serveur', { background: 'rgba(200,60,60,0.95)' });
         return;
       }
 

public/toast.js

@@ -0,0 +1,22 @@
+// Lightweight non-blocking toast used across pages
+function showToast(message, opts){
+  try{
+    opts = opts || {};
+    const wrap = document.createElement('div');
+    wrap.className = 'cn-toast';
+    wrap.textContent = message || '';
+    wrap.style.position = 'fixed';
+    wrap.style.left = '50%';
+    wrap.style.transform = 'translateX(-50%)';
+    wrap.style.top = opts.top || '18px';
+    wrap.style.background = opts.background || 'rgba(0,0,0,0.8)';
+    wrap.style.color = opts.color || '#fff';
+    wrap.style.padding = '8px 12px';
+    wrap.style.borderRadius = '6px';
+    wrap.style.zIndex = 99999;
+    wrap.style.fontSize = '14px';
+    wrap.style.boxShadow = '0 6px 18px rgba(0,0,0,0.25)';
+    document.body.appendChild(wrap);
+    setTimeout(()=>{ try{ wrap.style.transition = 'opacity 300ms ease'; wrap.style.opacity = '0'; setTimeout(()=>{ try{ wrap.remove(); }catch(_){ } }, 320); }catch(_){ } }, opts.duration || 3500);
+  }catch(_){ }
+}

public/waiting.html

@@ -69,6 +69,7 @@
   </div>
 
   <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+  <script src="/toast.js"></script>
   <script>
     function qs(name){ const url = new URL(window.location.href); return url.searchParams.get(name); }
     const roomId = qs('roomId');
@@ -98,7 +99,7 @@
 
     function log(...args){ console.log(...args); }
 
-    if(!roomId){ alert('roomId manquant dans l\'URL'); }
+  if(!roomId){ showToast('roomId manquant dans l\'URL', { background: 'rgba(200,60,60,0.95)' }); }
 
     function connectAndJoin(){
       socket = io();
@@ -270,7 +271,7 @@
     document.getElementById('startBtn').addEventListener('click', ()=>{
       if(!socket) return;
       socket.emit('game:start', { roomId }, (resp)=>{
-        if(resp && resp.error){ log('start error', resp); alert(resp.error); return; }
+  if(resp && resp.error){ log('start error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
         log('game:start acknowledged');
       });
     });
@@ -281,7 +282,7 @@
         if(!socket) return;
         const enabled = !!autoDrawToggleEl.checked;
         socket.emit('room:auto_draw:set', { roomId, enabled }, (resp)=>{
-          if(resp && resp.error){ log('auto-draw error', resp); alert(resp.error); return; }
+          if(resp && resp.error){ log('auto-draw error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
           log('auto-draw updated', resp);
         });
       });
@@ -293,7 +294,7 @@
         if(!socket) return;
         const enabled = !!noRemiseToggleEl.checked;
         socket.emit('room:no_remise:set', { roomId, enabled }, (resp)=>{
-          if(resp && resp.error){ log('no-remise error', resp); alert(resp.error); return; }
+          if(resp && resp.error){ log('no-remise error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
           log('no-remise updated', resp);
         });
       });
@@ -411,7 +412,7 @@
       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');
+  showToast('Lien d\'invitation copié dans le presse-papier', { background: 'rgba(40,160,40,0.95)' });
       }catch(e){
         // fallback
         window.prompt('Copie le lien ci-dessous', link);