src/video/TDebug.tsx

import { useEffect, useRef } from 'react'
import { Engine } from './engine'
import { frameAt } from './scenes'

/** ?tdebug=3,10,17 renders frames, logs pixel stats; last one stays on screen */
export default function TDebug() {
  const ref = useRef<HTMLCanvasElement>(null)
  useEffect(() => {
    const ts = (new URLSearchParams(location.search).get('tdebug') || '3').split(',').map(Number)
    const eng = new Engine(); eng.setSize(540, 960)
    const c = ref.current!; c.width = 540; c.height = 960
    const ctx = c.getContext('2d')!
    const out: string[] = []
    for (const t of ts) {
      try {
        const t0 = performance.now()
        eng.render(frameAt(t), ctx, t)
        const ms = performance.now() - t0
        const d = ctx.getImageData(0, 0, 540, 960).data
        let sum = 0, red = 0, skin = 0
        for (let i = 0; i < d.length; i += 16) {
          const r = d[i], g = d[i + 1], b = d[i + 2]
          sum += (r + g + b) / 3
          if (r > 170 && g < 90 && b < 90) red++
          if (r > 150 && g > 100 && b > 70 && r > g && g > b && r - b > 40) skin++
        }
        const n = d.length / 16
        out.push(`t=${t} ms=${ms.toFixed(0)} lum=${(sum / n).toFixed(1)} red=${(red / n * 100).toFixed(1)}% skin=${(skin / n * 100).toFixed(1)}%`)
      } catch (e) {
        out.push(`t=${t} ERROR ${(e as Error).message} ${(e as Error).stack?.split('\n').slice(0, 3).join(' | ')}`)
      }
    }
    console.log('INFO ' + out.join(' ;; '))
    ;(window as unknown as { __done: boolean }).__done = true
  }, [])
  return <canvas ref={ref} style={{ width: 540, height: 960 }} />
}