FullStackProjects/ttt.js at master · yrocaz/FullStackProjects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
// Restart game button
var restart = document.querySelector('#b');

// Grab all squares
var squares = document.querySelectorAll('td');

// Clears the board when restart is pressed
function clearBoard(){
    for (var i = 0; i < squares.length; i++) {
        squares[i].textContent = ''
        turn = 0;
    }
};

restart.addEventListener("click", clearBoard);

// turn, counter, & score display
var turn = 0;
var xo = document.querySelector('#t');
var xScore = 0;
var oScore = 0;

// Changes tile to X or O
function move(){
    if (turn === 9){
        alert("Stalemate! New game.")
        clearBoard();
    }else if (turn%2 === 0){
        console.log("Click detected. 'turn' is currently: "+turn)
        if (this.textContent === 'O') {
            alert("You can't play there!")
            turn = turn;
            console.log("Operation preformed. 'turn' is now "+turn)
        }else if(this.textContent === 'X') {
            alert("You're already there!")
            turn = turn;
            console.log("Operation preformed. 'turn' is now "+turn)
        }else if(this.textContent === '') {
            this.textContent = 'X'
            xo.textContent = "It's O's turn to play."; // change turn text
            turn++
            console.log("Operation preformed. 'turn' is now "+turn);
        }
    } else {
        console.log("Click detected. 'turn' is currently: "+turn)
        if (this.textContent === 'X') {
            alert("You can't play there!")
            turn = turn;
            console.log("Operation preformed. 'turn' is now "+turn)
        }else if(this.textContent === 'O') {
            alert("You're already there!")
            turn = turn;
            console.log("Operation preformed. 'turn' is now "+turn)
        }else if(this.textContent === '') {
            this.textContent = 'O'
            xo.textContent = "It's X's turn to play."; // change turn text
            turn++
            console.log("Operation preformed. 'turn' is now "+turn)
        }
    } win()
};

// updates board after each move
function board(){
    topRow = [
        document.querySelector("#t1").textContent,
        document.querySelector("#t2").textContent,
        document.querySelector("#t3").textContent]
    midRow = [
        document.querySelector("#m1").textContent,
        document.querySelector("#m2").textContent,
        document.querySelector("#m3").textContent]
    botRow = [
        document.querySelector("#b1").textContent,
        document.querySelector("#b2").textContent,
        document.querySelector("#b3").textContent]
    lCol = [
        document.querySelector("#t1").textContent,
        document.querySelector("#m1").textContent,
        document.querySelector("#b1").textContent]
    mCol = [
        document.querySelector("#m2").textContent,
        document.querySelector("#m2").textContent,
        document.querySelector("#b2").textContent]
    rCol = [
        document.querySelector("#t3").textContent,
        document.querySelector("#m3").textContent,
        document.querySelector("#b3").textContent]
    lrDiag = [
        document.querySelector("#t1").textContent,
        document.querySelector("#m2").textContent,
        document.querySelector("#b3").textContent]
    rlDiag = [
        document.querySelector("#t3").textContent,
        document.querySelector("#m2").textContent,
        document.querySelector("#b1").textContent]
}

// containers for win conditions
var blank = ''
var blankArr = ['','','']
var topRow = ['','','']
var midRow = ['','','']
var botRow = ['','','']
var lCol = ['','','']
var mCol = ['','','']
var rCol = ['','','']
var lrDiag = ['','','']
var rlDiag = ['','','']
var winner = ""

// Win conditions logic
function win(){
    board()
    // top row win
    if(topRow.includes(blank) === false &&
    document.querySelector("#t1").textContent === document.querySelector("#t2").textContent
    && document.querySelector("#t2").textContent === document.querySelector("#t3").textContent){
        alert(document.querySelector("#t1").textContent+" wins!")
        winner = document.querySelector("#t1").textContent
        score();
    // middle row win
    } else if(midRow.includes(blank) === false &&
    document.querySelector("#m1").textContent === document.querySelector("#m2").textContent
    && document.querySelector("#m2").textContent === document.querySelector("#m3").textContent){
        alert(document.querySelector("#m1").textContent+" wins!")
        winner = document.querySelector("#m1").textContent
        score();
    // bottom row win
    } else if(botRow.includes(blank) === false &&
    document.querySelector("#b1").textContent === document.querySelector("#b2").textContent
    && document.querySelector("#b2").textContent === document.querySelector("#b3").textContent){
        alert(document.querySelector("#b1").textContent+" wins!")
        winner = document.querySelector("#b1").textContent
        score();
    // left col win
    } else if(lCol.includes(blank) === false &&
    document.querySelector("#t1").textContent === document.querySelector("#m1").textContent
    && document.querySelector("#m1").textContent === document.querySelector("#b1").textContent){
        alert(document.querySelector("#t1").textContent+" wins!")
        winner = document.querySelector("#t1").textContent
        score();
    // middle col win
    } else if(mCol.includes(blank) === false &&
    document.querySelector("#t2").textContent === document.querySelector("#m2").textContent
    && document.querySelector("#m2").textContent === document.querySelector("#b2").textContent){
        alert(document.querySelector("#t2").textContent+" wins!")
        winner = document.querySelector("#t2").textContent
        score();
    // right col win
    } else if(rCol.includes(blank) === false &&
    document.querySelector("#t3").textContent === document.querySelector("#m3").textContent
    && document.querySelector("#m3").textContent === document.querySelector("#b3").textContent){
        alert(document.querySelector("#t3").textContent+" wins!")
        winner = document.querySelector("#t3").textContent
        score();
    // diagonal LR win
    } else if(lrDiag.includes(blank) === false &&
    document.querySelector("#t1").textContent === document.querySelector("#m2").textContent
    && document.querySelector("#m2").textContent === document.querySelector("#b3").textContent){
        alert(document.querySelector("#t1").textContent+" wins!")
        winner = document.querySelector("#t1").textContent
        score();
    // diagonal RL win
    } else if(rlDiag.includes(blank) === false &&
    document.querySelector("#t3").textContent === document.querySelector("#m2").textContent
    && document.querySelector("#m2").textContent === document.querySelector("#b1").textContent){
        alert(document.querySelector("#t3").textContent+" wins!")
        winner = document.querySelector("#t3").textContent
        score();
    }
}

// Score logic
function score(){
    clearBoard()
    if (winner === "X"){
        xScore++
        xo.textContent = "It pays to be a winner! X's turn to play."
    } else {
        turn++
        oScore++
        xo.textContent = "It pays to be a winner! O's turn to play."
    }
    document.querySelector('#x').textContent = xScore
    document.querySelector('#o').textContent = oScore
    if (xScore == 3){
        alert("X wins it all! That's game!")
        reset();
    } else if(oScore === 3){
        alert("O wins it all! That's game!")
        reset();
    }
}

// Resets everything after best of 5
function reset(){
    xScore = 0
    oScore = 0
    document.querySelector('#x').textContent = xScore
    document.querySelector('#o').textContent = oScore
}
// add Event Listeners to all the squares
for (var i= 0; i < squares.length; i++) {
    squares[i].addEventListener('click', move);
};

console.log("We're in... Let the games begin!")