explewd/2048
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tile positioning: split html/body flex, use measured cell size

Browse Source 
Applying display:flex to both html and body caused body to shrink-wrap
as a flex item of html, making cells ~53px instead of ~102px. Split the
rule so only body gets the flex centering. Also measure actual cell size
synchronously after initUI mounts and use it for tile translate calculations
so tiles align correctly regardless of container width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-07-07 20:07:47 +02:00
parent 5629e05a72
commit f7590125fc
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/style.css
View File

@@ -25,7 +25,11 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { html {
background: var(--bg);
}
body {
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

18
src/ui.ts
View File

@@ -1,9 +1,9 @@
import type { Grid } from './engine.ts'; import type { Grid } from './engine.ts';
const CELL_SIZE = 100; // px — must match CSS logic
const GAP = 10; const GAP = 10;
const PADDING = 10; const PADDING = 10;
const STEP = CELL_SIZE + GAP; let CELL_SIZE = 100;
let STEP = CELL_SIZE + GAP;
interface TileState { interface TileState {
el: HTMLElement; el: HTMLElement;
@@ -59,14 +59,15 @@ export function initUI(container: HTMLElement): void {
bestEl = container.querySelector('#best')!; bestEl = container.querySelector('#best')!;
scoreWrap = container.querySelector('#score-wrap')!; scoreWrap = container.querySelector('#score-wrap')!;
// Measure cell size from grid-bg after layout // Measure actual cell size (forces layout synchronously)
requestAnimationFrame(() => { const cell = container.querySelector('.cell') as HTMLElement | null;
const cell = container.querySelector('.cell') as HTMLElement;
if (cell) { if (cell) {
const size = cell.getBoundingClientRect().width; const size = cell.getBoundingClientRect().width;
(container.querySelector('.tile-layer') as HTMLElement).style.setProperty('--cs', `${size}px`); if (size > 0) {
CELL_SIZE = size;
STEP = size + GAP;
}
} }
});
} }
function tileTranslate(row: number, col: number): string { function tileTranslate(row: number, col: number): string {
@@ -81,6 +82,9 @@ function createTileEl(value: number, row: number, col: number): HTMLElement {
el.className = 'tile'; el.className = 'tile';
el.dataset['v'] = String(value); el.dataset['v'] = String(value);
el.style.cssText = ` el.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: ${CELL_SIZE}px; width: ${CELL_SIZE}px;
height: ${CELL_SIZE}px; height: ${CELL_SIZE}px;
font-size: inherit; font-size: inherit;