thinkswell · thinkswell · Oct 7, 2023 · Oct 7, 2023
diff --git a/TicTacToeGame/Abhii-07/Index.css b/TicTacToeGame/Abhii-07/Index.css
@@ -0,0 +1,130 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+:root {
+  --cell-size: 100px;
+  --mark-size: calc(var(--cell-size) * 0.5);
+}
+
+body {
+  margin: 0;
+  text-align: center;
+}
+
+.board {
+  width: 100vw;
+  margin: 20px;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  justify-items: center;
+  align-items: center;
+  grid-template-columns: repeat(3, auto);
+}
+
+.board.game-ended, .board.disabled {
+  pointer-events: none;
+}
+
+.load-btn {
+  background: lightskyblue;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  margin: 0 15px;
+  box-shadow: rgb(16 24 28 / 50%) -1px 5px 8px 0px;
+}
+
+.cell {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border: 1px solid blue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+#game-box {
+  display: none;
+}
+
+.cell.x,
+.cell.circle {
+  pointer-events: none;
+}
+
+.cell.x::before,
+.cell.x::after,
+.cell.circle::before {
+  background-color: blue;
+}
+
+.cell.x::before,
+.cell.x::after {
+  content: '';
+  position: absolute;
+  width: calc(var(--mark-size) * 0.15);
+  height: var(--mark-size);
+}
+
+.cell.x::before {
+  transform: rotate(45deg);
+}
+
+.cell.x::after {
+  transform: rotate(-45deg);
+}
+
+.cell.circle::before,
+.cell.circle::after,
+.board.circle .cell:not(.x):not(.circle):hover::before,
+.board.circle .cell:not(.x):not(.circle):hover::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+}
+
+.cell.circle::before,
+.board.circle .cell:not(.x):not(.circle):hover::before {
+  width: var(--mark-size);
+  height: var(--mark-size);
+}
+
+.cell.circle::after,
+.board.circle .cell:not(.x):not(.circle):hover::after {
+  width: calc(var(--mark-size) * 0.7);
+  height: calc(var(--mark-size) * 0.7);
+  background-color: white;
+}
+
+.winning-message {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  font-size: 3rem;
+  flex-direction: column;
+}
+
+.winning-message button {
+  font-size: 3rem;
+  background-color: white;
+  border: 1px solid blue;
+  padding: 0.25em 0.5em;
+  cursor: pointer;
+}
+
+.winning-message button:hover {
+  background-color: blue;
+  color: white;
+  border-color: white;
+}
+
+.winning-message.show {
+  display: flex;
+}
diff --git a/TicTacToeGame/Abhii-07/Index.html b/TicTacToeGame/Abhii-07/Index.html
@@ -0,0 +1,37 @@
+<!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" />
+    <script src="Index.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="/TicTac.png">
+    <link rel="stylesheet" href="Index.css" />
+    <title>Tic Tac Toe</title>
+  </head>
+  <body>
+    <div id="loading-screen">
+      <h3>Play VS</h3>
+      <button class="load-btn" onclick="setRival('human')">Human</button>
+      <span> or </span>
+      <button class="load-btn" onclick="setRival('computer')">Computer</button>
+    </div>
+    <div id="game-box">
+      <div class="board" id="board">
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+        <div class="cell" data-cell></div>
+      </div>
+      <button disabled id="undo-btn">Undo</button>
+      <div class="winning-message" id="wMessage">
+        <div id="text"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/TicTacToeGame/Abhii-07/Index.js b/TicTacToeGame/Abhii-07/Index.js
@@ -0,0 +1,139 @@
+const cellElements = document.querySelectorAll('[data-cell]');
+const undoBtn = document.getElementById('undo-btn');
+const board = document.getElementById('board');
+const wMessageElement = document.getElementById('wMessage');
+const wMessageTextElement = document.getElementById('text');
+const xClass = 'x';
+const circClass = 'circle';
+const combo = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6],
+];
+let circleTurn;
+let lastSelectedCell;
+let rival;
+load();
+
+function load() {
+  circleTurn = false;
+  cellElements.forEach((cell) => {
+    cell.classList.remove(xClass);
+    cell.classList.remove(circClass);
+    cell.removeEventListener('click', handleClick);
+    cell.addEventListener('click', handleClick);
+  });
+  setBoardHoverClass();
+  undoBtn.addEventListener('click', undo);
+  wMessageElement.classList.remove('show');
+}
+
+function undo() {
+  undoBtn.disabled = true;
+  swap();
+  lastSelectedCell.classList.remove('x');
+  lastSelectedCell.classList.remove('circle');
+  lastSelectedCell.childNodes.forEach(function (child) {
+    lastSelectedCell.removeChild(child);
+  });
+}
+
+function handleClick(e, el) {
+  const cell = e.target || el;
+  const currentClass = circleTurn ? circClass : xClass;
+  placeMark(cell, currentClass);
+  if (checkWin(currentClass)) {
+    isEnd(false);
+    return;
+  } else if (isDraw()) {
+    isEnd(true);
+    return;
+  } else {
+    swap();
+    setBoardHoverClass();
+  }
+  if (rival === 'computer' && e) {
+    board.classList.add('disabled');
+    setTimeout(function () {
+      computerMove();
+    }, 500);
+  }
+}
+
+function computerMove() {
+  let pick = Math.round(Math.random() * 8);
+  let selectedCell = cellElements[pick];
+
+  while (
+    selectedCell.classList.value.indexOf('x') > -1 ||
+    selectedCell.classList.value.indexOf('circle') > -1
+  ) {
+    console.log('yes');
+    pick = Math.round(Math.random() * 8);
+    selectedCell = cellElements[pick];
+  }
+  board.classList.remove('disabled');
+  handleClick(false, selectedCell);
+
+}
+
+function setRival(_rival) {
+  rival = _rival;
+  document.getElementById('loading-screen').style.display = 'none';
+  document.getElementById('game-box').style.display = 'block';
+  if (rival === 'computer') {
+    undoBtn.style.display = 'none';
+  }
+}
+
+function isEnd(draw) {
+  if (draw) {
+    wMessageTextElement.innerText = 'Draw';
+  } else {
+    wMessageTextElement.innerText = `Winner is: ${circleTurn ? 'O' : 'X'}`;
+  }
+  wMessageElement.classList.add('show');
+  board.classList.add('game-ended');
+  undoBtn.disabled = true;
+}
+
+function isDraw() {
+  return [...cellElements].every((cell) => {
+    return (
+      cell.classList.contains(xClass) || cell.classList.contains(circClass)
+    );
+  });
+}
+
+function placeMark(cell, currentClass) {
+  lastSelectedCell = cell;
+  undoBtn.disabled = false;
+  cell.classList.add(currentClass);
+}
+
+function swap() {
+  circleTurn = !circleTurn;
+}
+
+function checkWin(currentClass) {
+  return combo.some((combination) => {
+    return combination.every((index) => {
+      return cellElements[index].classList.contains(currentClass);
+    });
+  });
+}
+
+function setBoardHoverClass() {
+  board.classList.remove(xClass);
+  board.classList.remove(circClass);
+  if (circleTurn) {
+    board.classList.add(circClass);
+  } else {
+    board.classList.add(xClass);
+  }
+}
diff --git a/TicTacToeGame/Abhii-07/README.md b/TicTacToeGame/Abhii-07/README.md
@@ -0,0 +1,10 @@
+
+# Tic - Tac - Toe
+
+A simple Tic-Tac-Toe web app made with HTML5, CSS3 and JavaScript.
+
+
+## Demo
+
+https://relaxed-gingersnap-ff29ef.netlify.app
+
diff --git a/TicTacToeGame/Abhii-07/TicTac.png b/TicTacToeGame/Abhii-07/TicTac.png