fez5587/commander-ai-lab
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(lan-client): swap P3/P4 grid positions for clockwise turn order

Browse Source 
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>
This commit is contained in:
rgriffithandClaude Opus 4.6 committed 2026-04-05 22:22:32 -04:00
1 parent 9b79d18201
commit 54cc5e9b2e
2 files changed
+16 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lan-client/player-panels.js
+6 -1
View File
@@ -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;
lan-client/style.css
+10 -10
View File
@@ -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 {