diff --git a/README.md b/README.md index 7fa4acc..4fd811f 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://cutiekate.github.io/gulp-template/) diff --git a/src/index.html b/src/index.html index c1de13f..01c2d33 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,20 @@ -

Hello Mate Academy

+

Tic Tac Toe

+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a..2a64a44 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,58 @@ 'use strict'; + +const area = document.querySelector('.area'); +let move = 0; + +area.addEventListener('click', function(e) { + if (e.target.innerHTML === 'X' || e.target.innerHTML === 'O') { + return; + } + + if (move % 2 === 0) { + e.target.innerHTML = 'X'; + } else { + e.target.innerHTML = 'O'; + } + move++; + check(); +}); + +function check() { + const cells = document.getElementsByClassName('area__cell'); + const arr = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], + ]; + + for (let i = 0; i < arr.length; i++) { + if (cells[arr[i][0]].innerHTML === 'X' && cells[arr[i][1]].innerHTML === 'X' + && cells[arr[i][2]].innerHTML === 'X') { + say('Победили хрестики!'); + } else if (cells[arr[i][0]].innerHTML === 'O' + && cells[arr[i][1]].innerHTML === 'O' + && cells[arr[i][2]].innerHTML === 'O') { + say('Победили нолики!'); + } + } + + for (let i = 0; i < cells.length; i++) { + if (cells[i].innerHTML !== 'X' && cells[i].innerHTML !== 'O') { + return; + } + } + + say('Ничья!'); + + function say(what) { + setTimeout(() => { + alert(what); + location.reload(); + }, 50); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..baeffc9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -5,3 +5,34 @@ body { background: $c-gray; } + +h1 { + text-align: center; +} + +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.area { + width: 450px; + height: 450px; + background-color: cornflowerblue; + display: flex; + flex-wrap: wrap; + + &__cell { + width: 150px; + height: 150px; + border: 1px solid lightgray; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + font-size: 60px; + } +}