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/js/match.js
+4
View File
@@ -66,6 +66,10 @@ function renderGrid(root, match) {
const { width, height, terrain } = match.battlefield;
root.setAttribute('data-bf-width', String(width));
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 = {};
match.units.forEach((unit) => {