@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/connect-em-all/ConnectEmAllScene.ts

@@ -0,0 +1,235 @@
+// Everything Connect Em All draws. Orthographic camera, one world unit per point, looking down -z:
+// x right and y up from the view's centre. Depth (toward the camera): the game background, board, line
+// shadows, lines, dot glows, dots. The engine doesn't clip, so what the original board's overflow: hidden
+// cut off is kept inside instead: new dots drop in from just above their row, the trail stops at the edge.
+import {
+  type Color,
+  type Entity,
+  extrude,
+  loadTexture,
+  type Model,
+  type MutableQuat,
+  Path,
+  quat,
+  shapeGeometry,
+  type Texture,
+  type TransformBatch,
+  type Vec3,
+  type World
+} from '@nayan-ui/engine';
+import { lighten } from '../../services/GamesConstants';
+import type { GameTheme } from '../../services/ThemeService';
+import { spawnBackdrop } from '../shared/EngineBackdrop';
+import type { PopBurstOptions } from '../shared/EngineBlasts';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import {
+  BOARD_RADIUS,
+  DOT_COLORS,
+  DOT_SHINE,
+  GLOW_ALPHA,
+  GLOW_IN_TIME,
+  GLOW_OUT_TIME,
+  GLOW_SIZE,
+  GRID_SIZE,
+  type Layout
+} from './ConnectEmAllConstants';
+
+const Z_BOARD = 0;
+const Z_BACKDROP = -20;
+const HIDDEN = 0;
+
+/** A view point (from the top-left) at depth `z`, in world space. */
+export const toWorld = (l: Layout, x: number, y: number, z = 0): Vec3 => [x - l.width / 2, l.height / 2 - y, z];
+
+/** Centre of the dot at (row, col), in view points. `row` may be negative: above the board, falling in. */
+export const dotPoint = (l: Layout, row: number, col: number): [number, number] => [
+  l.boardLeft + l.padding + col * l.spacing,
+  l.boardTop + l.padding + row * l.spacing
+];
+
+const dotZ = (l: Layout) => l.radius * 2;
+const lineZ = (l: Layout) => l.radius * 0.5;
+const shadowZ = (l: Layout) => l.radius * 0.4;
+export const dotPosition = (l: Layout, row: number, col: number): Vec3 => {
+  const [x, y] = dotPoint(l, row, col);
+  return toWorld(l, x, y, dotZ(l));
+};
+
+// ── Meshes (registered once per size: mesh ids are app-wide and limited) ──
+
+const meshes = new Map<string, Model>();
+const mesh = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('connect-em-all/ConnectEmAllScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+/** A glossy unit sphere. */
+const dotMesh = () => mesh('dot', () => createShape(shapeGeometry('sphere'), { shine: DOT_SHINE }));
+/** A flat unit disc facing the camera. */
+const discMesh = () => mesh('disc', () => createShape(extrude(new Path().addCircle(0, 0, 0.5), { depth: 0 })));
+/** A flat rounded square; with `rim`, only its outline. */
+const panelMesh = (size: number, radius: number, rim = 0) =>
+  mesh(`panel:${size}:${radius}:${rim}`, () => {
+    const path = new Path().addRoundedRect(0, 0, size, size, radius);
+    if (rim > 0) path.addRoundedRect(rim, rim, size - rim * 2, size - rim * 2, radius - rim);
+    return createShape(extrude(path, { depth: 0, fillRule: 'evenodd' }));
+  });
+// ── Board ─────────────────────────────────────────────────────────────
+
+export type Board = { backdrop: Entity; panel: Entity; rim: Entity };
+
+/** The game background, and behind the whole grid the board panel and its rim, as Block Blast's: in the theme's board colors. */
+export function buildBoard(world: World, l: Layout, theme: GameTheme): Board {
+  loadGlowTexture();
+  const centre = toWorld(l, l.boardLeft + l.boardSize / 2, l.boardTop + l.boardSize / 2);
+  const panel = world.spawn({
+    mesh: panelMesh(l.boardSize, BOARD_RADIUS),
+    position: [centre[0], centre[1], Z_BOARD],
+    color: toColor(theme.BOARD.SURFACE),
+    pickable: false
+  });
+  const rim = world.spawn({
+    mesh: panelMesh(l.boardSize, BOARD_RADIUS, 1),
+    position: [centre[0], centre[1], Z_BOARD + 0.2],
+    color: toColor(theme.BOARD.BORDER),
+    pickable: false
+  });
+  return { backdrop: spawnBackdrop(world, l.width, l.height, Z_BACKDROP, theme), panel, rim };
+}
+
+export function removeBoard(world: World, b: Board) {
+  world.despawn(b.panel);
+  world.despawn(b.rim);
+  world.despawn(b.backdrop);
+}
+
+// ── Dots ──────────────────────────────────────────────────────────────
+
+// Per color: the dot, its chain line (a little lighter) and its burst's highlight
+const DOTS = DOT_COLORS.map((c) => toColor(c));
+const LINES = DOT_COLORS.map((c) => toColor(lighten(c, 0.15)));
+export const dotColor = (colorIndex: number) => DOTS[colorIndex]!;
+export const lineColor = (colorIndex: number) => LINES[colorIndex]!;
+
+// The halo's texture: white, its opacity full under the dot and easing off smoothly to nothing at the
+// rim, so the halo reads as light spilling from the dot. Loaded once; drawn blended (alpha below 1).
+let glowTexture: Texture | null = null;
+let glowLoading: Promise<void> | null = null;
+export function loadGlowTexture() {
+  glowLoading ??= loadTexture(require('../../assets/textures/soft_glow.png'))
+    .then((t) => {
+      glowTexture = t;
+    })
+    .catch(() => {
+      glowLoading = null; // retried with the next board
+    });
+}
+
+/** A dot and its glow: a soft halo behind it, shown while it's in the chain. */
+export function spawnDot(world: World, l: Layout, row: number, col: number, colorIndex: number): { entity: Entity; glow: Entity } {
+  const color = dotColor(colorIndex);
+  const entity = world.spawn({ mesh: dotMesh(), position: dotPosition(l, row, col), scale: l.radius * 2, color, pickable: false });
+  const glow = world.spawn({
+    mesh: discMesh(),
+    texture: glowTexture,
+    parent: entity,
+    // Parent units: the dot is 1 across. Behind the sphere, so only the fading part shows around it.
+    position: [0, 0, -0.55],
+    scale: HIDDEN,
+    color: [color[0], color[1], color[2], GLOW_ALPHA],
+    pickable: false
+  });
+  return { entity, glow };
+}
+
+/** The halo blooms in (overshooting a touch) and stays steady while the dot is in the chain, or fades away. */
+export function showGlow(world: World, glow: Entity, on: boolean) {
+  // Dots made before the texture arrived pick it up the first time they glow
+  if (on && glowTexture) world.set(glow, { mesh: discMesh(), texture: glowTexture });
+  world.stopAnimation(glow);
+  world.animate(
+    glow,
+    { scale: on ? GLOW_SIZE : HIDDEN },
+    on ? { duration: GLOW_IN_TIME, easing: 'back' } : { duration: GLOW_OUT_TIME, easing: 'easeIn' }
+  );
+}
+
+/** Where a cleared dot's burst flies from (in front of it) and glows (behind it, over the chain lines). */
+export function dotBurst(l: Layout, row: number, col: number, colorIndex: number): PopBurstOptions {
+  const at = dotPosition(l, row, col);
+  return { position: [at[0], at[1], at[2] + l.radius], size: l.radius * 2, color: dotColor(colorIndex), glowZ: l.radius * 0.8 };
+}
+
+/** A dot's scale at rest (for popping it away). */
+export const dotScale = (l: Layout) => l.radius * 2;
+
+// ── Lines ─────────────────────────────────────────────────────────────
+
+/** A chain segment: its drop shadow and the line itself. */
+export type Segment = { shadow: Entity; line: Entity };
+
+export function spawnSegment(world: World): Segment {
+  const bar = () => world.spawn({ mesh: 'cube', scale: HIDDEN, pickable: false });
+  return { shadow: bar(), line: bar() };
+}
+
+const SHADOW: Color = [0, 0, 0, 0.3];
+const scratch: MutableQuat = [0, 0, 0, 1];
+
+/** Places a bar from a to b (view points), `width` thick. Its ends sit under the dots it joins. */
+function placeBar(updates: TransformBatch, l: Layout, bar: Entity, a: [number, number], b: [number, number], width: number, z: number, color: Color) {
+  const dx = b[0] - a[0];
+  const dy = a[1] - b[1]; // world y runs up
+  const position = toWorld(l, (a[0] + b[0]) / 2, (a[1] + b[1]) / 2, z);
+  const rotation = quat.z(Math.atan2(dy, dx), scratch);
+  updates.transform(bar, position[0], position[1], position[2], rotation[0], rotation[1], rotation[2], rotation[3]);
+  updates.scale(bar, Math.hypot(dx, dy), width, 0.5);
+  updates.color(bar, color[0], color[1], color[2], color[3] ?? 1);
+}
+
+export const lineWidth = (l: Layout) => l.radius * 0.45;
+
+export function showSegment(world: World, l: Layout, s: Segment, a: [number, number], b: [number, number], color: Color) {
+  const updates = world.transforms;
+  const w = lineWidth(l);
+  placeBar(updates, l, s.shadow, [a[0] + 1, a[1] + 2], [b[0] + 1, b[1] + 2], w + 2, shadowZ(l), SHADOW);
+  placeBar(updates, l, s.line, a, b, w, lineZ(l), color);
+  updates.flush();
+}
+
+export function hideSegment(world: World, s: Segment) {
+  world.set(s.shadow, { scale: HIDDEN });
+  world.set(s.line, { scale: HIDDEN });
+}
+
+/** The line from the chain's last dot to the finger, with a round end at the finger. */
+export type Trail = { line: Entity; cap: Entity };
+
+export function spawnTrail(world: World): Trail {
+  return {
+    line: world.spawn({ mesh: 'cube', scale: HIDDEN, pickable: false }),
+    cap: world.spawn({ mesh: discMesh(), scale: HIDDEN, pickable: false })
+  };
+}
+
+export function showTrail(world: World, l: Layout, t: Trail, from: [number, number], to: [number, number], color: Color) {
+  const updates = world.transforms;
+  const w = lineWidth(l);
+  placeBar(updates, l, t.line, from, to, w, lineZ(l), color);
+  const position = toWorld(l, to[0], to[1], lineZ(l));
+  updates.position(t.cap, position[0], position[1], position[2]);
+  updates.scale(t.cap, w);
+  updates.color(t.cap, color[0], color[1], color[2], color[3] ?? 1);
+  updates.flush();
+}
+
+export function hideTrail(world: World, t: Trail) {
+  world.set(t.line, { scale: HIDDEN });
+  world.set(t.cap, { scale: HIDDEN });
+}
+
+export const DOT_COUNT = GRID_SIZE * GRID_SIZE;

package/src/games/crossy-road/CrossyRoad.tsx

@@ -0,0 +1,74 @@
+// Crossy Road's code-built low-poly scene, shared game HUD and native hop animations.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, textColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { DAY_LIGHT, GAME_DURATION, getLayout, LOW_TIME, NIGHT_LIGHT, SKY_DAY, SKY_NIGHT, TOTAL_ROADS } from './CrossyRoadConstants';
+import { createGame, dispose, drag, reset, setLayout, setNight, start, tick } from './CrossyRoadGame';
+
+const SOUNDS = GAME_SOUNDS.CROSSY_ROAD;
+
+export const CrossyRoad = engineGame(GAME_IDS.CROSSY_ROAD, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [crossings, setCrossings] = useLiveState(0);
+  const [time, setTime] = useLiveState(GAME_DURATION);
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.CROSSY_ROAD,
+    create: (theme) => createGame(theme.isDark),
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme: (g, theme) => setNight(g, theme.isDark),
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.gridW;
+    },
+    drag,
+    sounds: SOUNDS,
+    resultsDelay: (status) => (status === 'win' ? 1050 : 450),
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(null, HapticType.MEDIUM),
+    onOver: (fx, status) => {
+      if (status === 'win') fx(SOUNDS.WIN, HapticType.SUCCESS);
+    },
+    wire: (g, fx) => {
+      g.onScore = (value, roads) => {
+        setScore(value);
+        setCrossings(roads);
+      };
+      g.onTime = setTime;
+      g.onEvent = (event) => {
+        if (event === 'hop') fx(SOUNDS.HOP, HapticType.LIGHT);
+        else if (event === 'cross') fx(SOUNDS.CROSS, HapticType.SUCCESS);
+        else if (event === 'crash') fx(SOUNDS.CRASH, HapticType.ERROR);
+        else fx(SOUNDS.TIME_UP, HapticType.ERROR);
+      };
+    }
+  });
+  const night = theme.isDark;
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={night ? NIGHT_LIGHT : DAY_LIGHT}
+      background={night ? SKY_NIGHT : SKY_DAY}
+      fog={0.0015}
+      columns={[scoreColumn(score), textColumn('CROSSINGS', `${crossings}/${TOTAL_ROADS}`), timerColumn(time, theme, LOW_TIME)]}
+      subtext="Cross roads, dodge traffic!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WIN!' : 'GAME OVER',
+        message:
+          status === 'win'
+            ? `You crossed all ${crossings} roads with time to spare!`
+            : `You crossed ${crossings} ${crossings === 1 ? 'road' : 'roads'}!`,
+        scoreLabel: 'Score',
+        score,
+        buttonText: 'Play Again!'
+      })}
+    />
+  );
+});

package/src/games/crossy-road/CrossyRoadCamera.ts

@@ -0,0 +1,59 @@
+// Crossy Road's camera: a perspective camera behind and above the start lane, looking up the board,
+// placed so the whole board (all 13 lanes) fills the band between the scoreboard and the controls and
+// its nine columns fit across. Worked out once per layout by projecting the board's corners, as the
+// renderer will (vertical field of view, the view's aspect, +y up the board, +z up off it).
+import type { Camera } from '@nayan-ui/engine';
+import { CAMERA_FOV, CAMERA_PITCH, type Layout, PERSON, TOTAL_LANES, WORLD_SCALE } from './CrossyRoadConstants';
+
+type V3 = [number, number, number];
+const dot = (a: V3, b: V3) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+
+/** The view point of a world point, for a camera at `eye` looking along +y tilted down by the pitch. */
+export function viewPoint(l: Layout, eye: V3, p: V3): [number, number] {
+  const f: V3 = [0, Math.cos(CAMERA_PITCH), -Math.sin(CAMERA_PITCH)];
+  const u: V3 = [0, Math.sin(CAMERA_PITCH), Math.cos(CAMERA_PITCH)];
+  const v: V3 = [p[0] - eye[0], p[1] - eye[1], p[2] - eye[2]];
+  const depth = dot(v, f);
+  const t = Math.tan(CAMERA_FOV / 2);
+  const aspect = l.width / l.height;
+  return [(l.width / 2) * (1 + v[0] / (depth * t * aspect)), (l.height / 2) * (1 - dot(v, u) / (depth * t))];
+}
+
+/**
+ * Places the camera to frame the board (world units, a tenth of view points). With the pitch fixed, a
+ * board point a distance `a` ahead of the eye shows at view height n (-1 bottom .. 1 top) when
+ * a = h * g(n), h the eye's height; so the near and far edges' wanted heights give h and the eye's place
+ * exactly. The far constraint includes the pedestrian's head, so the scoreboard cannot hide them at
+ * the goal. If the nine columns wouldn't fit across the nearest lane, the band is narrowed until they do.
+ */
+export function frameCamera(camera: Camera, l: Layout) {
+  const k = WORLD_SCALE;
+  const half = (TOTAL_LANES * l.laneH * k) / 2;
+  const goalY = half - (l.laneH * k) / 2;
+  const headHeight = PERSON.HEIGHT * PERSON.SCALE * l.tile * k;
+  const c = Math.cos(CAMERA_PITCH);
+  const s = Math.sin(CAMERA_PITCH);
+  const t = Math.tan(CAMERA_FOV / 2);
+  const aspect = l.width / l.height;
+  const g = (n: number) => (c + n * t * s) / (s - n * t * c);
+  const ndc = (y: number) => 1 - (2 * y) / l.height;
+  const mid = (l.top + l.bottom) / 2;
+  let span = l.bottom - l.top;
+  let eye: V3 = [0, 0, 0];
+  for (let i = 0; i < 80; i++) {
+    const nNear = ndc(mid + span / 2);
+    const nFar = ndc(mid - span / 2);
+    const h = (goalY + half + headHeight * g(nFar)) / (g(nFar) - g(nNear));
+    const ey = -half - h * g(nNear);
+    eye = [0, ey, h];
+    // The nearest lane's half-width in view, at its depth
+    const depth = (-half - ey) * c + h * s;
+    if (depth * t * aspect >= (l.gridW / 2 + l.tile * 0.3) * k) break;
+    span *= 0.97;
+  }
+  // Looking along the pitch from the eye: the target where the view's axis meets the board
+  camera.eye = eye;
+  camera.target = [0, eye[1] + eye[2] / Math.tan(CAMERA_PITCH), 0];
+  camera.fov = CAMERA_FOV;
+  delete camera.ortho;
+}

package/src/games/crossy-road/CrossyRoadConstants.ts

@@ -0,0 +1,132 @@
+import type { Light } from '@nayan-ui/engine';
+import { isTablet } from '../../services/UtilsService';
+// Crossy Road's rules, tuning, colors and layout. The board, traffic and scoring match the original version
+// (games/crossy-road): rules are in view points (one world unit per point), sized from the view's width
+// exactly as the original board sized itself from the window, so traffic moves as it did.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import { gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const COLS = 9;
+export const TOTAL_ROADS = 9;
+const ROADS_PER_REST = 3;
+export type LaneType = 'grass' | 'road';
+
+/** A grass start lane, nine roads with a grass rest lane after every three, a grass goal lane (bottom to top). */
+export const LANE_TYPES: LaneType[] = (() => {
+  const pattern: LaneType[] = ['grass'];
+  let roads = 0;
+  let since = 0;
+  while (roads < TOTAL_ROADS) {
+    pattern.push('road');
+    roads++;
+    since++;
+    if (since === ROADS_PER_REST && roads < TOTAL_ROADS) {
+      pattern.push('grass');
+      since = 0;
+    }
+  }
+  pattern.push('grass');
+  return pattern;
+})();
+export const TOTAL_LANES = LANE_TYPES.length;
+export const GOAL_ROW = TOTAL_LANES - 1;
+
+export const GAME_DURATION = 120; // seconds
+export const SCORE_PER_CROSS = 2000;
+export const LOW_TIME = 10;
+
+// Traffic, in points per 60 Hz frame (as the original game moved it)
+export const CAR_SPEED_MIN = isTablet ? 2.0 : 1.55;
+export const CAR_SPEED_MAX = isTablet ? 4.15 : 3.25;
+export const STEP_MS = 1000 / 60;
+export const MAX_PENDING_MS = 50;
+/** Traffic speeds up a little with every road crossed. */
+export const speedScale = (crossings: number) => Math.min(1 + crossings * 0.065, 1.9);
+
+// ── Touch and feel ────────────────────────────────────────────────────
+
+export const MOVE_TIME = 0.2; // seconds per grid move, with two alternating running footfalls
+export const SWIPE = 18; // points a finger travels for a swipe
+export const TAP_MAX = 0.25; // seconds a tap may take
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+export const COLORS = {
+  GRASS_LIGHT: '#95CF69',
+  GRASS_DARK: '#83BF5C',
+  GRASS_TUFT: '#4E9A2E',
+  ROAD: '#4B5667',
+  ROAD_EDGE: '#3C3C46',
+  ROAD_LINE: '#C9C9CF',
+  CAR_COLORS: ['#FF5C5C', '#FFD93D', '#6BCB77', '#A66CFF', '#FF9F45', '#4D96FF', '#37C7C2', '#F2EEE2', '#EF7CAB'],
+  WHEEL: '#15151A',
+  WINDOW: '#2A3442',
+  PLAYER: '#3B82C4',
+  TRUNK: '#7A4E2D',
+  LEAVES: '#3FA34D',
+  FLOWERS: ['#FFFFFF', '#FFD1EC', '#C7B3FF', '#FFF2B0'],
+  CURB: '#C9C6BE',
+  LINE: '#F2F2EE',
+  BUSH: '#3E8E3A',
+  ROCK: '#8E8C88'
+} as const;
+export const PERSON = { SCALE: 0.82, HEIGHT: 1.817, STRIDE: 0.5 } as const;
+export const PERSON_COLORS = {
+  SKIN: '#DCA67D',
+  JACKET: COLORS.PLAYER,
+  PANTS: '#3B4558',
+  HAIR: '#352B27',
+  SHOE: '#39434C',
+  SOLE: '#F0ECE1',
+  BACKPACK: '#CE8248',
+  STRAP: '#72513A'
+} as const;
+// ── The scene ─────────────────────────────────────────────────────────
+
+/**
+ * The rules are in view points (a lane is about 40 of them), but the engine draws only what's within
+ * 500 units of the camera and shadows a few dozen units round it, so the whole scene hangs off a root
+ * scaled to a tenth: one world unit is ten points.
+ */
+export const WORLD_SCALE = 0.1;
+/** A perspective camera behind and above the start lane, looking up the board at this angle below level. */
+export const CAMERA_PITCH = 0.92;
+export const CAMERA_FOV = 0.7;
+export const SKY_DAY = [0.62, 0.78, 0.95] as const;
+export const SKY_NIGHT = [0.227, 0.192, 0.376] as const;
+/** The sun high to the front left (z is up off the board), shadows falling up and right; the night's dim bluish moonlight. */
+export const DAY_LIGHT: Light = { direction: [-0.45, -0.55, 1], ambient: 0.5, shadowExtent: 40 };
+export const NIGHT_LIGHT: Light = { direction: [-0.3, -0.5, 1], ambient: 0.66, shadowExtent: 40, color: [0.84, 0.88, 1] };
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+const SCOREBOARD_HEIGHT = 82;
+const CONTROLS_HEIGHT = 110;
+
+export type Layout = {
+  width: number;
+  height: number;
+  /** A column's width, a lane's depth, the player grid's width and its left edge (view x). */
+  tile: number;
+  laneH: number;
+  gridW: number;
+  gridLeft: number;
+  /** The view's band between the scoreboard and the controls, where the board is framed (view y). */
+  top: number;
+  bottom: number;
+};
+
+/** Wider lanes fill more of the view while the camera keeps all nine columns reachable. */
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const playWidth = gameWidthFor(width);
+  const tile = Math.floor(playWidth / COLS);
+  const gridW = COLS * tile;
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const bottom = Math.max(top + 200, height - CONTROLS_HEIGHT);
+  return { width, height, tile, laneH: tile * 1.25, gridW, gridLeft: Math.round((width - gridW) / 2), top, bottom };
+}
+
+/** A column's centre (view x). */
+export const colX = (l: Layout, col: number) => l.gridLeft + col * l.tile + l.tile / 2;