tic tactoe

met18001 · Mar 2, 2020 · 7751748 · 7751748
1 parent b9aed9c
commit 7751748
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 0 deletions.
diff --git a/week-6/css/style.css b/week-6/css/style.css
@@ -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;
+}
diff --git a/week-6/index.html b/week-6/index.html
@@ -0,0 +1,42 @@
+<!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">
+            It's your turn, {{turn}}.
+        </div>
+
+        <div class="gameboard">
+
+            <div class="square" @click.once="changeIt(0,0)">{{ board[0][0] }}</div>
+            <div class="square" @click.once="changeIt(0,1)"> {{ board[0][1] }}</div>
+            <div class="square" @click.once="changeIt(0,2)">{{ board[0][2] }}</div>
+
+            <div class="square" @click.once="changeIt(1,0)">{{ board[1][0] }}</div>
+            <div class="square" @click.once="changeIt(1,1)">{{ board[1][1] }}</div>
+            <div class="square" @click.once="changeIt(1,2)">{{ board[1][2] }}</div>
+
+            <div class="square" @click.once="changeIt(2,0)">{{ board[2][0] }}</div>
+            <div class="square" @click.once="changeIt(2,1)">{{ board[2][1] }}</div>
+            <div class="square" @click.once="changeIt(2,2)">{{ board[2][2] }}</div>
+
+        </div>
+
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="js/tic-tac-toe.js"></script>
+</body>
+</html>
diff --git a/week-6/js/tic-tac-toe.js b/week-6/js/tic-tac-toe.js
@@ -0,0 +1,64 @@
+var app = new Vue({
+  el: '#vue-app',
+  data: {
+    turn: 'x', 
+    board: [
+      [null, null, null],
+      [null, null, null],
+      [null, null, null]
+    ]
+  }, 
+  methods: {
+    changeIt: function(row,column){
+
+      this.board[row][column] = this.turn
+
+      let winnerx = "Player 'X', you are a winner!";
+      let winnero = "Player 'O', you are a winner!";
+
+      if (this.board[0,0] == this.turn && this.board[0,1] == this.turn && this.board[0,2] == this.turn) {
+     this.board[0] ="Winner!";
+     alert(winnerx);
+      }else if(this.board[0,0] == 'o' && this.board[0,1] == 'o' && this.board[0,2] =='o') {
+        this.board[0] ="Winner!";
+        alert(winnero);
+      }else if(this.board[1,1] == 'x' && this.board[1,0] == 'x' && this.board[1,2] =='x') {
+        this.board[1] ="Winner!";
+        alert(winnerx);
+      }else if(this.board[1,1] == 'o' && this.board[1,0] == 'o' && this.board[1,2] =='o') {
+        this.board[1] ="Winner!";
+        alert(winnero);
+      }else if(this.board[2,1] == 'x' && this.board[2,0] == 'x' && this.board[2,2] =='x') {
+        this.board[2] ="Winner!";
+        alert(winnerx);
+      }else if(this.board[2,1] == 'o' && this.board[2,0] == 'o' && this.board[2,2] =='o') {
+        this.board[2] ="Winner!";
+        alert(winnero);
+
+
+      }else if(this.board[0][0] == 'x' && this.board[1][0] == 'x' && this.board[2][0] == 'x'){
+        this.board[0][0] = "W";
+        this.board[1][0] = "I";
+        this.board[2][0] = "N";
+          alert(winnerx);
+      }else if(this.board[0][0] == 'o' && this.board[1][0] == 'o' && this.board[2][0] == 'o'){
+        this.board[0][0] = "W";
+        this.board[1][0] = "I";
+        this.board[2][0] = "N";
+          alert(winnero);
+      }else if(this.board[1][1] == 'o' && this.board[1][0] == 'o' && this.board[1][2] == 'o'){
+        this.board[0][0] = "W";
+        this.board[1][0] = "I";
+        this.board[2][0] = "N";
+          alert(winnero);
+}else if(this.board[1][1] == 'x' && this.board[1][0] == 'x' && this.board[1][2] == 'x'){
+        this.board[0][0] = "W";
+        this.board[1][0] = "I";
+        this.board[2][0] = "N";
+          alert(winnerx);       
+} 
+      //correctly identifies when someone has won 
+      this.turn = (this.turn == 'x') ? 'o' : 'x';
+    }
+  }
+});