const eventSource = new EventSource("/stream");


color_mapping = [
	"empty_cell",
	"I_tetrimino",
	"O_tetrimino",
	"T_tetrimino",
	"L_tetrimino",
	"J_tetrimino",
	"Z_tetrimino",
	"S_tetrimino",
]


function draw_grid(data) {
  const table = document.getElementById("grid");
	table.innerHTML = "";
	for (row in data.grid) {
		let tr = document.createElement("tr");
		for (cell in data.grid[row]) {
			let td = document.createElement("td");
			td.id = `${cell}-${row}`;
			td.classList.add("cell");
			td.classList.add(color_mapping[data.grid[row][cell]]);
			tr.appendChild(td);
		}
		table.appendChild(tr);
	}
	let x = parseInt(data.current_tetrimino.position[0]);
	let y = parseInt(data.current_tetrimino.position[1]);
	console.log(data.current_tetrimino.shape);
	for (i in data.current_tetrimino.shape) {
		console.log("x", x,i);
		for (j in data.current_tetrimino.shape[i]) {
			console.log("y", y, j);
			if (data.current_tetrimino.shape[i][j] == 0) {
				continue;
			}
			let current_x = x + parseInt(j);
			let current_y = data.size.height - y + parseInt(i);
			console.log(`${current_x}-${current_y}`);
			let cell = document.getElementById(`${current_x}-${current_y}`)
			cell.classList.remove("empty_cell");
			cell.classList.add(color_mapping[data.current_tetrimino.value]);
		}
	}
}

eventSource.onmessage = (event) => {
	draw_grid(JSON.parse(event.data));
};

eventSource.onerror = (error) => {
  console.error('Erreur SSE:', error);
};