fix(ludo): sync game.js with latest changes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/ludo/scenes/game.js

@@ -51,13 +51,13 @@ export function mountGame(el, params) {
   el.innerHTML = `
     <div style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
       <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;">
-        <div class="pp" id="pp-1" style="--pc:${COLORS[1]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[1]}</span><div class="pp-dice" id="dice-1"></div></div>
         <div class="pp" id="pp-0" style="--pc:${COLORS[0]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[0]}</span><div class="pp-dice" id="dice-0"></div></div>
+        <div class="pp" id="pp-3" style="--pc:${COLORS[3]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[3]}</span><div class="pp-dice" id="dice-3"></div></div>
       </div>
       <div id="ludo-wrap" style="flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;"></div>
       <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;">
+        <div class="pp" id="pp-1" style="--pc:${COLORS[1]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[1]}</span><div class="pp-dice" id="dice-1"></div></div>
         <div class="pp" id="pp-2" style="--pc:${COLORS[2]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[2]}</span><div class="pp-dice" id="dice-2"></div></div>
-        <div class="pp" id="pp-3" style="--pc:${COLORS[3]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[3]}</span><div class="pp-dice" id="dice-3"></div></div>
       </div>
       <div id="dice-area" style="display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;">
         <div id="dice-box" style="width:50px;height:50px;background:#f8fafc;border-radius:10px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:6px;box-shadow:0 3px 10px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.8);transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);">
@@ -522,7 +522,8 @@ function drawBoard() {
   ctx.fillRect(0, 0, boardSize, boardSize);
 
   // Home zones — with inner white area
-  [[0,0,0],[1,9,0],[2,9,9],[3,0,9]].forEach(([p,c,r]) => {
+  // [playerIdx, gridCol, gridRow]: Red(TL), Green(BL), Yellow(BR), Blue(TR)
+  [[0,0,0],[1,0,9],[2,9,9],[3,9,0]].forEach(([p,c,r]) => {
     ctx.fillStyle = COLORS[p];
     ctx.fillRect(c*cs, r*cs, 6*cs, 6*cs);
     // Inner white area
@@ -564,18 +565,18 @@ function drawBoard() {
 
   // Center — 4 colored triangles forming a square (finish area)
   const cx = 7.5*cs, cy = 7.5*cs, hs = 1.5*cs;
-  // Red triangle (top)
+  // Red triangle (top) — player 0
   ctx.fillStyle = COLORS[0]; ctx.beginPath();
   ctx.moveTo(cx-hs, cy-hs); ctx.lineTo(cx+hs, cy-hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
-  // Blue triangle (right)
+  // Green triangle (left) — player 1
   ctx.fillStyle = COLORS[1]; ctx.beginPath();
-  ctx.moveTo(cx+hs, cy-hs); ctx.lineTo(cx+hs, cy+hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
-  // Green triangle (bottom)
+  ctx.moveTo(cx-hs, cy+hs); ctx.lineTo(cx-hs, cy-hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
+  // Yellow triangle (bottom) — player 2
   ctx.fillStyle = COLORS[2]; ctx.beginPath();
   ctx.moveTo(cx+hs, cy+hs); ctx.lineTo(cx-hs, cy+hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
-  // Yellow triangle (left)
+  // Blue triangle (right) — player 3
   ctx.fillStyle = COLORS[3]; ctx.beginPath();
-  ctx.moveTo(cx-hs, cy+hs); ctx.lineTo(cx-hs, cy-hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
+  ctx.moveTo(cx+hs, cy-hs); ctx.lineTo(cx+hs, cy+hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
   // Center border
   ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5;
   ctx.strokeRect(cx-hs, cy-hs, hs*2, hs*2);