JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>AI Tic Tac Toe</title>
	</head>
	<body>
		<div id="game">
			<center class="box" number="0" style="top: 10px; left: 10px"></center>
			<center class="box" number="0" style="top: 10px; left: 120px"></center>
			<center class="box" number="0" style="top: 10px; left: 230px"></center>
			<center class="box" number="0" style="top: 120px; left: 10px"></center>
			<center class="box" number="0" style="top: 120px; left: 120px"></center>
			<center class="box" number="0" style="top: 120px; left: 230px"></center>
			<center class="box" number="0" style="top: 230px; left: 10px"></center>
			<center class="box" number="0" style="top: 230px; left: 120px"></center>
			<center class="box" number="0" style="top: 230px; left: 230px"></center>
		</div>
		<button id="reset">Reset</button>
		<span id="turn"
			>It's &nbsp;...
			<div id="turnbox" number="1" style="width: 15px; height: 15px"></div>
			's turn.</span
		><span id="tictac">Tic Tac Toe</span>
		<!-- |   0 > none   |   1 > X   |   2 > O   | -->
        </body>
</html>

CSS

.box {
				width: 100px;
				height: 100px;
				margin: 5px;
				background: #f0f0f0;
				position: absolute;
				border-radius: 5px;
			}
			.box[number="0"] {
				cursor: pointer;
			}
			*[number="1"] {
				background: linear-gradient(
						-45deg,
						lightskyblue 20%,
						transparent 21%,
						transparent 79%,
						lightskyblue 80%
					),
					linear-gradient(
						45deg,
						lightskyblue 20%,
						transparent 21%,
						transparent 79%,
						lightskyblue 80%
					),
					linear-gradient(
						45deg,
						transparent 46%,
						#f0f0f0 47%,
						#f0f0f0 53%,
						transparent 54%
					),
					linear-gradient(
						-45deg,
						transparent 46%,
						#f0f0f0 47%,
						#f0f0f0 53%,
						transparent 54%
					),
					lightskyblue;
				box-shadow: 0 0 0 2px rgba(0, 251, 255, 0.163);
			}
			*[number="2"] {
				background: radial-gradient(
						transparent 41%,
						#f0f0f0 42%,
						#f0f0f0 55%,
						transparent 56%
					),
					lightsalmon;
				box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.163);
			}
			#reset {
				position: absolute;
				top: 340px;
				left: 235px;
				background: #f0f0f0;
				border-radius: 5px;
				width: 100px;
				color: skyblue;
				cursor: pointer;
			}
			#reset:focus,
			#reset:visited {
				outline: 0;
			}
			#turn {
				position: absolute;
				top: 340px;
				left: 23px;
				border-radius: 3npx;
				border-bottom: 2px solid #f0f0f0;
			}
			#turnbox {
				width: 50px;
				height: 50px;
				position: absolute;
				top: 2px;
				left: 25px;
				border-radius: 3px;
			}
			#tictac,
			#turn {
				background: linear-gradient(
					to right,
					gray 25%,
					gray 33%,
					skyblue 34%,
					skyblue 63%,
					salmon 64%
				);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#tictac {
				position: absolute;
				top: 340px;
				left: 135px;
			}

JavaScript

var game = document.getElementById("game"),
				boxes = document.getElementsByClassName("box"),
				reset = document.getElementById("reset"),
				turn = 0,
				stats = [],
				wait,
				won = false,
				time = 0,
				b,
				othr = /(1\d1\d1\d[^0]\d)0|(1\d1\d1\d)0(\d[^0])|(1\d[^0]\d1\d1\d)0|(1\d)0(\d1\d1\d[^0])|([^0]\d)0(\d1\d1\d1)|0(\d[^0]\d1\d1\d1)|([^0]\d1\d1\d)0(\d1)|0(\d1\d1\d[^0]\d1)|(1\d1\d1\d\d\d)0|(1\d)0(\d1\d1\d\d)|0(\d\d\d1\d1\d1)|0(\d1\d1\d\d\d1)|^0(11)|(\d\d\d)0(11)|(^11)0|(\d\d\d11)0|^(1)0(1)|^(\d\d\d1)0(1)|(\d\d\d\d\d\d1)0(1)|(1\d\d1\d\d)0|0(\d\d1\d\d1)|(1\d\d\d1\d\d\d)0|0(\d\d\d1\d\d\d1)|(^\d\d1\d1\d)0|(\d\d)0(\d1\d1\d\d)|(\d\d\d\d\d\d11)0|(1\d\d)0(\d\d1)|(\d\d1\d)0(\d1\d\d)|(1\d\d\d)0(\d\d\d1)/,
				self = /(2\d2\d2\d[^0]\d)0|(2\d2\d2\d)0(\d[^0])|(2\d[^0]\d2\d2\d)0|(2\d)0(\d2\d2\d[^0])|([^0]\d)0(\d2\d2\d2)|0(\d[^0]\d2\d2\d2)|([^0]\d2\d2\d)0(\d2)|0(\d2\d2\d[^0]\d2)|(2\d2\d2\d\d\d)0|(2\d)0(\d2\d2\d\d)|0(\d\d\d2\d2\d2)|0(\d2\d2\d\d\d2)|^0(22)|(\d\d\d)0(22)|(^22)0|(\d\d\d22)0|^(2)0(2)|^(\d\d\d2)0(2)|(\d\d\d\d\d\d2)0(2)|(2\d\d2\d\d)0|0(\d\d2\d\d2)|(2\d\d\d2\d\d\d)0|0(\d\d\d2\d\d\d2)|(^\d\d2\d2\d)0|(\d\d)0(\d2\d2\d\d)|(\d\d\d\d\d\d22)0|(2\d\d)0(\d\d2)|(\d\d2\d)0(\d2\d\d)|(2\d\d\d)0(\d\d\d2)/,
				sub =
					"$1$2$4$5$7$10$13$14$19$21$22$23$25$27$29$31$33$34$36$37$39$412$3$6$8$9$11$12$15$16$17$18$20$24$26$28$30$32$35$38$40$42";

			//  0 > X  |  1 > O

			function elm(x, y) {
				return document.elementFromPoint(x, y);
			}

			function check(str) {
				var w1 = /(^111|111$|\d{3}111\d{3}|1(\d{2}1){2}|1(\d{3}1){2}|^\d{2}1(\d1){2})/.exec(
						str
					),
					w2 = /(^222|222$|\d{3}222\d{3}|2(\d{2}2){2}|2(\d{3}2){2}|^\d{2}2(\d2){2})/.exec(
						str
					),
					w0 = !/0+/g.exec(str);
				var o = 0;
				if (w1) {
					reset.style.pointerEvents = "none";
					win("X");
					setTimeout(() => {
						reset.click();
						reset.style.pointerEvents = "all";
						reset.style.color = "skyblue";
					}, 1000);
					return;
				}
				if (w2)...