return (
<table>
  <tbody>
    {grid().map((row, y) => (
      <tr>
        {row.map((cell, x) => (
          <td
            class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
            onclick={_ => flip(x, y)}></td>
        ))}
      </tr>
    ))}
  </tbody>
</table>
)

return (
<table>
  <tbody>
    {grid().map((row, y) => (
      <tr>
        {row.map((cell, x) => (
          <td
            class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
            onclick={_ => flip(x, y)}></td>
        ))}
      </tr>
    ))}
  </tbody>
</table>
)

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid([...val])
}

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid([...val])
}