From 031494d16156d1890f4df7a4025b2dc32844acb8 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 11:56:58 -0800 Subject: [PATCH 01/68] Makes files for tictactoe logic and testing --- spec/tictactoe.spec.js | 0 src/tictactoe.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 spec/tictactoe.spec.js create mode 100644 src/tictactoe.js diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js new file mode 100644 index 0000000..e69de29 diff --git a/src/tictactoe.js b/src/tictactoe.js new file mode 100644 index 0000000..e69de29 From e8cbb9751001281a2fd7862ae48f85ccb90aa3fb Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:02:03 -0800 Subject: [PATCH 02/68] Tests that a TicTacToe game is defined --- spec/tictactoe.spec.js | 14 ++++++++++++++ src/tictactoe.js | 6 ++++++ 2 files changed, 20 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index e69de29..b948461 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -0,0 +1,14 @@ +// Do not remove +import TicTacToe from 'tictactoe'; + + +describe('TicTacToe', function() { + var testTicTacToe = new TicTacToe(); + + describe('TicTacToe', function() { + it('should be defined', function() { + expect(testTicTacToe).toBeDefined(); + }); + }); + +}); diff --git a/src/tictactoe.js b/src/tictactoe.js index e69de29..fd2a974 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -0,0 +1,6 @@ +var TicTacToe = function () {}; + +module.exports = TicTacToe; + +// DO NOT REMOVE THIS +export default TicTacToe; From 09e2964239f38eb84cd8ef81cfbd05c0143c032e Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:05:32 -0800 Subject: [PATCH 03/68] Defines a board instance for TicTacToe --- spec/tictactoe.spec.js | 11 +++++++++++ src/tictactoe.js | 4 +++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index b948461..d4292d7 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -9,6 +9,17 @@ describe('TicTacToe', function() { it('should be defined', function() { expect(testTicTacToe).toBeDefined(); }); + + it('should have a board', function() { + expect(testTicTacToe.board).toBeDefined(); + }); + + it('should have two players', function() { + expect(testTicTacToe.player1).toBeDefined(); + expect(testTicTacToe.player2).toBeDefined(); + }); + + }); }); diff --git a/src/tictactoe.js b/src/tictactoe.js index fd2a974..2037ba1 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -1,4 +1,6 @@ -var TicTacToe = function () {}; +var TicTacToe = function () { + this.board = []; +}; module.exports = TicTacToe; From 056dbac7ad5ddbc035e0582671a730508d5d6148 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:06:19 -0800 Subject: [PATCH 04/68] Defines two players for TicTacToe game --- src/tictactoe.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/tictactoe.js b/src/tictactoe.js index 2037ba1..7f71189 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -1,5 +1,7 @@ var TicTacToe = function () { this.board = []; + this.player1 = "Sarah"; + this.player2 = "Heather"; }; module.exports = TicTacToe; From d6bb5d271e36d26cec4bd245b2885ff462d05f73 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:11:13 -0800 Subject: [PATCH 05/68] Tests that a new board object is defined --- spec/tictactoe.spec.js | 13 ++++++++++++- src/tictactoe.js | 3 +++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index d4292d7..f7d4e1d 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -1,5 +1,6 @@ // Do not remove import TicTacToe from 'tictactoe'; +import Board from 'tictactoe'; describe('TicTacToe', function() { @@ -19,7 +20,17 @@ describe('TicTacToe', function() { expect(testTicTacToe.player2).toBeDefined(); }); - }); }); + +describe('Board', function() { + var testBoard = new Board(); + + describe('Board', function() { + it('should be defined', function() { + expect(testBoard).toBeDefined(); + }); + + }); +}); diff --git a/src/tictactoe.js b/src/tictactoe.js index 7f71189..3b0cf16 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -4,6 +4,9 @@ var TicTacToe = function () { this.player2 = "Heather"; }; +var Board = function () { +}; + module.exports = TicTacToe; // DO NOT REMOVE THIS From 9507af2df8e6760c6fd9c7a0b401f7cc2c707315 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:11:56 -0800 Subject: [PATCH 06/68] Refactors board to be the actual board --- src/tictactoe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tictactoe.js b/src/tictactoe.js index 3b0cf16..d6f8ba9 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -1,5 +1,5 @@ var TicTacToe = function () { - this.board = []; + this.board = new Board(); this.player1 = "Sarah"; this.player2 = "Heather"; }; From e2984f5e7f75edfd21a5e326f00dad1b6a182663 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:13:18 -0800 Subject: [PATCH 07/68] Tests that a player object is defined --- spec/tictactoe.spec.js | 12 ++++++++++++ src/tictactoe.js | 3 +++ 2 files changed, 15 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index f7d4e1d..1dfa9f2 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -1,6 +1,7 @@ // Do not remove import TicTacToe from 'tictactoe'; import Board from 'tictactoe'; +import Player from 'tictactoe'; describe('TicTacToe', function() { @@ -34,3 +35,14 @@ describe('Board', function() { }); }); + +describe('Player', function() { + var testPlayer = new Player(); + + describe('Player', function() { + it('should be defined', function() { + expect(testPlayer).toBeDefined(); + }); + + }); +}); diff --git a/src/tictactoe.js b/src/tictactoe.js index d6f8ba9..27d4bc7 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -7,6 +7,9 @@ var TicTacToe = function () { var Board = function () { }; +var Player = function () { +}; + module.exports = TicTacToe; // DO NOT REMOVE THIS From a355d2e0923ddc9310074587e259061cf8f4d89d Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:13:59 -0800 Subject: [PATCH 08/68] Refactors to make players actual players --- src/tictactoe.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tictactoe.js b/src/tictactoe.js index 27d4bc7..24c5273 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -1,7 +1,7 @@ var TicTacToe = function () { this.board = new Board(); - this.player1 = "Sarah"; - this.player2 = "Heather"; + this.player1 = new Player(); + this.player2 = new Player(); }; var Board = function () { From 28d87d6afbc0a4e564ef5a7f961ee0e86d6aaaf2 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 12:31:07 -0800 Subject: [PATCH 09/68] Lunchtime commit --- spec/tictactoe.spec.js | 13 +++++++++++++ src/tictactoe.js | 8 +++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 1dfa9f2..9788313 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -26,23 +26,36 @@ describe('TicTacToe', function() { }); describe('Board', function() { + var testBoard = new Board(); + console.log(testBoard); + describe('Board', function() { it('should be defined', function() { expect(testBoard).toBeDefined(); }); + it('should have a grid', function() { + expect(testBoard.grid).toBeDefined(); + }); + }); }); describe('Player', function() { var testPlayer = new Player(); + console.log(testPlayer); + console.log(testPlayer.name); describe('Player', function() { it('should be defined', function() { expect(testPlayer).toBeDefined(); }); + it('should have a name', function() { + expect(testPlayer.name).toEqual("Testy"); + }); + }); }); diff --git a/src/tictactoe.js b/src/tictactoe.js index 24c5273..eee3002 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -1,13 +1,15 @@ -var TicTacToe = function () { +var TicTacToe = function() { this.board = new Board(); this.player1 = new Player(); this.player2 = new Player(); }; -var Board = function () { +var Board = function() { + this.grid = [[], [], []]; }; -var Player = function () { +var Player = function(name = "Testy") { + this.name = name; }; module.exports = TicTacToe; From 328fb9ddfc0ce17a943bf39a720e2801e26fd65a Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 13:47:53 -0800 Subject: [PATCH 10/68] Separates objects between files for testing --- spec/board.spec.js | 18 ++++++++++++++++++ spec/player.spec.js | 18 ++++++++++++++++++ spec/tictactoe.spec.js | 39 +-------------------------------------- src/board.js | 8 ++++++++ src/player.js | 8 ++++++++ src/tictactoe.js | 11 +++-------- 6 files changed, 56 insertions(+), 46 deletions(-) create mode 100644 spec/board.spec.js create mode 100644 spec/player.spec.js create mode 100644 src/board.js create mode 100644 src/player.js diff --git a/spec/board.spec.js b/spec/board.spec.js new file mode 100644 index 0000000..b7ba2d3 --- /dev/null +++ b/spec/board.spec.js @@ -0,0 +1,18 @@ +// Do not remove +import Board from 'board'; + +describe('Board', function() { + + var testBoard = new Board(); + + describe('Board', function() { + it('should be defined', function() { + expect(testBoard).toBeDefined(); + }); + + it('should have a grid', function() { + expect(testBoard.grid).toBeDefined(); + }); + + }); +}); diff --git a/spec/player.spec.js b/spec/player.spec.js new file mode 100644 index 0000000..66bfd20 --- /dev/null +++ b/spec/player.spec.js @@ -0,0 +1,18 @@ +// Do not remove +import Player from 'player'; + +describe('Player', function() { + + var testPlayer = new Player("Testy"); + + describe('Player', function() { + it('should be defined', function() { + expect(testPlayer).toBeDefined(); + }); + + it('should have a name', function() { + expect(testPlayer.name).toEqual("Testy"); + }); + + }); +}); diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 9788313..b4dc0aa 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -1,10 +1,8 @@ // Do not remove import TicTacToe from 'tictactoe'; -import Board from 'tictactoe'; -import Player from 'tictactoe'; - describe('TicTacToe', function() { + var testTicTacToe = new TicTacToe(); describe('TicTacToe', function() { @@ -24,38 +22,3 @@ describe('TicTacToe', function() { }); }); - -describe('Board', function() { - - var testBoard = new Board(); - console.log(testBoard); - - - describe('Board', function() { - it('should be defined', function() { - expect(testBoard).toBeDefined(); - }); - - it('should have a grid', function() { - expect(testBoard.grid).toBeDefined(); - }); - - }); -}); - -describe('Player', function() { - var testPlayer = new Player(); - console.log(testPlayer); - console.log(testPlayer.name); - - describe('Player', function() { - it('should be defined', function() { - expect(testPlayer).toBeDefined(); - }); - - it('should have a name', function() { - expect(testPlayer.name).toEqual("Testy"); - }); - - }); -}); diff --git a/src/board.js b/src/board.js new file mode 100644 index 0000000..07d4c3f --- /dev/null +++ b/src/board.js @@ -0,0 +1,8 @@ +var Board = function() { + this.grid = [[], [], []]; +}; + +module.exports = Board; + +// DO NOT REMOVE THIS +export default Board; diff --git a/src/player.js b/src/player.js new file mode 100644 index 0000000..f5250a9 --- /dev/null +++ b/src/player.js @@ -0,0 +1,8 @@ +var Player = function(name) { + this.name = name; +}; + +module.exports = Player; + +// DO NOT REMOVE THIS +export default Player; diff --git a/src/tictactoe.js b/src/tictactoe.js index eee3002..f61e950 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -1,17 +1,12 @@ +import Board from 'board'; +import Player from 'player'; + var TicTacToe = function() { this.board = new Board(); this.player1 = new Player(); this.player2 = new Player(); }; -var Board = function() { - this.grid = [[], [], []]; -}; - -var Player = function(name = "Testy") { - this.name = name; -}; - module.exports = TicTacToe; // DO NOT REMOVE THIS From f270b88deffa460a795de10bc0870f75291b168d Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 14:15:17 -0800 Subject: [PATCH 11/68] Tests move in TicTacToe module --- spec/player.spec.js | 13 ++++++++++--- spec/tictactoe.spec.js | 11 +++++++++++ src/player.js | 3 ++- src/tictactoe.js | 20 ++++++++++++++++++-- 4 files changed, 41 insertions(+), 6 deletions(-) diff --git a/spec/player.spec.js b/spec/player.spec.js index 66bfd20..0ac9116 100644 --- a/spec/player.spec.js +++ b/spec/player.spec.js @@ -3,16 +3,23 @@ import Player from 'player'; describe('Player', function() { - var testPlayer = new Player("Testy"); + var testPlayerX = new Player("Testy", "X"); + var testPlayerO = new Player("Crabby", "O"); describe('Player', function() { it('should be defined', function() { - expect(testPlayer).toBeDefined(); + expect(testPlayerX).toBeDefined(); }); it('should have a name', function() { - expect(testPlayer.name).toEqual("Testy"); + expect(testPlayerX.name).toEqual("Testy"); + }); + + it('should be assigned a marker', function() { + expect(testPlayerX.marker).toEqual("X"); + expect(testPlayerO.marker).toEqual("O"); }); }); + }); diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index b4dc0aa..e1c3932 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -4,6 +4,9 @@ import TicTacToe from 'tictactoe'; describe('TicTacToe', function() { var testTicTacToe = new TicTacToe(); + var sarah = testTicTacToe.player1; + var heather = testTicTacToe.player2; + describe('TicTacToe', function() { it('should be defined', function() { @@ -21,4 +24,12 @@ describe('TicTacToe', function() { }); + describe('move', function() { + + it('should return the placement', function() { + expect(testTicTacToe.move("1")).toBeTruthy(); + }); + + }); + }); diff --git a/src/player.js b/src/player.js index f5250a9..53834c1 100644 --- a/src/player.js +++ b/src/player.js @@ -1,5 +1,6 @@ -var Player = function(name) { +var Player = function(name, marker) { this.name = name; + this.marker = marker; }; module.exports = Player; diff --git a/src/tictactoe.js b/src/tictactoe.js index f61e950..ef7eb98 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -3,8 +3,24 @@ import Player from 'player'; var TicTacToe = function() { this.board = new Board(); - this.player1 = new Player(); - this.player2 = new Player(); + this.player1 = new Player("Sarah", "X"); + this.player2 = new Player("Heather", "O"); +}; + +TicTacToe.prototype.move = function(placement) { + // A move will: + // - get the placement + // - check the board for availability + // - return FALSE if not available + // - return the placement if available + + + + this.placement = placement; + + return this.placement; + + }; module.exports = TicTacToe; From 4072e460c37d74d4770b7f9479cf125c2eec1e35 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 14:18:41 -0800 Subject: [PATCH 12/68] Jerk codes the test for valid placement as we have not made a real board yet --- spec/tictactoe.spec.js | 12 ++++++++++++ src/tictactoe.js | 8 ++++++++ 2 files changed, 20 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index e1c3932..db358e8 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -32,4 +32,16 @@ describe('TicTacToe', function() { }); + describe('isValidPlacement', function() { + + it('should return false if the placement on the board does not exist', function() { + expect(testTicTacToe.isValidPlacement("1000")).toBeFalsy(); + }); + + // it('should return false if the placement on the board is already occupied', function() { + // expect(testTicTacToe.isValidPlacement("1")).toBeFalsy(); + // }); + + }); + }); diff --git a/src/tictactoe.js b/src/tictactoe.js index ef7eb98..09f7543 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -21,6 +21,14 @@ TicTacToe.prototype.move = function(placement) { return this.placement; +}; + +TicTacToe.prototype.isValidPlacement = function(placement) { + this.placement = placement; + + return false; + + }; module.exports = TicTacToe; From 0ff8172eb4fded0f2d85a5e1b415d64fdb2eb100 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 14:27:29 -0800 Subject: [PATCH 13/68] Tests that board is constructed as a 3 long array of sub-arrays --- spec/board.spec.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/spec/board.spec.js b/spec/board.spec.js index b7ba2d3..83a3435 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -15,4 +15,24 @@ describe('Board', function() { }); }); + + describe('grid', function() { + + var grid = testBoard.grid; + + it('should be an array', function() { + expect(Array.isArray(grid)).toBe(true); + }); + + it('should be made of sub-arrays', function() { + grid.forEach(function(array) { + expect(Array.isArray(array)).toBe(true); + }); + }); + + it('should be an 3 arrays long', function() { + expect(grid.length).toEqual(3); + }); + + }); }); From 4e488ec7c9e195ebda99c4595dfa58e0dd6b20e1 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 14:32:54 -0800 Subject: [PATCH 14/68] Tests null default values for instantiating grid --- spec/board.spec.js | 21 +++++++++++++++++++-- src/board.js | 6 +++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/spec/board.spec.js b/spec/board.spec.js index 83a3435..e8310c8 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -24,15 +24,32 @@ describe('Board', function() { expect(Array.isArray(grid)).toBe(true); }); + it('should be 3 long', function() { + expect(grid.length).toEqual(3); + }); + it('should be made of sub-arrays', function() { grid.forEach(function(array) { expect(Array.isArray(array)).toBe(true); }); }); - it('should be an 3 arrays long', function() { - expect(grid.length).toEqual(3); + it('each sub-arrays should have a length of 3', function() { + grid.forEach(function(array) { + expect(array.length).toEqual(3); + }); }); + it('each sub-arrays should default values of null', function() { + grid.forEach(function(array) { + array.forEach(function(element){ + expect(element).toBeNull(); + + }); + }); + }); + + + }); }); diff --git a/src/board.js b/src/board.js index 07d4c3f..cc927ae 100644 --- a/src/board.js +++ b/src/board.js @@ -1,5 +1,9 @@ var Board = function() { - this.grid = [[], [], []]; + this.grid = [ + [null, null, null], + [null, null, null], + [null, null, null] + ]; }; module.exports = Board; From 98280f2391fdfbc822b4488de5ec7f8beb42e3d1 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 14:46:58 -0800 Subject: [PATCH 15/68] Tests ability to check if a board position is open or invalid --- spec/tictactoe.spec.js | 7 ++++++- src/tictactoe.js | 12 +++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index db358e8..76eca26 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -35,13 +35,18 @@ describe('TicTacToe', function() { describe('isValidPlacement', function() { it('should return false if the placement on the board does not exist', function() { - expect(testTicTacToe.isValidPlacement("1000")).toBeFalsy(); + expect(testTicTacToe.isValidPlacement([0, 1000])).toBeFalsy(); }); // it('should return false if the placement on the board is already occupied', function() { // expect(testTicTacToe.isValidPlacement("1")).toBeFalsy(); // }); + it('should return true if the placement on the board is not occupied', function() { + expect(testTicTacToe.isValidPlacement([0, 1])).toBeTruthy(); + }); + + }); }); diff --git a/src/tictactoe.js b/src/tictactoe.js index 09f7543..4151165 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -10,6 +10,7 @@ var TicTacToe = function() { TicTacToe.prototype.move = function(placement) { // A move will: // - get the placement + // format of placement argument: [rowIndex, columnIndex] // - check the board for availability // - return FALSE if not available // - return the placement if available @@ -25,8 +26,17 @@ TicTacToe.prototype.move = function(placement) { TicTacToe.prototype.isValidPlacement = function(placement) { this.placement = placement; + this.row = this.placement[0]; + this.column = this.placement[1]; + + var boardPosition = this.board.grid[this.row][this.column]; + + if ( boardPosition === null) { + return true; + } else { + return false; + } - return false; }; From 3673003650331999f19eafc92b0a5d0ebb326ba3 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 14:55:32 -0800 Subject: [PATCH 16/68] Adds logic to move for checking placement --- spec/tictactoe.spec.js | 2 +- src/tictactoe.js | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 76eca26..8d663b9 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -27,7 +27,7 @@ describe('TicTacToe', function() { describe('move', function() { it('should return the placement', function() { - expect(testTicTacToe.move("1")).toBeTruthy(); + expect(testTicTacToe.move([0,0])).toBeTruthy(); }); }); diff --git a/src/tictactoe.js b/src/tictactoe.js index 4151165..e6ff5e5 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -11,15 +11,17 @@ TicTacToe.prototype.move = function(placement) { // A move will: // - get the placement // format of placement argument: [rowIndex, columnIndex] - // - check the board for availability - // - return FALSE if not available - // - return the placement if available + // - check the board for valid placement + // - return FALSE if not valid + // - return the placement if valid this.placement = placement; - return this.placement; + return (this.isValidPlacement(this.placement) ? this.placement : false); + + }; @@ -31,7 +33,7 @@ TicTacToe.prototype.isValidPlacement = function(placement) { var boardPosition = this.board.grid[this.row][this.column]; - if ( boardPosition === null) { + if ( boardPosition === null ) { return true; } else { return false; From f98601cce40e9b798c978da745928e659b4bf67e Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:03:35 -0800 Subject: [PATCH 17/68] Tests that an occupied board returns false for valid placement --- spec/tictactoe.spec.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 8d663b9..3554387 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -4,9 +4,7 @@ import TicTacToe from 'tictactoe'; describe('TicTacToe', function() { var testTicTacToe = new TicTacToe(); - var sarah = testTicTacToe.player1; - var heather = testTicTacToe.player2; - + var occupiedTicTacToe = new TicTacToe(); describe('TicTacToe', function() { it('should be defined', function() { @@ -38,15 +36,23 @@ describe('TicTacToe', function() { expect(testTicTacToe.isValidPlacement([0, 1000])).toBeFalsy(); }); - // it('should return false if the placement on the board is already occupied', function() { - // expect(testTicTacToe.isValidPlacement("1")).toBeFalsy(); - // }); + it('should return false if the placement on the board is already occupied', function() { + + var occupiedGrid = [ + ['X', 'O', null], + [null, null, null], + [null, null, null] + ]; + + occupiedTicTacToe.board.grid = occupiedGrid; + + expect(occupiedTicTacToe.isValidPlacement([0,0])).toBeFalsy(); + }); it('should return true if the placement on the board is not occupied', function() { expect(testTicTacToe.isValidPlacement([0, 1])).toBeTruthy(); }); - }); }); From 3b52b4b79eda40d7a194115c82429fb4503dfdf7 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:24:16 -0800 Subject: [PATCH 18/68] Tests that a boards value can be updated to a given marker --- spec/tictactoe.spec.js | 21 +++++++++++++++++++++ src/tictactoe.js | 15 +++++++++++---- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 3554387..f6021d8 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -55,4 +55,25 @@ describe('TicTacToe', function() { }); + describe('updateBoard', function() { + + it('should change the boards current value to the given marker', function() { + var boardPosition = [0,0]; + var row = boardPosition[0]; + var column = boardPosition[1]; + + var boardValue = testTicTacToe.board.grid[row][column]; + + expect(boardValue).toBeNull(); + + testTicTacToe.updateBoard(boardPosition, "X"); + + var boardValueUpdate = testTicTacToe.board.grid[row][column]; + + expect(boardValueUpdate).toEqual("X"); + + }); + + }); + }); diff --git a/src/tictactoe.js b/src/tictactoe.js index e6ff5e5..d5eb165 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -15,17 +15,14 @@ TicTacToe.prototype.move = function(placement) { // - return FALSE if not valid // - return the placement if valid - - this.placement = placement; return (this.isValidPlacement(this.placement) ? this.placement : false); +}; -}; - TicTacToe.prototype.isValidPlacement = function(placement) { this.placement = placement; this.row = this.placement[0]; @@ -39,8 +36,18 @@ TicTacToe.prototype.isValidPlacement = function(placement) { return false; } +}; + +TicTacToe.prototype.updateBoard = function(boardPosition, marker) { + this.marker = marker; + + this.boardPosition = boardPosition; + this.row = this.boardPosition[0]; + this.column = this.boardPosition[1]; + this.board.grid[this.row][this.column] = this.marker; + return this.board; }; module.exports = TicTacToe; From b4e7290aa151b36f7ab336e45015a82d0d61a85d Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:26:52 -0800 Subject: [PATCH 19/68] Tests that a game has turns --- spec/tictactoe.spec.js | 4 ++++ src/tictactoe.js | 3 +-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index f6021d8..3020479 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -20,6 +20,10 @@ describe('TicTacToe', function() { expect(testTicTacToe.player2).toBeDefined(); }); + it('should have turns', function() { + expect(testTicTacToe.turns).toBeDefined(); + }); + }); describe('move', function() { diff --git a/src/tictactoe.js b/src/tictactoe.js index d5eb165..7c90be5 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -5,6 +5,7 @@ var TicTacToe = function() { this.board = new Board(); this.player1 = new Player("Sarah", "X"); this.player2 = new Player("Heather", "O"); + this.turns = 0; }; TicTacToe.prototype.move = function(placement) { @@ -21,8 +22,6 @@ TicTacToe.prototype.move = function(placement) { }; - - TicTacToe.prototype.isValidPlacement = function(placement) { this.placement = placement; this.row = this.placement[0]; From f1d1230f5e1ff1de307199102b6cbd2b1e4de0bf Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:31:50 -0800 Subject: [PATCH 20/68] Increments turns by 1 --- spec/tictactoe.spec.js | 12 ++++++++++++ src/tictactoe.js | 13 +++++++++++++ 2 files changed, 25 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 3020479..9b459ad 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -80,4 +80,16 @@ describe('TicTacToe', function() { }); + describe('addTurn', function() { + + it('should increment the games turns by 1', function() { + var gameTurns = testTicTacToe.turns; + + testTicTacToe.addTurn(); + + expect(testTicTacToe.turns).toEqual(gameTurns + 1); + }); + + }); + }); diff --git a/src/tictactoe.js b/src/tictactoe.js index 7c90be5..2449836 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -49,6 +49,19 @@ TicTacToe.prototype.updateBoard = function(boardPosition, marker) { return this.board; }; +TicTacToe.prototype.endMove = function() { + // Ending the move will: + // - increment the turns counter by 1 + // - switch current player +}; + +TicTacToe.prototype.addTurn = function() { + this.turns += 1; +}; + + + + module.exports = TicTacToe; // DO NOT REMOVE THIS From c42132a3f3247c78c37a93fcfe1dcefcbf4b682b Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:40:30 -0800 Subject: [PATCH 21/68] Tests that a player can be changed to its counterpart --- spec/tictactoe.spec.js | 16 ++++++++++++++++ src/tictactoe.js | 9 +++++++++ 2 files changed, 25 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 9b459ad..35083b6 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -92,4 +92,20 @@ describe('TicTacToe', function() { }); + describe('changePlayers', function() { + + it('change the current player to next player and back again', function() { + var originalPlayer = testTicTacToe.currentPlayer; + + testTicTacToe.changePlayers(); + expect(testTicTacToe.currentPlayer).not.toEqual(originalPlayer); + + testTicTacToe.changePlayers(); + expect(testTicTacToe.currentPlayer).toEqual(originalPlayer); + + + }); + + }); + }); diff --git a/src/tictactoe.js b/src/tictactoe.js index 2449836..d6385c6 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -5,7 +5,11 @@ var TicTacToe = function() { this.board = new Board(); this.player1 = new Player("Sarah", "X"); this.player2 = new Player("Heather", "O"); + this.players = [this.player1, this.player2]; + this.currentPlayer = 0; + this.turns = 0; + }; TicTacToe.prototype.move = function(placement) { @@ -59,6 +63,11 @@ TicTacToe.prototype.addTurn = function() { this.turns += 1; }; +TicTacToe.prototype.changePlayers = function() { + this.currentPlayer = ((this.currentPlayer === 0) ? 1 : 0); + +}; + From 93efe59ca322f6c092acf90e97cf0ea5cead5944 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:44:14 -0800 Subject: [PATCH 22/68] Tests that endMove adds a turn and changes player --- spec/tictactoe.spec.js | 15 +++++++++++++++ src/tictactoe.js | 2 ++ 2 files changed, 17 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 35083b6..684d99b 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -80,6 +80,21 @@ describe('TicTacToe', function() { }); + describe('endMove', function() { + + it('should increment the games turns by 1 AND change the current player', function() { + var gameTurns = testTicTacToe.turns; + var originalPlayer = testTicTacToe.currentPlayer; + + testTicTacToe.endMove(); + + expect(testTicTacToe.turns).toEqual(gameTurns + 1); + expect(testTicTacToe.currentPlayer).not.toEqual(originalPlayer); + + }); + + }); + describe('addTurn', function() { it('should increment the games turns by 1', function() { diff --git a/src/tictactoe.js b/src/tictactoe.js index d6385c6..ce09dfb 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -57,6 +57,8 @@ TicTacToe.prototype.endMove = function() { // Ending the move will: // - increment the turns counter by 1 // - switch current player + this.addTurn(); + this.changePlayers(); }; TicTacToe.prototype.addTurn = function() { From 680358f4ea342ee7e061ae51e181fb044074c984 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 13 Dec 2016 15:48:48 -0800 Subject: [PATCH 23/68] Randomized the starting player through the sample method --- src/tictactoe.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/tictactoe.js b/src/tictactoe.js index ce09dfb..32891b9 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -6,12 +6,19 @@ var TicTacToe = function() { this.player1 = new Player("Sarah", "X"); this.player2 = new Player("Heather", "O"); this.players = [this.player1, this.player2]; - this.currentPlayer = 0; + // pick randomly between 2 players: array of 0 and 1 + this.currentPlayer = sample([0,1]); this.turns = 0; }; +// helper function to wrap ugly random +function sample(array) { + var index = Math.floor ( Math.random() * array.length ); + return array[index]; +} + TicTacToe.prototype.move = function(placement) { // A move will: // - get the placement @@ -70,9 +77,6 @@ TicTacToe.prototype.changePlayers = function() { }; - - - module.exports = TicTacToe; // DO NOT REMOVE THIS From 80b125f51422d38fe0f7b866723421b931d931f2 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 09:47:12 -0800 Subject: [PATCH 24/68] Tests hasWon with no winner and jerk code --- spec/tictactoe.spec.js | 26 ++++++++++++++++++++++++++ src/tictactoe.js | 7 +++++++ 2 files changed, 33 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 684d99b..336807f 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -6,6 +6,12 @@ describe('TicTacToe', function() { var testTicTacToe = new TicTacToe(); var occupiedTicTacToe = new TicTacToe(); + // Boards to check that we can win in various ways + var verticalTicTacToe = new TicTacToe(); + var horizontalTicTacToe = new TicTacToe(); + var diagonalTicTacToe = new TicTacToe(); + var tieTicTacToe = new TicTacToe(); + describe('TicTacToe', function() { it('should be defined', function() { expect(testTicTacToe).toBeDefined(); @@ -107,6 +113,26 @@ describe('TicTacToe', function() { }); + describe('hasWon', function() { + + var tieGrid = [ + ['X', 'O', 'X'], + ['O', 'X', 'O'], + ['O', 'X', 'O'] + ]; + + tieTicTacToe.board.grid = tieGrid; + + it('should return FALSE if no one has won', function() { + // incomplete board + expect(testTicTacToe.hasWon()).toBeFalsy(); + // complete board (tie) + expect(tieTicTacToe.hasWon()).toBeFalsy(); + }); + + + }); + describe('changePlayers', function() { it('change the current player to next player and back again', function() { diff --git a/src/tictactoe.js b/src/tictactoe.js index 32891b9..d96b958 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -63,8 +63,11 @@ TicTacToe.prototype.updateBoard = function(boardPosition, marker) { TicTacToe.prototype.endMove = function() { // Ending the move will: // - increment the turns counter by 1 + // - check if the game has been won // - switch current player + this.addTurn(); + // this.hasWon(); this.changePlayers(); }; @@ -72,6 +75,10 @@ TicTacToe.prototype.addTurn = function() { this.turns += 1; }; +TicTacToe.prototype.hasWon = function() { + return false; +}; + TicTacToe.prototype.changePlayers = function() { this.currentPlayer = ((this.currentPlayer === 0) ? 1 : 0); From edcf3556ce6d2eaeaa54d5b8d71a6c40281b2bd3 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 10:01:46 -0800 Subject: [PATCH 25/68] Tests horizontal win --- spec/tictactoe.spec.js | 20 +++++++++++++++++++- src/tictactoe.js | 11 +++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 336807f..c0cb082 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -123,13 +123,31 @@ describe('TicTacToe', function() { tieTicTacToe.board.grid = tieGrid; + var horizontalGrid = [ + ['X', 'X', 'X'], + ['O', null, 'O'], + [null, null, null] + ]; + + horizontalTicTacToe.board.grid = horizontalGrid; + it('should return FALSE if no one has won', function() { - // incomplete board + // incomplete board (contains null) expect(testTicTacToe.hasWon()).toBeFalsy(); // complete board (tie) expect(tieTicTacToe.hasWon()).toBeFalsy(); }); + it('should not match nulls when evaluating markers for matches', function() { + expect(testTicTacToe.hasWon()).toBeFalsy(); + }); + + it('should return TRUE if 3 markers match horizontally', function() { + expect(horizontalTicTacToe.hasWon()).toBeTruthy(); + }); + + + }); diff --git a/src/tictactoe.js b/src/tictactoe.js index d96b958..b43130c 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -76,6 +76,17 @@ TicTacToe.prototype.addTurn = function() { }; TicTacToe.prototype.hasWon = function() { + // grid[row][column] + var grid = this.board.grid; + + // A horizaontal match victory - all columns in same row are equal and none is null + for (var i = 0; i < 3; i++) { + if(grid[i][0] == grid[i][1] && grid[i][0] == grid[i][2] && grid[i][0] !== null){ + return true; + } + } + + return false; }; From 063c5839d7164727d8a357d83d0a623b97a6960a Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 10:06:08 -0800 Subject: [PATCH 26/68] Test vertical victory --- spec/tictactoe.spec.js | 12 ++++++++++++ src/tictactoe.js | 9 ++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index c0cb082..9a2b22a 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -131,6 +131,14 @@ describe('TicTacToe', function() { horizontalTicTacToe.board.grid = horizontalGrid; + var verticalGrid = [ + ['X', 'O', 'X'], + ['X', 'O', 'O'], + ['X', null, null] + ]; + + verticalTicTacToe.board.grid = verticalGrid; + it('should return FALSE if no one has won', function() { // incomplete board (contains null) expect(testTicTacToe.hasWon()).toBeFalsy(); @@ -146,6 +154,10 @@ describe('TicTacToe', function() { expect(horizontalTicTacToe.hasWon()).toBeTruthy(); }); + it('should return TRUE if 3 markers match vertically', function() { + expect(verticalTicTacToe.hasWon()).toBeTruthy(); + }); + diff --git a/src/tictactoe.js b/src/tictactoe.js index b43130c..849e205 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -79,13 +79,20 @@ TicTacToe.prototype.hasWon = function() { // grid[row][column] var grid = this.board.grid; - // A horizaontal match victory - all columns in same row are equal and none is null + // A horizontal match victory - all columns in same row are equal and none is null for (var i = 0; i < 3; i++) { if(grid[i][0] == grid[i][1] && grid[i][0] == grid[i][2] && grid[i][0] !== null){ return true; } } + // A vertical match victory - all rows in same column are equal and none is null + for (var j = 0; j < 3; j++) { + if(grid[0][j] == grid[1][j] && grid[0][j] == grid[2][j] && grid[0][j] !== null){ + return true; + } + } + return false; }; From b6cb4a149a4e05c75ec2887d9b2d75d6327e8d99 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 10:15:01 -0800 Subject: [PATCH 27/68] Tests for diagonal victory --- spec/tictactoe.spec.js | 25 ++++++++++++++++++++++--- src/tictactoe.js | 10 ++++++++++ 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 9a2b22a..69a3ca3 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -9,7 +9,8 @@ describe('TicTacToe', function() { // Boards to check that we can win in various ways var verticalTicTacToe = new TicTacToe(); var horizontalTicTacToe = new TicTacToe(); - var diagonalTicTacToe = new TicTacToe(); + var diagonalBottomTicTacToe = new TicTacToe(); + var diagonalTopTicTacToe = new TicTacToe(); var tieTicTacToe = new TicTacToe(); describe('TicTacToe', function() { @@ -139,6 +140,22 @@ describe('TicTacToe', function() { verticalTicTacToe.board.grid = verticalGrid; + var diagonalBottomGrid = [ + ['X', 'O', 'X'], + ['O', 'X', 'O'], + ['X', null, null] + ]; + + diagonalBottomTicTacToe.board.grid = diagonalBottomGrid; + + var diagonalTopGrid = [ + ['X', 'O', 'X'], + ['O', 'X', null], + ['O', null, 'X'] + ]; + + diagonalTopTicTacToe.board.grid = diagonalTopGrid; + it('should return FALSE if no one has won', function() { // incomplete board (contains null) expect(testTicTacToe.hasWon()).toBeFalsy(); @@ -158,8 +175,10 @@ describe('TicTacToe', function() { expect(verticalTicTacToe.hasWon()).toBeTruthy(); }); - - + it('should return TRUE if 3 markers match diagonally', function() { + expect(diagonalBottomTicTacToe.hasWon()).toBeTruthy(); + expect(diagonalTopTicTacToe.hasWon()).toBeTruthy(); + }); }); diff --git a/src/tictactoe.js b/src/tictactoe.js index 849e205..182e335 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -93,6 +93,16 @@ TicTacToe.prototype.hasWon = function() { } } + // A diagonal match victory - need to validate two cases: + // - starting in the bottom left + if(grid[2][0] == grid[1][1] && grid[2][0] == grid[0][2] && grid[2][0] !== null){ + return true; + } + + // - starting in the top left + if(grid[0][0] == grid[1][1] && grid[0][0] == grid[2][2] && grid[0][0] !== null){ + return true; + } return false; }; From 6a04f9a4fafb3af8017f24314efc22561e818b34 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 10:37:24 -0800 Subject: [PATCH 28/68] Tests that player only changes if game has not been won --- spec/tictactoe.spec.js | 43 +++++++++++++++++++++++++++++++++++++++++- src/tictactoe.js | 11 ++++++++--- 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 69a3ca3..9b7c745 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -89,7 +89,7 @@ describe('TicTacToe', function() { describe('endMove', function() { - it('should increment the games turns by 1 AND change the current player', function() { + it('should increment the games turns by 1 AND change the current player when turns are less than 5', function() { var gameTurns = testTicTacToe.turns; var originalPlayer = testTicTacToe.currentPlayer; @@ -100,6 +100,47 @@ describe('TicTacToe', function() { }); + it('should increment the games turns by 1 AND change the current player when turns are equal to or more than 5 and no one has won', function() { + occupiedTicTacToe.turns = 5; + var gameTurns = occupiedTicTacToe.turns; + var originalPlayer = occupiedTicTacToe.currentPlayer; + + occupiedTicTacToe.endMove(); + + expect(occupiedTicTacToe.turns).toEqual(gameTurns + 1); + expect(occupiedTicTacToe.currentPlayer).not.toEqual(originalPlayer); + + // turns are now greater than 5 because of endMove increment + var gameTurns2 = occupiedTicTacToe.turns; + var originalPlayer2 = occupiedTicTacToe.currentPlayer; + + occupiedTicTacToe.endMove(); + + expect(occupiedTicTacToe.turns).toEqual(gameTurns2 + 1); + expect(occupiedTicTacToe.currentPlayer).not.toEqual(originalPlayer2); + + }); + + it('should increment the games turns by 1 AND NOT change the current player when turns are equal to or more than 5 AND someone has won', function() { + horizontalTicTacToe.turns = 5; + var horizontalGrid = [ + ['X', 'X', 'X'], + ['O', null, 'O'], + [null, null, null] + ]; + + horizontalTicTacToe.board.grid = horizontalGrid; + + var gameTurns = horizontalTicTacToe.turns; + var originalPlayer = horizontalTicTacToe.currentPlayer; + + horizontalTicTacToe.endMove(); + + expect(horizontalTicTacToe.turns).toEqual(gameTurns + 1); + expect(horizontalTicTacToe.currentPlayer).toEqual(originalPlayer); + + }); + }); describe('addTurn', function() { diff --git a/src/tictactoe.js b/src/tictactoe.js index 182e335..319d6ee 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -67,8 +67,14 @@ TicTacToe.prototype.endMove = function() { // - switch current player this.addTurn(); - // this.hasWon(); - this.changePlayers(); + if (this.turns >= 5 && !this.hasWon()) { + // only change players if hasWon is false after 5 turns + this.changePlayers(); + } else if (this.turns < 5) { + // for the first 4 turns, always changePlayers because there is no chance of victory + this.changePlayers(); + } + }; TicTacToe.prototype.addTurn = function() { @@ -98,7 +104,6 @@ TicTacToe.prototype.hasWon = function() { if(grid[2][0] == grid[1][1] && grid[2][0] == grid[0][2] && grid[2][0] !== null){ return true; } - // - starting in the top left if(grid[0][0] == grid[1][1] && grid[0][0] == grid[2][2] && grid[0][0] !== null){ return true; From f71fd14cb46e38aa2f764eec4423d85295863725 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 12:01:44 -0800 Subject: [PATCH 29/68] Moves instance variables to tests that use them to be granular --- spec/tictactoe.spec.js | 147 +++++++++++++++++++++-------------------- 1 file changed, 74 insertions(+), 73 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 9b7c745..6b68da8 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -4,14 +4,6 @@ import TicTacToe from 'tictactoe'; describe('TicTacToe', function() { var testTicTacToe = new TicTacToe(); - var occupiedTicTacToe = new TicTacToe(); - - // Boards to check that we can win in various ways - var verticalTicTacToe = new TicTacToe(); - var horizontalTicTacToe = new TicTacToe(); - var diagonalBottomTicTacToe = new TicTacToe(); - var diagonalTopTicTacToe = new TicTacToe(); - var tieTicTacToe = new TicTacToe(); describe('TicTacToe', function() { it('should be defined', function() { @@ -33,13 +25,13 @@ describe('TicTacToe', function() { }); - describe('move', function() { - - it('should return the placement', function() { - expect(testTicTacToe.move([0,0])).toBeTruthy(); - }); - - }); + // describe('playTurn', function() { + // + // it('should know who the current player is', function() { + // expect(testTicTacToe.playTurn([0,0])).toBeTruthy(); + // }); + // + // }); describe('isValidPlacement', function() { @@ -55,6 +47,7 @@ describe('TicTacToe', function() { [null, null, null] ]; + var occupiedTicTacToe = new TicTacToe(); occupiedTicTacToe.board.grid = occupiedGrid; expect(occupiedTicTacToe.isValidPlacement([0,0])).toBeFalsy(); @@ -101,43 +94,47 @@ describe('TicTacToe', function() { }); it('should increment the games turns by 1 AND change the current player when turns are equal to or more than 5 and no one has won', function() { - occupiedTicTacToe.turns = 5; - var gameTurns = occupiedTicTacToe.turns; - var originalPlayer = occupiedTicTacToe.currentPlayer; + var turnTicTacToe = new TicTacToe(); - occupiedTicTacToe.endMove(); + turnTicTacToe.turns = 5; + var gameTurns = turnTicTacToe.turns; + var originalPlayer = turnTicTacToe.currentPlayer; - expect(occupiedTicTacToe.turns).toEqual(gameTurns + 1); - expect(occupiedTicTacToe.currentPlayer).not.toEqual(originalPlayer); + turnTicTacToe.endMove(); + + expect(turnTicTacToe.turns).toEqual(gameTurns + 1); + expect(turnTicTacToe.currentPlayer).not.toEqual(originalPlayer); // turns are now greater than 5 because of endMove increment - var gameTurns2 = occupiedTicTacToe.turns; - var originalPlayer2 = occupiedTicTacToe.currentPlayer; + var gameTurns2 = turnTicTacToe.turns; + var originalPlayer2 = turnTicTacToe.currentPlayer; - occupiedTicTacToe.endMove(); + turnTicTacToe.endMove(); - expect(occupiedTicTacToe.turns).toEqual(gameTurns2 + 1); - expect(occupiedTicTacToe.currentPlayer).not.toEqual(originalPlayer2); + expect(turnTicTacToe.turns).toEqual(gameTurns2 + 1); + expect(turnTicTacToe.currentPlayer).not.toEqual(originalPlayer2); }); it('should increment the games turns by 1 AND NOT change the current player when turns are equal to or more than 5 AND someone has won', function() { - horizontalTicTacToe.turns = 5; var horizontalGrid = [ ['X', 'X', 'X'], ['O', null, 'O'], [null, null, null] ]; + var wonTicTacToe = new TicTacToe(); - horizontalTicTacToe.board.grid = horizontalGrid; + wonTicTacToe.board.grid = horizontalGrid; + wonTicTacToe.turns = 5; - var gameTurns = horizontalTicTacToe.turns; - var originalPlayer = horizontalTicTacToe.currentPlayer; - horizontalTicTacToe.endMove(); + var gameTurns = wonTicTacToe.turns; + var originalPlayer = wonTicTacToe.currentPlayer; - expect(horizontalTicTacToe.turns).toEqual(gameTurns + 1); - expect(horizontalTicTacToe.currentPlayer).toEqual(originalPlayer); + wonTicTacToe.endMove(); + + expect(wonTicTacToe.turns).toEqual(gameTurns + 1); + expect(wonTicTacToe.currentPlayer).toEqual(originalPlayer); }); @@ -157,50 +154,19 @@ describe('TicTacToe', function() { describe('hasWon', function() { - var tieGrid = [ - ['X', 'O', 'X'], - ['O', 'X', 'O'], - ['O', 'X', 'O'] - ]; - - tieTicTacToe.board.grid = tieGrid; - - var horizontalGrid = [ - ['X', 'X', 'X'], - ['O', null, 'O'], - [null, null, null] - ]; - - horizontalTicTacToe.board.grid = horizontalGrid; - - var verticalGrid = [ - ['X', 'O', 'X'], - ['X', 'O', 'O'], - ['X', null, null] - ]; - - verticalTicTacToe.board.grid = verticalGrid; - - var diagonalBottomGrid = [ - ['X', 'O', 'X'], - ['O', 'X', 'O'], - ['X', null, null] - ]; - - diagonalBottomTicTacToe.board.grid = diagonalBottomGrid; - - var diagonalTopGrid = [ - ['X', 'O', 'X'], - ['O', 'X', null], - ['O', null, 'X'] - ]; - - diagonalTopTicTacToe.board.grid = diagonalTopGrid; - it('should return FALSE if no one has won', function() { // incomplete board (contains null) expect(testTicTacToe.hasWon()).toBeFalsy(); // complete board (tie) + var tieGrid = [ + ['X', 'O', 'X'], + ['O', 'X', 'O'], + ['O', 'X', 'O'] + ]; + var tieTicTacToe = new TicTacToe(); + + tieTicTacToe.board.grid = tieGrid; + expect(tieTicTacToe.hasWon()).toBeFalsy(); }); @@ -209,15 +175,50 @@ describe('TicTacToe', function() { }); it('should return TRUE if 3 markers match horizontally', function() { + var horizontalGrid = [ + ['X', 'X', 'X'], + ['O', null, 'O'], + [null, null, null] + ]; + var horizontalTicTacToe = new TicTacToe(); + + horizontalTicTacToe.board.grid = horizontalGrid; + expect(horizontalTicTacToe.hasWon()).toBeTruthy(); }); it('should return TRUE if 3 markers match vertically', function() { + var verticalGrid = [ + ['X', 'O', 'X'], + ['X', 'O', 'O'], + ['X', null, null] + ]; + var verticalTicTacToe = new TicTacToe(); + + verticalTicTacToe.board.grid = verticalGrid; + expect(verticalTicTacToe.hasWon()).toBeTruthy(); }); it('should return TRUE if 3 markers match diagonally', function() { + var diagonalBottomGrid = [ + ['X', 'O', 'X'], + ['O', 'X', 'O'], + ['X', null, null] + ]; + var diagonalBottomTicTacToe = new TicTacToe(); + + diagonalBottomTicTacToe.board.grid = diagonalBottomGrid; expect(diagonalBottomTicTacToe.hasWon()).toBeTruthy(); + + var diagonalTopGrid = [ + ['X', 'O', 'X'], + ['O', 'X', null], + ['O', null, 'X'] + ]; + var diagonalTopTicTacToe = new TicTacToe(); + + diagonalTopTicTacToe.board.grid = diagonalTopGrid; expect(diagonalTopTicTacToe.hasWon()).toBeTruthy(); }); From b758c70b8e5d2f46a5f1ec43f5f9be0792e6015c Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 12:23:17 -0800 Subject: [PATCH 30/68] Starts testing playTurn --- spec/tictactoe.spec.js | 16 ++++++----- src/tictactoe.js | 64 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 64 insertions(+), 16 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 6b68da8..fe97955 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -25,13 +25,15 @@ describe('TicTacToe', function() { }); - // describe('playTurn', function() { - // - // it('should know who the current player is', function() { - // expect(testTicTacToe.playTurn([0,0])).toBeTruthy(); - // }); - // - // }); + describe('playTurn', function() { + var playTicTacToe = new TicTacToe(); + + + it('should return FALSE when the game has not ended', function() { + expect(playTicTacToe.playTurn([0,0])).toBeFalsy(); + }); + + }); describe('isValidPlacement', function() { diff --git a/src/tictactoe.js b/src/tictactoe.js index 319d6ee..d486496 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -11,6 +11,8 @@ var TicTacToe = function() { this.turns = 0; + this.prompt = require('prompt'); + }; // helper function to wrap ugly random @@ -19,21 +21,65 @@ function sample(array) { return array[index]; } -TicTacToe.prototype.move = function(placement) { - // A move will: - // - get the placement - // format of placement argument: [rowIndex, columnIndex] - // - check the board for valid placement - // - return FALSE if not valid - // - return the placement if valid +TicTacToe.prototype.playTurn = function(prompt) { + // A turn will: - this.placement = placement; + // - know who the current player is + + var player = this.players[this.currentPlayer]; + + while (true) { + // - prompt for placement + var placement = prompt; + + // - check that the placement is valid + // - will return FALSE or valid placement position + if (this.isValidPlacement(placement)) { + + // - update the board with a valid placement and players marker + this.updateBoard(placement, player.marker); + + + break; + } + // - if FALSE, reprompt + } + + // - end the move + this.endMove(); - return (this.isValidPlacement(this.placement) ? this.placement : false); + // if outputResult is FALSE, the game continues. Otherwise, we can eventually display the result of the game. + return this.outputResult(); }; +TicTacToe.prototype.outputResult = function() { + // - check if has won or if tie and report information + + var result = ""; + if (this.hasWon() || this.turns == 9) { + result += "The Game is Over. "; + if(this.hasWon()) { + result += player + " has won!"; + } else { + result += "You have tied."; + } + return result; + } + + return false; +}; + + + TicTacToe.prototype.isValidPlacement = function(placement) { + // To be valid: + // - get the placement + // format of placement argument: [rowIndex, columnIndex] + // - check the board for valid placement + // - return FALSE if not valid + // - return the placement if valid + this.placement = placement; this.row = this.placement[0]; this.column = this.placement[1]; From de9c46d57698a35f567d3e1a20b98e768dafe8b8 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 12:31:42 -0800 Subject: [PATCH 31/68] WIP outputResult testing --- spec/tictactoe.spec.js | 26 ++++++++++++++++++++++++++ src/tictactoe.js | 1 + 2 files changed, 27 insertions(+) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index fe97955..ff3917e 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -28,11 +28,37 @@ describe('TicTacToe', function() { describe('playTurn', function() { var playTicTacToe = new TicTacToe(); + var tieTicTacToe = new TicTacToe(); + var winTicTacToe = new TicTacToe(); + it('should return FALSE when the game has not ended', function() { expect(playTicTacToe.playTurn([0,0])).toBeFalsy(); }); + it('should output the correct message when the game is tied', function() { + tieTicTacToe.playTurn([0,0]); + tieTicTacToe.playTurn([0,1]); + tieTicTacToe.playTurn([0,2]); + tieTicTacToe.playTurn([1,0]); + tieTicTacToe.playTurn([1,2]); + tieTicTacToe.playTurn([1,1]); + tieTicTacToe.playTurn([2,0]); + tieTicTacToe.playTurn([2,2]); + + expect(tieTicTacToe.playTurn([2,1])).toEqual("The Game is Over. You have tied."); + }); + + it('should output the correct message when the game is tied', function() { + winTicTacToe.playTurn([0,0]); + winTicTacToe.playTurn([0,1]); + winTicTacToe.playTurn([1,1]); + winTicTacToe.playTurn([2,1]); + + var winner = winTicTacToe.players[winTicTacToe.currentPlayer]; + expect(winTicTacToe.playTurn([2,2])).toEqual("The Game is Over. " + winner + " has won!" ); + }); + }); describe('isValidPlacement', function() { diff --git a/src/tictactoe.js b/src/tictactoe.js index d486496..d2cf879 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -55,6 +55,7 @@ TicTacToe.prototype.playTurn = function(prompt) { TicTacToe.prototype.outputResult = function() { // - check if has won or if tie and report information + var player = this.players[this.currentPlayer]; var result = ""; if (this.hasWon() || this.turns == 9) { From 88f881bf9cec6af6c4184779424254af80449ae2 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 13:39:49 -0800 Subject: [PATCH 32/68] tests playTurn --- spec/tictactoe.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index ff3917e..8562556 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -49,7 +49,7 @@ describe('TicTacToe', function() { expect(tieTicTacToe.playTurn([2,1])).toEqual("The Game is Over. You have tied."); }); - it('should output the correct message when the game is tied', function() { + it('should output the correct message when someone wins', function() { winTicTacToe.playTurn([0,0]); winTicTacToe.playTurn([0,1]); winTicTacToe.playTurn([1,1]); From e46314102ab5f7aef33bd2c249e336292771452c Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 13:43:13 -0800 Subject: [PATCH 33/68] Updates a comment --- src/tictactoe.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/tictactoe.js b/src/tictactoe.js index d2cf879..72b00b5 100644 --- a/src/tictactoe.js +++ b/src/tictactoe.js @@ -10,9 +10,6 @@ var TicTacToe = function() { this.currentPlayer = sample([0,1]); this.turns = 0; - - this.prompt = require('prompt'); - }; // helper function to wrap ugly random @@ -38,9 +35,7 @@ TicTacToe.prototype.playTurn = function(prompt) { // - update the board with a valid placement and players marker this.updateBoard(placement, player.marker); - - - break; + break; } // - if FALSE, reprompt } @@ -48,14 +43,13 @@ TicTacToe.prototype.playTurn = function(prompt) { // - end the move this.endMove(); - // if outputResult is FALSE, the game continues. Otherwise, we can eventually display the result of the game. - return this.outputResult(); + // if outputResult is FALSE, the game continues. Otherwise, we return a string of the result of the game. + return this.outputResult(player); }; -TicTacToe.prototype.outputResult = function() { +TicTacToe.prototype.outputResult = function(player) { // - check if has won or if tie and report information - var player = this.players[this.currentPlayer]; var result = ""; if (this.hasWon() || this.turns == 9) { From 4de0510a65374fc83b12f04ac55e4a63c6bb3687 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 14 Dec 2016 13:44:23 -0800 Subject: [PATCH 34/68] Comments that playTurn indirectly tests outputResult --- spec/tictactoe.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 8562556..7926918 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -25,7 +25,7 @@ describe('TicTacToe', function() { }); - describe('playTurn', function() { + describe('playTurn and outputResult', function() { var playTicTacToe = new TicTacToe(); var tieTicTacToe = new TicTacToe(); From 8c64bd0e5f208f92df46921fbd5fdfceaab4af31 Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Fri, 16 Dec 2016 14:38:03 -0800 Subject: [PATCH 35/68] Stub files for Backbone app --- src/app/app.js | 11 +++++++++++ src/{ => app/collections}/.keep | 0 src/app/models/board.js | 7 +++++++ src/app/views/application_view.js | 25 +++++++++++++++++++++++++ src/app/views/board_view.js | 18 ++++++++++++++++++ src/app/views/player_view.js | 17 +++++++++++++++++ src/app/views/square_view.js | 17 +++++++++++++++++ 7 files changed, 95 insertions(+) create mode 100644 src/app/app.js rename src/{ => app/collections}/.keep (100%) create mode 100644 src/app/models/board.js create mode 100644 src/app/views/application_view.js create mode 100644 src/app/views/board_view.js create mode 100644 src/app/views/player_view.js create mode 100644 src/app/views/square_view.js diff --git a/src/app/app.js b/src/app/app.js new file mode 100644 index 0000000..749065f --- /dev/null +++ b/src/app/app.js @@ -0,0 +1,11 @@ +import Board from 'app/models/board'; +import ApplicationView from 'app/views/application_view'; + +var board = new Board({ + +}); + +var appView = new ApplicationView({ + el: '#application', + model: board +}); diff --git a/src/.keep b/src/app/collections/.keep similarity index 100% rename from src/.keep rename to src/app/collections/.keep diff --git a/src/app/models/board.js b/src/app/models/board.js new file mode 100644 index 0000000..d68e156 --- /dev/null +++ b/src/app/models/board.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Board = Backbone.Model.extend({ + +}); + +export default Board; diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js new file mode 100644 index 0000000..d59e14c --- /dev/null +++ b/src/app/views/application_view.js @@ -0,0 +1,25 @@ +import Backbone from 'backbone'; +import BoardView from 'app/views/board_view'; +import PlayerView from 'app/views/player_view'; +import SquareView from 'app/views/square_view'; + + +const ApplicationView = Backbone.View.extend({ + initialize: function() { + + this.render(); + }, + + events: { + + }, + + + render: function() { + + + return this; + } +}); + +export default ApplicationView; diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js new file mode 100644 index 0000000..72b834a --- /dev/null +++ b/src/app/views/board_view.js @@ -0,0 +1,18 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; +import SquareView from 'app/views/square_view'; + +const BoardView = Backbone.View.extend({ + initialize: function(){ + + }, + + + + render: function() { + return this; + } + +}); + +export default BoardView; diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js new file mode 100644 index 0000000..c8c0524 --- /dev/null +++ b/src/app/views/player_view.js @@ -0,0 +1,17 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; + +const PlayerView = Backbone.View.extend({ + initialize: function(){ + + }, + + + + render: function() { + return this; + } + +}); + +export default PlayerView; diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js new file mode 100644 index 0000000..a6dcabf --- /dev/null +++ b/src/app/views/square_view.js @@ -0,0 +1,17 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; + +const SquareView = Backbone.View.extend({ + initialize: function(){ + + }, + + + + render: function() { + return this; + } + +}); + +export default SquareView; From 7bc0d2478b3fd9e4c69516b9d56ba3eee2d8a033 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Fri, 16 Dec 2016 14:40:54 -0800 Subject: [PATCH 36/68] Moves app.js --- src/{app => }/app.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{app => }/app.js (100%) diff --git a/src/app/app.js b/src/app.js similarity index 100% rename from src/app/app.js rename to src/app.js From 4570319799089588cdbe937d3a513f8bc6cdc063 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Fri, 16 Dec 2016 14:50:23 -0800 Subject: [PATCH 37/68] Fleshes out index.html --- build/index.html | 47 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/build/index.html b/build/index.html index 00eb541..3a3ef3f 100644 --- a/build/index.html +++ b/build/index.html @@ -1,10 +1,43 @@ - - Tic-Tac-Toe - - - - - + + Tic-Tac-Toe + + + + +
+
+
    +
    + +
    +

    Tic-Tac-Toe DeathMatch!

    +
    +
      +
      + +
      + + + + + + + + + + + + + + From e1f1dafb836bf6007d0c7a0d8b3f006f6d7434e8 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Fri, 16 Dec 2016 15:08:38 -0800 Subject: [PATCH 38/68] Adds board and players to the application view to be used in sub views as models --- src/app.js | 9 ++++----- src/app/models/board.js | 8 ++++++++ src/app/models/player.js | 7 +++++++ src/app/views/application_view.js | 19 +++++++++++++++++++ src/app/views/board_view.js | 4 ++++ src/app/views/player_view.js | 4 ++++ 6 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 src/app/models/player.js diff --git a/src/app.js b/src/app.js index 749065f..f88f4bb 100644 --- a/src/app.js +++ b/src/app.js @@ -1,11 +1,10 @@ -import Board from 'app/models/board'; import ApplicationView from 'app/views/application_view'; -var board = new Board({ - -}); +// var board = new Board({ +// +// }); var appView = new ApplicationView({ el: '#application', - model: board + // model: board }); diff --git a/src/app/models/board.js b/src/app/models/board.js index d68e156..3fb1466 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -2,6 +2,14 @@ import Backbone from 'backbone'; const Board = Backbone.Model.extend({ + defaults: { + grid : [ + [null, null, null], + [null, null, null], + [null, null, null] + ] + } + }); export default Board; diff --git a/src/app/models/player.js b/src/app/models/player.js new file mode 100644 index 0000000..1ac3cd4 --- /dev/null +++ b/src/app/models/player.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Player = Backbone.Model.extend({ + +}); + +export default Player; diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index d59e14c..56bc2e1 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -3,9 +3,28 @@ import BoardView from 'app/views/board_view'; import PlayerView from 'app/views/player_view'; import SquareView from 'app/views/square_view'; +// models +import Board from 'app/models/board'; +import Player from 'app/models/player'; + const ApplicationView = Backbone.View.extend({ initialize: function() { + this.players_hash = [{ + name: "Sarah", + marker: "X" + }, + { + name: "Heather", + marker: "O" + }]; + + this.players = new Player(this.players_hash); + + this.board = new Board(); + + console.log(this.players); + console.log(this.board); this.render(); }, diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 72b834a..1d20b6d 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -5,6 +5,10 @@ import SquareView from 'app/views/square_view'; const BoardView = Backbone.View.extend({ initialize: function(){ + // we re-render the board when the model is updated (a square has been filled) + this.listenTo(this.model, 'update', this.render); + + }, diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js index c8c0524..eb7d3dc 100644 --- a/src/app/views/player_view.js +++ b/src/app/views/player_view.js @@ -4,6 +4,10 @@ import Backbone from 'backbone'; const PlayerView = Backbone.View.extend({ initialize: function(){ + // we re-render the player view when the player changes - not sure how this works yet! + this.listenTo(this.model, 'update', this.render); + + }, From b9c23c9a030591c07ebd9f7ee0d800ef0ce60c5a Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Fri, 16 Dec 2016 15:16:23 -0800 Subject: [PATCH 39/68] Adds ids so we can switch players like we did with an array --- src/app/views/application_view.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 56bc2e1..b166041 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -12,11 +12,13 @@ const ApplicationView = Backbone.View.extend({ initialize: function() { this.players_hash = [{ name: "Sarah", - marker: "X" + marker: "X", + id: "1" }, { name: "Heather", - marker: "O" + marker: "O", + id: "0" }]; this.players = new Player(this.players_hash); From f38cefbc77942b4247d93861f9ad58a580f4408f Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Fri, 16 Dec 2016 16:00:23 -0800 Subject: [PATCH 40/68] Hot mess --- build/index.html | 12 ++++++---- src/app/views/application_view.js | 7 ++++-- src/app/views/board_view.js | 6 +++++ src/app/views/player_view.js | 39 +++++++++++++++++++++++++++++-- src/app/views/square_view.js | 2 +- 5 files changed, 56 insertions(+), 10 deletions(-) diff --git a/build/index.html b/build/index.html index 3a3ef3f..b6b9b9c 100644 --- a/build/index.html +++ b/build/index.html @@ -7,9 +7,6 @@
      -
      -
        -

        Tic-Tac-Toe DeathMatch!

        @@ -17,6 +14,12 @@

        Tic-Tac-Toe DeathMatch!

          +
          + +
          + + +
          @@ -25,9 +28,8 @@

          Tic-Tac-Toe DeathMatch!

          diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index b166041..21c3fb6 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -13,12 +13,10 @@ const ApplicationView = Backbone.View.extend({ this.players_hash = [{ name: "Sarah", marker: "X", - id: "1" }, { name: "Heather", marker: "O", - id: "0" }]; this.players = new Player(this.players_hash); @@ -37,7 +35,12 @@ const ApplicationView = Backbone.View.extend({ render: function() { + const playerView = new PlayerView({ + model: this.players, + el: this.$('players') + }); + playerView.render(); return this; } diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 1d20b6d..41d0366 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -8,9 +8,15 @@ const BoardView = Backbone.View.extend({ // we re-render the board when the model is updated (a square has been filled) this.listenTo(this.model, 'update', this.render); + // change the player when we update the board by triggering a 'turn' event + this.listenTo(this.model, 'update', this.turn); + }, + turn: function() { + // triggers an event + }, render: function() { diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js index eb7d3dc..ddf0fc0 100644 --- a/src/app/views/player_view.js +++ b/src/app/views/player_view.js @@ -4,15 +4,50 @@ import Backbone from 'backbone'; const PlayerView = Backbone.View.extend({ initialize: function(){ - // we re-render the player view when the player changes - not sure how this works yet! - this.listenTo(this.model, 'update', this.render); + this.template = _.template(Backbone.$('#tmpl-player').html()); + + // helper function to wrap ugly random + function sample(array) { + var index = Math.floor ( Math.random() * array.length ); + return array[index]; + } + this.currentPlayerID = sample([0,1]); + + // we re-render the player view when the player changes - not sure how this works yet! + // this could listen for turn even from board_view? + // this.listenTo(this.model, 'turn', this.render); }, render: function() { + + const playerSection = Backbone.$('#players'); + + this.currentPlayer = this.model.attributes[this.currentPlayerID]; + this.currentPlayerTmpl = this.template(this.currentPlayer); + +// { 'name': this.currentPlayer.name, 'marker': this.currentPlayer.marker } + + + + // this.currentPlayer = null; + + // this.players[0].name = "Kate"; + + console.log(this.currentPlayer); + + + + // console.log(this.currentPlayer); + + playerSection.html(this.currentPlayerTmpl); + + this.currentPlayer = ((this.currentPlayer === 0) ? 1 : 0); + + console.log(this.currentPlayer); return this; } diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index a6dcabf..7de3d90 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -3,7 +3,7 @@ import Backbone from 'backbone'; const SquareView = Backbone.View.extend({ initialize: function(){ - + // clicks to tell the board to update itself }, From c788eb8235ac04f636dab66bebc1202e63b88f27 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 09:15:17 -0800 Subject: [PATCH 41/68] Changes currentPlayerID instead of currentPlayer --- src/app/views/player_view.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js index ddf0fc0..62c6d52 100644 --- a/src/app/views/player_view.js +++ b/src/app/views/player_view.js @@ -37,7 +37,7 @@ const PlayerView = Backbone.View.extend({ // this.players[0].name = "Kate"; - console.log(this.currentPlayer); + console.log(this.currentPlayerID); @@ -45,9 +45,9 @@ const PlayerView = Backbone.View.extend({ playerSection.html(this.currentPlayerTmpl); - this.currentPlayer = ((this.currentPlayer === 0) ? 1 : 0); + this.currentPlayerID = ((this.currentPlayerID === 0) ? 1 : 0); - console.log(this.currentPlayer); + console.log(this.currentPlayerID); return this; } From 94a852125d9941d38bb77f795130ebeea36a2c9b Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 10:14:04 -0800 Subject: [PATCH 42/68] Renders board view and triggers all the selects --- build/index.html | 2 ++ src/app/models/board.js | 6 +++--- src/app/views/application_view.js | 11 ++++++++++- src/app/views/board_view.js | 25 +++++++++++++++++++++++++ src/app/views/square_view.js | 21 ++++++++++++++++++++- 5 files changed, 60 insertions(+), 5 deletions(-) diff --git a/build/index.html b/build/index.html index b6b9b9c..2d48d42 100644 --- a/build/index.html +++ b/build/index.html @@ -11,7 +11,9 @@

          Tic-Tac-Toe DeathMatch!

          +
            +
            diff --git a/src/app/models/board.js b/src/app/models/board.js index 3fb1466..9493226 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -4,9 +4,9 @@ const Board = Backbone.Model.extend({ defaults: { grid : [ - [null, null, null], - [null, null, null], - [null, null, null] + ['X', null, null], + ['O', null, null], + [null, 'X', null] ] } diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 21c3fb6..cba70f2 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -37,10 +37,19 @@ const ApplicationView = Backbone.View.extend({ render: function() { const playerView = new PlayerView({ model: this.players, - el: this.$('players') + el: this.$('#players') }); + const boardView = new BoardView({ + // the boardView is the grid portion of the board + model: this.board.get('grid'), + el: this.$('main') + }); + + console.log(this.board); + playerView.render(); + boardView.render(); return this; } diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 41d0366..3ac7ec0 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -18,8 +18,33 @@ const BoardView = Backbone.View.extend({ // triggers an event }, + addMarker: function() { + // triggers an event + console.log('trying to add a marker'); + }, + render: function() { + + const boardSquares = Backbone.$('#board-squares'); + // boardSquares.empty(); + const self = this; + + this.model.forEach(function(row) { + // console.log(row); + var length = row.length; + for (var i = 0; i < length; i++) { + const square = new SquareView({ + model: row[i], + el: Backbone.$('#board-squares') + + }); + self.listenTo(square, 'select', self.addMarker); + // console.log(square); + boardSquares.append(square.el); + } + + }); return this; } diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index 7de3d90..b6fa6c9 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -2,13 +2,32 @@ import _ from 'underscore'; import Backbone from 'backbone'; const SquareView = Backbone.View.extend({ - initialize: function(){ + initialize: function(options){ // clicks to tell the board to update itself + this.model = options.model; + this.template = _.template(Backbone.$('#tmpl-board-square').html()); + + this.render(); + }, + + events: { + 'click': 'onClick' + }, + + onClick: function(e) { + console.log(">>> BREADCRUMBS: select click"); + + this.trigger('select', this); + + // We return false to tell jQuery not to run any more event handlers. + + return false; }, render: function() { + this.$el.append(this.template({ marker: this.model })); return this; } From d6355703a4cc06db07a33a27e6d08bad1008b055 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 10:18:59 -0800 Subject: [PATCH 43/68] Adds divs back in so only one trigger occurs --- src/app/views/board_view.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 3ac7ec0..08ab212 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -35,10 +35,11 @@ const BoardView = Backbone.View.extend({ var length = row.length; for (var i = 0; i < length; i++) { const square = new SquareView({ - model: row[i], - el: Backbone.$('#board-squares') + model: row[i] + // el: Backbone.$('#board-squares') }); + console.log(square); self.listenTo(square, 'select', self.addMarker); // console.log(square); boardSquares.append(square.el); From dd01bf164078f8d0bae2148b65b28edf3773e655 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 10:40:34 -0800 Subject: [PATCH 44/68] Adds position to square so we can eventually update the grid --- src/app/views/board_view.js | 14 +++++++++----- src/app/views/square_view.js | 1 + 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 08ab212..eff730a 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -18,9 +18,9 @@ const BoardView = Backbone.View.extend({ // triggers an event }, - addMarker: function() { + addMarker: function(marker) { // triggers an event - console.log('trying to add a marker'); + console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); }, @@ -30,12 +30,14 @@ const BoardView = Backbone.View.extend({ // boardSquares.empty(); const self = this; - this.model.forEach(function(row) { - // console.log(row); + this.model.forEach(function(row, index) { + // var rowPosition = 0; var length = row.length; for (var i = 0; i < length; i++) { + var column = i; const square = new SquareView({ - model: row[i] + model: row[i], + position: [index, column] // el: Backbone.$('#board-squares') }); @@ -45,6 +47,8 @@ const BoardView = Backbone.View.extend({ boardSquares.append(square.el); } + // rowPosition++; + }); return this; } diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index b6fa6c9..46fec32 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -5,6 +5,7 @@ const SquareView = Backbone.View.extend({ initialize: function(options){ // clicks to tell the board to update itself this.model = options.model; + this.position = options.position; this.template = _.template(Backbone.$('#tmpl-board-square').html()); this.render(); From 1758a353cb073c5f0a5905722dbb1abaa5479642 Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Mon, 19 Dec 2016 10:58:04 -0800 Subject: [PATCH 45/68] CSS for marginal prettiness --- build/index.html | 6 +++++- build/styles/index.css | 23 +++++++++++++++++++++++ src/app/views/board_view.js | 2 +- src/app/views/square_view.js | 2 +- 4 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 build/styles/index.css diff --git a/build/index.html b/build/index.html index 2d48d42..6e869c6 100644 --- a/build/index.html +++ b/build/index.html @@ -3,6 +3,8 @@ Tic-Tac-Toe + + @@ -12,7 +14,9 @@

            Tic-Tac-Toe DeathMatch!

            -
              +
              +
                +
                diff --git a/build/styles/index.css b/build/styles/index.css new file mode 100644 index 0000000..cae9f7b --- /dev/null +++ b/build/styles/index.css @@ -0,0 +1,23 @@ +body { + margin: 10px 10%; +} + +#board-squares div { + display: inline-block; +} + +li { + list-style: none; + border: 2px solid purple; + height: 50px; + text-align: center; +} + +#ttt-board { + width: 60%; + margin: 0 auto; +} + +.column { + padding: 0; +} diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index eff730a..8d2a60f 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -44,7 +44,7 @@ const BoardView = Backbone.View.extend({ console.log(square); self.listenTo(square, 'select', self.addMarker); // console.log(square); - boardSquares.append(square.el); + boardSquares.append(square.el).addClass('row small-up-3'); } // rowPosition++; diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index 46fec32..0477b88 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -28,7 +28,7 @@ const SquareView = Backbone.View.extend({ render: function() { - this.$el.append(this.template({ marker: this.model })); + this.$el.append(this.template({ marker: this.model })).addClass('column'); return this; } From 9a8ed511200dfba0cc19475550ebf9baeded2aea Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Mon, 19 Dec 2016 11:05:25 -0800 Subject: [PATCH 46/68] Thing of beauty --- build/index.html | 1 + build/styles/index.css | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/build/index.html b/build/index.html index 6e869c6..357750a 100644 --- a/build/index.html +++ b/build/index.html @@ -3,6 +3,7 @@ Tic-Tac-Toe + diff --git a/build/styles/index.css b/build/styles/index.css index cae9f7b..f75a63e 100644 --- a/build/styles/index.css +++ b/build/styles/index.css @@ -1,5 +1,12 @@ +h1, h2, h3 { + font-family: 'Walter Turncoat', cursive; + text-align: center; + color: white; +} + body { margin: 10px 10%; + background-color: black; } #board-squares div { From 74e6bd931387100852a2b044a5a337db7079c0db Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 11:08:02 -0800 Subject: [PATCH 47/68] Removes console logs --- src/app/views/board_view.js | 11 ++++------- src/app/views/player_view.js | 14 -------------- src/app/views/square_view.js | 1 + 3 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 8d2a60f..cd8b04d 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -27,28 +27,25 @@ const BoardView = Backbone.View.extend({ render: function() { const boardSquares = Backbone.$('#board-squares'); - // boardSquares.empty(); + // loop within a loop - we need to have access to the larger this + const self = this; this.model.forEach(function(row, index) { - // var rowPosition = 0; + var length = row.length; for (var i = 0; i < length; i++) { var column = i; const square = new SquareView({ model: row[i], position: [index, column] - // el: Backbone.$('#board-squares') - }); + console.log(square); self.listenTo(square, 'select', self.addMarker); - // console.log(square); boardSquares.append(square.el).addClass('row small-up-3'); } - // rowPosition++; - }); return this; } diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js index 62c6d52..73d1449 100644 --- a/src/app/views/player_view.js +++ b/src/app/views/player_view.js @@ -29,20 +29,6 @@ const PlayerView = Backbone.View.extend({ this.currentPlayer = this.model.attributes[this.currentPlayerID]; this.currentPlayerTmpl = this.template(this.currentPlayer); -// { 'name': this.currentPlayer.name, 'marker': this.currentPlayer.marker } - - - - // this.currentPlayer = null; - - // this.players[0].name = "Kate"; - - console.log(this.currentPlayerID); - - - - // console.log(this.currentPlayer); - playerSection.html(this.currentPlayerTmpl); this.currentPlayerID = ((this.currentPlayerID === 0) ? 1 : 0); diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index 0477b88..9eee9a6 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -3,6 +3,7 @@ import Backbone from 'backbone'; const SquareView = Backbone.View.extend({ initialize: function(options){ + // clicks to tell the board to update itself this.model = options.model; this.position = options.position; From f6a2928b5d22cb40a31cca5fbcecf6bb0b4a0828 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 11:10:09 -0800 Subject: [PATCH 48/68] Changes model in BoardView to Board, not just Grid --- src/app/views/application_view.js | 4 ++-- src/app/views/board_view.js | 15 ++++++++------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index cba70f2..01e186a 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -41,8 +41,8 @@ const ApplicationView = Backbone.View.extend({ }); const boardView = new BoardView({ - // the boardView is the grid portion of the board - model: this.board.get('grid'), + + model: this.board, el: this.$('main') }); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index cd8b04d..c572662 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -5,11 +5,13 @@ import SquareView from 'app/views/square_view'; const BoardView = Backbone.View.extend({ initialize: function(){ - // we re-render the board when the model is updated (a square has been filled) - this.listenTo(this.model, 'update', this.render); + this.grid = this.model.get('grid'); - // change the player when we update the board by triggering a 'turn' event - this.listenTo(this.model, 'update', this.turn); + // we re-render the board when the model is updated (a square has been filled) + this.listenTo(this.model, 'update', this.render); + + // change the player when we update the board by triggering a 'turn' event + this.listenTo(this.model, 'update', this.turn); }, @@ -20,7 +22,7 @@ const BoardView = Backbone.View.extend({ addMarker: function(marker) { // triggers an event - console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); + console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); }, @@ -31,7 +33,7 @@ const BoardView = Backbone.View.extend({ const self = this; - this.model.forEach(function(row, index) { + this.grid.forEach(function(row, index) { var length = row.length; for (var i = 0; i < length; i++) { @@ -41,7 +43,6 @@ const BoardView = Backbone.View.extend({ position: [index, column] }); - console.log(square); self.listenTo(square, 'select', self.addMarker); boardSquares.append(square.el).addClass('row small-up-3'); } From 3dfc719657911077850c260bc9f7bcb315ff73db Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 11:30:46 -0800 Subject: [PATCH 49/68] Adds a new X when clicked --- src/app/views/board_view.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index c572662..90a13e7 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -5,15 +5,11 @@ import SquareView from 'app/views/square_view'; const BoardView = Backbone.View.extend({ initialize: function(){ - this.grid = this.model.get('grid'); - // we re-render the board when the model is updated (a square has been filled) - this.listenTo(this.model, 'update', this.render); + // this.listenTo(this.model, 'update', this.render); // change the player when we update the board by triggering a 'turn' event - this.listenTo(this.model, 'update', this.turn); - - + // this.listenTo(this.model, 'update', this.turn); }, turn: function() { @@ -23,15 +19,34 @@ const BoardView = Backbone.View.extend({ addMarker: function(marker) { // triggers an event console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); + this.row = marker.position[0]; + this.column = marker.position[1]; + + this.grid = this.model.get('grid'); + + var boardPosition = this.grid[this.row][this.column]; + + if(boardPosition === null) { + this.grid[this.row][this.column] = 'X'; + + this.model.set('grid', this.grid); + } + + console.log(this.model); + + this.render(); }, render: function() { const boardSquares = Backbone.$('#board-squares'); + boardSquares.empty(); // loop within a loop - we need to have access to the larger this + console.log('render' + this.model); const self = this; + this.grid = this.model.get('grid'); this.grid.forEach(function(row, index) { @@ -48,6 +63,7 @@ const BoardView = Backbone.View.extend({ } }); + return this; } From 55cc66550087c54a98276f4993997c4c435321ab Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 11:31:26 -0800 Subject: [PATCH 50/68] Indentation for Heather --- src/app/views/board_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 90a13e7..e155288 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -34,7 +34,7 @@ const BoardView = Backbone.View.extend({ console.log(this.model); - this.render(); + this.render(); }, From 11b11c6eaf244c115d6543abcf0844fa973739e7 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 12:01:42 -0800 Subject: [PATCH 51/68] Triggers change event --- src/app/views/board_view.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index e155288..1c840b7 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -3,10 +3,10 @@ import Backbone from 'backbone'; import SquareView from 'app/views/square_view'; const BoardView = Backbone.View.extend({ - initialize: function(){ - + initialize: function(options){ + // this.model = options.model; // we re-render the board when the model is updated (a square has been filled) - // this.listenTo(this.model, 'update', this.render); + this.listenTo(this.model, 'change', this.render); // change the player when we update the board by triggering a 'turn' event // this.listenTo(this.model, 'update', this.turn); @@ -29,12 +29,14 @@ const BoardView = Backbone.View.extend({ if(boardPosition === null) { this.grid[this.row][this.column] = 'X'; - this.model.set('grid', this.grid); + this.model.set( 'grid', this.grid); } + this.model.trigger('change'); + // this.model.save('grid'); - console.log(this.model); + console.log(this.model); - this.render(); + // this.render(); }, From 138648527d04ef644c15a3b8ecc15a6966313fec Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 19 Dec 2016 16:35:33 -0800 Subject: [PATCH 52/68] fixes stuff --- spec/board.spec.js | 6 +- spec/player.spec.js | 12 +-- spec/tictactoe.spec.js | 147 +++++++++++++++++----------- src/app/models/board.js | 17 +++- src/app/models/player.js | 9 ++ src/app/models/tictactoe.js | 184 ++++++++++++++++++++++++++++++++++++ src/tictactoe.js | 164 -------------------------------- 7 files changed, 307 insertions(+), 232 deletions(-) create mode 100644 src/app/models/tictactoe.js delete mode 100644 src/tictactoe.js diff --git a/spec/board.spec.js b/spec/board.spec.js index e8310c8..04d1b7b 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -1,5 +1,5 @@ // Do not remove -import Board from 'board'; +import Board from 'app/models/board'; describe('Board', function() { @@ -11,14 +11,14 @@ describe('Board', function() { }); it('should have a grid', function() { - expect(testBoard.grid).toBeDefined(); + expect(testBoard.get('grid')).toBeDefined(); }); }); describe('grid', function() { - var grid = testBoard.grid; + var grid = testBoard.get('grid'); it('should be an array', function() { expect(Array.isArray(grid)).toBe(true); diff --git a/spec/player.spec.js b/spec/player.spec.js index 0ac9116..438d920 100644 --- a/spec/player.spec.js +++ b/spec/player.spec.js @@ -1,10 +1,10 @@ // Do not remove -import Player from 'player'; +import Player from 'app/models/player'; describe('Player', function() { - var testPlayerX = new Player("Testy", "X"); - var testPlayerO = new Player("Crabby", "O"); + var testPlayerX = new Player({name: "Testy", marker: "X"}); + var testPlayerO = new Player({name: "Crabby", marker: "O"}); describe('Player', function() { it('should be defined', function() { @@ -12,12 +12,12 @@ describe('Player', function() { }); it('should have a name', function() { - expect(testPlayerX.name).toEqual("Testy"); + expect(testPlayerX.get('name')).toEqual("Testy"); }); it('should be assigned a marker', function() { - expect(testPlayerX.marker).toEqual("X"); - expect(testPlayerO.marker).toEqual("O"); + expect(testPlayerX.get('marker')).toEqual("X"); + expect(testPlayerO.get('marker')).toEqual("O"); }); }); diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 7926918..6874f2a 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -1,9 +1,24 @@ // Do not remove -import TicTacToe from 'tictactoe'; +import TicTacToe from 'app/models/tictactoe'; + +jasmine.getEnv().topSuite().beforeEach({fn: function() { + //log in as admin +}}); describe('TicTacToe', function() { - var testTicTacToe = new TicTacToe(); + var testTicTacToe; + beforeEach(function(){ + testTicTacToe = new TicTacToe(); + + console.log('rebuild >>' + testTicTacToe.get('board').get('grid')); + + }); + + afterEach(function(){ + testTicTacToe.destroy(); + }); + describe('TicTacToe', function() { it('should be defined', function() { @@ -11,16 +26,16 @@ describe('TicTacToe', function() { }); it('should have a board', function() { - expect(testTicTacToe.board).toBeDefined(); + expect(testTicTacToe.get('board')).toBeDefined(); }); it('should have two players', function() { - expect(testTicTacToe.player1).toBeDefined(); - expect(testTicTacToe.player2).toBeDefined(); + expect(testTicTacToe.get('player1')).toBeDefined(); + expect(testTicTacToe.get('player2')).toBeDefined(); }); it('should have turns', function() { - expect(testTicTacToe.turns).toBeDefined(); + expect(testTicTacToe.get('turns')).toBeDefined(); }); }); @@ -33,10 +48,12 @@ describe('TicTacToe', function() { it('should return FALSE when the game has not ended', function() { + console.log(testTicTacToe.get('board').get('grid')); expect(playTicTacToe.playTurn([0,0])).toBeFalsy(); + console.log('after' + testTicTacToe.get('board').get('grid')); }); - it('should output the correct message when the game is tied', function() { + xit('should output the correct message when the game is tied', function() { tieTicTacToe.playTurn([0,0]); tieTicTacToe.playTurn([0,1]); tieTicTacToe.playTurn([0,2]); @@ -49,13 +66,13 @@ describe('TicTacToe', function() { expect(tieTicTacToe.playTurn([2,1])).toEqual("The Game is Over. You have tied."); }); - it('should output the correct message when someone wins', function() { + xit('should output the correct message when someone wins', function() { winTicTacToe.playTurn([0,0]); winTicTacToe.playTurn([0,1]); winTicTacToe.playTurn([1,1]); winTicTacToe.playTurn([2,1]); - var winner = winTicTacToe.players[winTicTacToe.currentPlayer]; + var winner = winTicTacToe.get('players')[winTicTacToe.get('currentPlayer')]; expect(winTicTacToe.playTurn([2,2])).toEqual("The Game is Over. " + winner + " has won!" ); }); @@ -69,6 +86,9 @@ describe('TicTacToe', function() { it('should return false if the placement on the board is already occupied', function() { + console.log('occupied' + testTicTacToe.get('board').get('grid')); + + var occupiedGrid = [ ['X', 'O', null], [null, null, null], @@ -76,12 +96,27 @@ describe('TicTacToe', function() { ]; var occupiedTicTacToe = new TicTacToe(); - occupiedTicTacToe.board.grid = occupiedGrid; + occupiedTicTacToe.get('board').set('grid', occupiedGrid); + + + console.log('set occupied' + testTicTacToe.get('board').get('grid')); expect(occupiedTicTacToe.isValidPlacement([0,0])).toBeFalsy(); + + console.log('occupied after' + testTicTacToe.get('board').get('grid')); + + var test = new TicTacToe(); + + console.log('TEST >>> ' + test.get('board').get('grid')); + + + + }); it('should return true if the placement on the board is not occupied', function() { + + // console.log('not' + testTicTacToe.get('board').get('grid')); expect(testTicTacToe.isValidPlacement([0, 1])).toBeTruthy(); }); @@ -89,18 +124,18 @@ describe('TicTacToe', function() { describe('updateBoard', function() { - it('should change the boards current value to the given marker', function() { - var boardPosition = [0,0]; - var row = boardPosition[0]; - var column = boardPosition[1]; + xit('should change the boards current value to the given marker', function() { + var boardPosxition = [0,0]; + var row = boardPosxition[0]; + var column = boardPosxition[1]; - var boardValue = testTicTacToe.board.grid[row][column]; + var boardValue = testTicTacToe.get('board').get('grid')[row][column]; expect(boardValue).toBeNull(); - testTicTacToe.updateBoard(boardPosition, "X"); + testTicTacToe.updateBoard(boardPosxition, "X"); - var boardValueUpdate = testTicTacToe.board.grid[row][column]; + var boardValueUpdate = testTicTacToe.get('board').get('grid')[row][column]; expect(boardValueUpdate).toEqual("X"); @@ -110,41 +145,41 @@ describe('TicTacToe', function() { describe('endMove', function() { - it('should increment the games turns by 1 AND change the current player when turns are less than 5', function() { - var gameTurns = testTicTacToe.turns; - var originalPlayer = testTicTacToe.currentPlayer; + xit('should increment the games turns by 1 AND change the current player when turns are less than 5', function() { + var gameTurns = testTicTacToe.get('turns'); + var originalPlayer = testTicTacToe.get('currentPlayer'); testTicTacToe.endMove(); - expect(testTicTacToe.turns).toEqual(gameTurns + 1); - expect(testTicTacToe.currentPlayer).not.toEqual(originalPlayer); + expect(testTicTacToe.get('turns')).toEqual(gameTurns + 1); + expect(testTicTacToe.get('currentPlayer')).not.toEqual(originalPlayer); }); - it('should increment the games turns by 1 AND change the current player when turns are equal to or more than 5 and no one has won', function() { + xit('should increment the games turns by 1 AND change the current player when turns are equal to or more than 5 and no one has won', function() { var turnTicTacToe = new TicTacToe(); - turnTicTacToe.turns = 5; - var gameTurns = turnTicTacToe.turns; - var originalPlayer = turnTicTacToe.currentPlayer; + turnTicTacToe.set('turns', 5); + var gameTurns = turnTicTacToe.get('turns'); + var originalPlayer = turnTicTacToe.get('currentPlayer'); turnTicTacToe.endMove(); - expect(turnTicTacToe.turns).toEqual(gameTurns + 1); - expect(turnTicTacToe.currentPlayer).not.toEqual(originalPlayer); + expect(turnTicTacToe.get('turns')).toEqual(gameTurns + 1); + expect(turnTicTacToe.get('currentPlayer')).not.toEqual(originalPlayer); // turns are now greater than 5 because of endMove increment - var gameTurns2 = turnTicTacToe.turns; - var originalPlayer2 = turnTicTacToe.currentPlayer; + var gameTurns2 = turnTicTacToe.get('turns'); + var originalPlayer2 = turnTicTacToe.get('currentPlayer'); turnTicTacToe.endMove(); - expect(turnTicTacToe.turns).toEqual(gameTurns2 + 1); - expect(turnTicTacToe.currentPlayer).not.toEqual(originalPlayer2); + expect(turnTicTacToe.get('turns')).toEqual(gameTurns2 + 1); + expect(turnTicTacToe.get('currentPlayer')).not.toEqual(originalPlayer2); }); - it('should increment the games turns by 1 AND NOT change the current player when turns are equal to or more than 5 AND someone has won', function() { + xit('should increment the games turns by 1 AND NOT change the current player when turns are equal to or more than 5 AND someone has won', function() { var horizontalGrid = [ ['X', 'X', 'X'], ['O', null, 'O'], @@ -152,17 +187,17 @@ describe('TicTacToe', function() { ]; var wonTicTacToe = new TicTacToe(); - wonTicTacToe.board.grid = horizontalGrid; - wonTicTacToe.turns = 5; + wonTicTacToe.get('board').set('grid', horizontalGrid); + wonTicTacToe.set('turns', 5); - var gameTurns = wonTicTacToe.turns; - var originalPlayer = wonTicTacToe.currentPlayer; + var gameTurns = wonTicTacToe.get('turns'); + var originalPlayer = wonTicTacToe.get('currentPlayer'); wonTicTacToe.endMove(); - expect(wonTicTacToe.turns).toEqual(gameTurns + 1); - expect(wonTicTacToe.currentPlayer).toEqual(originalPlayer); + expect(wonTicTacToe.get('turns')).toEqual(gameTurns + 1); + expect(wonTicTacToe.get('currentPlayer')).toEqual(originalPlayer); }); @@ -170,19 +205,19 @@ describe('TicTacToe', function() { describe('addTurn', function() { - it('should increment the games turns by 1', function() { - var gameTurns = testTicTacToe.turns; + xit('should increment the games turns by 1', function() { + var gameTurns = testTicTacToe.get('turns'); testTicTacToe.addTurn(); - expect(testTicTacToe.turns).toEqual(gameTurns + 1); + expect(testTicTacToe.get('turns')).toEqual(gameTurns + 1); }); }); describe('hasWon', function() { - it('should return FALSE if no one has won', function() { + xit('should return FALSE if no one has won', function() { // incomplete board (contains null) expect(testTicTacToe.hasWon()).toBeFalsy(); // complete board (tie) @@ -193,16 +228,16 @@ describe('TicTacToe', function() { ]; var tieTicTacToe = new TicTacToe(); - tieTicTacToe.board.grid = tieGrid; + tieTicTacToe.get('board').set('grid', tieGrid); expect(tieTicTacToe.hasWon()).toBeFalsy(); }); - it('should not match nulls when evaluating markers for matches', function() { + xit('should not match nulls when evaluating markers for matches', function() { expect(testTicTacToe.hasWon()).toBeFalsy(); }); - it('should return TRUE if 3 markers match horizontally', function() { + xit('should return TRUE if 3 markers match horizontally', function() { var horizontalGrid = [ ['X', 'X', 'X'], ['O', null, 'O'], @@ -210,12 +245,12 @@ describe('TicTacToe', function() { ]; var horizontalTicTacToe = new TicTacToe(); - horizontalTicTacToe.board.grid = horizontalGrid; + horizontalTicTacToe.get('board').set('grid', horizontalGrid); expect(horizontalTicTacToe.hasWon()).toBeTruthy(); }); - it('should return TRUE if 3 markers match vertically', function() { + xit('should return TRUE if 3 markers match vertically', function() { var verticalGrid = [ ['X', 'O', 'X'], ['X', 'O', 'O'], @@ -223,12 +258,12 @@ describe('TicTacToe', function() { ]; var verticalTicTacToe = new TicTacToe(); - verticalTicTacToe.board.grid = verticalGrid; + verticalTicTacToe.get('board').set('grid', verticalGrid); expect(verticalTicTacToe.hasWon()).toBeTruthy(); }); - it('should return TRUE if 3 markers match diagonally', function() { + xit('should return TRUE if 3 markers match diagonally', function() { var diagonalBottomGrid = [ ['X', 'O', 'X'], ['O', 'X', 'O'], @@ -236,7 +271,7 @@ describe('TicTacToe', function() { ]; var diagonalBottomTicTacToe = new TicTacToe(); - diagonalBottomTicTacToe.board.grid = diagonalBottomGrid; + diagonalBottomTicTacToe.get('board').set('grid', diagonalBottomGrid); expect(diagonalBottomTicTacToe.hasWon()).toBeTruthy(); var diagonalTopGrid = [ @@ -246,7 +281,7 @@ describe('TicTacToe', function() { ]; var diagonalTopTicTacToe = new TicTacToe(); - diagonalTopTicTacToe.board.grid = diagonalTopGrid; + diagonalTopTicTacToe.get('board').set('grid', diagonalTopGrid); expect(diagonalTopTicTacToe.hasWon()).toBeTruthy(); }); @@ -254,14 +289,14 @@ describe('TicTacToe', function() { describe('changePlayers', function() { - it('change the current player to next player and back again', function() { - var originalPlayer = testTicTacToe.currentPlayer; + xit('change the current player to next player and back again', function() { + var originalPlayer = testTicTacToe.get('currentPlayer'); testTicTacToe.changePlayers(); - expect(testTicTacToe.currentPlayer).not.toEqual(originalPlayer); + expect(testTicTacToe.get('currentPlayer')).not.toEqual(originalPlayer); testTicTacToe.changePlayers(); - expect(testTicTacToe.currentPlayer).toEqual(originalPlayer); + expect(testTicTacToe.get('currentPlayer')).toEqual(originalPlayer); }); diff --git a/src/app/models/board.js b/src/app/models/board.js index 9493226..2de3a1d 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -4,12 +4,23 @@ const Board = Backbone.Model.extend({ defaults: { grid : [ - ['X', null, null], - ['O', null, null], - [null, 'X', null] + [null, null, null], + [null, null, null], + [null, null, null] ] + }, + + initialize: function() { + this.set('grid', [ + [null, null, null], + [null, null, null], + [null, null, null] + ]); } }); +module.exports = Board; + +// DO NOT REMOVE THIS export default Board; diff --git a/src/app/models/player.js b/src/app/models/player.js index 1ac3cd4..cac3698 100644 --- a/src/app/models/player.js +++ b/src/app/models/player.js @@ -2,6 +2,15 @@ import Backbone from 'backbone'; const Player = Backbone.Model.extend({ + initialize: function(options) { + this.name = options.name; + this.marker = options.marker; + + } + }); +module.exports = Player; + +// DO NOT REMOVE THIS export default Player; diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js new file mode 100644 index 0000000..84d79c8 --- /dev/null +++ b/src/app/models/tictactoe.js @@ -0,0 +1,184 @@ +import Backbone from 'backbone'; + +import Board from 'app/models/board'; +import Player from 'app/models/player'; + +const TicTacToe = Backbone.Model.extend({ + defaults: { + board: new Board(), + player1: new Player({ name: "Player1", marker: "X" }), + player2: new Player({ name: "Player2", marker: "O" }), + players: [], + // pick randomly between 2 players: array of 0 and 1 + currentPlayer: 0, + + turns: 0 + }, + + initialize: function(options) { + + var playersHash = [this.get('player1'), this.get('player2')]; + + this.set('players', playersHash); + + this.set('board', new Board()); + + // var sample = function(array = [0,1]) { + // var index = Math.floor ( Math.random() * array.length ); + // return array[index]; + // }; + // + // this.set('currentPlayer', sample()); + + + }, + + + playTurn: function(prompt) { + // A turn will: + + // - know who the current player is + + var player = this.get('players')[this.get('currentPlayer')]; + + while (true) { + // - prompt for placement + var placement = prompt; + + // - check that the placement is valid + // - will return FALSE or valid placement position + if (this.isValidPlacement(placement)) { + + // - update the board with a valid placement and players marker + this.updateBoard(placement, player.get('marker')); + break; + } + // - if FALSE, reprompt + } + + // - end the move + this.endMove(); + + // if outputResult is FALSE, the game continues. Otherwise, we return a string of the result of the game. + return this.outputResult(player); + + }, + + outputResult: function(player) { + // - check if has won or if tie and report information + + var result = ""; + if (this.hasWon() || this.get('turns') == 9) { + result += "The Game is Over. "; + if(this.hasWon()) { + result += player + " has won!"; + } else { + result += "You have tied."; + } + return result; + } + + return false; + }, + + isValidPlacement: function(placement) { + // To be valid: + // - get the placement + // format of placement argument: [rowIndex, columnIndex] + // - check the board for valid placement + // - return FALSE if not valid + // - return the placement if valid + + this.placement = placement; + this.row = this.placement[0]; + this.column = this.placement[1]; + + var boardPosition = this.get('board').get('grid')[this.row][this.column]; + + if ( boardPosition === null ) { + return true; + } else { + return false; + } + + }, + + updateBoard: function(boardPosition, marker) { + this.marker = marker; + + this.boardPosition = boardPosition; + this.row = this.boardPosition[0]; + this.column = this.boardPosition[1]; + + this.gridCopy = this.get('board').get('grid'); + + this.gridCopy[this.row][this.column] = this.marker; + + this.get('board').set('grid', this.gridCopy); + + return this.get('board'); + }, + + endMove: function() { + // Ending the move will: + // - increment the turns counter by 1 + // - check if the game has been won + // - switch current player + + this.addTurn(); + if (this.get('turns') >= 5 && !this.hasWon()) { + // only change players if hasWon is false after 5 turns + this.changePlayers(); + } else if (this.get('turns') < 5) { + // for the first 4 turns, always changePlayers because there is no chance of victory + this.changePlayers(); + } + + }, + + addTurn: function() { + var endingValue = this.get('turns') + 1; + this.set('turns', endingValue); + }, + + hasWon: function() { + // grid[row][column] + var grid = this.get('board').get('grid'); + + // A horizontal match victory - all columns in same row are equal and none is null + for (var i = 0; i < 3; i++) { + if(grid[i][0] == grid[i][1] && grid[i][0] == grid[i][2] && grid[i][0] !== null){ + return true; + } + } + + // A vertical match victory - all rows in same column are equal and none is null + for (var j = 0; j < 3; j++) { + if(grid[0][j] == grid[1][j] && grid[0][j] == grid[2][j] && grid[0][j] !== null){ + return true; + } + } + + // A diagonal match victory - need to validate two cases: + // - starting in the bottom left + if(grid[2][0] == grid[1][1] && grid[2][0] == grid[0][2] && grid[2][0] !== null){ + return true; + } + // - starting in the top left + if(grid[0][0] == grid[1][1] && grid[0][0] == grid[2][2] && grid[0][0] !== null){ + return true; + } + + return false; + }, + + changePlayers: function() { + this.set('currentPlayer', ((this.get('currentPlayer') === 0) ? 1 : 0)); + + } +}); + +module.exports = TicTacToe; + +// DO NOT REMOVE THIS +export default TicTacToe; diff --git a/src/tictactoe.js b/src/tictactoe.js deleted file mode 100644 index 72b00b5..0000000 --- a/src/tictactoe.js +++ /dev/null @@ -1,164 +0,0 @@ -import Board from 'board'; -import Player from 'player'; - -var TicTacToe = function() { - this.board = new Board(); - this.player1 = new Player("Sarah", "X"); - this.player2 = new Player("Heather", "O"); - this.players = [this.player1, this.player2]; - // pick randomly between 2 players: array of 0 and 1 - this.currentPlayer = sample([0,1]); - - this.turns = 0; -}; - -// helper function to wrap ugly random -function sample(array) { - var index = Math.floor ( Math.random() * array.length ); - return array[index]; -} - -TicTacToe.prototype.playTurn = function(prompt) { - // A turn will: - - // - know who the current player is - - var player = this.players[this.currentPlayer]; - - while (true) { - // - prompt for placement - var placement = prompt; - - // - check that the placement is valid - // - will return FALSE or valid placement position - if (this.isValidPlacement(placement)) { - - // - update the board with a valid placement and players marker - this.updateBoard(placement, player.marker); - break; - } - // - if FALSE, reprompt - } - - // - end the move - this.endMove(); - - // if outputResult is FALSE, the game continues. Otherwise, we return a string of the result of the game. - return this.outputResult(player); - -}; - -TicTacToe.prototype.outputResult = function(player) { - // - check if has won or if tie and report information - - var result = ""; - if (this.hasWon() || this.turns == 9) { - result += "The Game is Over. "; - if(this.hasWon()) { - result += player + " has won!"; - } else { - result += "You have tied."; - } - return result; - } - - return false; -}; - - - -TicTacToe.prototype.isValidPlacement = function(placement) { - // To be valid: - // - get the placement - // format of placement argument: [rowIndex, columnIndex] - // - check the board for valid placement - // - return FALSE if not valid - // - return the placement if valid - - this.placement = placement; - this.row = this.placement[0]; - this.column = this.placement[1]; - - var boardPosition = this.board.grid[this.row][this.column]; - - if ( boardPosition === null ) { - return true; - } else { - return false; - } - -}; - -TicTacToe.prototype.updateBoard = function(boardPosition, marker) { - this.marker = marker; - - this.boardPosition = boardPosition; - this.row = this.boardPosition[0]; - this.column = this.boardPosition[1]; - - this.board.grid[this.row][this.column] = this.marker; - - return this.board; -}; - -TicTacToe.prototype.endMove = function() { - // Ending the move will: - // - increment the turns counter by 1 - // - check if the game has been won - // - switch current player - - this.addTurn(); - if (this.turns >= 5 && !this.hasWon()) { - // only change players if hasWon is false after 5 turns - this.changePlayers(); - } else if (this.turns < 5) { - // for the first 4 turns, always changePlayers because there is no chance of victory - this.changePlayers(); - } - -}; - -TicTacToe.prototype.addTurn = function() { - this.turns += 1; -}; - -TicTacToe.prototype.hasWon = function() { - // grid[row][column] - var grid = this.board.grid; - - // A horizontal match victory - all columns in same row are equal and none is null - for (var i = 0; i < 3; i++) { - if(grid[i][0] == grid[i][1] && grid[i][0] == grid[i][2] && grid[i][0] !== null){ - return true; - } - } - - // A vertical match victory - all rows in same column are equal and none is null - for (var j = 0; j < 3; j++) { - if(grid[0][j] == grid[1][j] && grid[0][j] == grid[2][j] && grid[0][j] !== null){ - return true; - } - } - - // A diagonal match victory - need to validate two cases: - // - starting in the bottom left - if(grid[2][0] == grid[1][1] && grid[2][0] == grid[0][2] && grid[2][0] !== null){ - return true; - } - // - starting in the top left - if(grid[0][0] == grid[1][1] && grid[0][0] == grid[2][2] && grid[0][0] !== null){ - return true; - } - - return false; -}; - -TicTacToe.prototype.changePlayers = function() { - this.currentPlayer = ((this.currentPlayer === 0) ? 1 : 0); - -}; - -module.exports = TicTacToe; - -// DO NOT REMOVE THIS -export default TicTacToe; From a37b0ba9acdfaf438a1a3d8069b83a39d0190050 Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Mon, 19 Dec 2016 16:40:14 -0800 Subject: [PATCH 53/68] All tests passing --- spec/tictactoe.spec.js | 47 ++++++++++++------------------------------ 1 file changed, 13 insertions(+), 34 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 6874f2a..ca0cb4c 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -10,9 +10,6 @@ describe('TicTacToe', function() { var testTicTacToe; beforeEach(function(){ testTicTacToe = new TicTacToe(); - - console.log('rebuild >>' + testTicTacToe.get('board').get('grid')); - }); afterEach(function(){ @@ -48,12 +45,10 @@ describe('TicTacToe', function() { it('should return FALSE when the game has not ended', function() { - console.log(testTicTacToe.get('board').get('grid')); expect(playTicTacToe.playTurn([0,0])).toBeFalsy(); - console.log('after' + testTicTacToe.get('board').get('grid')); }); - xit('should output the correct message when the game is tied', function() { + it('should output the correct message when the game is tied', function() { tieTicTacToe.playTurn([0,0]); tieTicTacToe.playTurn([0,1]); tieTicTacToe.playTurn([0,2]); @@ -66,7 +61,7 @@ describe('TicTacToe', function() { expect(tieTicTacToe.playTurn([2,1])).toEqual("The Game is Over. You have tied."); }); - xit('should output the correct message when someone wins', function() { + it('should output the correct message when someone wins', function() { winTicTacToe.playTurn([0,0]); winTicTacToe.playTurn([0,1]); winTicTacToe.playTurn([1,1]); @@ -86,9 +81,6 @@ describe('TicTacToe', function() { it('should return false if the placement on the board is already occupied', function() { - console.log('occupied' + testTicTacToe.get('board').get('grid')); - - var occupiedGrid = [ ['X', 'O', null], [null, null, null], @@ -98,25 +90,12 @@ describe('TicTacToe', function() { var occupiedTicTacToe = new TicTacToe(); occupiedTicTacToe.get('board').set('grid', occupiedGrid); - - console.log('set occupied' + testTicTacToe.get('board').get('grid')); - expect(occupiedTicTacToe.isValidPlacement([0,0])).toBeFalsy(); - console.log('occupied after' + testTicTacToe.get('board').get('grid')); - var test = new TicTacToe(); - - console.log('TEST >>> ' + test.get('board').get('grid')); - - - - }); it('should return true if the placement on the board is not occupied', function() { - - // console.log('not' + testTicTacToe.get('board').get('grid')); expect(testTicTacToe.isValidPlacement([0, 1])).toBeTruthy(); }); @@ -124,7 +103,7 @@ describe('TicTacToe', function() { describe('updateBoard', function() { - xit('should change the boards current value to the given marker', function() { + it('should change the boards current value to the given marker', function() { var boardPosxition = [0,0]; var row = boardPosxition[0]; var column = boardPosxition[1]; @@ -145,7 +124,7 @@ describe('TicTacToe', function() { describe('endMove', function() { - xit('should increment the games turns by 1 AND change the current player when turns are less than 5', function() { + it('should increment the games turns by 1 AND change the current player when turns are less than 5', function() { var gameTurns = testTicTacToe.get('turns'); var originalPlayer = testTicTacToe.get('currentPlayer'); @@ -156,7 +135,7 @@ describe('TicTacToe', function() { }); - xit('should increment the games turns by 1 AND change the current player when turns are equal to or more than 5 and no one has won', function() { + it('should increment the games turns by 1 AND change the current player when turns are equal to or more than 5 and no one has won', function() { var turnTicTacToe = new TicTacToe(); turnTicTacToe.set('turns', 5); @@ -179,7 +158,7 @@ describe('TicTacToe', function() { }); - xit('should increment the games turns by 1 AND NOT change the current player when turns are equal to or more than 5 AND someone has won', function() { + it('should increment the games turns by 1 AND NOT change the current player when turns are equal to or more than 5 AND someone has won', function() { var horizontalGrid = [ ['X', 'X', 'X'], ['O', null, 'O'], @@ -205,7 +184,7 @@ describe('TicTacToe', function() { describe('addTurn', function() { - xit('should increment the games turns by 1', function() { + it('should increment the games turns by 1', function() { var gameTurns = testTicTacToe.get('turns'); testTicTacToe.addTurn(); @@ -217,7 +196,7 @@ describe('TicTacToe', function() { describe('hasWon', function() { - xit('should return FALSE if no one has won', function() { + it('should return FALSE if no one has won', function() { // incomplete board (contains null) expect(testTicTacToe.hasWon()).toBeFalsy(); // complete board (tie) @@ -233,11 +212,11 @@ describe('TicTacToe', function() { expect(tieTicTacToe.hasWon()).toBeFalsy(); }); - xit('should not match nulls when evaluating markers for matches', function() { + it('should not match nulls when evaluating markers for matches', function() { expect(testTicTacToe.hasWon()).toBeFalsy(); }); - xit('should return TRUE if 3 markers match horizontally', function() { + it('should return TRUE if 3 markers match horizontally', function() { var horizontalGrid = [ ['X', 'X', 'X'], ['O', null, 'O'], @@ -250,7 +229,7 @@ describe('TicTacToe', function() { expect(horizontalTicTacToe.hasWon()).toBeTruthy(); }); - xit('should return TRUE if 3 markers match vertically', function() { + it('should return TRUE if 3 markers match vertically', function() { var verticalGrid = [ ['X', 'O', 'X'], ['X', 'O', 'O'], @@ -263,7 +242,7 @@ describe('TicTacToe', function() { expect(verticalTicTacToe.hasWon()).toBeTruthy(); }); - xit('should return TRUE if 3 markers match diagonally', function() { + it('should return TRUE if 3 markers match diagonally', function() { var diagonalBottomGrid = [ ['X', 'O', 'X'], ['O', 'X', 'O'], @@ -289,7 +268,7 @@ describe('TicTacToe', function() { describe('changePlayers', function() { - xit('change the current player to next player and back again', function() { + it('change the current player to next player and back again', function() { var originalPlayer = testTicTacToe.get('currentPlayer'); testTicTacToe.changePlayers(); From ebc35c2bbe48eeb2f4151905776f70a715c2ccd1 Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Mon, 19 Dec 2016 16:41:32 -0800 Subject: [PATCH 54/68] Fixed typo --- spec/tictactoe.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index ca0cb4c..77b9cf7 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -104,15 +104,15 @@ describe('TicTacToe', function() { describe('updateBoard', function() { it('should change the boards current value to the given marker', function() { - var boardPosxition = [0,0]; - var row = boardPosxition[0]; - var column = boardPosxition[1]; + var boardPosition = [0,0]; + var row = boardPosition[0]; + var column = boardPosition[1]; var boardValue = testTicTacToe.get('board').get('grid')[row][column]; expect(boardValue).toBeNull(); - testTicTacToe.updateBoard(boardPosxition, "X"); + testTicTacToe.updateBoard(boardPosition, "X"); var boardValueUpdate = testTicTacToe.get('board').get('grid')[row][column]; From a163a25478a168d80f5ba42f42c83f6fbefca881 Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Tue, 20 Dec 2016 12:08:06 -0800 Subject: [PATCH 55/68] Alternating X and O --- src/app.js | 9 +++---- src/app/models/tictactoe.js | 21 +++++++++-------- src/app/views/application_view.js | 22 +++++++++++------ src/app/views/board_view.js | 39 +++++++++++++++++-------------- src/app/views/player_view.js | 16 +++++++------ 5 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/app.js b/src/app.js index f88f4bb..aa8834d 100644 --- a/src/app.js +++ b/src/app.js @@ -1,10 +1,11 @@ import ApplicationView from 'app/views/application_view'; +import TicTacToe from 'app/models/tictactoe'; -// var board = new Board({ -// -// }); +var ticTacToe = new TicTacToe({ + +}); var appView = new ApplicationView({ el: '#application', - // model: board + model: ticTacToe }); diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 84d79c8..9fe3515 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -10,7 +10,7 @@ const TicTacToe = Backbone.Model.extend({ player2: new Player({ name: "Player2", marker: "O" }), players: [], // pick randomly between 2 players: array of 0 and 1 - currentPlayer: 0, + turns: 0 }, @@ -23,12 +23,14 @@ const TicTacToe = Backbone.Model.extend({ this.set('board', new Board()); - // var sample = function(array = [0,1]) { - // var index = Math.floor ( Math.random() * array.length ); - // return array[index]; - // }; - // - // this.set('currentPlayer', sample()); + this.currentPlayer = 0; + + var sample = function(array = [0,1]) { + var index = Math.floor ( Math.random() * array.length ); + return array[index]; + }; + + this.set('currentPlayer', sample()); }, @@ -40,7 +42,7 @@ const TicTacToe = Backbone.Model.extend({ // - know who the current player is var player = this.get('players')[this.get('currentPlayer')]; - + console.log(player); while (true) { // - prompt for placement var placement = prompt; @@ -55,13 +57,12 @@ const TicTacToe = Backbone.Model.extend({ } // - if FALSE, reprompt } - + console.log(this.get('board').get('grid')); // - end the move this.endMove(); // if outputResult is FALSE, the game continues. Otherwise, we return a string of the result of the game. return this.outputResult(player); - }, outputResult: function(player) { diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 01e186a..8ffd0eb 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -6,7 +6,7 @@ import SquareView from 'app/views/square_view'; // models import Board from 'app/models/board'; import Player from 'app/models/player'; - +import TicTacToe from 'app/models/tictactoe'; const ApplicationView = Backbone.View.extend({ initialize: function() { @@ -19,9 +19,11 @@ const ApplicationView = Backbone.View.extend({ marker: "O", }]; - this.players = new Player(this.players_hash); + this.players = this.model.get('players'); + + this.board = this.model.get('board'); - this.board = new Board(); + this.listenTo(this, 'change', this.render); console.log(this.players); console.log(this.board); @@ -33,20 +35,26 @@ const ApplicationView = Backbone.View.extend({ }, + playTurn: function(marker) { + this.model.playTurn(marker.position); + this.trigger('change'); + }, render: function() { const playerView = new PlayerView({ - model: this.players, - el: this.$('#players') + players: this.players, + el: this.$('#players'), + currentPlayer: this.model.get('currentPlayer') }); const boardView = new BoardView({ - model: this.board, el: this.$('main') }); - console.log(this.board); + this.listenTo(boardView, 'squareSelected', this.playTurn); + + // console.log(this.board); playerView.render(); boardView.render(); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 1c840b7..017e227 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -16,25 +16,30 @@ const BoardView = Backbone.View.extend({ // triggers an event }, - addMarker: function(marker) { + selectedSquare: function(marker) { // triggers an event - console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); - this.row = marker.position[0]; - this.column = marker.position[1]; - - this.grid = this.model.get('grid'); - - var boardPosition = this.grid[this.row][this.column]; - - if(boardPosition === null) { - this.grid[this.row][this.column] = 'X'; - - this.model.set( 'grid', this.grid); - } - this.model.trigger('change'); + // console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); + this.trigger('squareSelected', marker); + + // We return false to tell jQuery not to run any more event handlers. + + return false; + // this.row = marker.position[0]; + // this.column = marker.position[1]; + // + // this.grid = this.model.get('grid'); + // + // var boardPosition = this.grid[this.row][this.column]; + // + // if(boardPosition === null) { + // this.grid[this.row][this.column] = 'X'; + // + // this.model.set( 'grid', this.grid); + // } + // this.model.trigger('change'); // this.model.save('grid'); - console.log(this.model); + // console.log(this.model); // this.render(); }, @@ -60,7 +65,7 @@ const BoardView = Backbone.View.extend({ position: [index, column] }); - self.listenTo(square, 'select', self.addMarker); + self.listenTo(square, 'select', self.selectedSquare); boardSquares.append(square.el).addClass('row small-up-3'); } diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js index 73d1449..33a6ea0 100644 --- a/src/app/views/player_view.js +++ b/src/app/views/player_view.js @@ -2,17 +2,19 @@ import _ from 'underscore'; import Backbone from 'backbone'; const PlayerView = Backbone.View.extend({ - initialize: function(){ + initialize: function(options){ + + this.players = options.players; this.template = _.template(Backbone.$('#tmpl-player').html()); // helper function to wrap ugly random - function sample(array) { - var index = Math.floor ( Math.random() * array.length ); - return array[index]; - } + // function sample(array) { + // var index = Math.floor ( Math.random() * array.length ); + // return array[index]; + // } - this.currentPlayerID = sample([0,1]); + this.currentPlayerID = options.currentPlayer; // we re-render the player view when the player changes - not sure how this works yet! // this could listen for turn even from board_view? @@ -26,7 +28,7 @@ const PlayerView = Backbone.View.extend({ const playerSection = Backbone.$('#players'); - this.currentPlayer = this.model.attributes[this.currentPlayerID]; + this.currentPlayer = this.players[this.currentPlayerID]; this.currentPlayerTmpl = this.template(this.currentPlayer); playerSection.html(this.currentPlayerTmpl); From b64dc141ef280b9a8b42f8dcdec6cb8366ecb667 Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Tue, 20 Dec 2016 12:23:15 -0800 Subject: [PATCH 56/68] Alerts which player won or if there is a tie --- src/app/models/tictactoe.js | 4 ++-- src/app/views/application_view.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 9fe3515..2726203 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -42,7 +42,7 @@ const TicTacToe = Backbone.Model.extend({ // - know who the current player is var player = this.get('players')[this.get('currentPlayer')]; - console.log(player); + console.log(player.name); while (true) { // - prompt for placement var placement = prompt; @@ -72,7 +72,7 @@ const TicTacToe = Backbone.Model.extend({ if (this.hasWon() || this.get('turns') == 9) { result += "The Game is Over. "; if(this.hasWon()) { - result += player + " has won!"; + result += player.name + " has won!"; } else { result += "You have tied."; } diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 8ffd0eb..bed2ace 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -36,7 +36,11 @@ const ApplicationView = Backbone.View.extend({ }, playTurn: function(marker) { - this.model.playTurn(marker.position); + var lastTurn = this.model.playTurn(marker.position); + if (lastTurn) { + alert(lastTurn); + this.initialize(); + } this.trigger('change'); }, From 66a1ac29970068d2493c55ed30b2aa34065837ee Mon Sep 17 00:00:00 2001 From: heatherherrington Date: Tue, 20 Dec 2016 14:16:42 -0800 Subject: [PATCH 57/68] WIP API integration --- src/app.js | 15 ++++++++++----- src/app/models/tictactoe.js | 9 ++++++--- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/app.js b/src/app.js index aa8834d..ecedf60 100644 --- a/src/app.js +++ b/src/app.js @@ -1,11 +1,16 @@ +import $ from 'jquery'; + import ApplicationView from 'app/views/application_view'; import TicTacToe from 'app/models/tictactoe'; -var ticTacToe = new TicTacToe({ +$(document).ready(function() { + var ticTacToe = new TicTacToe({ + }); -}); + ticTacToe.fetch(); -var appView = new ApplicationView({ - el: '#application', - model: ticTacToe + var appView = new ApplicationView({ + el: '#application', + model: ticTacToe + }); }); diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 2726203..5e808c5 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -9,12 +9,15 @@ const TicTacToe = Backbone.Model.extend({ player1: new Player({ name: "Player1", marker: "X" }), player2: new Player({ name: "Player2", marker: "O" }), players: [], - // pick randomly between 2 players: array of 0 and 1 - - turns: 0 }, + url: 'https://safe-mesa-21103.herokuapp.com/api/v1', + + // parse: function(data) { + // return data.tasks; + // }, + initialize: function(options) { var playersHash = [this.get('player1'), this.get('player2')]; From b6231fcfde5bdccbea633e26fbb7743ee636d445 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 20 Dec 2016 14:30:56 -0800 Subject: [PATCH 58/68] Passing tests --- spec/tictactoe.spec.js | 5 +++-- src/app/models/tictactoe.js | 17 ++++++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/spec/tictactoe.spec.js b/spec/tictactoe.spec.js index 77b9cf7..e4e1350 100644 --- a/spec/tictactoe.spec.js +++ b/spec/tictactoe.spec.js @@ -67,8 +67,9 @@ describe('TicTacToe', function() { winTicTacToe.playTurn([1,1]); winTicTacToe.playTurn([2,1]); - var winner = winTicTacToe.get('players')[winTicTacToe.get('currentPlayer')]; - expect(winTicTacToe.playTurn([2,2])).toEqual("The Game is Over. " + winner + " has won!" ); + var winnerName = winTicTacToe.get('players')[winTicTacToe.currentPlayer].name; + + expect(winTicTacToe.playTurn([2,2])).toEqual("The Game is Over. " + winnerName + " has won!" ); }); }); diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 5e808c5..238cfb6 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -45,8 +45,8 @@ const TicTacToe = Backbone.Model.extend({ // - know who the current player is var player = this.get('players')[this.get('currentPlayer')]; - console.log(player.name); - while (true) { + // console.log(player.name); + // - prompt for placement var placement = prompt; @@ -56,11 +56,12 @@ const TicTacToe = Backbone.Model.extend({ // - update the board with a valid placement and players marker this.updateBoard(placement, player.get('marker')); - break; + } else { + // - if FALSE, reprompt/reclick + return false; } - // - if FALSE, reprompt - } - console.log(this.get('board').get('grid')); + + // console.log(this.get('board').get('grid')); // - end the move this.endMove(); @@ -69,13 +70,15 @@ const TicTacToe = Backbone.Model.extend({ }, outputResult: function(player) { + + var playerName = player.name; // - check if has won or if tie and report information var result = ""; if (this.hasWon() || this.get('turns') == 9) { result += "The Game is Over. "; if(this.hasWon()) { - result += player.name + " has won!"; + result += playerName + " has won!"; } else { result += "You have tied."; } From 4e13d15444ffeda321b9779ea9178f5794f767c6 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 20 Dec 2016 15:10:18 -0800 Subject: [PATCH 59/68] Alert box on invalid move --- src/app.js | 2 +- src/app/models/tictactoe.js | 2 +- src/app/views/application_view.js | 33 ++++++++++++++++++++----------- 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/app.js b/src/app.js index ecedf60..5e501d6 100644 --- a/src/app.js +++ b/src/app.js @@ -7,7 +7,7 @@ $(document).ready(function() { var ticTacToe = new TicTacToe({ }); - ticTacToe.fetch(); + // ticTacToe.fetch(); var appView = new ApplicationView({ el: '#application', diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 238cfb6..c7466f1 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -12,7 +12,7 @@ const TicTacToe = Backbone.Model.extend({ turns: 0 }, - url: 'https://safe-mesa-21103.herokuapp.com/api/v1', + // url: 'https://safe-mesa-21103.herokuapp.com/api/v1', // parse: function(data) { // return data.tasks; diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index bed2ace..a41f144 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -10,14 +10,14 @@ import TicTacToe from 'app/models/tictactoe'; const ApplicationView = Backbone.View.extend({ initialize: function() { - this.players_hash = [{ - name: "Sarah", - marker: "X", - }, - { - name: "Heather", - marker: "O", - }]; + // this.players_hash = [{ + // name: "Sarah", + // marker: "X", + // }, + // { + // name: "Heather", + // marker: "O", + // }]; this.players = this.model.get('players'); @@ -36,11 +36,20 @@ const ApplicationView = Backbone.View.extend({ }, playTurn: function(marker) { + var isPlayable = this.model.isValidPlacement(marker.position); var lastTurn = this.model.playTurn(marker.position); - if (lastTurn) { - alert(lastTurn); - this.initialize(); - } + + if ( !isPlayable ) { + alert("Invalid move! Pls try again."); + } else if ( isPlayable && !lastTurn) { + this.trigger('change'); + } else if ( lastTurn ) { + alert( lastTurn ); + // send competeled game to the api + // create a new game (blank board) + + } + this.trigger('change'); }, From 2108369d9cbb4bdb9a52a870d3883c0e993d66ec Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Tue, 20 Dec 2016 16:08:47 -0800 Subject: [PATCH 60/68] Makes it so a player cant continue marking board after someone has won --- src/app/collections/games.js | 9 +++++++++ src/app/models/tictactoe.js | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 src/app/collections/games.js diff --git a/src/app/collections/games.js b/src/app/collections/games.js new file mode 100644 index 0000000..e0733fe --- /dev/null +++ b/src/app/collections/games.js @@ -0,0 +1,9 @@ +import TicTacToe from 'app/models/tictactoe'; + +var Games = Backbone.Collection.extend({ + model: TicTacToe, + url: 'https://safe-mesa-21103.herokuapp.com/api/v1/games', + parse: function(data) { + return data.tasks; + } +}); diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index c7466f1..fee2eb6 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -52,7 +52,7 @@ const TicTacToe = Backbone.Model.extend({ // - check that the placement is valid // - will return FALSE or valid placement position - if (this.isValidPlacement(placement)) { + if (this.isValidPlacement(placement) && !this.hasWon() ) { // - update the board with a valid placement and players marker this.updateBoard(placement, player.get('marker')); From 998df3c66aabd18a5488b1cddf56ef8a7eefd7e5 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 21 Dec 2016 10:50:47 -0800 Subject: [PATCH 61/68] CSS styling as a gradient --- build/index.html | 13 ++---- build/styles/index.css | 66 +++++++++++++++++++++++++------ src/app.js | 2 + src/app/views/application_view.js | 19 --------- src/app/views/board_view.js | 4 +- src/app/views/square_view.js | 4 +- 6 files changed, 63 insertions(+), 45 deletions(-) diff --git a/build/index.html b/build/index.html index 357750a..ae8e9e3 100644 --- a/build/index.html +++ b/build/index.html @@ -3,7 +3,7 @@ Tic-Tac-Toe - + @@ -12,7 +12,7 @@
                -

                Tic-Tac-Toe DeathMatch!

                +

                Tic-Tac-Gradient

                @@ -35,17 +35,10 @@

                Tic-Tac-Toe DeathMatch!

                - - - diff --git a/build/styles/index.css b/build/styles/index.css index f75a63e..f53430d 100644 --- a/build/styles/index.css +++ b/build/styles/index.css @@ -1,30 +1,70 @@ h1, h2, h3 { - font-family: 'Walter Turncoat', cursive; + font-family: 'Press Start 2P', cursive; text-align: center; - color: white; + color: grey; } body { margin: 10px 10%; - background-color: black; + background-color: white; } -#board-squares div { - display: inline-block; +#ttt-board { + width: 60%; + margin: 0 auto; } li { list-style: none; - border: 2px solid purple; - height: 50px; - text-align: center; + border: .25vw solid white; + background-color: rgba(128, 128, 128, 0.4); + min-height: 11vw; + min-width: 11vw; + border-radius: .25rem; + padding: .25vw; } -#ttt-board { - width: 60%; - margin: 0 auto; +/*X Gradient*/ + +.X0 { + background-color: #4A9E9D; + +} + +.X1 { + background-color: #4C8E99; +} + +.X2 { + background-color: #4F8396; +} + +.X3 { + background-color: #536B90; +} + +.X4 { + background-color: #565D8E; +} + +/*O Gradient*/ + +.O0 { + background-color: #FFC271; +} + +.O1 { + background-color: #FFB670; +} + +.O2 { + background-color: #FFA570; +} + +.O3 { + background-color: #FF936F; } -.column { - padding: 0; +.O4 { + background-color: #FF8A6F; } diff --git a/src/app.js b/src/app.js index 5e501d6..0cfe271 100644 --- a/src/app.js +++ b/src/app.js @@ -13,4 +13,6 @@ $(document).ready(function() { el: '#application', model: ticTacToe }); + + appView.render(); }); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index a41f144..26e5147 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -10,14 +10,6 @@ import TicTacToe from 'app/models/tictactoe'; const ApplicationView = Backbone.View.extend({ initialize: function() { - // this.players_hash = [{ - // name: "Sarah", - // marker: "X", - // }, - // { - // name: "Heather", - // marker: "O", - // }]; this.players = this.model.get('players'); @@ -25,14 +17,6 @@ const ApplicationView = Backbone.View.extend({ this.listenTo(this, 'change', this.render); - console.log(this.players); - console.log(this.board); - - this.render(); - }, - - events: { - }, playTurn: function(marker) { @@ -47,7 +31,6 @@ const ApplicationView = Backbone.View.extend({ alert( lastTurn ); // send competeled game to the api // create a new game (blank board) - } this.trigger('change'); @@ -67,8 +50,6 @@ const ApplicationView = Backbone.View.extend({ this.listenTo(boardView, 'squareSelected', this.playTurn); - // console.log(this.board); - playerView.render(); boardView.render(); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 017e227..c375600 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -62,7 +62,9 @@ const BoardView = Backbone.View.extend({ var column = i; const square = new SquareView({ model: row[i], - position: [index, column] + position: [index, column], + tagName: 'li', + numberClass: index + i }); self.listenTo(square, 'select', self.selectedSquare); diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index 9eee9a6..21cf00b 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -7,7 +7,7 @@ const SquareView = Backbone.View.extend({ // clicks to tell the board to update itself this.model = options.model; this.position = options.position; - this.template = _.template(Backbone.$('#tmpl-board-square').html()); + this.class = options.numberClass; this.render(); }, @@ -29,7 +29,7 @@ const SquareView = Backbone.View.extend({ render: function() { - this.$el.append(this.template({ marker: this.model })).addClass('column'); + this.$el.addClass('column').addClass(this.model + this.class); return this; } From 1bf00e79b14368a8646e587769ce48b23fd1358d Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 21 Dec 2016 11:00:30 -0800 Subject: [PATCH 62/68] Removes some comments --- src/app/views/board_view.js | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index c375600..b5097db 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -17,31 +17,12 @@ const BoardView = Backbone.View.extend({ }, selectedSquare: function(marker) { - // triggers an event - // console.log('trying to add a marker ' + marker.model + ' at ' + marker.position); + // we need to pass this up to the board which will update the model this.trigger('squareSelected', marker); // We return false to tell jQuery not to run any more event handlers. return false; - // this.row = marker.position[0]; - // this.column = marker.position[1]; - // - // this.grid = this.model.get('grid'); - // - // var boardPosition = this.grid[this.row][this.column]; - // - // if(boardPosition === null) { - // this.grid[this.row][this.column] = 'X'; - // - // this.model.set( 'grid', this.grid); - // } - // this.model.trigger('change'); - // this.model.save('grid'); - - // console.log(this.model); - - // this.render(); }, From 7afddebaf26b34ea6c25e4c86ee4646737c58a20 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 21 Dec 2016 11:01:00 -0800 Subject: [PATCH 63/68] Removes some more comments --- src/app/views/board_view.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index b5097db..684b837 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -4,12 +4,8 @@ import SquareView from 'app/views/square_view'; const BoardView = Backbone.View.extend({ initialize: function(options){ - // this.model = options.model; // we re-render the board when the model is updated (a square has been filled) this.listenTo(this.model, 'change', this.render); - - // change the player when we update the board by triggering a 'turn' event - // this.listenTo(this.model, 'update', this.turn); }, turn: function() { From b458814e8e3c47c430dc306bfa5e343f583e1b3b Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 21 Dec 2016 11:09:34 -0800 Subject: [PATCH 64/68] More styling --- build/index.html | 1 - build/styles/index.css | 12 +++++++++++- src/app/views/square_view.js | 2 -- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/build/index.html b/build/index.html index ae8e9e3..a856be9 100644 --- a/build/index.html +++ b/build/index.html @@ -36,7 +36,6 @@

                Tic-Tac-Gradient

                diff --git a/build/styles/index.css b/build/styles/index.css index f53430d..97b6811 100644 --- a/build/styles/index.css +++ b/build/styles/index.css @@ -1,9 +1,19 @@ -h1, h2, h3 { +h1, h2 { font-family: 'Press Start 2P', cursive; text-align: center; color: grey; } +h1 { + font-size: 4vw; + margin-top: 2vw; +} + +h2 { + font-size: 2vw; + margin-bottom: 0; +} + body { margin: 10px 10%; background-color: white; diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index 21cf00b..8d2bae3 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -26,8 +26,6 @@ const SquareView = Backbone.View.extend({ return false; }, - - render: function() { this.$el.addClass('column').addClass(this.model + this.class); return this; From 8853c33cd7ec859ac1f1974595d8e37f08383db5 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 21 Dec 2016 12:14:28 -0800 Subject: [PATCH 65/68] Makes tictactoe board format like the API wants it for JSON --- src/app.js | 9 ++--- src/app/collections/games.js | 11 +++++- src/app/models/tictactoe.js | 60 +++++++++++++++++++++++++++++++ src/app/views/application_view.js | 13 ++++--- 4 files changed, 83 insertions(+), 10 deletions(-) diff --git a/src/app.js b/src/app.js index 0cfe271..8c13765 100644 --- a/src/app.js +++ b/src/app.js @@ -1,17 +1,18 @@ import $ from 'jquery'; import ApplicationView from 'app/views/application_view'; -import TicTacToe from 'app/models/tictactoe'; +import Games from 'app/collections/games'; $(document).ready(function() { - var ticTacToe = new TicTacToe({ + var games = new Games({ + }); - // ticTacToe.fetch(); + games.fetch(); var appView = new ApplicationView({ el: '#application', - model: ticTacToe + model: games }); appView.render(); diff --git a/src/app/collections/games.js b/src/app/collections/games.js index e0733fe..cf973b4 100644 --- a/src/app/collections/games.js +++ b/src/app/collections/games.js @@ -1,9 +1,18 @@ +import Backbone from 'backbone'; + import TicTacToe from 'app/models/tictactoe'; var Games = Backbone.Collection.extend({ model: TicTacToe, - url: 'https://safe-mesa-21103.herokuapp.com/api/v1/games', + game: new TicTacToe({}), + url: 'https://safe-mesa-21103.herokuapp.com/api/v1/games', parse: function(data) { return data.tasks; } + }); + +module.exports = Games; + +// DO NOT REMOVE THIS +export default Games; diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index fee2eb6..1987273 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -35,6 +35,9 @@ const TicTacToe = Backbone.Model.extend({ this.set('currentPlayer', sample()); + // make an empty 'json object' for sending the completed game to the API + this.json = {}; + }, @@ -182,7 +185,64 @@ const TicTacToe = Backbone.Model.extend({ changePlayers: function() { this.set('currentPlayer', ((this.get('currentPlayer') === 0) ? 1 : 0)); + }, + + getJson: function() { +// { +// "id": 1, +// "board": [ +// "X", +// " ", +// "O", +// "X", +// "O", +// " ", +// "X", +// " ", +// " " +// ], +// "players": [ +// "X Player", +// "O Player" +// ], +// "outcome": "X", +// "played_at": "2016-11-20T22:59:10Z" +// } + + console.log(this.get('board').get('grid')); + this.grid = this.get('board').get('grid'); + + this.jsonBoard = [].concat.apply([], this.grid); + // replace null + this.replaceNull(this.jsonBoard); + + this.jsonPlayers = [ + this.get('player1').get('name'), this.get('player2').get('name') + ]; + this.jsonOutcome = "X"; + this.jsonPlayedAt = "2016-11-20T22:59:10Z"; + + + this.json = { + "board": this.jsonBoard, + "players": this.jsonPlayers, + "outcome": this.jsonOutcome, + "played_at": this.jsonPlayedAt + }; + + return this.json; + + }, + + replaceNull: function (arr) { + for (var i = 0, l = arr.length; i < l; i++) { + if (arr[i] === null) arr[i] = ' '; + } + return arr; } + + + }); module.exports = TicTacToe; diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 26e5147..573a8d3 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -11,17 +11,18 @@ import TicTacToe from 'app/models/tictactoe'; const ApplicationView = Backbone.View.extend({ initialize: function() { - this.players = this.model.get('players'); + this.ticTacToe = this.model.game; - this.board = this.model.get('board'); + this.board = this.ticTacToe.get('board'); + this.players = this.ticTacToe.get('players'); this.listenTo(this, 'change', this.render); }, playTurn: function(marker) { - var isPlayable = this.model.isValidPlacement(marker.position); - var lastTurn = this.model.playTurn(marker.position); + var isPlayable = this.ticTacToe.isValidPlacement(marker.position); + var lastTurn = this.ticTacToe.playTurn(marker.position); if ( !isPlayable ) { alert("Invalid move! Pls try again."); @@ -31,6 +32,8 @@ const ApplicationView = Backbone.View.extend({ alert( lastTurn ); // send competeled game to the api // create a new game (blank board) + console.log(this.ticTacToe.getJson()); + this.model.create(this.ticTacToe.getJson); } this.trigger('change'); @@ -40,7 +43,7 @@ const ApplicationView = Backbone.View.extend({ const playerView = new PlayerView({ players: this.players, el: this.$('#players'), - currentPlayer: this.model.get('currentPlayer') + currentPlayer: this.ticTacToe.get('currentPlayer') }); const boardView = new BoardView({ From 941a2159d4179a7dad4704fe5db60a725e84685b Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Wed, 21 Dec 2016 14:29:01 -0800 Subject: [PATCH 66/68] Miracles --- src/app/collections/games.js | 6 +++++- src/app/models/game.js | 18 ++++++++++++++++++ src/app/models/tictactoe.js | 7 ++----- src/app/views/application_view.js | 3 ++- src/app/views/board_view.js | 1 - 5 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 src/app/models/game.js diff --git a/src/app/collections/games.js b/src/app/collections/games.js index cf973b4..05b9672 100644 --- a/src/app/collections/games.js +++ b/src/app/collections/games.js @@ -1,12 +1,16 @@ import Backbone from 'backbone'; import TicTacToe from 'app/models/tictactoe'; +import Game from 'app/models/game'; + var Games = Backbone.Collection.extend({ - model: TicTacToe, + model: Game, game: new TicTacToe({}), url: 'https://safe-mesa-21103.herokuapp.com/api/v1/games', parse: function(data) { + + return data.tasks; } diff --git a/src/app/models/game.js b/src/app/models/game.js new file mode 100644 index 0000000..7b43602 --- /dev/null +++ b/src/app/models/game.js @@ -0,0 +1,18 @@ +import Backbone from 'backbone'; + +const Game = Backbone.Model.extend({ +// this model is a wrapper for the API that is formatted like the API is + initialize: function(options) { + this.board = options.board; + this.players = options.players; + this.outcome = options.outcome; + this.playet_at = options.played_at; + + } + +}); + +module.exports = Game; + +// DO NOT REMOVE THIS +export default Game; diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 1987273..5f192d4 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -48,7 +48,6 @@ const TicTacToe = Backbone.Model.extend({ // - know who the current player is var player = this.get('players')[this.get('currentPlayer')]; - // console.log(player.name); // - prompt for placement var placement = prompt; @@ -219,8 +218,8 @@ const TicTacToe = Backbone.Model.extend({ this.jsonPlayers = [ this.get('player1').get('name'), this.get('player2').get('name') ]; - this.jsonOutcome = "X"; - this.jsonPlayedAt = "2016-11-20T22:59:10Z"; + this.jsonOutcome = (this.hasWon() ? this.get('players')[this.get('currentPlayer')].get('marker') : 'draw'); + this.jsonPlayedAt = new Date(new Date().getTime()); this.json = { @@ -241,8 +240,6 @@ const TicTacToe = Backbone.Model.extend({ return arr; } - - }); module.exports = TicTacToe; diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 573a8d3..96516fb 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -33,7 +33,8 @@ const ApplicationView = Backbone.View.extend({ // send competeled game to the api // create a new game (blank board) console.log(this.ticTacToe.getJson()); - this.model.create(this.ticTacToe.getJson); + this.model.create(this.ticTacToe.getJson()); + // this.model.save(this.ticTacToe.getJson()); } this.trigger('change'); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 684b837..f51ead1 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -28,7 +28,6 @@ const BoardView = Backbone.View.extend({ boardSquares.empty(); // loop within a loop - we need to have access to the larger this - console.log('render' + this.model); const self = this; this.grid = this.model.get('grid'); From 5f9fd7d62877dece4e6fee79551bbceeb8c4e03c Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Thu, 22 Dec 2016 14:59:17 -0800 Subject: [PATCH 67/68] Finishes wave 4 --- build/index.html | 14 ++++++- build/styles/index.css | 66 +++++++++++++++---------------- src/app.js | 1 - src/app/collections/games.js | 4 +- src/app/models/game.js | 18 ++++++++- src/app/models/tictactoe.js | 8 ---- src/app/views/application_view.js | 27 +++++++++++-- src/app/views/game_view.js | 26 ++++++++++++ src/app/views/games_view.js | 45 +++++++++++++++++++++ src/app/views/player_view.js | 5 --- src/app/views/square_view.js | 2 - src/board.js | 12 ------ src/player.js | 9 ----- 13 files changed, 157 insertions(+), 80 deletions(-) create mode 100644 src/app/views/game_view.js create mode 100644 src/app/views/games_view.js delete mode 100644 src/board.js delete mode 100644 src/player.js diff --git a/build/index.html b/build/index.html index a856be9..5dbe047 100644 --- a/build/index.html +++ b/build/index.html @@ -3,6 +3,9 @@ Tic-Tac-Toe + + + @@ -25,6 +28,10 @@

                Tic-Tac-Gradient

                +
                +
                  +
                  +
                  @@ -35,7 +42,12 @@

                  Tic-Tac-Gradient

                  + + + diff --git a/build/styles/index.css b/build/styles/index.css index 97b6811..60783f4 100644 --- a/build/styles/index.css +++ b/build/styles/index.css @@ -1,4 +1,4 @@ -h1, h2 { +h1, h2, h3 { font-family: 'Press Start 2P', cursive; text-align: center; color: grey; @@ -6,10 +6,11 @@ h1, h2 { h1 { font-size: 4vw; - margin-top: 2vw; + margin: 3vw; + } -h2 { +h2, h3 { font-size: 2vw; margin-bottom: 0; } @@ -19,7 +20,7 @@ body { background-color: white; } -#ttt-board { +#ttt-board, #played-games { width: 60%; margin: 0 auto; } @@ -34,47 +35,44 @@ li { padding: .25vw; } -/*X Gradient*/ - -.X0 { - background-color: #4A9E9D; - +#players { + margin-bottom: 2vw; } -.X1 { - background-color: #4C8E99; +#played-games > li { + padding: 4vw; + margin: 1vw; } -.X2 { - background-color: #4F8396; -} +#played-games > li:hover { background-color: rgba(128, 128, 128, 1); } -.X3 { - background-color: #536B90; +#played-games > li:hover h3::before { + font-family: FontAwesome; + content: '\f1f8'; + color: white; + padding-left: 15vw; } -.X4 { - background-color: #565D8E; -} +/*X Gradient*/ + +.X0 { background-color: #4A9E9D; } + +.X1 { background-color: #4C8E99; } + +.X2 { background-color: #4F8396; } + +.X3 { background-color: #536B90; } + +.X4 { background-color: #565D8E; } /*O Gradient*/ -.O0 { - background-color: #FFC271; -} +.O0 { background-color: #FFC271; } -.O1 { - background-color: #FFB670; -} +.O1 { background-color: #FFB670; } -.O2 { - background-color: #FFA570; -} +.O2 { background-color: #FFA570; } -.O3 { - background-color: #FF936F; -} +.O3 { background-color: #FF936F; } -.O4 { - background-color: #FF8A6F; -} +.O4 { background-color: #FF8A6F; } diff --git a/src/app.js b/src/app.js index 8c13765..28bcc7a 100644 --- a/src/app.js +++ b/src/app.js @@ -8,7 +8,6 @@ $(document).ready(function() { }); - games.fetch(); var appView = new ApplicationView({ el: '#application', diff --git a/src/app/collections/games.js b/src/app/collections/games.js index 05b9672..6509de4 100644 --- a/src/app/collections/games.js +++ b/src/app/collections/games.js @@ -9,9 +9,7 @@ var Games = Backbone.Collection.extend({ game: new TicTacToe({}), url: 'https://safe-mesa-21103.herokuapp.com/api/v1/games', parse: function(data) { - - - return data.tasks; + return data; } }); diff --git a/src/app/models/game.js b/src/app/models/game.js index 7b43602..d94c6b5 100644 --- a/src/app/models/game.js +++ b/src/app/models/game.js @@ -5,7 +5,23 @@ const Game = Backbone.Model.extend({ initialize: function(options) { this.board = options.board; this.players = options.players; - this.outcome = options.outcome; + this.marker = options.outcome; + + switch (this.marker) { + case 'X': + this.outcome = 'Player1'; + break; + case 'O': + this.outcome = 'Player2'; + break; + case 'draw': + this.outcome = 'No one'; + break; + default: + this.outcome = 'Unknown person'; + break; + } + this.playet_at = options.played_at; } diff --git a/src/app/models/tictactoe.js b/src/app/models/tictactoe.js index 5f192d4..2ad6f31 100644 --- a/src/app/models/tictactoe.js +++ b/src/app/models/tictactoe.js @@ -12,12 +12,6 @@ const TicTacToe = Backbone.Model.extend({ turns: 0 }, - // url: 'https://safe-mesa-21103.herokuapp.com/api/v1', - - // parse: function(data) { - // return data.tasks; - // }, - initialize: function(options) { var playersHash = [this.get('player1'), this.get('player2')]; @@ -63,7 +57,6 @@ const TicTacToe = Backbone.Model.extend({ return false; } - // console.log(this.get('board').get('grid')); // - end the move this.endMove(); @@ -208,7 +201,6 @@ const TicTacToe = Backbone.Model.extend({ // "played_at": "2016-11-20T22:59:10Z" // } - console.log(this.get('board').get('grid')); this.grid = this.get('board').get('grid'); this.jsonBoard = [].concat.apply([], this.grid); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 96516fb..971c029 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -2,6 +2,7 @@ import Backbone from 'backbone'; import BoardView from 'app/views/board_view'; import PlayerView from 'app/views/player_view'; import SquareView from 'app/views/square_view'; +import GamesView from 'app/views/games_view'; // models import Board from 'app/models/board'; @@ -31,16 +32,21 @@ const ApplicationView = Backbone.View.extend({ } else if ( lastTurn ) { alert( lastTurn ); // send competeled game to the api - // create a new game (blank board) - console.log(this.ticTacToe.getJson()); + // create a new game + this.model.create(this.ticTacToe.getJson()); - // this.model.save(this.ticTacToe.getJson()); + this.trigger('change'); + } - this.trigger('change'); + this.trigger('change'); }, render: function() { + // we need to fetch up here for updates to show - idk why? + this.model.fetch(); + + const playerView = new PlayerView({ players: this.players, el: this.$('#players'), @@ -57,6 +63,19 @@ const ApplicationView = Backbone.View.extend({ playerView.render(); boardView.render(); + + const self = this; + + this.model.fetch().done(function() { + const gamesView = new GamesView({ + model: self.model, + el: self.$('body') + }); + + // gamesView.render(); + + }); + return this; } }); diff --git a/src/app/views/game_view.js b/src/app/views/game_view.js new file mode 100644 index 0000000..defef4a --- /dev/null +++ b/src/app/views/game_view.js @@ -0,0 +1,26 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; + +const GameView = Backbone.View.extend({ + initialize: function(options){ + }, + + events: { + 'click': 'onClick' + }, + + onClick: function(e) { + this.trigger('selectGame', this.model); + + // We return false to tell jQuery not to run any more event handlers. + + return false; + }, + + render: function() { + } + + +}); + +export default GameView; diff --git a/src/app/views/games_view.js b/src/app/views/games_view.js new file mode 100644 index 0000000..9bb9d80 --- /dev/null +++ b/src/app/views/games_view.js @@ -0,0 +1,45 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; + +import GameView from 'app/views/game_view'; + +const GamesView = Backbone.View.extend({ + initialize: function(options){ + this.template = _.template(Backbone.$('#tmpl-results').html()); + this.render(); + }, + + selectedGame: function(game) { + console.log(game); + game.destroy(); + this.render(); + }, + + render: function() { + const gamesSquares = Backbone.$('#played-games'); + gamesSquares.empty(); + + + var games = this.model.models; + var length = games.length; + + for (var i = 0; i < length; i++) { + var outcome = games[i].outcome; + + const result = new GameView( { + outcome: outcome, + tagName: 'li', + model: games[i] + } ); + + this.listenTo(result, 'selectGame', this.selectedGame); + + gamesSquares.prepend(result.$el.append(this.template({ results : outcome }))); + + } + + } + +}); + +export default GamesView; diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js index 33a6ea0..86f4f39 100644 --- a/src/app/views/player_view.js +++ b/src/app/views/player_view.js @@ -16,10 +16,6 @@ const PlayerView = Backbone.View.extend({ this.currentPlayerID = options.currentPlayer; - // we re-render the player view when the player changes - not sure how this works yet! - // this could listen for turn even from board_view? - // this.listenTo(this.model, 'turn', this.render); - }, @@ -35,7 +31,6 @@ const PlayerView = Backbone.View.extend({ this.currentPlayerID = ((this.currentPlayerID === 0) ? 1 : 0); - console.log(this.currentPlayerID); return this; } diff --git a/src/app/views/square_view.js b/src/app/views/square_view.js index 8d2bae3..d89eeee 100644 --- a/src/app/views/square_view.js +++ b/src/app/views/square_view.js @@ -17,8 +17,6 @@ const SquareView = Backbone.View.extend({ }, onClick: function(e) { - console.log(">>> BREADCRUMBS: select click"); - this.trigger('select', this); // We return false to tell jQuery not to run any more event handlers. diff --git a/src/board.js b/src/board.js deleted file mode 100644 index cc927ae..0000000 --- a/src/board.js +++ /dev/null @@ -1,12 +0,0 @@ -var Board = function() { - this.grid = [ - [null, null, null], - [null, null, null], - [null, null, null] - ]; -}; - -module.exports = Board; - -// DO NOT REMOVE THIS -export default Board; diff --git a/src/player.js b/src/player.js deleted file mode 100644 index 53834c1..0000000 --- a/src/player.js +++ /dev/null @@ -1,9 +0,0 @@ -var Player = function(name, marker) { - this.name = name; - this.marker = marker; -}; - -module.exports = Player; - -// DO NOT REMOVE THIS -export default Player; From 8334b5a9c425363234f5c8beafd63bf7c63a4ed5 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Thu, 22 Dec 2016 15:08:07 -0800 Subject: [PATCH 68/68] Adds a better trash can --- build/styles/index.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/build/styles/index.css b/build/styles/index.css index 60783f4..c514986 100644 --- a/build/styles/index.css +++ b/build/styles/index.css @@ -44,13 +44,20 @@ li { margin: 1vw; } -#played-games > li:hover { background-color: rgba(128, 128, 128, 1); } +#played-games > li:hover { + background-color: rgba(128, 128, 128, 1); + padding: 2vw; + padding-top: 3vw; +} #played-games > li:hover h3::before { font-family: FontAwesome; content: '\f1f8'; color: white; padding-left: 15vw; + font-size: 3vw; + padding-top: 0; + padding-bottom: 0; } /*X Gradient*/