From 841714c9a64d3c12b0639b414983375c31214ddb Mon Sep 17 00:00:00 2001
From: Matvey <matveym20022002@gail.com>
Date: Wed, 6 Oct 2021 02:05:08 +0500
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BE=D0=BB=D1=8F=203=20=D0=BD?=
 =?UTF-8?q?=D0=B0=203?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js   | 68 ++++++++++++++++++++++++++++++++++++++++++++++++------
 styles.css | 19 ++++++++-------
 2 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/index.js b/index.js
index 7553909..8631ed0 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,13 @@
 const CROSS = 'X';
 const ZERO = 'O';
 const EMPTY = ' ';
+let field = [
+    [null,null,null],
+    [null,null,null],
+    [null,null,null]
+];
+let move = 0; 
+let isWin = false;
 
 const container = document.getElementById('fieldWrapper');
 
@@ -26,17 +33,56 @@ function renderGrid (dimension) {
     }
 }
 
-function cellClickHandler (row, col) {
-    // Пиши код тут
+function cellClickHandler (row, col) {  
+    if (!isWin) {
+        if (field[row][col] === null) {
+        move % 2 === 0 ? (renderSymbolInCell(CROSS, row, col), field[row][col] = CROSS) : (renderSymbolInCell(ZERO, row, col), field[row][col] = ZERO);
+        move++;;
+        }
+
+        checkWinner();
+
+        if (move == 9 && !isWin) {
+            alert('Победила дружба');
+        }
+    }
+    
+    //console.log(field);
     console.log(`Clicked on cell: ${row}, ${col}`);
+}
 
+function checkWinner () {
+    for (let i = 0; i <= 3; i = i + 2) {
+        if (field[0][i] == field[1][1] && field[1][1] == field[2][2-i] && field[0][i] != null) {
+            renderSymbolInCell(field[i][0], 0, i, 'rgb(240, 17, 17)');
+            renderSymbolInCell(field[i][0], 1, 1, 'rgb(240, 17, 17)');
+            renderSymbolInCell(field[i][0], 2, 2-i, 'rgb(240, 17, 17)');
+            isWin = true;
+            alert(`Выиграл игрок использующий ${field[0][i]}`);
+            
+        }
+    }
+
+    for (let i = 0; i < 3; i++) {
+        if (field[i][0] == field[i][1] && field[i][1] == field[i][2] && field[i][0] != null) {
+            renderSymbolInCell(field[i][0], i, 0, 'rgb(240, 17, 17)');
+            renderSymbolInCell(field[i][0], i, 1, 'rgb(240, 17, 17)');
+            renderSymbolInCell(field[i][0], i, 2, 'rgb(240, 17, 17)');
+            isWin = true;
+            alert(`Выиграл игрок использующий ${field[i][0]}`);
+        }
 
-    /* Пользоваться методом для размещения символа в клетке так:
-        renderSymbolInCell(ZERO, row, col);
-     */
+        if (field[0][i] == field[1][i] && field[1][i] == field[2][i] && field[0][i] != null) {
+            renderSymbolInCell(field[1][i], 0, i, 'rgb(240, 17, 17)');
+            renderSymbolInCell(field[1][i], 1, i, 'rgb(240, 17, 17)');
+            renderSymbolInCell(field[1][i], 2, i, 'rgb(240, 17, 17)');
+            isWin = true;
+            alert(`Выиграл игрок использующий ${field[1][i]}`);
+        }
+    }
 }
 
-function renderSymbolInCell (symbol, row, col, color = '#333') {
+function renderSymbolInCell (symbol, row, col, color = 'rgb(255, 252, 57)') {
     const targetCell = findCell(row, col);
 
     targetCell.textContent = symbol;
@@ -54,7 +100,14 @@ function addResetListener () {
 }
 
 function resetClickHandler () {
-    console.log('reset!');
+    startGame(3);
+    move = 0;
+    isWin = false;
+    field = [
+        [null,null,null],
+        [null,null,null],
+        [null,null,null]
+    ];
 }
 
 
@@ -87,3 +140,4 @@ function testDraw () {
 function clickOnCell (row, col) {
     findCell(row, col).click();
 }
+
diff --git a/styles.css b/styles.css
index c9aaf0b..83d316a 100644
--- a/styles.css
+++ b/styles.css
@@ -7,8 +7,9 @@ body {
     margin: 40px auto;
     /*display: inline-block;*/
     width: auto;
-    background-color: lightgoldenrodyellow;
-    padding: 10px;
+    background-color: rgb(43, 43, 42);
+    padding: 1px;
+    border-radius: 10px;
 }
 
 .table {
@@ -22,7 +23,7 @@ body {
     font-size: 24px;
     font-family: "Consolas", monospace;
     text-align: center;
-    border: 1px solid #333;
+    border: 1px solid rgb(255, 255, 255);
     cursor: pointer;
 }
 
@@ -44,10 +45,12 @@ body {
 
 .resetButton {
     display: block;
-    margin: 20px auto;
+    margin: 5px auto;
     padding: 10px;
     background: none;
-    font-size: 16px;
-    border: 3px solid orange;
-    border-radius: 5px;
-}
\ No newline at end of file
+    background-color: rgb(43, 43, 42);
+    font-size: 20px;
+    border: 2px solid orange;
+    border-radius: 10px;
+    color: orange;
+}