diff --git a/README.md b/README.md index 7fa4acc..8568f8f 100644 --- 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 `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) + - [DEMO LINK](https://Tata2222.github.io/tictactoe/) diff --git a/src/fonts/Blitz-Script.otf b/src/fonts/Blitz-Script.otf new file mode 100644 index 0000000..315a4ba Binary files /dev/null and b/src/fonts/Blitz-Script.otf differ diff --git a/src/fonts/LeoHand.ttf b/src/fonts/LeoHand.ttf new file mode 100644 index 0000000..1b2c319 Binary files /dev/null and b/src/fonts/LeoHand.ttf differ diff --git a/src/fonts/LeoHand.woff b/src/fonts/LeoHand.woff new file mode 100644 index 0000000..91ac9e4 Binary files /dev/null and b/src/fonts/LeoHand.woff differ diff --git a/src/images/board.jpg b/src/images/board.jpg new file mode 100644 index 0000000..c86f4ca Binary files /dev/null and b/src/images/board.jpg differ diff --git a/src/images/emoticon1.png b/src/images/emoticon1.png new file mode 100644 index 0000000..2dab1d6 Binary files /dev/null and b/src/images/emoticon1.png differ diff --git a/src/index.html b/src/index.html index c1de13f..064a639 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,23 @@ -

Hello Mate Academy

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a..52ccb8b 100644 --- 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
won`; + } + isFirstPlayer = true; + } +} + +button.addEventListener('click', (e) => { + initGame(); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3f..ec1c31a 100644 --- 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 index 0f8860e..429c6c0 100644 --- 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 index aeb006f..5d5ec93 100644 --- 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);