@nayan-ui/games 1.20.0 → 1.21.0

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

@@ -1,235 +0,0 @@
-// 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

@@ -1,74 +0,0 @@
-// 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

@@ -1,59 +0,0 @@
-// 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

@@ -1,132 +0,0 @@
-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;