Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sky (Brackets) - Tic Tac Toe #11

Open
wants to merge 44 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
e336b2a
added game.js to src
LaurenSky Dec 13, 2016
5b721aa
created Game, player1, player2, and gameBoard objects
LaurenSky Dec 13, 2016
4fdf13c
Added spec file with some tests, started prototype functions for Game
yasminor Dec 13, 2016
0b6237d
WIP: Game.prototype.play function
yasminor Dec 13, 2016
e5a4b34
WIP: Plays & wrote more tests
LaurenSky Dec 13, 2016
5d127a6
revamped game.valid function to simplify code and to take two inputs
LaurenSky Dec 14, 2016
8fa71be
added test for Game.valid function
LaurenSky Dec 14, 2016
b2dafbd
wrote tests for Game.playTurn function
LaurenSky Dec 14, 2016
67cbe00
Added the GameBoard.hasWon() function and tests)
yasminor Dec 14, 2016
e7dfca1
added tests to playTurn and hasWon and aTie & add tie functionality t…
LaurenSky Dec 14, 2016
0b4ee9f
fixed bug in valid function
LaurenSky Dec 14, 2016
f7026ed
WIP: playTurn and test in the event of a tie
yasminor Dec 14, 2016
fa2976e
Fixed merge conflict
yasminor Dec 14, 2016
0cc67e0
added test to capture 3 nulls in a row bug but code still has bug
LaurenSky Dec 14, 2016
1e52381
found the bug in hasWon
yasminor Dec 14, 2016
c4be4a7
Fixed merge conflict
yasminor Dec 14, 2016
7b4e1f6
Tests are passing
yasminor Dec 14, 2016
7caaa29
Deleted an unnecessary test after changing playTurn in the event of a…
yasminor Dec 14, 2016
74a99db
added extra = to != in has won function
LaurenSky Dec 16, 2016
5941707
file structure set up
LaurenSky Dec 16, 2016
16cb0eb
moved app.js to src folder from app folder
LaurenSky Dec 16, 2016
e8557da
working on css and html for index page
LaurenSky Dec 17, 2016
d08897e
WIP: DOM events
yasminor Dec 19, 2016
abce88a
set up click events and currentTarget for spaces in spaceClick Function
LaurenSky Dec 19, 2016
3fd8a2a
used vw in td in .css to make table responsive
LaurenSky Dec 19, 2016
426860f
completed coverting js to models and converting all tests to pass
LaurenSky Dec 20, 2016
0811a4c
selectSpace trigger and listenTo are functioning and passing thru spa…
LaurenSky Dec 20, 2016
3250ed0
moved some dynamic attributes to initializer instead of default
LaurenSky Dec 20, 2016
8837c79
connected gameboard render to the gameboard 2D array
LaurenSky Dec 20, 2016
0d7a7bc
base of game is working in browser and console & No alerts work yet
LaurenSky Dec 20, 2016
b893b79
added alerts
LaurenSky Dec 20, 2016
7569ca8
worked on css styling and responsiveness & current player works corre…
LaurenSky Dec 21, 2016
18d06e1
reload page on start new game
LaurenSky Dec 21, 2016
4e8ea01
message box functioning with Winner display, alerts, and catsgame
LaurenSky Dec 21, 2016
57c9ec0
added allgames collection
LaurenSky Dec 21, 2016
59a9c51
WIP: to_json
LaurenSky Dec 21, 2016
e84948b
Merge branch 'master' into sky/api
LaurenSky Dec 21, 2016
3f84b31
fixed a catsgame game over bug and fixed tests that had .get(gameboar…
LaurenSky Dec 21, 2016
eb36575
Merge branch 'master' into sky/api
LaurenSky Dec 21, 2016
21ef73b
changed original board to equal an empty string instead of null to ma…
LaurenSky Dec 21, 2016
95bd3c5
formatted data to json format
LaurenSky Dec 21, 2016
cd27c00
when game completes, it automatically creates a new game in the colle…
LaurenSky Dec 22, 2016
d5fe701
workin on deleting and fetch works
LaurenSky Dec 22, 2016
1e9fd47
removed past games
LaurenSky May 11, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 122 additions & 0 deletions build/css/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@

body {
background-color: #1B2321;
color: black;
font-family: 'Shadows Into Light', cursive;
}

h1 {
font-size: 9vw;
text-align: center;
color: white;
font-family: 'Shadows Into Light', cursive;
margin-top: 2%;
margin-left: 1%;
}

h3, h2 {
font-family: 'Shadows Into Light', cursive;
color: white;
}

#gameboard-view {
width: 35%;
text-align: center;
}

#player-view {
border: 1px solid white;
width: 24vw;
padding: 1%;
border-radius: 15px;
margin: 1%;
}

#message-box {
color: black;
background-color: transparent;
border-radius: 15px;
padding: 4%;
margin-top: 4%;
}

#gameboard-view-box {
border: 0 3% 10% 4%;
}

#all-game-view {
padding: 0 3% 3% 9%;
}

table#gameboard-view {
table-layout: fixed;
border-collapse: collapse;
border-style: hidden;
}

table#gameboard-view tr:nth-of-type(even) {
background-color: transparent !important;
}

table#gameboard-view td.value-cell {
border: 1px solid black;
font-size: 6vw;
width: 12vw;
height: 12vw;
padding: 0;
border-radius: 15px;
}

table#all-games th {
background-color: #1B2321;
font-size: 110%;
}

table#all-games td {
background-color: #1B2321;
width: 17vw;
padding: 0;
}

table#all-games {
color: white;
width: 17vw;
/*font-size: 140%;*/
text-align: center;

}

.button {
border-radius: 15px;
font-size: 150%;
/*font-size: 25px;*/
}

.delete-button {
border-radius: 15px;
font-size: 70%;
margin-right: 1%;
}

.inline {
display: inline;
}

.x-show {
display: inline;
}

.o-show {
display: none;
}

.start-game-button {
margin-left: 31%;
font-size: 3vw;
}

#main-area {
/*margin-left: 16%;*/
margin-left: 2%;
padding-top: 3%;
}
4,226 changes: 4,226 additions & 0 deletions build/css/foundation.css

Large diffs are not rendered by default.

55 changes: 55 additions & 0 deletions build/index.html
Original file line number Diff line number Diff line change
@@ -3,8 +3,63 @@
<head>
<title>Tic-Tac-Toe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="/css/app.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
</head>
<body>
<script src="/app.bundle.js" charset="utf-8"></script>
<section id ='game-view'>
<div class="row">
<h1 class='small-11 columns'>Tic-Tac-Toe</h1>
</div>

<div class="row">
<button type="button" name="start-game-button" class='start-game-button button small-4 columns'>Start Game!</button>
</div>

<div class="row" id='main-area'>
<section id ='player-view' class='small-6 medium-1 columns'>
<h3 class='inline'><strong>Current Player: </strong></h3>
<h2 id='player1' class='x-show inline'>X</h2>
<h2 id='player2' class='o-show inline'>O</h2>
<h3 id='message-box'></h3>
</section>

<section id='gameboard-view-box' class='small-6 medium-4 columns'>
<table id='gameboard-view'>
<tr id ='top'>
<td id ='00' class='value-cell'></td>
<td id ='01' class='value-cell'></td>
<td id ='02' class='value-cell'></td>
</tr>

<tr id='middle'>
<td id ='10' class='value-cell'></td>
<td id ='11' class='value-cell'></td>
<td id ='12' class='value-cell'></td>
</tr>

<tr id='bottom'>
<td id ='20' class='value-cell'></td>
<td id ='21' class='value-cell'></td>
<td id ='22' class='value-cell'></td>
</tr>
</table>
</section>

<section id ='all-game-view' class='small-10 medium-4 columns'>
<!-- <h3><strong>Past Games:</strong></h3>
<table id=all-games>
<tr>
<th>Game ID</th>
<th>Outcome</th>
<th> </th>
</tr>
</table> -->
</section>
</div>

</section>
</body>
</html>
269 changes: 269 additions & 0 deletions spec/game.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
import Game from 'app/models/game';
import GameBoard from 'app/models/game_board';

describe('Game', function() {
var testGame = new Game();
var testBoard = new GameBoard();

it("should create a gameBoard when initialized", function() {
expect(testGame.board).toBeDefined();
// expect(testGame.board).toEqual(testBoard.board);
expect(testGame.board.gameBoard).toEqual(jasmine.any(Array));
});

it('should initialize the correct Player for player1', function() {
expect(testGame.get('player1').marker).toEqual("X");
expect(testGame.get('player1').turnId).toEqual(true);
});

it('should initialize the correct Player for player2', function() {
expect(testGame.get('player2').marker).toEqual("O");
expect(testGame.get('player2').turnId).toEqual(false);
});

describe('whichPlayer', function() {
var testGame2 = new Game();
testGame2.gameCounter = false;

it('should return Player1 for a new game because counter equals true', function(){
expect(testGame.whichPlayer()).toEqual(testGame.get('player1'));
});

it('should return Player2 if gameCounter equals false', function(){
expect(testGame2.whichPlayer()).toEqual(testGame.get('player2'));
});
});

describe('valid', function() {
var testGame3 = new Game();
console.log(">>>>>>");
console.log(testGame3.board.gameBoard[0][2]);
testGame3.board.gameBoard[0][2] = "X";
console.log(testGame3.board.gameBoard[0][2]);


it('should handle an invalid location entry appropriately', function() {
expect(testGame3.valid(4,4)).toEqual(false);
});

it('should return true if a location is unoccupied(still equal to null)', function() {
expect(testGame3.valid(0,0)).toEqual(true);
});

it('should return false if a location is occupied by either an X or O', function() {
expect(testGame3.valid(0,2)).toEqual(false);
});
});

describe('playTurn', function() {
var testGame4 = new Game();

it('should add a player1 marker (X) if the space is open', function() {
expect(testGame4.board.gameBoard[0][0]).toEqual(" ");
expect(testGame4.gameCounter).toEqual(true);
expect(testGame4.turnCounter).toEqual(0);


testGame4.playTurn(0,0);
expect(testGame4.gameCounter).toEqual(false);
expect(testGame4.turnCounter).toEqual(1);
expect(testGame4.board.gameBoard[0][0]).toEqual('X');
});

it('should not add a players marker if the space is taken', function() {
expect(testGame4.board.gameBoard[0][0]).toEqual('X');
expect(testGame4.gameCounter).toEqual(false);

testGame4.playTurn(0,0);
expect(testGame4.gameCounter).toEqual(false);
expect(testGame4.turnCounter).toEqual(1);
expect(testGame4.board.gameBoard[0][0]).toEqual('X');
});

it('should add player2 marker (O) if the space is open', function() {
expect(testGame4.board.gameBoard[2][2]).toEqual(" ");
expect(testGame4.gameCounter).toEqual(false);
// expect(testGame4.turnCounter).toEqual(1);
console.log(">>>>>>>>>>>>>>>>" + testGame4.turnCounter);

testGame4.playTurn(2,2);
console.log(">>>>>>>>>>>>>>>>" + testGame4.turnCounter);
expect(testGame4.gameCounter).toEqual(true);
expect(testGame4.turnCounter).toEqual(2);
expect(testGame4.board.gameBoard[2][2]).toEqual('O');
});

var testWinner = new Game();
testWinner.turnCounter = 4;
testWinner.board.gameBoard[0][0] = "X";
testWinner.board.gameBoard[0][1] = "X";

it('should return a winner if someone has won after their turn', function() {
// console.log("********" + testWinner.winner);
// console.log(testWinner.board.gameboard;
testWinner.playTurn(0,2);
expect(testWinner.winner).toEqual(testWinner.get('player1'));
// console.log("********" + testWinner.winner);
});

it('should return a Game Over if game is already won and you try to play a turn', function() {
expect(testWinner.playTurn(2,2)).toEqual("Game is Over " + testWinner.winner.name + " won.");
});
});
});

describe('GameBoard', function() {
describe('hasWon', function() {
//Rows
var testRow0 = new Game();
testRow0.board.gameBoard[0][0] = "X";
testRow0.board.gameBoard[0][1] = "X";
testRow0.board.gameBoard[0][2] = "X";

it('should return true if a player has won Row0', function() {
expect(testRow0.board.hasWon()).toEqual(true);
});

var testRow1 = new Game();
testRow1.board.gameBoard[1][0] = "X";
testRow1.board.gameBoard[1][1] = "X";
testRow1.board.gameBoard[1][2] = "X";

it('should return true if a player has won Row1', function() {
expect(testRow1.board.hasWon()).toEqual(true);
});

var testRow2 = new Game();
testRow2.board.gameBoard[2][0] = "X";
testRow2.board.gameBoard[2][1] = "X";
testRow2.board.gameBoard[2][2] = "X";

it('should return true if a player has won Row2', function() {
expect(testRow2.board.hasWon()).toEqual(true);
});

//Columns
var testColumn0 = new Game();
testColumn0.board.gameBoard[0][0] = "X";
testColumn0.board.gameBoard[1][0] = "X";
testColumn0.board.gameBoard[2][0] = "X";

it('should return true if a player has won Column0', function() {
expect(testColumn0.board.hasWon()).toEqual(true);
});

var testColumn1 = new Game();
testColumn1.board.gameBoard[0][1] = "X";
testColumn1.board.gameBoard[1][1] = "X";
testColumn1.board.gameBoard[2][1] = "X";

it('should return true if a player has won Column1', function() {
expect(testColumn1.board.hasWon()).toEqual(true);
});

var testColumn2 = new Game();
testColumn2.board.gameBoard[0][2] = "X";
testColumn2.board.gameBoard[1][2] = "X";
testColumn2.board.gameBoard[2][2] = "X";

it('should return true if a player has won Column2', function() {
expect(testColumn2.board.hasWon()).toEqual(true);
});

//>>>>
var test3Nulls = new Game();
test3Nulls.playTurn(1,2);
test3Nulls.playTurn(0,0);
test3Nulls.playTurn(2,0);
test3Nulls.playTurn(1,2);
test3Nulls.playTurn(0,2);
test3Nulls.playTurn(2,2);
it('should return false if a player has not won but there have been 5 rounds and there are 3 nulls in a row', function() {
expect(test3Nulls.winner).toEqual(null);
expect(test3Nulls.board.hasWon()).toEqual(false);
});

//Diagonals
var testDiag1 = new Game();
testDiag1.board.gameBoard[0][0] = "X";
testDiag1.board.gameBoard[1][1] = "X";
testDiag1.board.gameBoard[2][2] = "X";

it('should return true if a player has won Diag1', function() {
expect(testDiag1.board.hasWon()).toEqual(true);
});

var testDiag2 = new Game();
testDiag2.board.gameBoard[0][2] = "X";
testDiag2.board.gameBoard[1][1] = "X";
testDiag2.board.gameBoard[2][0] = "X";

it('should return true if a player has won Diag2', function() {
expect(testDiag2.board.hasWon()).toEqual(true);
});

//Buggy situation
var findBug = new Game();
findBug.board.gameBoard[0][0] = "O";
findBug.board.gameBoard[0][2] = "O";
findBug.board.gameBoard[2][0] = "X";
findBug.board.gameBoard[2][2] = "X";
findBug.board.gameBoard[1][2] = "X";

it('should return false when a player hasnt won', function() {
expect(findBug.board.hasWon()).toEqual(false);
});

var hasNotWonGame = new Game();
hasNotWonGame.board.gameBoard[0][2] = "X";
hasNotWonGame.board.gameBoard[1][1] = "X";
hasNotWonGame.board.gameBoard[2][0] = "O";

it("should return false if a player hasn't won", function() {
expect(hasNotWonGame.board.hasWon()).toEqual(false);
});

var testReturnsTie = new Game();
testReturnsTie.board.gameBoard[0][0] = "X";
testReturnsTie.board.gameBoard[0][1] = "X";
testReturnsTie.board.gameBoard[0][2] = "O";
testReturnsTie.board.gameBoard[1][0] = "O";
testReturnsTie.board.gameBoard[1][1] = "X";
testReturnsTie.board.gameBoard[1][2] = "X";
testReturnsTie.board.gameBoard[2][0] = "X";
testReturnsTie.board.gameBoard[2][1] = "O";
testReturnsTie.board.gameBoard[2][2] = "O";

it("should return tie if gameboard is full and no winner", function() {
expect(testReturnsTie.board.hasWon()).toEqual("tie");
});

});

describe('aTie', function() {
var testYesATie = new Game();
testYesATie.board.gameBoard[0][0] = "X";
testYesATie.board.gameBoard[0][1] = "X";
testYesATie.board.gameBoard[0][2] = "O";
testYesATie.board.gameBoard[1][0] = "O";
testYesATie.board.gameBoard[1][1] = "X";
testYesATie.board.gameBoard[1][2] = "X";
testYesATie.board.gameBoard[2][0] = "X";
testYesATie.board.gameBoard[2][1] = "O";
testYesATie.board.gameBoard[2][2] = "O";

it("should return true if no location has a value of null therefor the gameboard is full", function() {
expect(testYesATie.board.aTie()).toEqual(true);
});

var testNotATie = new Game();
testNotATie.board.gameBoard[0][0] = "X";
testNotATie.board.gameBoard[0][1] = "X";
testNotATie.board.gameBoard[0][2] = null;


it("should return true if no location has a value of null therefor the gameboard is full", function() {
expect(testNotATie.board.aTie()).toEqual(false);
});
});
});
Empty file removed src/.keep
Empty file.
24 changes: 24 additions & 0 deletions src/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Backbone from 'backbone';
import $ from 'jquery';

import Game from 'app/models/game';
// import AllGames from 'app/collections/all_games';

import GameView from 'app/views/game_view';



$(document).ready(function() {
var game = new Game({});
// var allGames = new AllGames();

var gameview = new GameView({
el: '#game-view',
// model: allGames
model: game,
// completedGames: allGames
});


gameview.render();
});
13 changes: 13 additions & 0 deletions src/app/collections/all_games.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// import Backbone from 'backbone';
//
// import Game from 'app/models/game';
//
// var AllGames = Backbone.Collection.extend({
// model: Game,
// url: 'http://localhost:3000/api/v1/games',
// parse: function(data){
// return data;
// }
// });
//
// export default AllGames;
124 changes: 124 additions & 0 deletions src/app/models/game.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import Backbone from 'backbone';
import $ from 'jquery';
import GameBoard from 'app/models/game_board';

const Game = Backbone.Model.extend({
// This model should have the attributes for
// a single contact: name, phone number, and email.
defaults: {
player1: {
marker: "X",
turnId: true,
name: "player 1"
},
player2: {
marker: "O",
turnId: false,
name: "player 2"
},
},

initialize: function(options) {
this.board = new GameBoard();
this.gameCounter = true;
this.turnCounter = 0;
this.winner = null;
this.outcome = options.outcome;
},

playTurn: function(row, column) {
if(this.winner == this.get('player1') || this.winner == this.get('player2') || this.winner === 'draw') {
this.trigger('gameover', this);
// console.log("Game is Over " + this.winner.name + " won.");
return "Game is Over " + this.winner.name + " won.";
} else {
var player = this.whichPlayer();

if (this.valid(row, column)) {
this.board.gameBoard[row][column] = player.marker;

// console.log('triggering change event');
this.board.trigger('change', this.board, {});

if (player == this.get('player1')) {
this.gameCounter = false;
this.turnCounter++;
} else {
this.gameCounter = true;
this.turnCounter++ ;
}

if(this.turnCounter >= 5) {
if(this.board.hasWon() === true) {
// console.log(player + " you're the Winner!!!");
this.winner = player;
this.outcome = player.marker;
this.trigger('winner', this.winner);
return player.name;
} else if(this.board.hasWon() === "tie") {
this.winner = 'draw';
this.outcome = 'draw';
this.trigger('catsgame', this, "cats game");
// console.log("Cat's Game, it's a tie.");
// return "Cat's Game.";
}
}
} else {
this.trigger('invalid', this);
// console.log("That position is already taken, go Again");
}

// console.log(this.board.gameBoard[0]);
// console.log(this.board.gameBoard[1]);
// console.log(this.board.gameBoard[2]);
// console.log("who's turn: " + this.gameCounter);
// console.log("round number: " + this.turnCounter);
}
},

whichPlayer: function() {
if (this.gameCounter === this.get('player1').turnId) {
return this.get('player1');
} else {
return this.get('player2');
}
},

valid: function(row,column) {
if((row > 2) || (column > 2)) {
// console.log(row + "," + column + " is not a valid location");
return false;
} else {
var locationValue = this.board.gameBoard[row][column];
// console.log("in valid, location value = " + locationValue);
if (locationValue != 'X' && locationValue != 'O') {
return true;
} else {
return false;
}
}
},

toJSON: function() {
var flattenedBoard = this.board.gameBoard.reduce(function(a, b) {
return a.concat(b);
}, []);

var player1 = this.get('player1').name;
var player2 = this.get('player2').name;
var nowDateTime = new Date();

var apiData = {
board: flattenedBoard,
players: [player1, player2],
outcome: this.outcome,
played_at: nowDateTime
};

console.log(apiData);
return apiData;
}
});

// DO NOT REMOVE THIS
export default Game;
52 changes: 52 additions & 0 deletions src/app/models/game_board.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Backbone from 'backbone';
// import $ from 'jquery';

const GameBoard = Backbone.Model.extend({
initialize: function() {
this.gameBoard = [[ " ", " ", " "], [ " ", " ", " "], [ " ", " ", " "]];
// this.set('gameBoard', [[ null, null, null], [ null, null, null], [ null, null, null]]);
},

hasWon: function() {
// var board = this.gameBoard;
var row0 = this.gameBoard[0];
var row1 = this.gameBoard[1];
var row2 = this.gameBoard[2];

if ((row0[0] == row0[1] && row0[1] == row0[2] && row0[2] !== " ") ||
(row1[0] == row1[1] && row1[1] == row1[2] && row1[2] !== " ") ||
(row2[0] == row2[1] && row2[1] == row2[2] && row2[2] !== " ")) {
// console.log("Winner in a row");
return true;
} else if ((row0[0] == row1[0] && row1[0] == row2[0] && row2[0] !== " ") ||
(row0[1] == row1[1] && row1[1] == row2[1] && row2[1] !== " ") ||
(row0[2] == row1[2] && row1[2] == row2[2] && row2[2] !== " ")) {
// console.log("Winner in a column");
return true;
} else if ((row0[0] == row1[1] && row1[1] == row2[2] && row2[2] !== " ") || (row0[2] == row1[1] && row1[1] == row2[0] && row2[0] !== " ")) {
// console.log("Winner in a diagonal");
return true;
} else {
if(this.aTie()){
return "tie";
} else {
return false;
}
}
},

aTie: function() {
var row0 = this.gameBoard[0];
var row1 = this.gameBoard[1];
var row2 = this.gameBoard[2];

if((row0.includes(" ")) || (row1.includes(" ")) || (row2.includes(" "))) {
return false;
} else {
return true;
}
}
});

// DO NOT REMOVE THIS
export default GameBoard;
142 changes: 142 additions & 0 deletions src/app/views/game_view.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import Backbone from 'backbone';
import $ from 'jquery';

import Game from 'app/models/game';
import GameBoard from 'app/models/game_board';
// import AllGames from 'app/collections/all_games';

import PlayerView from 'app/views/player_view';
import GameBoardView from 'app/views/gameboard_view';

const GameView = Backbone.View.extend({

initialize: function(options) {

var gameBoardView = new GameBoardView({
el: '#gameboard-view',
model: this.model.board
});

var playerView = new PlayerView({
el: '#player-view'
});

// console.log("options");
// console.log(options);
this.gameList = options.completedGames;
// console.log("all games");
// console.log(this.gameList);

this.listenTo(gameBoardView, 'selectSpace', this.playTurn);
this.listenTo(this.model, 'invalid', this.spaceTaken);
this.listenTo(this.model, 'gameover', this.gameOver);
this.listenTo(this.model, 'winner', this.stateWinner);
this.listenTo(this.model, 'catsgame', this.stateCatsGame);
// this.listenTo(this.gameList, 'update', this.updateAllGames);

gameBoardView.render();
playerView.render();
},

render: function() {
// this.showAllGames();

return this;
},

events: {
'click .start-game-button': 'startGame',
'click .delete-button': 'deleteAGame'
},

startGame: function() {
// console.log("Starting a game");
location.reload();
},

playTurn: function(event) {
// console.log(event);
// console.log(event.id);
$('#message-box').empty();
$('#message-box').css('background-color', 'transparent');
var locationClicked = event.id;
var value = $(event).html();

// console.log(value);
this.model.playTurn(locationClicked[0], locationClicked[1]);

if(this.model.gameCounter === true) {
$('.x-show').css('display', 'inline');
$('.o-show').css('display', 'none');
} else {
$('.x-show').css('display', 'none');
$('.o-show').css('display', 'inline');
}
},

spaceTaken: function() {
// console.log("in spaceTaken");
// alert("That space is taken already, Go Again.");
$('#message-box').append("Space's Taken, Go Again.");
$('#message-box').css('background-color', '#EA6E6E');
},

gameOver: function() {
// console.log("in gameOver");
// alert("The Game's already over");
$('#message-box').append("Game's Over.");
$('#message-box').css('background-color', '#EA6E6E');
},

stateWinner: function (winner) {
// console.log("in winner");
// console.log(winner);
// alert("There's a winner ");
$('#message-box').append("Winner: " + winner.name);
$('#message-box').css('background-color', '#88D18A');

// console.log(this.gameList);
this.gameList.create(this.model);
this.showAllGames();
},

stateCatsGame: function () {
// console.log("in winner");
// alert("It's a Cat's Game :(");
$('#message-box').append("Cat's Game :(");
$('#message-box').css('background-color', '#68ABBA');

this.gameList.create(this.model);
$('#all-games').empty();
this.showAllGames();
},

showAllGames: function() {
// console.log("in update all games");
// console.log(this.gameList);

var self = this;
this.gameList.fetch().done(function() {
$.each(self.gameList.models, function(index, game){
// console.log('game:');
// console.log(game);
var row = $('<tr></tr>');
var id = $('<td>' + game.id + '</td>');
// console.log(game.id);
var outcome = $('<td>' + game.outcome + '</td>');
var button = $('<td>' + '<input type="button" value="Delete" class="button delete-button"/>' + '</td>');

row.append(id, outcome, button);
$('#all-games').append(row);

});
});
},

deleteAGame: function(gameId) {
// console.log("in delete function");
// this.gameList.destroy(gameId);
}
});

export default GameView;
55 changes: 55 additions & 0 deletions src/app/views/gameboard_view.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import Backbone from 'backbone';
import $ from 'jquery';

import GameBoard from 'app/models/game_board';

var GameBoardView = Backbone.View.extend({

initialize: function() {
this.listenTo(this.model, 'change', this.render);
},

events: {
'click td': 'spaceClick'
},

spaceClick: function(event) {
this.trigger('selectSpace', event.currentTarget);

// We return false to tell jQuery not to run any more event handlers.
// Otherwise, it would run the 'click' event handler on RolodexView
// as well.
return false;
},

render: function() {
// console.log('in gameBoardView.render');
var array = this.model.gameBoard;
// console.log(array);

$('#00').empty();
$('#00').append(array[0][0]);
$('#01').empty();
$('#01').append(array[0][1]);
$('#02').empty();
$('#02').append(array[0][2]);

$('#10').empty();
$('#10').append(array[1][0]);
$('#11').empty();
$('#11').append(array[1][1]);
$('#12').empty();
$('#12').append(array[1][2]);

$('#20').empty();
$('#20').append(array[2][0]);
$('#21').empty();
$('#21').append(array[2][1]);
$('#22').empty();
$('#22').append(array[2][2]);

return this;
}
});

export default GameBoardView;
19 changes: 19 additions & 0 deletions src/app/views/player_view.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Backbone from 'backbone';
import $ from 'jquery';

import Game from 'app/models/game';

var PlayerView = Backbone.View.extend({

initialize: function() {

},

render: function() {

return this;
}

});

export default PlayerView;
136 changes: 136 additions & 0 deletions src/backup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
var Game = function() {
this.board = new GameBoard();
this.player1 = new Player1();
this.player2 = new Player2();
this.gameCounter = true;
this.turnCounter = 0;
this.winner = null;
console.log(this.board);
// console.log(this.player1);
// console.log(this.player2);
};

Game.prototype.playTurn = function(row, column) {
if(this.winner !== null) {
console.log("Game is Over " + this.winner.name + " won.");
return "Game is Over " + this.winner.name + " won.";
} else {
// console.log(this.whichPlayer());
var player = this.whichPlayer();
// console.log(this.valid(row, column));
if (this.valid(row, column)) {
this.board.gameBoard[row][column] = player.marker;

if (player == this.player1) {
this.gameCounter = false;
this.turnCounter++ ;
} else {
this.gameCounter = true;
this.turnCounter++ ;
}

if(this.turnCounter >= 5) {
if(this.board.hasWon() === true) {
console.log(player + " you're the Winner!!!");
this.winner = player;
return player.name;
} else if(this.board.hasWon() === "tie") {
console.log("Cat's Game, it's a tie.");
// return "Cat's Game.";
}
}

} else {
console.log("That position is already taken, go Again");
}
console.log(this.board);
console.log("who's turn: " + this.gameCounter);
console.log("round number: " + this.turnCounter);
}
};

Game.prototype.whichPlayer = function() {
if (this.gameCounter === true) {
return this.player1;
} else {
return this.player2;
}
};

Game.prototype.valid = function(row,column) {
if((row > 2) || (column > 2)) {
console.log(row + "," + column + " is not a valid location");
return false;
} else {
var locationValue = this.board.gameBoard[row][column];
console.log("in valid, location value = " + locationValue);
if (locationValue != 'X' && locationValue != 'O') {
return true;
} else {
return false;
}
}
};

var GameBoard = function() {
this.gameBoard = [];
this.gameBoard[0] = [ null, null, null];
this.gameBoard[1] = [ null, null, null];
this.gameBoard[2] = [ null, null, null];
};

GameBoard.prototype.hasWon = function() {
// var board = this.gameBoard;
var row0 = this.gameBoard[0];
var row1 = this.gameBoard[1];
var row2 = this.gameBoard[2];

if ((row0[0] == row0[1] && row0[1] == row0[2] && row0[2] !== null) ||
(row1[0] == row1[1] && row1[1] == row1[2] && row1[2] !== null) ||
(row2[0] == row2[1] && row2[1] == row2[2] && row2[2] !== null)) {
console.log("Winner in a row");
return true;
} else if ((row0[0] == row1[0] && row1[0] == row2[0] && row2[0] !== null) ||
(row0[1] == row1[1] && row1[1] == row2[1] && row2[1] !== null) ||
(row0[2] == row1[2] && row1[2] == row2[2] && row2[2] !== null)) {
console.log("Winner in a column");
return true;
} else if ((row0[0] == row1[1] && row1[1] == row2[2] && row2[2] !== null) || (row0[2] == row1[1] && row1[1] == row2[0] && row2[0] !== null)) {
console.log("Winner in a diagonal");
return true;
} else {
if(this.aTie()){
return "tie";
} else {
return false;
}
}
};

GameBoard.prototype.aTie = function() {
var row0 = this.gameBoard[0];
var row1 = this.gameBoard[1];
var row2 = this.gameBoard[2];

if((row0.includes(null)) || (row1.includes(null)) || (row2.includes(null))) {
return false;
} else {
return true;
}
};

var Player1 = function() {
this.marker = "X";
this.turnCounter = true;
this.name = "player1";
};

var Player2 = function() {
this.marker = "O";
this.turnCounter = false;
this.name = "player2";
};


// DO NOT REMOVE THIS
export default Game;