loop-benchmarking

grid-reader.ts (20677B)

---

 // Screen reading approach adapted from mikhail-vlasenko/Tetris-AI (MIT License)
 // Cell sampling uses center + offset checks for robustness
 
 import type { Page } from "@playwright/test";
 import type { Grid, GridBounds, CalibrationResult, PieceType } from "./types";
 
 const GRID_ROWS = 20;
 const GRID_COLS = 10;
 
 /**
  * Read the game grid state. Dispatches to canvas or DOM reader
  * based on calibration results. Returns a 10x20 boolean matrix,
  * or null if reading fails.
  */
 export async function readGrid(
   page: Page,
   cal: CalibrationResult
 ): Promise<Grid | null> {
   try {
     if (cal.renderer === "canvas" && cal.gridBounds) {
       return await readCanvasGrid(page, cal.gridBounds, cal.cellWidth, cal.cellHeight, cal.backgroundColor);
     }
     if (cal.renderer === "dom") {
       return await readDomGrid(page);
     }
     // Fallback: try canvas anyway if bounds exist
     if (cal.gridBounds) {
       return await readCanvasGrid(page, cal.gridBounds, cal.cellWidth, cal.cellHeight, cal.backgroundColor);
     }
     // Last resort: try DOM reader even if renderer is unknown
     // (the grid may have appeared after calibration)
     const domGrid = await readDomGrid(page);
     if (domGrid) return domGrid;
     return null;
   } catch {
     return null;
   }
 }
 
 /**
  * Read grid from a canvas element using getImageData.
  * Samples the center pixel of each cell and compares to the background color.
  * Uses multi-point sampling (center + offsets) for robustness, adapted from
  * mikhail-vlasenko/Tetris-AI's approach of checking multiple points per cell.
  */
 async function readCanvasGrid(
   page: Page,
   bounds: GridBounds,
   cellW: number,
   cellH: number,
   bgColor: [number, number, number] | null
 ): Promise<Grid | null> {
   const bgR = bgColor ? bgColor[0] : 0;
   const bgG = bgColor ? bgColor[1] : 0;
   const bgB = bgColor ? bgColor[2] : 0;
   const threshold = 50; // color distance threshold
 
   const grid = await page.evaluate(
     ({ x, y, cellW, cellH, rows, cols, bgR, bgG, bgB, threshold }) => {
       const canvas = document.querySelector("canvas") as HTMLCanvasElement | null;
       if (!canvas) return null;
       const ctx = canvas.getContext("2d");
       if (!ctx) return null;
 
       // Offsets to sample within each cell: center + 4 points at 1/3 offsets
       // This catches pieces even when the center is on a border or gap
       const offsets = [
         [0, 0],
         [-Math.floor(cellW / 4), 0],
         [Math.floor(cellW / 4), 0],
         [0, -Math.floor(cellH / 4)],
         [0, Math.floor(cellH / 4)],
       ];
 
       const result: boolean[][] = [];
       for (let row = 0; row < rows; row++) {
         const rowData: boolean[] = [];
         for (let col = 0; col < cols; col++) {
           const cx = Math.floor(x + col * cellW + cellW / 2);
           const cy = Math.floor(y + row * cellH + cellH / 2);
 
           let filledCount = 0;
           for (const [ox, oy] of offsets) {
             const px = Math.min(Math.max(cx + ox, 0), canvas.width - 1);
             const py = Math.min(Math.max(cy + oy, 0), canvas.height - 1);
             const pixel = ctx.getImageData(px, py, 1, 1).data;
             const dr = pixel[0] - bgR;
             const dg = pixel[1] - bgG;
             const db = pixel[2] - bgB;
             const dist = Math.sqrt(dr * dr + dg * dg + db * db);
             if (dist > threshold) filledCount++;
           }
           // Cell is filled if majority of sample points say so
           rowData.push(filledCount >= 3);
         }
         result.push(rowData);
       }
       return result;
     },
     { x: bounds.x, y: bounds.y, cellW, cellH, rows: GRID_ROWS, cols: GRID_COLS, bgR, bgG, bgB, threshold }
   );
 
   // Validate: a freshly-read grid should make sense
   if (grid) {
     const totalCells = GRID_ROWS * GRID_COLS;
     const filledCells = grid.reduce((sum, row) => sum + row.filter(Boolean).length, 0);
     const filledPct = filledCells / totalCells;
 
     // If >60% of the grid is "filled" at any point, we're probably reading
     // off-grid (UI chrome, borders, decorations). A real Tetris grid rarely
     // exceeds 50% filled even in a losing game.
     if (filledPct > 0.60) {
       return null;
     }
   }
 
   return grid;
 }
 
 /**
  * Validate that calibrated grid bounds look like a real Tetris grid.
  * Returns true if the bounds are plausible.
  */
 export function validateGridBounds(bounds: GridBounds | null): boolean {
   if (!bounds) return false;
 
   // Aspect ratio should be roughly 1:2 (width:height) for a 10x20 grid
   const ratio = bounds.height / bounds.width;
   if (ratio < 1.3 || ratio > 2.8) return false;
 
   // Grid should be a reasonable size (not tiny or the entire viewport)
   if (bounds.width < 50 || bounds.height < 100) return false;
   if (bounds.width > 1000 || bounds.height > 1500) return false;
 
   return true;
 }
 
 /**
  * Read grid from DOM elements. Looks for a grid-like structure and checks
  * background colors or class names to determine filled vs empty cells.
  */
 async function readDomGrid(page: Page): Promise<Grid | null> {
   const grid = await page.evaluate(({ rows, cols }) => {
     // Strategy 1: look for a table-based grid
     const tables = document.querySelectorAll("table");
     for (const table of tables) {
       const trs = table.querySelectorAll("tr");
       if (trs.length >= rows) {
         const result: boolean[][] = [];
         for (let r = 0; r < rows; r++) {
           const tds = trs[r].querySelectorAll("td");
           const rowData: boolean[] = [];
           for (let c = 0; c < cols; c++) {
             if (c < tds.length) {
               const td = tds[c] as HTMLElement;
               const style = window.getComputedStyle(td);
               const bg = style.backgroundColor;
               const cls = td.className.toLowerCase();
               // Filled if it has a non-default background or a class suggesting a piece
               const isFilled =
                 (bg !== "" && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent" && bg !== "rgb(0, 0, 0)") ||
                 cls.includes("filled") ||
                 cls.includes("active") ||
                 cls.includes("block") ||
                 cls.includes("piece") ||
                 td.dataset.filled === "true";
               rowData.push(isFilled);
             } else {
               rowData.push(false);
             }
           }
           result.push(rowData);
         }
         return result;
       }
     }
 
     // Helper: determine if a cell element is "filled" by checking its
     // background color, class names, and data attributes. Also accepts
     // an optional "empty" reference color so we can distinguish filled
     // cells in games that use a non-standard background (e.g. dark gray
     // for empty cells instead of transparent/black).
     function isCellFilled(cell: HTMLElement, emptyBg?: string): boolean {
       const style = window.getComputedStyle(cell);
       const bg = style.backgroundColor;
       const cls = cell.className.toLowerCase();
 
       // Class/data attribute hints always win
       if (
         cls.includes("filled") ||
         cls.includes("active") ||
         cls.includes("block") ||
         cls.includes("piece") ||
         cls.includes("occupied") ||
         cls.includes("locked") ||
         cell.dataset.filled === "true" ||
         cell.dataset.type !== undefined
       ) {
         return true;
       }
 
       // If we have a known empty background, compare against it
       if (emptyBg && bg === emptyBg) return false;
 
       // Default: non-transparent, non-black background = filled
       return (
         bg !== "" &&
         bg !== "rgba(0, 0, 0, 0)" &&
         bg !== "transparent" &&
         bg !== "rgb(0, 0, 0)"
       );
     }
 
     // Determine the "empty cell" background by sampling a few cells
     // and picking the most common background color
     function detectEmptyBg(cells: HTMLElement[]): string | undefined {
       const colorCounts = new Map<string, number>();
       for (const cell of cells) {
         const bg = window.getComputedStyle(cell).backgroundColor;
         colorCounts.set(bg, (colorCounts.get(bg) || 0) + 1);
       }
       // The most common color is likely the empty cell color
       let maxCount = 0;
       let emptyBg: string | undefined;
       for (const [color, count] of colorCounts) {
         if (count > maxCount) {
           maxCount = count;
           emptyBg = color;
         }
       }
       // Only use if it appears in > 60% of cells (most cells should be empty)
       if (emptyBg && maxCount > cells.length * 0.6) return emptyBg;
       return undefined;
     }
 
     // Strategy 2: look for a grid/flex container with child cells
     const containers = document.querySelectorAll(
       '[class*="board"], [class*="grid"], [class*="field"], [id*="board"], [id*="grid"], [id*="field"]'
     );
     for (const container of containers) {
       const children = container.children;
       // Could be a flat list of 200 cells (10x20) or 20 rows of 10 cells
       if (children.length >= rows * cols - 10 && children.length <= rows * cols + 10) {
         const actualCols = cols;
         const actualRows = Math.round(children.length / actualCols);
         const allCells = Array.from(children).slice(0, actualRows * actualCols) as HTMLElement[];
         const emptyBg = detectEmptyBg(allCells);
         const result: boolean[][] = [];
         for (let r = 0; r < actualRows; r++) {
           const rowData: boolean[] = [];
           for (let c = 0; c < actualCols; c++) {
             const cell = allCells[r * actualCols + c];
             rowData.push(cell ? isCellFilled(cell, emptyBg) : false);
           }
           result.push(rowData);
         }
         return result;
       }
       // Could be 20 row containers each with 10 cells
       if (children.length >= rows - 2 && children.length <= rows + 2) {
         const firstRowCells = children[0]?.children;
         if (firstRowCells && firstRowCells.length >= cols - 2 && firstRowCells.length <= cols + 2) {
           const actualRows = children.length;
           const actualCols = firstRowCells.length;
           // Collect all cells for empty-bg detection
           const allCells: HTMLElement[] = [];
           for (let r = 0; r < actualRows; r++) {
             const cells = children[r].children;
             for (let c = 0; c < Math.min(actualCols, cells.length); c++) {
               allCells.push(cells[c] as HTMLElement);
             }
           }
           const emptyBg = detectEmptyBg(allCells);
           let valid = true;
           const result: boolean[][] = [];
           for (let r = 0; r < actualRows; r++) {
             const rowEl = children[r];
             const cells = rowEl.children;
             if (cells.length < actualCols) { valid = false; break; }
             const rowData: boolean[] = [];
             for (let c = 0; c < actualCols; c++) {
               rowData.push(isCellFilled(cells[c] as HTMLElement, emptyBg));
             }
             result.push(rowData);
           }
           if (valid) return result;
         }
       }
     }
 
     // Strategy 3: heuristic scan for ANY container with many same-sized
     // children arranged in a grid pattern (no class/id naming required)
     const allElements = document.querySelectorAll("div, section, main, article");
     for (const el of allElements) {
       const ch = el.children;
       // Flat list of ~200 cells
       if (ch.length >= 180 && ch.length <= 220) {
         const firstChild = ch[0] as HTMLElement;
         if (!firstChild) continue;
         const firstRect = firstChild.getBoundingClientRect();
         if (firstRect.width < 5 || firstRect.height < 5) continue;
         let uniform = true;
         for (let i = 1; i < Math.min(10, ch.length); i++) {
           const r = (ch[i] as HTMLElement).getBoundingClientRect();
           if (Math.abs(r.width - firstRect.width) > 2 || Math.abs(r.height - firstRect.height) > 2) {
             uniform = false;
             break;
           }
         }
         if (uniform) {
           const actualCols = cols;
           const actualRows = Math.round(ch.length / actualCols);
           const allCells = Array.from(ch).slice(0, actualRows * actualCols) as HTMLElement[];
           const emptyBg = detectEmptyBg(allCells);
           const result: boolean[][] = [];
           for (let r = 0; r < actualRows; r++) {
             const rowData: boolean[] = [];
             for (let c = 0; c < actualCols; c++) {
               const cell = allCells[r * actualCols + c];
               rowData.push(cell ? isCellFilled(cell, emptyBg) : false);
             }
             result.push(rowData);
           }
           return result;
         }
       }
       // Container with ~20 row children each having ~10 cell children
       if (ch.length >= 18 && ch.length <= 22) {
         const firstRowCells = ch[0]?.children;
         if (firstRowCells && firstRowCells.length >= 8 && firstRowCells.length <= 12) {
           const rect = el.getBoundingClientRect();
           if (rect.width > 50 && rect.height > 100) {
             const actualRows = ch.length;
             const actualCols = firstRowCells.length;
             const allCells: HTMLElement[] = [];
             for (let r = 0; r < actualRows; r++) {
               const cells = ch[r].children;
               for (let c = 0; c < Math.min(actualCols, cells.length); c++) {
                 allCells.push(cells[c] as HTMLElement);
               }
             }
             const emptyBg = detectEmptyBg(allCells);
             let valid = true;
             const result: boolean[][] = [];
             for (let r = 0; r < actualRows; r++) {
               const cells = ch[r].children;
               if (cells.length < actualCols) { valid = false; break; }
               const rowData: boolean[] = [];
               for (let c = 0; c < actualCols; c++) {
                 rowData.push(isCellFilled(cells[c] as HTMLElement, emptyBg));
               }
               result.push(rowData);
             }
             if (valid) return result;
           }
         }
       }
     }
 
     return null;
   }, { rows: GRID_ROWS, cols: GRID_COLS });
 
   return grid;
 }
 
 /**
  * Sample the background color from the top-left cell of an empty grid.
  * Called during calibration before the game has pieces.
  */
 export async function sampleBackgroundColor(
   page: Page,
   bounds: GridBounds,
   cellW: number,
   cellH: number
 ): Promise<[number, number, number] | null> {
   try {
     const color = await page.evaluate(
       ({ x, y, cellW, cellH }) => {
         const canvas = document.querySelector("canvas") as HTMLCanvasElement | null;
         if (!canvas) return null;
         const ctx = canvas.getContext("2d");
         if (!ctx) return null;
         // Sample from the center of the first cell
         const px = Math.floor(x + cellW / 2);
         const py = Math.floor(y + cellH / 2);
         const pixel = ctx.getImageData(px, py, 1, 1).data;
         return [pixel[0], pixel[1], pixel[2]] as [number, number, number];
       },
       { x: bounds.x, y: bounds.y, cellW, cellH }
     );
     return color;
   } catch {
     return null;
   }
 }
 
 /**
  * Compare two grids and return true if they differ.
  */
 export function gridsAreDifferent(a: Grid | null, b: Grid | null): boolean {
   if (a === null || b === null) return a !== b;
   if (a.length !== b.length) return true;
   for (let r = 0; r < a.length; r++) {
     if (a[r].length !== b[r].length) return true;
     for (let c = 0; c < a[r].length; c++) {
       if (a[r][c] !== b[r][c]) return true;
     }
   }
   return false;
 }
 
 /**
  * Count the number of filled cells in the bottom N rows of the grid.
  */
 export function countFilledInBottomRows(grid: Grid, rows: number): number {
   let count = 0;
   const startRow = Math.max(0, grid.length - rows);
   for (let r = startRow; r < grid.length; r++) {
     for (let c = 0; c < grid[r].length; c++) {
       if (grid[r][c]) count++;
     }
   }
   return count;
 }
 
 /**
  * Count total filled cells in the grid.
  */
 export function countFilled(grid: Grid): number {
   let count = 0;
   for (const row of grid) {
     for (const cell of row) {
       if (cell) count++;
     }
   }
   return count;
 }
 
 /**
  * Check if there are filled cells in the top few rows (near game over).
  */
 export function hasFilledInTopRows(grid: Grid, rows: number): boolean {
   for (let r = 0; r < Math.min(rows, grid.length); r++) {
     for (let c = 0; c < grid[r].length; c++) {
       if (grid[r][c]) return true;
     }
   }
   return false;
 }
 
 /**
  * Detect active piece cells by diffing the current grid against a settled
  * (locked-pieces-only) grid. Returns an array of [row, col] positions,
  * or null if detection fails.
  */
 export function detectActivePieceCells(
   current: Grid | null,
   settled: Grid | null
 ): [number, number][] | null {
   if (!current) return null;
 
   const cells: [number, number][] = [];
 
   if (settled && settled.length === current.length) {
     for (let row = 0; row < current.length; row++) {
       for (let col = 0; col < current[row].length; col++) {
         if (current[row][col] && !settled[row][col]) {
           cells.push([row, col]);
         }
       }
     }
   } else {
     // Fallback: scan top 6 rows for filled cells
     for (let row = 0; row < Math.min(6, current.length); row++) {
       for (let col = 0; col < current[row].length; col++) {
         if (current[row][col]) {
           cells.push([row, col]);
         }
       }
     }
   }
 
   // A tetromino has exactly 4 cells
   if (cells.length < 3 || cells.length > 5) return null;
   return cells;
 }
 
 /**
  * Identify the piece type from its cell positions by matching against
  * known tetromino shapes (bounding box + cell pattern).
  */
 export function identifyPieceType(cells: [number, number][]): PieceType {
   if (cells.length !== 4) return "unknown";
 
   const minRow = Math.min(...cells.map(([r]) => r));
   const maxRow = Math.max(...cells.map(([r]) => r));
   const minCol = Math.min(...cells.map(([, c]) => c));
   const maxCol = Math.max(...cells.map(([, c]) => c));
   const w = maxCol - minCol + 1;
   const h = maxRow - minRow + 1;
 
   // Normalize to origin
   const norm = cells.map(([r, c]) => [r - minRow, c - minCol] as [number, number]);
   const key = norm
     .sort((a, b) => a[0] - b[0] || a[1] - b[1])
     .map(([r, c]) => `${r},${c}`)
     .join("|");
 
   // I piece: 4x1 or 1x4
   if (w === 4 && h === 1) return "I";
   if (w === 1 && h === 4) return "I";
 
   // O piece: 2x2
   if (w === 2 && h === 2) return "O";
 
   // For 3x2 and 2x3 shapes, match exact patterns
   // T piece rotations
   const tPatterns = [
     "0,0|0,1|0,2|1,1",     // T flat
     "0,0|1,0|1,1|2,0",     // T right
     "0,1|1,0|1,1|1,2",     // T inverted
     "0,0|0,1|1,0|2,0",     // T left (corrected)
     "0,1|1,0|1,1|2,1",     // T right alt
     "0,0|0,1|1,1|2,1",     // T left alt
   ];
   if (tPatterns.includes(key)) return "T";
 
   // S piece rotations
   const sPatterns = [
     "0,1|0,2|1,0|1,1",     // S flat
     "0,0|1,0|1,1|2,1",     // S vertical
   ];
   if (sPatterns.includes(key)) return "S";
 
   // Z piece rotations
   const zPatterns = [
     "0,0|0,1|1,1|1,2",     // Z flat
     "0,1|1,0|1,1|2,0",     // Z vertical
   ];
   if (zPatterns.includes(key)) return "Z";
 
   // J piece rotations
   const jPatterns = [
     "0,0|1,0|1,1|1,2",     // J flat
     "0,0|0,1|1,0|2,0",     // J right
     "0,0|0,1|0,2|1,2",     // J inverted
     "0,0|1,0|2,0|2,1",     // J left (corrected)
     "0,1|1,1|2,0|2,1",     // J left alt
   ];
   if (jPatterns.includes(key)) return "J";
 
   // L piece rotations
   const lPatterns = [
     "0,2|1,0|1,1|1,2",     // L flat
     "0,0|1,0|2,0|2,1",     // L right (same as J left)
     "0,0|0,1|0,2|1,0",     // L inverted
     "0,0|0,1|1,1|2,1",     // L left
   ];
   if (lPatterns.includes(key)) return "L";
 
   // If no exact match, classify by bounding box
   if ((w === 3 && h === 2) || (w === 2 && h === 3)) return "unknown";
 
   return "unknown";
 }
 
 /**
  * Check if a specific row in the grid is completely filled.
  */
 export function isRowComplete(grid: Grid, row: number): boolean {
   if (row < 0 || row >= grid.length) return false;
   return grid[row].every(Boolean);
 }
 
 /**
  * Count complete (filled) rows in the grid.
  */
 export function countCompleteRows(grid: Grid): number {
   let count = 0;
   for (let r = 0; r < grid.length; r++) {
     if (isRowComplete(grid, r)) count++;
   }
   return count;
 }
 
 /**
  * Get column heights (distance from top to highest filled cell per column).
  */
 export function getColumnHeights(grid: Grid): number[] {
   const heights: number[] = [];
   for (let col = 0; col < GRID_COLS; col++) {
     let h = 0;
     for (let row = 0; row < GRID_ROWS; row++) {
       if (grid[row]?.[col]) {
         h = GRID_ROWS - row;
         break;
       }
     }
     heights.push(h);
   }
   return heights;
 }