urfu-2017 · Albina-G · Apr 25, 2018 · Apr 25, 2018
diff --git a/css/app.css b/css/app.css
@@ -0,0 +1,10 @@
+.app
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(212, 212, 212, 0.64);
+}
diff --git a/css/game.css b/css/game.css
@@ -0,0 +1,9 @@
+.game
+{
+    width: 500px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/css/game__header.css b/css/game__header.css
@@ -0,0 +1,42 @@
+.game__header
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.game__name
+{
+    font-size: 50px;
+    color: rgb(53, 167, 110);
+    margin: 0;
+    padding: 0;
+}
+
+.game__start
+{
+    width: 470px;
+    background: rgb(64,199,129);
+    height: 50px;
+    color: #fff;
+    text-decoration: none;
+    user-select: none;
+    outline: none;
+    border-radius: 10px;
+    border: none;
+    font-size: 30px;
+    text-shadow: 0 -1px 1px grey;
+    box-shadow: -1px -1px 16px 0px #009b0d98 inset;
+    margin: 5px;
+}
+
+.game__start:hover
+{
+    background: rgb(53, 167, 110); 
+}
+
+.game__start:active
+{
+    background: rgb(33,147,90);
+}
diff --git a/css/game__table.css b/css/game__table.css
@@ -0,0 +1,24 @@
+.cell
+{
+    width: 150px;    
+    height: 150px;
+    float: left;
+    clear: none;
+    background: #fff;
+    margin: 5px;
+    border-radius: 10px;    
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: 100px;
+    color: gray;
+    font-weight: 700;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.cell:nth-child(3n + 1)
+{
+    clear: left;
+}
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,8 @@
+body
+{
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    user-select: none;
+}
diff --git a/css/result.css b/css/result.css
@@ -0,0 +1,23 @@
+.result
+{
+    position: fixed;
+    margin: auto;
+    font-size: 80px;
+    font-weight: 900;
+    display: none;
+}
+
+.result-show
+{
+    display: block;
+}
+
+.result-green
+{
+    color: green;    
+}
+
+.result-red
+{
+    color: red;    
+}
diff --git a/index.html b/index.html
@@ -6,11 +6,38 @@
 
     <!-- подключаем стили, чтобы тесты вяглядели красиво -->
     <link href="node_modules/mocha/mocha.css" rel="stylesheet"/>
+    <link href="css/index.css" rel="stylesheet"/>
+    <link href="css/app.css" rel="stylesheet"/>
+    <link href="css/game.css" rel="stylesheet"/>
+    <link href="css/game__header.css" rel="stylesheet"/>
+    <link href="css/game__table.css" rel="stylesheet"/>
+    <link href="css/result.css" rel="stylesheet"/>
 </head>
 <body>
+<main class="app">
+    <section class="game">
+        <header class="game__header">
+            <dir class="game__name">You VS Computer</dir>
+            <button class="game__start" onclick="newGame()">Начать заново</button>
+        </header>
+        <div class="game__table">
+            <span class="cell" id="1"></span>
+            <span class="cell" id="2"></span>
+            <span class="cell" id="3"></span>
+            <span class="cell" id="4"></span>
+            <span class="cell" id="5"></span>
+            <span class="cell" id="6"></span>
+            <span class="cell" id="7"></span>
+            <span class="cell" id="8"></span>
+            <span class="cell" id="9"></span>
+        </div>
+    </section>
+    <section class="result">
+        Финал!
+    </section>
+</main>
 <!-- относительно этого элемента выводится тестовый отчет -->
 <div id="mocha"></div>
-
 <!-- подключаем файл с логикой определения победителя -->
 <script src="index.js"></script>
 

diff --git a/index.js b/index.js
@@ -1 +1,185 @@
 // Реализуй логику выбора победителя в этом файле
+const busyCells = [];
+let table = {};
+let isWinner = 0;
+const cell = document.querySelectorAll('.cell');
+newGame();
+
+function newGame() {
+    hideResult();
+    busyCells.length = 0;
+    table = {
+        row1: {
+            count: 0,
+            position: [1, 2, 3]
+        },
+        row2: {
+            count: 0,
+            position: [4, 5, 6]
+        },
+        row3: {
+            count: 0,
+            position: [7, 8, 9]
+        },
+        column1: {
+            count: 0,
+            position: [1, 4, 7]
+        },
+        column2: {
+            count: 0,
+            position: [2, 5, 8]
+        },
+        column3: {
+            count: 0,
+            position: [3, 6, 9]
+        },
+        d1: {
+            count: 0,
+            position: [1, 5, 9]
+        },
+        d2: {
+            count: 0,
+            position: [3, 5, 7]
+        },
+    };
+    isWinner = 0;
+}
+
+for (let index = 0; index < cell.length; index++) {
+    clickOnCell(index);
+}
+
+function clickOnCell(index) {
+    cell[index].addEventListener('click', (event) => {
+        if (event.target.innerHTML !== '') {
+            alert('Занято!');
+
+            return;
+        }
+        event.target.innerHTML = 'X';
+        const idCell = parseInt(event.target.id);
+        busyCells.push(idCell);
+        isWinner = winner(idCell, 'Игрок');
+        if(isWinner !== 1 && busyCells.length < 8)
+            computer();
+        if(busyCells.length === 9 && isWinner !== 1)
+            noneWinner();
+    });
+}
+
+function winner(id, user) {
+    saveWinner(id, user);
+    for (let elements in table) {
+        if (table[elements].count === 3) {
+            showResult('Вы победили!', user);
+            winnerBegin();
+            return 1;
+        }
+        if (table[elements].count === -3) {
+            showResult('Победил компютер', user);
+            winnerBegin();
+            return 1;
+        }
+    }
+    return 0;
+}
+
+function saveWinner(id, user) {
+    for (let elements in table) {
+        let index = table[elements].position.indexOf(id);
+        if (index !== -1) {
+            table[elements].count += user === 'Игрок' ? 1 :  -1;
+            table[elements].position.splice(index, 1);
+        }
+    }
+}
+
+function showResult(text, user) {
+    const result = document.getElementsByClassName('result');
+    result[0].innerHTML = text;
+    let color = user === 'Игрок' ? 'result-green' :  'result-red';
+    result[0].classList.add(color);
+    result[0].classList.add('result-show');
+}
+
+function hideResult() {
+    const result = document.getElementsByClassName('result');
+    result[0].classList.remove('result-show');
+    result[0].classList.remove('result-green');
+    result[0].classList.remove('result-red');
+    for (let index = 0; index < cell.length; index++) {
+        cell[index].innerHTML = '';
+    }
+}
+
+function winnerBegin() {
+    setTimeout(function(){
+        newGame();
+    }, 1000);
+}
+
+function noneWinner() {
+    setTimeout(function(){
+        showResult('Ничья!', 'Ничья');
+    }, 500);
+
+    setTimeout(function(){
+        newGame();
+    }, 1000);
+}
+
+function computer() {
+    let number;
+    let optimal = [];
+    for (let elements in table) {
+        if (table[elements].count === -2) {
+            optimal.unshift(table[elements].position[0]);
+        }
+        if (table[elements].count === 2) {
+            optimal.push(table[elements].position[0]);
+        }
+    }
+    let str = '';
+    optimal.forEach(item => {
+        str += item;
+    });
+    if (optimal.length !== 0) {
+        number = optimal[0];
+        cell[number-1].innerHTML = 'O';
+        busyCells.push(number);
+        winner(number, 'Компьютер');
+        return;
+    }
+
+    $flag = false;
+    busyCells.sort();
+    while(true) {
+        if(busyCells.length === 9)
+        {
+            noneWinner();
+        }
+
+        number = getRandomInRange(1, 9);
+
+        for (let i = 0; i < busyCells.length; i++) {
+            if(number === busyCells[i])
+                $flag = true;
+        }
+
+        if($flag === false)
+            break;
+        else
+        {
+            $flag = false;
+            continue;
+        }
+    }
+    cell[number-1].innerHTML = 'O';
+
+    busyCells.push(number);
+    winner(number, 'Компьютер');
+}
+
+function getRandomInRange(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}