keith/BattleForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: declare grid-template-columns so the battle grid lays out as a grid, not a single column

Browse Source 
CSS Grid without an explicit grid-template-columns defaults to a
single-column layout, so the 64-144 tiles stacked vertically and
the user saw a long column instead of an 8x8 (or 10x8 or 12x12)
battlefield. Set the column count via a CSS variable on the grid
root, written by match.js after the match snapshot loads (CSS attr()
for non-content properties is not yet shipped in Safari or Firefox).
This commit is contained in:
Keith Solomon
2026-07-26 11:21:49 -05:00
parent 2ea8cfd83d
commit d80ceae128
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/styles.css
+1 -1
View File
@@ -20,7 +20,7 @@ table.bf-grid button[data-zone="bravo"] { outline: 3px solid #0c0; }
.bf-errors { color: #c00; } .bf-errors { color: #c00; }
.bf-toast { background: #dfd; padding: 0.5rem 1rem; margin: 0.5rem 0; } .bf-toast { background: #dfd; padding: 0.5rem 1rem; margin: 0.5rem 0; }
.bf-match { display: flex; gap: 1rem; } .bf-match { display: flex; gap: 1rem; }
.bf-grid { display: grid; gap: 1px; background: #ddd; padding: 1px; width: max-content; } .bf-grid { display: grid; gap: 1px; background: #ddd; padding: 1px; width: max-content; grid-template-columns: repeat(var(--bf-cols, 8), 2.5rem); }
.bf-tile { width: 2.5rem; height: 2.5rem; border: 0; background: #fff; padding: 0; position: relative; } .bf-tile { width: 2.5rem; height: 2.5rem; border: 0; background: #fff; padding: 0; position: relative; }
.bf-tile[data-bf-terrain="forest"] { background: #cfc; } .bf-tile[data-bf-terrain="forest"] { background: #cfc; }
.bf-tile[data-bf-terrain="rough"] { background: #fec; } .bf-tile[data-bf-terrain="rough"] { background: #fec; }
public/js/match.js
+4
View File
@@ -66,6 +66,10 @@ function renderGrid(root, match) {
const { width, height, terrain } = match.battlefield; const { width, height, terrain } = match.battlefield;
root.setAttribute('data-bf-width', String(width)); root.setAttribute('data-bf-width', String(width));
root.setAttribute('data-bf-height', String(height)); root.setAttribute('data-bf-height', String(height));
// Set the column count via a CSS variable so the grid-template-columns
// declaration can read it portably (CSS attr() for non-content properties
// is not yet supported in Safari or Firefox as of mid-2026).
root.style.setProperty('--bf-cols', String(width));
const unitsByKey = {}; const unitsByKey = {};
match.units.forEach((unit) => { match.units.forEach((unit) => {