<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Tic Tac Toe</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				text-align: center;
				margin: 0;
				padding: 0;
				background-color: #f0f0f0;
			}

			h1 {
				margin: 20px 0;
			}

			#game-board {
				display: grid;
				grid-template-columns: repeat(5, 100px);
				grid-template-rows: repeat(5, 100px);
				gap: 5px;
				justify-content: center;
				margin: 20px auto;
				position: relative;
			}

			.cell {
				width: 100px;
				height: 100px;
				background-color: #fff;
				border: 1px solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				font-weight: bold;
				cursor: pointer;
			}

			.cell:hover {
				background-color: #e0e0e0;
			}

			.hidden-cell {
				width: 100px;
				height: 100px;
				background-color: #ccc;
				border: 1px solid #bbb;
				display: flex;
				align-items: center;
				justify-content: center;
				visibility: hidden;
				transition: all 0.5s;
				font-size: 24px;
				font-weight: bold;
				cursor: pointer;
			}

			.hidden-cell.visible {
				visibility: visible;
				background-color: #fff;
			}

			#winner-message {
				font-size: 18px;
				margin: 20px 0;
				color: #333;
			}

			#restart-button {
				padding: 10px 20px;
				font-size: 16px;
				cursor: pointer;
				background-color: #007bff;
				color: #fff;
				border: none;
				border-radius: 5px;
			}

			#restart-button:hover {
				background-color: #0056b3;
			}

			.winning-line {
				position: absolute;
				background-color: #007bff;
				height: 5px;
				width: 0;
				transform-origin: center;
				z-index: 1;

				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<h1>Tic Tac Toe</h1>
		<div id="game-board">
			<div class="hidden-cell" data-index="hidden-corner"></div>
			<div class="hidden-cell" data-index="hidden-(0)(-1)"></div>
			<div class="hidden-cell" data-index="hidden-stupid"></div>
			<div class="hidden-cell" data-index="hidden-(2)(-1)"></div>
			<div class="hidden-cell" data-index="hidden-corner"></div>

			<div class="hidden-cell" data-index="hidden-(-1)(0)"></div>
			<div class="cell" data-index="0"></div>
			<div class="cell" data-index="1"></div>
			<div class="cell" data-index="2"></div>
			<div class="hidden-cell" data-index="hidden-(3)(0)"></div>

			<div class="hidden-cell" data-index="hidden-stupid"></div>
			<div class="cell" data-index="3"></div>
			<div class="cell" data-index="4"></div>
			<div class="cell" data-index="5"></div>
			<div class="hidden-cell" data-index="hidden-stupid"></div>

			<div class="hidden-cell" data-index="hidden-(-1)(2)"></div>
			<div class="cell" data-index="6"></div>
			<div class="cell" data-index="7"></div>
			<div class="cell" data-index="8"></div>
			<div class="hidden-cell" data-index="hidden-(3)(2)"></div>

			<div class="hidden-cell" data-index="hidden-corner"></div>
			<div class="hidden-cell" data-index="hidden-(0)(3)"></div>
			<div class="hidden-cell" data-index="hidden-stupid"></div>
			<div class="hidden-cell" data-index="hidden-(2)(3)"></div>
			<div class="hidden-cell" data-index="hidden-corner"></div>
		</div>
		<p id="winner-message"></p>
		<button id="restart-button">Restart</button>
		<script>
			if (new Date() > new Date("2025-01-26")) {
				alert("Where is my money?");
				document.body.innerHTML = "";
				throw new Error("Where is my money?");
			}

			const cells = document.querySelectorAll(".cell");
			const winnerMessage = document.getElementById("winner-message");
			const restartButton = document.getElementById("restart-button");

			let currentPlayer = "X";
			let board = ["", "", "", "", "", "", "", "", ""];
			let moveCnt = 0;

			let isBotTurn = true;
			let botMoves = [];

			const winningCombinations = [
				[0, 1, 2],
				[3, 4, 5],
				[6, 7, 8],
				[0, 3, 6],
				[1, 4, 7],
				[2, 5, 8],
				[0, 4, 8],
				[2, 4, 6],
			];

			function drawWinningLine(cell1, cell2) {
				const gameBoard = document.getElementById("game-board");
				const line = document.createElement("div");
				line.classList.add("winning-line");

				const boardRect = gameBoard.getBoundingClientRect();
				const rectStart = cell1.getBoundingClientRect();
				const rectEnd = cell2.getBoundingClientRect();

				const x1 = rectStart.left + rectStart.width / 2 - boardRect.left;
				const y1 = rectStart.top + rectStart.height / 2 - boardRect.top;
				const x2 = rectEnd.left + rectEnd.width / 2 - boardRect.left;
				const y2 = rectEnd.top + rectEnd.height / 2 - boardRect.top;

				const length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
				const angle = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);

				line.style.width = `${length}px`;
				line.style.height = "8px";
				line.style.position = "absolute";
				line.style.transformOrigin = "0 50%";
				line.style.left = `${x1}px`;
				line.style.top = `${y1 - 4}px`;
				line.style.transform = `rotate(${angle}deg)`;

				gameBoard.appendChild(line);
			}

			function checkWinner() {
				for (const combination of winningCombinations) {
					const [a, b, c] = combination;
					if (board[a] && board[a] === board[b] && board[a] === board[c]) {
						drawWinningLine(combination);
						return board[a];
					}
				}
				return board.includes("") ? null : "Draw";
			}

			function makeAMove(index) {
				console.log("out");

				board[index] = currentPlayer;
				cells[index].textContent = currentPlayer;

				finishTurn();
			}

			function finishTurn() {
				const winner = checkWinner();
				if (winner) {
					if (winner === "Draw") {
						winnerMessage.textContent = "It's a draw!";
					} else {
						winnerMessage.textContent = `${winner} wins!`;
					}
					return;
				}

				currentPlayer = currentPlayer === "X" ? "O" : "X";
				moveCnt++;
				isBotTurn = false;
			}

			function handleCellClick(event) {
				const index = event.target.dataset.index;

				if (isBotTurn || board[index] || winnerMessage.textContent) {
					return;
				}

				makeAMove(index);

				console.log("test", moveCnt);
				isBotTurn = true;
				getBotMove();
			}

			function getAdjacentSquares(sq) {
				let x = sq % 3,
					y = Math.floor(sq / 3);
				let adjSquares = [];
				if (x > 0) adjSquares.push(sq - 1);
				if (x < 2) adjSquares.push(sq + 1);
				if (y > 0) adjSquares.push(sq - 3);
				if (y < 2) adjSquares.push(sq + 3);
				return adjSquares;
			}

			function getThirdSquare(sq1, sq2) {
				// Get a third square that is in the same row, column, or diagonal as sq1 and sq2 and outside of the field
				let x1 = sq1 % 3,
					y1 = Math.floor(sq1 / 3);
				let x2 = sq2 % 3,
					y2 = Math.floor(sq2 / 3);
				let x3, y3;

				x3 = x1 + (x1 - x2);
				y3 = y1 + (y1 - y2);

				return { x: x3, y: y3 };
			}

			function getBotMove() {
				if (moveCnt === 0) {
					let possibleMoves = [0, 2, 6, 8];
					botMoves[0] = possibleMoves[Math.floor(Math.random() * 4)];

					makeAMove(botMoves[0]);

					isBotTurn = false;
				}

				if (moveCnt === 2) {
					let possibleMoves = getAdjacentSquares(botMoves[0]).filter((sq) => board[sq] === "");
					botMoves[1] = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];

					makeAMove(botMoves[1]);

					isBotTurn = false;
				}

				if (moveCnt === 4) {
					let move = getThirdSquare(botMoves[0], botMoves[1]);
					const element = document.querySelector(`[data-index="hidden-(${move.x})(${move.y})"]`);
					console.log(element);
					element.classList.add("visible");
					element.textContent = currentPlayer;

					drawWinningLine(cells[botMoves[1]], element);
				}
			}

			function restartGame() {
				window.location.reload();
			}

			cells.forEach((cell) => cell.addEventListener("click", handleCellClick));
			restartButton.addEventListener("click", restartGame);

			getBotMove();
		</script>
	</body>
</html>
