Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Week-6
  • Loading branch information
tsbugbee committed Mar 1, 2020
1 parent 1a16af7 commit 5bcecd9
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 0 deletions.
64 changes: 64 additions & 0 deletions week-6/css/style.css
View file
@@ -0,0 +1,64 @@
/* CSS files add styling rules to your content */

* {
box-sizing: border-box;
}

:root {
--board-size: 200px;
--line-color: grey;
--gap: 5px;
}

body {
font-family: Arial, Helvetica, sans-serif;

}

main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}


.gameboard {
width: calc( (3 * var(--board-size)) + (2 * var(--gap)) );
display: grid;
grid-template-columns: repeat(3, var(--board-size) );
grid-template-rows: repeat(3, var(--board-size) );
place-items: stretch;
background-color: var(--line-color);
grid-gap: 5px;

}

.square {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color: #333;
font-size: var(--board-size);
line-height: var(--board-size);
text-transform: uppercase;
margin:0;
padding:0;
cursor: pointer;

}

.square:hover {
background-color: #eee;
}


.banner {
background-color: lightblue;
position: absolute;
top: 0px;
padding: 1em;
width: 100%;
text-align: center;
}
43 changes: 43 additions & 0 deletions week-6/index.html
View file
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="css/style.css">



</head>
<body>


<main id="vue-app">

<div class="banner">
{{topText}}{{turn}}.
</div>

<div class="gameboard">

<div class="square" @click="checkSquareClick(0,0)" id="00">{{ board[0][0] }}</div>
<div class="square" @click="checkSquareClick(0,1)" id="01">{{ board[0][1] }}</div>
<div class="square" @click="checkSquareClick(0,2)" id="02">{{ board[0][2] }}</div>

<div class="square" @click="checkSquareClick(1,0)" id="10">{{ board[1][0] }}</div>
<div class="square" @click="checkSquareClick(1,1)" id="11">{{ board[1][1] }}</div>
<div class="square" @click="checkSquareClick(1,2)" id="12">{{ board[1][2] }}</div>

<div class="square" @click="checkSquareClick(2,0)" id="20">{{ board[2][0] }}</div>
<div class="square" @click="checkSquareClick(2,1)" id="21">{{ board[2][1] }}</div>
<div class="square" @click="checkSquareClick(2,2)" id="22">{{ board[2][2] }}</div>

</div>
<button v-if="gameOver" @click="clearBoard()">Reset Board</button>

</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/tic-tac-toe.js"></script>
</body>
</html>
136 changes: 136 additions & 0 deletions week-6/js/tic-tac-toe.js
View file
@@ -0,0 +1,136 @@
var app = new Vue({
el: '#vue-app',
data: {
topText: 'It\'s your turn, ',
turn: 'x',
win1: null,
win2: null,
win3: null,
board:[
[null, null, null],
[null, null, null],
[null, null, null]
],
gameOver: false
},
methods:{
checkSquareClick: function(row, column){
if(this.board[row][column] == null){

this.board[row][column] = this.turn;
//could have put the content of all these conditionals into a separate function to make it less cluttered, but eh
if(this.board[0][0] == this.board[0][1] && this.board[0][0] == this.board[0][2] && this.board[0][0] != null){
this.topText = 'The winner is: ';
this.win1 = "00";
this.win2 = "01";
this.win3 = "02";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[1][0] == this.board[1][1] && this.board[1][0] == this.board[1][2] && this.board[1][0] != null){
this.topText = 'The winner is: ';
this.win1 = "10";
this.win2 = "11";
this.win3 = "12";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[2][0] == this.board[2][1] && this.board[2][0] == this.board[2][2] && this.board[2][0] != null){
this.topText = 'The winner is: ';
this.win1 = "20";
this.win2 = "21";
this.win3 = "22";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[0][0] == this.board[1][0] && this.board[0][0] == this.board[2][0] && this.board[0][0] != null){
this.topText = 'The winner is: ';
this.win1 = "00";
this.win2 = "10";
this.win3 = "20";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[0][1] == this.board[1][1] && this.board[0][1] == this.board[2][1] && this.board[0][1] != null){
this.topText = 'The winner is: ';
this.win1 = "01";
this.win2 = "11";
this.win3 = "21";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[0][2] == this.board[1][2] && this.board[0][2] == this.board[2][2] && this.board[0][2] != null){
this.topText = 'The winner is: ';
this.win1 = "02";
this.win2 = "12";
this.win3 = "22";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[0][0] == this.board[1][1] && this.board[0][0] == this.board[2][2] && this.board[0][0] != null){
this.topText = 'The winner is: ';
this.win1 = "00";
this.win2 = "11";
this.win3 = "22";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
else if (this.board[0][2] == this.board[1][1] && this.board[0][2] == this.board[2][0] && this.board[0][2] != null){
this.topText = 'The winner is: ';
this.win1 = "02";
this.win2 = "11";
this.win3 = "20";
document.getElementById(this.win1).style.backgroundColor = "green";
document.getElementById(this.win2).style.backgroundColor = "green";
document.getElementById(this.win3).style.backgroundColor = "green";
this.gameOver = true;
return;
}
if(this.turn == 'x'){
this.turn = 'o';
}
else{
this.turn = 'x';
}
}

},
clearBoard: function(){
for(i = 0; i < 3; i++){
for(j = 0; j < 3; j++){
this.board[i][j] = null;
}
}
document.getElementById(this.win1).style.backgroundColor = "white";
document.getElementById(this.win2).style.backgroundColor = "white";
document.getElementById(this.win3).style.backgroundColor = "white";
this.win1 = null;
this.win2 = null;
this.win3 = null;
this.gameOver = false;
this.topText = 'It\'s your turn, ';
this.turn = 'x';
}
}
});

0 comments on commit 5bcecd9

Please sign in to comment.