mate-academy · Tata2222 · Apr 20, 2020 · Apr 20, 2020 · Apr 22, 2020
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
 # Base layout template with Gulp, SCSS and Stylelint
 1. Create a repo using this template
 1. Replace `<your_account>` and `<repo_name>` with your Github username and the new repo name
-    - [DEMO LINK](https://<your_account>.github.io/<repo_name>/)
+    - [DEMO LINK](https://Tata2222.github.io/tictactoe/)
diff --git a/src/fonts/Blitz-Script.otf b/src/fonts/Blitz-Script.otf
diff --git a/src/fonts/LeoHand.ttf b/src/fonts/LeoHand.ttf
diff --git a/src/fonts/LeoHand.woff b/src/fonts/LeoHand.woff
diff --git a/src/images/board.jpg b/src/images/board.jpg
diff --git a/src/images/emoticon1.png b/src/images/emoticon1.png
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,23 @@
     <link rel="stylesheet" href="./styles/main.css">
   </head>
   <body>
-    <h1>Hello Mate Academy</h1>
+    <div class="board">
+      <div class="feild">
+        <div class="cell cell_1"></div>
+        <div class="cell cell_2"></div>
+        <div class="cell cell_3"></div>
+        <div class="cell cell_4"></div>
+        <div class="cell cell_5"></div>
+        <div class="cell cell_6"></div>
+        <div class="cell cell_7"></div>
+        <div class="cell cell_8"></div>
+        <div class="cell cell_9"></div>
+      </div>
+      <div class="message">
+        <div class="emoticon"></div>
+      </div>
+      <button class="btn">Let's play</button>
+    </div>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,129 @@
 'use strict';
+
+const feild = document.querySelector('.feild');
+const button = document.querySelector('.btn');
+const message = document.querySelector('.message');
+const crosses = [];
+const zeros = [];
+const filledEls = [];
+let isFirstPlayer = true;
+
+feild.style.visibility = 'hidden';
+
+const goalToWin = [
+  [1, 2, 3],
+  [1, 4, 7],
+  [1, 5, 9],
+  [2, 5, 8],
+  [3, 6, 9],
+  [3, 5, 7],
+  [4, 5, 6],
+  [7, 8, 9],
+];
+
+function initGame() {
+  crosses.length = 0;
+  zeros.length = 0;
+  filledEls.length = 0;
+  isFirstPlayer = true;
+  message.innerHTML = '';
+  feild.style.visibility = 'visible';
+
+  [...feild.children].forEach(child => {
+    child.innerHTML = '';
+  });
+
+  feild.addEventListener('click', setMark);
+
+  function checked(arr) {
+    const isSuccess = goalToWin.findIndex(item =>
+      item.every(el => arr.includes(el)));
+
+    if (isSuccess !== -1) {
+      feild.removeEventListener('click', setMark);
+      crossResult(isSuccess);
+    }
+
+    if ((isSuccess === -1) && (filledEls.length === 9)) {
+      setTimeout(() => showResult(true), 500);
+    }
+  }
+
+  function crossResult(ind) {
+    const hCrossedEls = [0, 6, 7];
+    const vCrossedEls = [1, 3, 4];
+    const indexFirstEl = goalToWin[ind][0] - 1;
+    const hr = document.createElement('hr');
+
+    if (hCrossedEls.includes(ind)) {
+      hr.classList.add('horisontal');
+    }
+
+    if (vCrossedEls.includes(ind)) {
+      hr.classList.add('vertical');
+    }
+
+    if (ind === 2) {
+      hr.classList.add('crossed1_9');
+    }
+
+    if (ind === 5) {
+      hr.classList.add('crossed3_7');
+    }
+
+    const firstElement = [...feild.children][indexFirstEl];
+
+    firstElement.prepend(hr);
+
+    setTimeout(() => showResult(false), 500);
+  }
+
+  function setMark(e) {
+    const target = e.target;
+
+    if (!target.matches('.cell')) {
+      return;
+    }
+
+    for (let i = 0; i < [...feild.children].length; i++) {
+      if ((target === [...feild.children][i]) && (!filledEls.includes(i + 1))) {
+        if (isFirstPlayer) {
+          if (zeros.includes(i + 1)) {
+            return;
+          }
+          target.innerHTML = 'X';
+          crosses.push(i + 1);
+          filledEls.push(i + 1);
+          checked(crosses);
+        } else {
+          if (crosses.includes(i + 1)) {
+            return;
+          }
+          target.innerHTML = 'O';
+          zeros.push(i + 1);
+          filledEls.push(i + 1);
+          checked(zeros);
+        }
+
+        isFirstPlayer = !isFirstPlayer;
+      }
+    }
+  }
+
+  function showResult(arg) {
+    feild.style.visibility = 'hidden';
+
+    if (arg) {
+      message.innerHTML = `Dead heat`;
+    } else {
+      isFirstPlayer
+        ? message.innerHTML = `Second player won`
+        : message.innerHTML = `First player <br/>won`;
+    }
+    isFirstPlayer = true;
+  }
+}
+
+button.addEventListener('click', (e) => {
+  initGame();
+});
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -4,3 +4,18 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: "LeoHand";
+  src: url("../fonts/LeoHand.woff") format("woff");
+  src: url("../fonts/LeoHand.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Blitz-Script";
+  src: url("../fonts/Blitz-Script") format("otf");
+  font-weight: 500;
+  font-style: normal;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3,5 +3,127 @@
 @import "typography";
 
 body {
-  background: $c-gray;
+  background: $c-board;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  font-family: "LeoHand", sans-serif;
+  color: white;
+  font-size: 90px;
+}
+
+.board {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 810px;
+  width: 600px;
+  align-self: center;
+  background-image: url(./../images/board.jpg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: auto;
+}
+
+.feild {
+  display: grid;
+  grid-template: repeat(3, 160px)/repeat(3, 160px);
+  transform: skewX(-10deg) ;
+  align-self: center;
+  margin: auto;
+}
+
+.cell {
+  position: relative;
+  text-align: center;
+}
+
+.cell_1,
+.cell_2,
+.cell_4,
+.cell_5,
+.cell_3,
+.cell_6 {
+  border-bottom: 10px solid white;
+}
+
+.cell_1,
+.cell_2,
+.cell_4,
+.cell_5,
+.cell_7,
+.cell_8 {
+  border-right: 10px solid white;
+}
+
+.btn {
+  height: 100px;
+  background: none ;
+  color: white;
+  font-size: 90px;
+  margin-bottom: 100px;
+  justify-self: end;
+  font-family: "Blitz-Script", "LeoHand", sans-serif;
+  border-style: none;
+  outline: none;
+  transition: all 0.3s ease;
+  &:hover {
+    font-size: 95px;
+  }
+}
+
+hr {
+  width: 480px;
+  height: 5px;
+  background-color: white;
+  margin: 0;
+}
+
+.horisontal {
+  position: absolute;
+  top: 50%;
+  width: 480px;
+  align-self: center;
+
+}
+
+.crossed1_9 {
+  position: absolute;
+  width: 665px;
+  transform: rotate(45deg);
+  transform-origin: left top 0;
+}
+
+.crossed3_7 {
+  position: absolute;
+  right: 15px;
+  width: 665px;
+  transform: rotate(-45deg);
+  transform-origin: right top 0;
+}
+
+.vertical {
+  position: absolute;
+  width: 480px;
+  left: 50%;
+  transform: rotate(90deg);
+  transform-origin: left top 0;
+}
+
+.message {
+  position: absolute;
+  width: 100%;
+  top: 100px;
+  margin: auto;
+  text-align: center;
+}
+
+.emoticon {
+  background-image: url(../images/emoticon1.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 400px;
+  height: 400px;
+  margin: auto;
 }
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -1 +1,2 @@
 $c-gray: #eee;
+$c-board: rgba(252, 234, 165, 1);