renderFrame = ([min, max], snake, tailTrace) => {
const size = add(subtract(max, min), [1, 1])
const offset = subtract([0, 0], min)
const cells = Array.from({length: size[1]}).map(() => Array.from({length: size[0]}).fill(useAsciiVisualization ? '.' : '⬜'))
tailTrace.forEach(pos => {
const [x, y] = add(pos, offset)
cells[y][x] = useAsciiVisualization ? '#' : '🟪'
})
cells[offset[1]][offset[0]] = useAsciiVisualization ? 's' : '🏁'
const reversedSnake = [...snake].reverse()
reversedSnake.forEach((pos, i) => {
const [x, y] = add(pos, offset)
const tailIndex = reversedSnake.length - 1 - i
const symbol = useAsciiVisualization
? tailIndex || 'H'
: tailIndex ? `${String.fromCodePoint(0x30 + tailIndex)}${String.fromCodePoint(0xfe0f)}${String.fromCodePoint(0x20e3)}` : '🐍'
cells[y][x] = symbol
})
return htl.html`<pre>${cells.map(x => x.join('')).reverse().join('\n')}</pre>`
}