From 54cc5e9b2e9ae6266c64b5cdf11f3302f311c701 Mon Sep 17 00:00:00 2001
From: rgriffith <KoalaTrapLord@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:22:32 -0400
Subject: [PATCH] fix(lan-client): swap P3/P4 grid positions for clockwise turn
 order
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swapped CSS grid-area, zone-row anchoring, commander-row anchoring,
label corners, and life-panel positions for .p3/.p4 so the turn
sequence P1→P2→P3→P4 reads clockwise around the battlefield.
Also added PLAYER_INDEX_TO_QUADRANT lookup in player-panels.js.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lan-client/player-panels.js |  7 ++++++-
 lan-client/style.css        | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/lan-client/player-panels.js b/lan-client/player-panels.js
index cce9fc0..e02bddd 100644
--- a/lan-client/player-panels.js
+++ b/lan-client/player-panels.js
@@ -228,6 +228,11 @@ function removeEmblem(playerId, idx) {
   renderEnhancedPanels();
 }
 
+// index: 0  1  2  3  →  area: 1  2  4  3
+// players[2] → bottom-RIGHT (area-4), players[3] → bottom-LEFT (area-3)
+// Keeps turn order P1→P2→P3→P4 visually clockwise.
+var PLAYER_INDEX_TO_QUADRANT = [1, 2, 4, 3];
+
 /**
  * Re-render all enhanced player panels in their quadrant positions.
  */
@@ -236,7 +241,7 @@ function renderEnhancedPanels() {
 
   for (var i = 0; i < gameState.players.length; i++) {
     var player = gameState.players[i];
-    var quadrant = i + 1;
+    var quadrant = PLAYER_INDEX_TO_QUADRANT[i] || (i + 1);
     var areaEl = document.getElementById('player-area-' + quadrant);
     if (!areaEl) continue;
 
diff --git a/lan-client/style.css b/lan-client/style.css
index 541e6ef..8ca2ad8 100644
--- a/lan-client/style.css
+++ b/lan-client/style.css
@@ -670,8 +670,8 @@ input { font-family: inherit; }
 
 .player-area.p1 { grid-area: 1 / 1 / 2 / 2; }
 .player-area.p2 { grid-area: 1 / 2 / 2 / 3; }
-.player-area.p3 { grid-area: 2 / 1 / 3 / 2; }
-.player-area.p4 { grid-area: 2 / 2 / 3 / 3; }
+.player-area.p3 { grid-area: 2 / 2 / 3 / 3; }
+.player-area.p4 { grid-area: 2 / 1 / 3 / 2; }
 
 .p1, .p2 { justify-content: flex-start; }
 .p3, .p4 { justify-content: flex-end; }
@@ -700,8 +700,8 @@ input { font-family: inherit; }
 }
 .p1 .player-label { top: 6px; left: 6px; color: var(--p1-text); background: var(--p1-soft); }
 .p2 .player-label { top: 6px; right: 6px; color: var(--p2-text); background: var(--p2-soft); }
-.p3 .player-label { bottom: 6px; left: 6px; color: var(--p3-text); background: var(--p3-soft); }
-.p4 .player-label { bottom: 6px; right: 6px; color: var(--p4-text); background: var(--p4-soft); }
+.p3 .player-label { bottom: 6px; right: 6px; color: var(--p3-text); background: var(--p3-soft); }
+.p4 .player-label { bottom: 6px; left: 6px; color: var(--p4-text); background: var(--p4-soft); }
 
 /* Life Panels Overlay — sits above everything */
 #life-panels-overlay {
@@ -731,8 +731,8 @@ input { font-family: inherit; }
 /* Grid positions */
 .lp-p1 { grid-area: 1 / 1; }
 .lp-p2 { grid-area: 1 / 2; }
-.lp-p3 { grid-area: 2 / 1; }
-.lp-p4 { grid-area: 2 / 2; }
+.lp-p3 { grid-area: 2 / 2; }
+.lp-p4 { grid-area: 2 / 1; }
 
 .life-panel-box {
   border-radius: 4px;
@@ -848,8 +848,8 @@ input { font-family: inherit; }
 }
 .p1 .zone-row { top: 6px; left: 6px; flex-direction: row; }
 .p2 .zone-row { top: 6px; right: 6px; flex-direction: row-reverse; }
-.p3 .zone-row { bottom: 6px; left: 6px; flex-direction: row; }
-.p4 .zone-row { bottom: 6px; right: 6px; flex-direction: row-reverse; }
+.p3 .zone-row { bottom: 6px; right: 6px; flex-direction: row-reverse; }
+.p4 .zone-row { bottom: 6px; left: 6px; flex-direction: row; }
 
 /* Commander row — overlaid on battlefield edge */
 .commander-row {
@@ -859,8 +859,8 @@ input { font-family: inherit; }
 }
 .p1 .commander-row { top: 6px; left: 6px; margin-top: calc(var(--card-h) + 10px); }
 .p2 .commander-row { top: 6px; right: 6px; margin-top: calc(var(--card-h) + 10px); }
-.p3 .commander-row { bottom: 6px; left: 6px; margin-bottom: calc(var(--card-h) + 10px); }
-.p4 .commander-row { bottom: 6px; right: 6px; margin-bottom: calc(var(--card-h) + 10px); }
+.p3 .commander-row { bottom: 6px; right: 6px; margin-bottom: calc(var(--card-h) + 10px); }
+.p4 .commander-row { bottom: 6px; left: 6px; margin-bottom: calc(var(--card-h) + 10px); }
 
 /* Battle zone */
 .battle-zone {