Мехряков Матвей

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();
 }
+

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;
-}
+    background-color: rgb(43, 43, 42);
+    font-size: 20px;
+    border: 2px solid orange;
+    border-radius: 10px;
+    color: orange;
+}