├── sass
    ├── main.scss
    ├── base
    │   └── _reset.scss
    └── components
    │   └── _game.scss
├── other
    ├── tic-icon.ico
    └── symbol-defs.svg
├── README.md
├── css
    ├── main.min.css.map
    ├── main.css.map
    ├── main.min.css
    └── main.css
├── index.html
└── script.js


/sass/main.scss:
--------------------------------------------------------------------------------
1 | @import "./base/reset";
2 | @import "./components/game";       
3 | 


--------------------------------------------------------------------------------
/other/tic-icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xrsQugi/tic-tac-toe/HEAD/other/tic-icon.ico


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tic-tac-toe
2 | Tic tac toe game for 2 players
3 | 
4 | You have opportunity to play with your friends and see stathistic above the game board. 
5 | After win you will see winning combination or in case of draw all fields will highlight
6 | 


--------------------------------------------------------------------------------
/sass/base/_reset.scss:
--------------------------------------------------------------------------------
 1 | h1,
 2 | h2,
 3 | h3,
 4 | h4,
 5 | h5,
 6 | h6,
 7 | p {
 8 |   margin: 0;
 9 |   padding: 0;
10 | }
11 | 
12 | a{
13 |     text-decoration: none;
14 | }
15 | 
16 | ul {
17 |   list-style: none;
18 |   padding-left: 0;
19 |   margin: 0;
20 | }
21 | 
22 | *{
23 |     margin: 0;
24 |     padding: 0;
25 | }
26 | 
27 | body{
28 |     margin: 0;
29 |     font-family: 'Nunito', sans-serif;
30 |     font-style: normal;
31 |     font-weight: 400;
32 | }


--------------------------------------------------------------------------------
/other/symbol-defs.svg:
--------------------------------------------------------------------------------
 1 | <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 | <defs>
 3 | <symbol id="icon-cross" viewBox="0 0 32 32">
 4 | <path d="M2.462 32l-2.462-2.462 13.538-13.538-13.538-13.538 2.462-2.462 13.538 13.538 13.538-13.538 2.462 2.462-13.538 13.538 13.538 13.538-2.462 2.462-13.538-13.538-13.538 13.538z"></path>
 5 | </symbol>
 6 | <symbol id="icon-circle" viewBox="0 0 32 32">
 7 | <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z"></path>
 8 | </symbol>
 9 | </defs>
10 | </svg>


--------------------------------------------------------------------------------
/css/main.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../sass/base/_reset.scss","../sass/components/_game.scss"],"names":[],"mappings":"AAAA,oBAOE,QAAA,CACA,SAAA,CAGF,EACI,oBAAA,CAGJ,GACE,eAAA,CACA,cAAA,CACA,QAAA,CAGF,EACI,QAAA,CACA,SAAA,CAGJ,KACI,QAAA,CACA,+BAAA,CACA,iBAAA,CACA,eAAA,CC9BJ,GACI,iBAAA,CACA,aAAA,CACA,cAAA,CACA,eAAA,CAGJ,eACI,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,eAAA,CAGJ,cACI,WAAA,CACA,YAAA,CACA,iBAAA,CACA,wBAAA,CACA,kBAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,kBAAA,CACA,QAAA,CAEA,2BACI,WAAA,CACA,YAAA,CACA,wBAAA,CACA,kBAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,qBAAA,CACA,cAAA,CACA,YAAA,CACA,UAAA,CACA,OAAA,CAIR,YACI,cAAA,CACA,aAAA,CACA,aAAA,CAGJ,eACI,WAAA,CACA,cAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,wBAAA,CACA,QAAA,CACA,kBAAA,CAGJ,MACI,WAAA,CACA,YAAA,CACA,wBAAA,CACA,kBAAA,CACA,cAAA,CACA,UAAA,CACA,eAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,iEAAA,CAEA,YACI,UAAA,CACA,wBAAA,CAGJ,UACI,UAAA,CACA,WAAA,CACA,SAAA,CAIR,YACI,WAAA,CACA,WAAA,CACA,wBAAA,CACA,kBAAA,CACA,cAAA,CACA,UAAA,CACA,aAAA,CAGJ,KACI,wBAAA,CAEA,WACI,wBAAA,CAIR,MACI,wBAAA,CAEA,YACI,wBAAA,CAKR,2DACI,GACI,cAAA,CAGJ,cACI,WAAA,CACA,WAAA,CACA,kBAAA,CAEA,2BACI,UAAA,CACA,WAAA,CACA,kBAAA,CACA,cAAA,CAIR,YACI,cAAA,CAGJ,eACI,WAAA,CACA,cAAA,CACA,QAAA,CACA,kBAAA,CAEA,qBACI,UAAA,CACA,WAAA,CACA,kBAAA,CACA,cAAA,CAEA,yBACI,UAAA,CACA,WAAA,CAKZ,YACI,WAAA,CACA,WAAA,CACA,kBAAA,CACA,cAAA,CACA,UAAA,CAAA","file":"main.min.css"}


--------------------------------------------------------------------------------
/css/main.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../sass/base/_reset.scss","main.css","../sass/components/_game.scss"],"names":[],"mappings":"AAAA;;;;;;;EAOE,SAAA;EACA,UAAA;ACCF;;ADEA;EACI,qBAAA;ACCJ;;ADEA;EACE,gBAAA;EACA,eAAA;EACA,SAAA;ACCF;;ADEA;EACI,SAAA;EACA,UAAA;ACCJ;;ADEA;EACI,SAAA;EACA,iCAAA;EACA,kBAAA;EACA,gBAAA;ACCJ;;AC/BA;EACI,kBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;ADkCJ;;AC/BA;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;ADkCJ;;AC/BA;EACI,YAAA;EACA,aAAA;EACA,kBAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;ADkCJ;AChCI;EACI,YAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,eAAA;EACA,aAAA;EACA,cAAA;EACA,QAAA;ADkCR;;AC9BA;EACI,eAAA;EACA,cAAA;EACA,cAAA;ADiCJ;;AC9BA;EACI,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,yBAAA;EACA,SAAA;EACA,mBAAA;ADiCJ;;AC9BA;EACI,YAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,qEAAA;ADiCJ;AC/BI;EACI,WAAA;EACA,yBAAA;ADiCR;AC9BI;EACI,WAAA;EACA,YAAA;EACA,aAAA;ADgCR;;AC5BA;EACI,YAAA;EACA,YAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,cAAA;AD+BJ;;AC5BA;EACI,yBAAA;AD+BJ;AC7BI;EACI,yBAAA;AD+BR;;AC3BA;EACI,yBAAA;AD8BJ;AC5BI;EACI,yBAAA;AD8BR;;AC1BA,eAAA;AACA;EACI;IACI,eAAA;ED6BN;EC1BE;IACI,YAAA;IACA,YAAA;IACA,mBAAA;ED4BN;EC1BM;IACI,WAAA;IACA,YAAA;IACA,mBAAA;IACA,eAAA;ED4BV;ECxBE;IACI,eAAA;ED0BN;ECvBE;IACI,YAAA;IACA,eAAA;IACA,SAAA;IACA,mBAAA;EDyBN;ECvBM;IACI,WAAA;IACA,YAAA;IACA,mBAAA;IACA,eAAA;EDyBV;ECvBU;IACI,WAAA;IACA,YAAA;EDyBd;ECpBE;IACI,YAAA;IACA,YAAA;IACA,mBAAA;IACA,eAAA;IACA,cAAA;EDsBN;AACF","file":"main.css"}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Tic Tac Toe</title>
 8 |     <link rel="icon" href="./other/tic-icon.ico">
 9 |     <link rel="stylesheet" href="./css/main.css">
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
13 | </head>
14 | <body>
15 |     <h1>Tic Tac Toe</h1>
16 |     <div id="gameContainer">
17 |         <div class="player-cards">
18 |             <div class="player-card">
19 |               <p>X wins:</p>
20 |               <p class="x-win-count">0</p>
21 |             </div>
22 |             <div class="player-card">
23 |                 <p>Draws:</p>
24 |                 <p class="draw-count">0</p>
25 |               </div>
26 |             <div class="player-card">
27 |                 <p>O wins:</p>
28 |                 <p class="o-win-count">0</p>
29 |             </div>
30 |         </div>
31 |         <h2 id="statusText"></h2>
32 |         <div id="cellContainer">
33 |             <div cellIndex="0" class="cell"></div>
34 |             <div cellIndex="1" class="cell"></div>
35 |             <div cellIndex="2" class="cell"></div>
36 |             <div cellIndex="3" class="cell"></div>
37 |             <div cellIndex="4" class="cell"></div>
38 |             <div cellIndex="5" class="cell"></div>
39 |             <div cellIndex="6" class="cell"></div>
40 |             <div cellIndex="7" class="cell"></div>
41 |             <div cellIndex="8" class="cell"></div>
42 |         </div>
43 |         <button id="restartBtn">Restart</button>
44 |     </div>
45 |     <script src="script.js"></script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/css/main.min.css:
--------------------------------------------------------------------------------
1 | h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}a{text-decoration:none}ul{list-style:none;padding-left:0;margin:0}*{margin:0;padding:0}body{margin:0;font-family:"Nunito",sans-serif;font-style:normal;font-weight:400}h1{text-align:center;color:#252525;font-size:60px;margin-top:20px}#gameContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:20px}.player-cards{width:440px;height:120px;padding:10px 10px;background-color:#151515;border-radius:25px;display:flex;align-items:center;justify-content:center;flex-direction:row;gap:10px}.player-cards .player-card{width:140px;height:120px;background-color:#252525;border-radius:25px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:20px;display:flex;color:#fff;gap:5px}#statusText{font-size:40px;color:#252525;margin:20px 0}#cellContainer{width:460px;padding:10px 0;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;background-color:#151515;gap:10px;border-radius:25px}.cell{width:140px;height:140px;background-color:#252525;border-radius:25px;cursor:pointer;color:#fff;font-size:120px;display:flex;align-items:center;justify-content:center;transition:scale .4s ease-in-out,background-color .4s ease-in-out}.cell:hover{scale:1.03;background-color:#4d4d4d}.cell svg{width:80px;height:80px;fill:#fff}#restartBtn{width:340px;height:80px;background-color:#151515;border-radius:25px;font-size:35px;color:#fff;margin:20px 0}.win{background-color:#2d412d}.win:hover{background-color:#2d412d}.draw{background-color:#374d5c}.draw:hover{background-color:#374d5c}@media screen and (min-width: 375px)and (max-width: 480px){h1{font-size:40px}.player-cards{width:300px;height:70px;border-radius:15px}.player-cards .player-card{width:90px;height:70px;border-radius:15px;font-size:18px}#statusText{font-size:30px}#cellContainer{width:310px;padding:10px 0;gap:10px;border-radius:15px}#cellContainer .cell{width:90px;height:90px;border-radius:15px;font-size:75px}#cellContainer .cell svg{width:50px;height:50px}#restartBtn{width:210px;height:50px;border-radius:15px;font-size:26px;color:#fff}}/*# sourceMappingURL=main.min.css.map */


--------------------------------------------------------------------------------
/sass/components/_game.scss:
--------------------------------------------------------------------------------
  1 | h1{
  2 |     text-align: center;
  3 |     color: #252525;
  4 |     font-size: 60px;
  5 |     margin-top: 20px;
  6 | }
  7 | 
  8 | #gameContainer{
  9 |     display: flex;
 10 |     flex-direction: column;
 11 |     align-items: center;
 12 |     justify-content: center;
 13 |     margin-top: 20px;
 14 | }
 15 | 
 16 | .player-cards{  
 17 |     width: 440px;
 18 |     height: 120px;
 19 |     padding: 10px 10px;
 20 |     background-color: #151515;
 21 |     border-radius: 25px;
 22 |     display: flex;
 23 |     align-items: center;
 24 |     justify-content: center;
 25 |     flex-direction: row;
 26 |     gap: 10px;
 27 | 
 28 |     .player-card{
 29 |         width: 140px;
 30 |         height: 120px;
 31 |         background-color: #252525;
 32 |         border-radius: 25px;
 33 |         display: flex;
 34 |         align-items: center;
 35 |         justify-content: center;
 36 |         flex-direction: column;
 37 |         font-size: 20px;
 38 |         display: flex;
 39 |         color: #FFFFFF;
 40 |         gap: 5px;
 41 |     }
 42 | }
 43 | 
 44 | #statusText{
 45 |     font-size: 40px;
 46 |     color: #252525;
 47 |     margin: 20px 0;
 48 | }
 49 | 
 50 | #cellContainer{
 51 |     width: 460px;
 52 |     padding: 10px 0;
 53 |     display: flex;
 54 |     flex-direction: row;
 55 |     justify-content: center;
 56 |     flex-wrap: wrap;
 57 |     background-color: #151515;
 58 |     gap: 10px;
 59 |     border-radius: 25px;
 60 | }
 61 | 
 62 | .cell{
 63 |     width: 140px;
 64 |     height: 140px;
 65 |     background-color: #252525;
 66 |     border-radius: 25px;
 67 |     cursor: pointer;
 68 |     color: #FFFFFF;
 69 |     font-size: 120px;
 70 |     display: flex;
 71 |     align-items: center;
 72 |     justify-content: center;
 73 |     transition: scale .4s ease-in-out, background-color .4s ease-in-out;
 74 | 
 75 |     &:hover{
 76 |         scale: 1.03;
 77 |         background-color: #4D4D4D;
 78 |     }
 79 | 
 80 |     svg{
 81 |         width: 80px;
 82 |         height: 80px;
 83 |         fill: #FFFFFF;
 84 |     }
 85 | }
 86 | 
 87 | #restartBtn{
 88 |     width: 340px;
 89 |     height: 80px;
 90 |     background-color: #151515;
 91 |     border-radius: 25px;
 92 |     font-size: 35px;
 93 |     color: #FFFFFF;
 94 |     margin: 20px 0;
 95 | }
 96 | 
 97 | .win {
 98 |     background-color: #2D412D;
 99 | 
100 |     &:hover{
101 |         background-color: #2D412D;
102 |     }
103 | }
104 | 
105 | .draw{
106 |     background-color: #374D5C;
107 | 
108 |     &:hover{
109 |         background-color: #374D5C;
110 |     }
111 | }
112 | 
113 | /* SMARTPHONE */
114 | @media screen and (min-width: 375px) and (max-width: 480px){
115 |     h1{
116 |         font-size: 40px;
117 |     }
118 |     
119 |     .player-cards{
120 |         width: 300px;
121 |         height: 70px;
122 |         border-radius: 15px;
123 | 
124 |         .player-card{
125 |             width: 90px;
126 |             height: 70px;
127 |             border-radius: 15px;
128 |             font-size: 18px;
129 |         }
130 |     }
131 |     
132 |     #statusText{
133 |         font-size: 30px;
134 |     }
135 | 
136 |     #cellContainer{
137 |         width: 310px;
138 |         padding: 10px 0;
139 |         gap: 10px;
140 |         border-radius: 15px;
141 | 
142 |         .cell{
143 |             width: 90px;
144 |             height: 90px;
145 |             border-radius: 15px;
146 |             font-size: 75px;
147 | 
148 |             svg{
149 |                 width: 50px;
150 |                 height: 50px;
151 |             }
152 |         }
153 |     }
154 | 
155 |     #restartBtn{
156 |         width: 210px;
157 |         height: 50px;
158 |         border-radius: 15px;
159 |         font-size: 26px;
160 |         color: #FFFFFF;
161 |     }
162 | }


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | h1,
  2 | h2,
  3 | h3,
  4 | h4,
  5 | h5,
  6 | h6,
  7 | p {
  8 |   margin: 0;
  9 |   padding: 0;
 10 | }
 11 | 
 12 | a {
 13 |   text-decoration: none;
 14 | }
 15 | 
 16 | ul {
 17 |   list-style: none;
 18 |   padding-left: 0;
 19 |   margin: 0;
 20 | }
 21 | 
 22 | * {
 23 |   margin: 0;
 24 |   padding: 0;
 25 | }
 26 | 
 27 | body {
 28 |   margin: 0;
 29 |   font-family: "Nunito", sans-serif;
 30 |   font-style: normal;
 31 |   font-weight: 400;
 32 | }
 33 | 
 34 | h1 {
 35 |   text-align: center;
 36 |   color: #252525;
 37 |   font-size: 60px;
 38 |   margin-top: 20px;
 39 | }
 40 | 
 41 | #gameContainer {
 42 |   display: flex;
 43 |   flex-direction: column;
 44 |   align-items: center;
 45 |   justify-content: center;
 46 |   margin-top: 20px;
 47 | }
 48 | 
 49 | .player-cards {
 50 |   width: 440px;
 51 |   height: 120px;
 52 |   padding: 10px 10px;
 53 |   background-color: #151515;
 54 |   border-radius: 25px;
 55 |   display: flex;
 56 |   align-items: center;
 57 |   justify-content: center;
 58 |   flex-direction: row;
 59 |   gap: 10px;
 60 | }
 61 | .player-cards .player-card {
 62 |   width: 140px;
 63 |   height: 120px;
 64 |   background-color: #252525;
 65 |   border-radius: 25px;
 66 |   display: flex;
 67 |   align-items: center;
 68 |   justify-content: center;
 69 |   flex-direction: column;
 70 |   font-size: 20px;
 71 |   display: flex;
 72 |   color: #FFFFFF;
 73 |   gap: 5px;
 74 | }
 75 | 
 76 | #statusText {
 77 |   font-size: 40px;
 78 |   color: #252525;
 79 |   margin: 20px 0;
 80 | }
 81 | 
 82 | #cellContainer {
 83 |   width: 460px;
 84 |   padding: 10px 0;
 85 |   display: flex;
 86 |   flex-direction: row;
 87 |   justify-content: center;
 88 |   flex-wrap: wrap;
 89 |   background-color: #151515;
 90 |   gap: 10px;
 91 |   border-radius: 25px;
 92 | }
 93 | 
 94 | .cell {
 95 |   width: 140px;
 96 |   height: 140px;
 97 |   background-color: #252525;
 98 |   border-radius: 25px;
 99 |   cursor: pointer;
100 |   color: #FFFFFF;
101 |   font-size: 120px;
102 |   display: flex;
103 |   align-items: center;
104 |   justify-content: center;
105 |   transition: scale 0.4s ease-in-out, background-color 0.4s ease-in-out;
106 | }
107 | .cell:hover {
108 |   scale: 1.03;
109 |   background-color: #4D4D4D;
110 | }
111 | .cell svg {
112 |   width: 80px;
113 |   height: 80px;
114 |   fill: #FFFFFF;
115 | }
116 | 
117 | #restartBtn {
118 |   width: 340px;
119 |   height: 80px;
120 |   background-color: #151515;
121 |   border-radius: 25px;
122 |   font-size: 35px;
123 |   color: #FFFFFF;
124 |   margin: 20px 0;
125 | }
126 | 
127 | .win {
128 |   background-color: #2D412D;
129 | }
130 | .win:hover {
131 |   background-color: #2D412D;
132 | }
133 | 
134 | .draw {
135 |   background-color: #374D5C;
136 | }
137 | .draw:hover {
138 |   background-color: #374D5C;
139 | }
140 | 
141 | /* SMARTPHONE */
142 | @media screen and (min-width: 375px) and (max-width: 480px) {
143 |   h1 {
144 |     font-size: 40px;
145 |   }
146 |   .player-cards {
147 |     width: 300px;
148 |     height: 70px;
149 |     border-radius: 15px;
150 |   }
151 |   .player-cards .player-card {
152 |     width: 90px;
153 |     height: 70px;
154 |     border-radius: 15px;
155 |     font-size: 18px;
156 |   }
157 |   #statusText {
158 |     font-size: 30px;
159 |   }
160 |   #cellContainer {
161 |     width: 310px;
162 |     padding: 10px 0;
163 |     gap: 10px;
164 |     border-radius: 15px;
165 |   }
166 |   #cellContainer .cell {
167 |     width: 90px;
168 |     height: 90px;
169 |     border-radius: 15px;
170 |     font-size: 75px;
171 |   }
172 |   #cellContainer .cell svg {
173 |     width: 50px;
174 |     height: 50px;
175 |   }
176 |   #restartBtn {
177 |     width: 210px;
178 |     height: 50px;
179 |     border-radius: 15px;
180 |     font-size: 26px;
181 |     color: #FFFFFF;
182 |   }
183 | }/*# sourceMappingURL=main.css.map */


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | //!----- Cells -----
  2 | const cells = document.querySelectorAll(".cell");
  3 | const statusText = document.querySelector("#statusText");
  4 | const restartBtn = document.querySelector("#restartBtn");
  5 | 
  6 | //!----- Statistic -----
  7 | const winX = document.querySelector(".x-win-count");
  8 | const drawCount = document.querySelector(".draw-count");
  9 | const winO = document.querySelector(".o-win-count");
 10 | const stat = {
 11 |     X: 0,
 12 |     D: 0,
 13 |     O: 0
 14 | }
 15 | 
 16 | //!----- Выиграшные комбинации -----
 17 | const winCombinations = [
 18 |     [0, 1, 2],
 19 |     [3, 4, 5],
 20 |     [6, 7, 8],
 21 |     [0, 3, 6],
 22 |     [1, 4, 7],
 23 |     [2, 5, 8],
 24 |     [0, 4, 8],
 25 |     [2, 4, 6]
 26 | ];
 27 | 
 28 | let cross = '<svg class="cross"><use href="./other/symbol-defs.svg#icon-cross"></use></svg>';
 29 | let circle = '<svg class="circle"><use href="./other/symbol-defs.svg#icon-circle"></use></svg>';
 30 | 
 31 | //!----- Клетки поля изначально пустые -----
 32 | let options = ["", "", "", "", "", "", "", "", ""];
 33 | let currentPlayer = "X";
 34 | let running = false;
 35 | 
 36 | //!----- Иницилизация игры -----
 37 | function initializeGame(){
 38 |     cells.forEach(cells => cells.addEventListener("click", cellClicked));
 39 |     restartBtn.addEventListener("click", restartGame);
 40 |     statusText.textContent = `${currentPlayer}'s turn`;
 41 |     running = true;
 42 | }
 43 | 
 44 | //!----- Отслеживает каждый клик по пустому полю -----
 45 | function cellClicked(){
 46 |     const cellIndex = this.getAttribute("cellIndex");
 47 |     
 48 |     if(options[cellIndex] != "" || !running){
 49 |         return;
 50 |     }
 51 |     
 52 |     updateCell(this, cellIndex);
 53 |     checkWinner();
 54 | }
 55 | 
 56 | //!----- Заменяет в массиве options пустые места на текущего игрока ( "O" или "X") -----
 57 | function updateCell(cell, index){
 58 |     options[index] = currentPlayer;
 59 |     if(currentPlayer === "X"){
 60 |         cell.innerHTML = cross;
 61 |     }
 62 |     else{
 63 |         cell.innerHTML = circle;
 64 |     }
 65 |     // cell.textContent = currentPlayer;
 66 | }
 67 | 
 68 | //!-----Меняет каждый раз текущего игрока-----
 69 | function changePlayer(){
 70 |     currentPlayer = (currentPlayer == "X") ? "O" : "X";
 71 |     statusText.textContent = `${currentPlayer}'s turn`;
 72 | }
 73 | 
 74 | //!----- После каждого хода проверяет победу -----
 75 | function checkWinner(){
 76 |     let roundWon = false;
 77 |     
 78 |     for(let i = 0; i < winCombinations.length; i += 1){
 79 |         const condition = winCombinations[i];
 80 |         const cellA = options[condition[0]];
 81 |         const cellB = options[condition[1]];
 82 |         const cellC = options[condition[2]];
 83 | 
 84 |         //!----- Проверяет клетки, если пустые ничего не делает, -----
 85 |         //!----- если они не пустые и одинаковые, -----
 86 |         //!----- то добавляет выиграшным клеткам стиль победы -----
 87 |         if (cellA == "" || cellB == "" || cellC == ""){
 88 |             continue;
 89 |         }
 90 |         else if(cellA == cellB && cellB == cellC){
 91 |             cells[condition[0]].classList.add('win');
 92 |             cells[condition[1]].classList.add('win');
 93 |             cells[condition[2]].classList.add('win');
 94 |             roundWon = true;
 95 |             break;
 96 |         }
 97 |         // const condition = winCombinations[i];
 98 |         // const cellA = options[condition[0]];
 99 |         // const cellB = options[condition[1]];
100 |         // const cellC = options[condition[2]];
101 |     
102 |         // if(cellA == "" || cellB == "" || cellC == ""){
103 |         //     continue;
104 |         // }
105 |         // if(cellA == cellB && cellB == cellC){
106 |         //     roundWon = true;
107 |         //     break;
108 |         // }
109 |     }
110 |     
111 |     //!----- Если победа, проверяет чья она и обновляет статиску -----
112 |     if(roundWon){
113 |         statusText.textContent = `${currentPlayer} wins!`;
114 |         running = false;
115 |         if (currentPlayer === "X"){ 
116 |             stat.X += 1;
117 |             winX.textContent = stat.X;
118 |         } else{
119 |             stat.O += 1;
120 |             winO.textContent = stat.O;
121 |         }
122 |     } 
123 |     //!----- Если ничья, обновляет статиску и подсвечивает все клетки-----
124 |     else if(!options.includes("")){
125 |         statusText.textContent = `Draw!`;
126 |         running = false;
127 |         stat.D += 1;
128 |         drawCount.textContent = stat.D;
129 |         cells.forEach(cells => cells.classList.add('draw'));
130 |     }
131 |     //!----- Если не ничья и не победа, то игра продолжается-----
132 |     else{
133 |         changePlayer();
134 |     }
135 | }
136 | 
137 | //!----- Кнопка, которая обновляет все -----
138 | function restartGame(){
139 |     currentPlayer = "X";
140 |     options = ["", "", "", "", "", "", "", "", ""];
141 |     statusText.textContent = `${currentPlayer}'s turn`;
142 |     cells.forEach((cell) => {
143 |         cell.textContent = "";
144 |         cell.classList.remove('win');
145 |         cell.classList.remove('draw');
146 |     })
147 |     // cells.forEach(cells => cells.textContent = "");
148 |     // cells.forEach(cells => cells.classList.remove('win'));
149 |     // cells.forEach(cells => cells.classList.remove('draw'));
150 |     running = true;
151 | }
152 | 
153 | initializeGame();


--------------------------------------------------------------------------------