From 3db67ccc6fbf4f02e2ed01bddf2eea10c1c1937e Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 13 Dec 2016 11:59:31 -0800 Subject: [PATCH 01/55] Initial file structure and working test file --- spec/tic_tac_toe.spec.js | 9 +++++++++ src/tic_tac_toe.js | 3 +++ 2 files changed, 12 insertions(+) create mode 100644 spec/tic_tac_toe.spec.js create mode 100644 src/tic_tac_toe.js diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js new file mode 100644 index 0000000..c11086f --- /dev/null +++ b/spec/tic_tac_toe.spec.js @@ -0,0 +1,9 @@ +import TicTacToe from 'tic_tac_toe'; + +describe('TicTacToe', function() { + describe('the truth', function() { + it('should return true', function() { + expect(true).toEqual(true); + }); + }); +}); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js new file mode 100644 index 0000000..179c25e --- /dev/null +++ b/src/tic_tac_toe.js @@ -0,0 +1,3 @@ +var TicTacToe = {}; + +export default TicTacToe; From fd1da0c4e56e20cd7827b60f0092f123e041a3e9 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 13 Dec 2016 13:33:52 -0800 Subject: [PATCH 02/55] WIP: initialize player with identifier --- spec/tic_tac_toe.spec.js | 11 +++++++++++ src/tic_tac_toe.js | 9 ++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index c11086f..1e214c5 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -1,4 +1,5 @@ import TicTacToe from 'tic_tac_toe'; +import Player from 'tic_tac_toe'; describe('TicTacToe', function() { describe('the truth', function() { @@ -7,3 +8,13 @@ describe('TicTacToe', function() { }); }); }); + +describe('Player', function() { + var testPlayer = new Player(); + + describe('player', function() { + it('should have a marker', function() { + expect(testPlayer.marker).toEqual(1); + }); + }); +}); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 179c25e..d0acd86 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -1,3 +1,10 @@ -var TicTacToe = {}; +var TicTacToe = function(){ + +}; + +var Player = function(){}; +// var Player = function(num) { +// this.marker = num; +// }; export default TicTacToe; From 940d90440020808bce1bfd36a0ce672d4f5e585f Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Tue, 13 Dec 2016 13:54:42 -0800 Subject: [PATCH 03/55] added separate files for Player --- spec/player.spec.js | 11 +++++++++++ spec/tic_tac_toe.spec.js | 11 ----------- src/player.js | 7 +++++++ src/tic_tac_toe.js | 4 ---- 4 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 spec/player.spec.js create mode 100644 src/player.js diff --git a/spec/player.spec.js b/spec/player.spec.js new file mode 100644 index 0000000..b080e76 --- /dev/null +++ b/spec/player.spec.js @@ -0,0 +1,11 @@ +import Player from 'tic_tac_toe'; + +describe('Player', function() { + var testPlayer = new Player(1); + console.log(testPlayer.keys); + describe('player', function() { + it('should have a marker', function() { + expect(testPlayer.marker).toEqual(1); + }); + }); +}); diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 1e214c5..c11086f 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -1,5 +1,4 @@ import TicTacToe from 'tic_tac_toe'; -import Player from 'tic_tac_toe'; describe('TicTacToe', function() { describe('the truth', function() { @@ -8,13 +7,3 @@ describe('TicTacToe', function() { }); }); }); - -describe('Player', function() { - var testPlayer = new Player(); - - describe('player', function() { - it('should have a marker', function() { - expect(testPlayer.marker).toEqual(1); - }); - }); -}); diff --git a/src/player.js b/src/player.js new file mode 100644 index 0000000..65fa0d9 --- /dev/null +++ b/src/player.js @@ -0,0 +1,7 @@ +// var Player = function(){}; +var Player = function(num) { + this.marker = num; +}; + + +export default Player; diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index d0acd86..c3f434b 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -2,9 +2,5 @@ var TicTacToe = function(){ }; -var Player = function(){}; -// var Player = function(num) { -// this.marker = num; -// }; export default TicTacToe; From a9543d61eba4dd8ae68418ba1edcec4b86dabddb Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Tue, 13 Dec 2016 14:01:49 -0800 Subject: [PATCH 04/55] make player actually work --- spec/player.spec.js | 4 ++-- src/player.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/spec/player.spec.js b/spec/player.spec.js index b080e76..902a22d 100644 --- a/spec/player.spec.js +++ b/spec/player.spec.js @@ -1,8 +1,8 @@ -import Player from 'tic_tac_toe'; +import Player from 'player'; describe('Player', function() { var testPlayer = new Player(1); - console.log(testPlayer.keys); + console.log(Object.getOwnPropertyNames(testPlayer)); describe('player', function() { it('should have a marker', function() { expect(testPlayer.marker).toEqual(1); diff --git a/src/player.js b/src/player.js index 65fa0d9..33d336a 100644 --- a/src/player.js +++ b/src/player.js @@ -1,5 +1,6 @@ // var Player = function(){}; var Player = function(num) { + // console.log("this is a num:" + num); this.marker = num; }; From a19f60c4cb9f821536bb71e73107082816f907d7 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Tue, 13 Dec 2016 14:18:14 -0800 Subject: [PATCH 05/55] working tests, building the empty board --- spec/board.spec.js | 27 +++++++++++++++++++++++++++ spec/player.spec.js | 2 +- src/board.js | 5 +++++ 3 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 spec/board.spec.js create mode 100644 src/board.js diff --git a/spec/board.spec.js b/spec/board.spec.js new file mode 100644 index 0000000..5307275 --- /dev/null +++ b/spec/board.spec.js @@ -0,0 +1,27 @@ +import Board from 'board'; + +describe('Board', function() { + var testBoard = new Board(); + + describe('board', function() { + it('should exist', function() { + expect(testBoard instanceof Board).toEqual(true); + }); + + it('should start with an empty board', function(){ + expect(testBoard.playingField instanceof Array).toEqual(true); + }); + + it('should have 9 empty spaces with default value of 0', function(){ + expect(testBoard.playingField).toEqual([[0,0,0],[0,0,0],[0,0,0]]); + }); + }); + + // describe('board', function() { + // it('should exist', function() { + // expect(testBoard instanceof Board).toEqual(true); + // }); + // }); +}); + +// console.log(Object.getOwnPropertyNames(testBoard)); diff --git a/spec/player.spec.js b/spec/player.spec.js index 902a22d..1c78d57 100644 --- a/spec/player.spec.js +++ b/spec/player.spec.js @@ -2,7 +2,7 @@ import Player from 'player'; describe('Player', function() { var testPlayer = new Player(1); - console.log(Object.getOwnPropertyNames(testPlayer)); + // console.log(Object.getOwnPropertyNames(testPlayer)); describe('player', function() { it('should have a marker', function() { expect(testPlayer.marker).toEqual(1); diff --git a/src/board.js b/src/board.js new file mode 100644 index 0000000..bf23c3e --- /dev/null +++ b/src/board.js @@ -0,0 +1,5 @@ +var Board = function() { + this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; +}; + +export default Board; From 4e44d260572a0fcb97497d1f58bd86082325e8b2 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Tue, 13 Dec 2016 14:36:11 -0800 Subject: [PATCH 06/55] working on test for checking empty spots --- spec/board.spec.js | 9 +++++++++ src/board.js | 1 + 2 files changed, 10 insertions(+) diff --git a/spec/board.spec.js b/spec/board.spec.js index 5307275..e79e70a 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -17,6 +17,15 @@ describe('Board', function() { }); }); + describe('emptySpace', function(){ + //parameter passed is the coordinate: [][] + testBoard.emptySpace([0][1]); + it('should return true if requested space is empty', function(){ + expect(testBoard.emptySpace([0][1])).toEqual(true); + }); + }); + + // describe('board', function() { // it('should exist', function() { // expect(testBoard instanceof Board).toEqual(true); diff --git a/src/board.js b/src/board.js index bf23c3e..563eb75 100644 --- a/src/board.js +++ b/src/board.js @@ -2,4 +2,5 @@ var Board = function() { this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; }; +Board.prototype.emptySpace = function(index) export default Board; From 4123a12fedc32034fa8116419f6a75ee32c376b1 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 13 Dec 2016 14:47:19 -0800 Subject: [PATCH 07/55] working test to check if space is occupied --- spec/board.spec.js | 9 +++++++-- src/board.js | 9 ++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/spec/board.spec.js b/spec/board.spec.js index e79e70a..2627e5b 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -19,9 +19,14 @@ describe('Board', function() { describe('emptySpace', function(){ //parameter passed is the coordinate: [][] - testBoard.emptySpace([0][1]); + // console.log(testBoard.emptySpace(0, 1)); it('should return true if requested space is empty', function(){ - expect(testBoard.emptySpace([0][1])).toEqual(true); + expect(testBoard.emptySpace(0, 1)).toEqual(true); + }); + + it('should return false if requested space is occupied', function() { + testBoard.playingField[0][2] = 2; + expect(testBoard.emptySpace(0, 2)).toEqual(false); }); }); diff --git a/src/board.js b/src/board.js index 563eb75..c75bd6a 100644 --- a/src/board.js +++ b/src/board.js @@ -2,5 +2,12 @@ var Board = function() { this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; }; -Board.prototype.emptySpace = function(index) +Board.prototype.emptySpace = function(row, column) { + if (this.playingField[row][column] === 0) { + return true; + } else { + return false; + } +}; + export default Board; From 008c056da6862c55acca1eea982c9cfb618c9fb5 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 13 Dec 2016 15:32:52 -0800 Subject: [PATCH 08/55] add game initialize and place marker tests and functionalities --- spec/tic_tac_toe.spec.js | 35 ++++++++++++++++++++++++++++++++--- src/tic_tac_toe.js | 10 ++++++++++ 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index c11086f..6a46bfc 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -1,9 +1,38 @@ import TicTacToe from 'tic_tac_toe'; +import Board from 'board'; +import Player from 'player'; describe('TicTacToe', function() { - describe('the truth', function() { - it('should return true', function() { - expect(true).toEqual(true); + var testGame = new TicTacToe(); + + describe('ticTacToe', function() { + it('should start the turn count at 0', function() { + expect(testGame.totalTurns).toEqual(0); + }); + + it('should initialize a new game with a new board', function() { + expect(testGame.board instanceof Board).toEqual(true); + }); + + it('should start with an empty board', function() { + expect(testGame.board.playingField).toEqual([[0,0,0],[0,0,0],[0,0,0]]); + }); + + it('should start with two players', function() { + expect(testGame.players.length).toEqual(2); + }); + + it('should have player objects', function() { + expect(testGame.players[0] instanceof Player).toEqual(true); + expect(testGame.players[1] instanceof Player).toEqual(true); + }); + }); + + describe('placeMarker', function() { + it('should place appropriate player\'s marker on designated space', function() { + expect(testGame.board.emptySpace(0,1)).toEqual(true); + testGame.placeMarker(0,1,2); + expect(testGame.board.emptySpace(0,1)).toEqual(false); }); }); }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index c3f434b..b92d24a 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -1,5 +1,15 @@ +import Board from 'board'; +import Player from 'player'; + var TicTacToe = function(){ + this.MAX_TURNS = 9; + this.totalTurns = 0; + this.board = new Board(); + this.players = [new Player(1), new Player(2)]; +}; +TicTacToe.prototype.placeMarker = function(row, column, player) { + this.board.playingField[row][column] = player; }; From 358fbefe34f8bd865c203209b13df1951f02c8ad Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 09:39:21 -0800 Subject: [PATCH 09/55] added specs and functionality to turn function for toggling players and increasing turn count --- spec/tic_tac_toe.spec.js | 17 +++++++++++++++++ src/tic_tac_toe.js | 13 +++++++++++++ 2 files changed, 30 insertions(+) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 6a46bfc..32215a3 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -35,4 +35,21 @@ describe('TicTacToe', function() { expect(testGame.board.emptySpace(0,1)).toEqual(false); }); }); + + describe('turn', function(){ + it('should toggle the player', function(){ + testGame.turn(); + expect(testGame.currentPlayer).toEqual(testGame.players[1]); + testGame.turn(); + expect(testGame.currentPlayer).toEqual(testGame.players[0]); + }); + + it('should increase the turn count at the end of the turn', function(){ + testGame.turn(); + expect(testGame.turnCount).toEqual(3); + }); + // it ('should get player\'s space input', function(){ + // expect() ////@TODO wait until backbone + // }); + }); }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index b92d24a..329865c 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -6,11 +6,24 @@ var TicTacToe = function(){ this.totalTurns = 0; this.board = new Board(); this.players = [new Player(1), new Player(2)]; + this.currentPlayer = this.players[0]; + this.turnCount = 0; }; TicTacToe.prototype.placeMarker = function(row, column, player) { this.board.playingField[row][column] = player; }; +TicTacToe.prototype.turn = +function() { + if (this.currentPlayer=== this.players[0]) { + this.currentPlayer = this.players[1]; + } else { + this.currentPlayer = this.players[0]; + } + + this.turnCount += 1; + +}; export default TicTacToe; From 80aff7500ff65bf97cc8f585695590f4496aa48c Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 09:57:47 -0800 Subject: [PATCH 10/55] pseudocoded the rest of the turn function --- spec/tic_tac_toe.spec.js | 7 +++++++ src/tic_tac_toe.js | 13 ++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 32215a3..fbd9df1 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -48,6 +48,13 @@ describe('TicTacToe', function() { testGame.turn(); expect(testGame.turnCount).toEqual(3); }); + + + + it('should not let you play more than 9 turns', function(){ + testGame.turnCount = 9; + expect(function() {testGame.turn();}).toThrow(new Error('Game is over! Please clear your board for a new game.')); + }); // it ('should get player\'s space input', function(){ // expect() ////@TODO wait until backbone // }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 329865c..108705c 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -16,14 +16,21 @@ TicTacToe.prototype.placeMarker = function(row, column, player) { TicTacToe.prototype.turn = function() { + if (this.turnCount === 9) { + throw new Error('Game is over! Please clear your board for a new game.'); + } + + //check if player's choice is an available spot + + // if it is, place marker + + //if not, throw error + this.turnCount += 1; if (this.currentPlayer=== this.players[0]) { this.currentPlayer = this.players[1]; } else { this.currentPlayer = this.players[0]; } - - this.turnCount += 1; - }; export default TicTacToe; From f7938e66a5046fd8fbfc1e27fb5e56e3276665e3 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 10:03:24 -0800 Subject: [PATCH 11/55] oops here's the rest of the code --- src/tic_tac_toe.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 108705c..8770065 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -24,8 +24,13 @@ function() { // if it is, place marker - //if not, throw error + //if not, throw error and start turn over + this.turnCount += 1; + + //if turnCount >=5, check for winner + + // if turnCount === 9, check for tie if (this.currentPlayer=== this.players[0]) { this.currentPlayer = this.players[1]; } else { From 1f5ac539cb481007b769f778f7e47ce588d63a40 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Wed, 14 Dec 2016 10:32:53 -0800 Subject: [PATCH 12/55] add test and functionality to place marker only if space is empty --- spec/tic_tac_toe.spec.js | 22 ++++++++++++++-------- src/tic_tac_toe.js | 14 +++++++++----- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index fbd9df1..f4adf22 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -38,22 +38,28 @@ describe('TicTacToe', function() { describe('turn', function(){ it('should toggle the player', function(){ - testGame.turn(); - expect(testGame.currentPlayer).toEqual(testGame.players[1]); - testGame.turn(); - expect(testGame.currentPlayer).toEqual(testGame.players[0]); + var testToggle = new TicTacToe(); + testToggle.turn(0, 0); + expect(testToggle.currentPlayer).toEqual(testToggle.players[1]); + testToggle.turn(0, 1); + expect(testToggle.currentPlayer).toEqual(testToggle.players[0]); }); it('should increase the turn count at the end of the turn', function(){ - testGame.turn(); - expect(testGame.turnCount).toEqual(3); + testGame.turn(2, 2); + expect(testGame.turnCount).toEqual(1); }); - + it('should check if player\'s choice is an available spot', function() { + expect(testGame.board.emptySpace(1, 1)).toEqual(true); + testGame.turn(1, 1); + expect(testGame.board.emptySpace(1, 1)).toEqual(false); + expect(function() {testGame.turn(1, 1);}).toThrow(new Error('Space is occupied. Pick an empty space.')); + }); it('should not let you play more than 9 turns', function(){ testGame.turnCount = 9; - expect(function() {testGame.turn();}).toThrow(new Error('Game is over! Please clear your board for a new game.')); + expect(function() {testGame.turn(2, 1);}).toThrow(new Error('Game is over! Please clear your board for a new game.')); }); // it ('should get player\'s space input', function(){ // expect() ////@TODO wait until backbone diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 8770065..f8cc480 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -15,22 +15,26 @@ TicTacToe.prototype.placeMarker = function(row, column, player) { }; TicTacToe.prototype.turn = -function() { +function(row, column) { if (this.turnCount === 9) { throw new Error('Game is over! Please clear your board for a new game.'); } - //check if player's choice is an available spot + // if space is empty, placeMarker + // if not, throw error and start turn over + if (this.board.emptySpace(row, column) === true) { + this.placeMarker(row, column, this.currentPlayer); + } else { + throw new Error('Space is occupied. Pick an empty space.'); + } - // if it is, place marker - //if not, throw error and start turn over this.turnCount += 1; //if turnCount >=5, check for winner - // if turnCount === 9, check for tie + // if turnCount === 9, check for tie if (this.currentPlayer=== this.players[0]) { this.currentPlayer = this.players[1]; } else { From 285b4309a541cbab76b2a7ac7033394d4aa94e9b Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 11:24:45 -0800 Subject: [PATCH 13/55] passing test for row winner, but not for column --- spec/tic_tac_toe.spec.js | 17 +++++++++++++++++ src/tic_tac_toe.js | 16 ++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index f4adf22..9b7bf06 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -65,4 +65,21 @@ describe('TicTacToe', function() { // expect() ////@TODO wait until backbone // }); }); + + describe('checkWin', function(){ + it('should recognize a winner (or not) in a row', function(){ + var testRowWin = new TicTacToe(); + expect(testRowWin.checkWin()).toEqual(false); + testRowWin.board.playingField[1] = [5,5,5]; + expect(testRowWin.checkWin()).toEqual(testRowWin.players[1]); + }); + it('should recognize a winner (or not) in a column', function(){ + var testColumnWin = new TicTacToe(); + // expect(testColumnWin.checkWin()).toEqual(false); + testColumnWin.board.playingField[2][0] = 1; + testColumnWin.board.playingField[2][1] = 1; + testColumnWin.board.playingField[2][2] = 1; + expect(testColumnWin.checkWin()).toEqual(testColumnWin.players[0]); + }); + }); }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index f8cc480..a954997 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -14,6 +14,22 @@ TicTacToe.prototype.placeMarker = function(row, column, player) { this.board.playingField[row][column] = player; }; +TicTacToe.prototype.checkWin = function() { + //first, iterate over each row + for (var i = 0; i< 3; i++) { + var sum = 0; + for (var x = 0; x < 3; x++){ + sum += this.board.playingField[i][x]; + } + if (sum === 3) { + return this.players[0]; + } else if (sum === 15) { + return this.players[1]; + } + } + return false; +}; + TicTacToe.prototype.turn = function(row, column) { if (this.turnCount === 9) { From f5f31ed48368fbe2f40e36a68e64ec9b49393ed5 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 11:38:45 -0800 Subject: [PATCH 14/55] wrote functionality for finding winners, going to refactor --- spec/tic_tac_toe.spec.js | 21 ++++++++++++++++++--- src/tic_tac_toe.js | 32 ++++++++++++++++++++++++++++---- 2 files changed, 46 insertions(+), 7 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 9b7bf06..aeb279e 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -75,11 +75,26 @@ describe('TicTacToe', function() { }); it('should recognize a winner (or not) in a column', function(){ var testColumnWin = new TicTacToe(); - // expect(testColumnWin.checkWin()).toEqual(false); - testColumnWin.board.playingField[2][0] = 1; - testColumnWin.board.playingField[2][1] = 1; + expect(testColumnWin.checkWin()).toEqual(false); + testColumnWin.board.playingField[0][2] = 1; + // console.log(testColumnWin.board.playingField); + testColumnWin.board.playingField[1][2] = 1; + // console.log(testColumnWin.board.playingField); testColumnWin.board.playingField[2][2] = 1; + // console.log(testColumnWin.board.playingField); expect(testColumnWin.checkWin()).toEqual(testColumnWin.players[0]); }); + + it('should recognize a winner (or not) in a diagonal', function(){ + var testDiagonalWin = new TicTacToe(); + expect(testDiagonalWin.checkWin()).toEqual(false); + testDiagonalWin.board.playingField[0][2] = 1; + // // console.log(testDiagonalWin.board.playingField); + testDiagonalWin.board.playingField[1][1] = 1; + // // console.log(testDiagonalWin.board.playingField); + testDiagonalWin.board.playingField[2][0] = 1; + // // console.log(testDiagonalWin.board.playingField); + expect(testDiagonalWin.checkWin()).toEqual(testDiagonalWin.players[0]); + }); }); }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index a954997..235a198 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -17,16 +17,40 @@ TicTacToe.prototype.placeMarker = function(row, column, player) { TicTacToe.prototype.checkWin = function() { //first, iterate over each row for (var i = 0; i< 3; i++) { - var sum = 0; + var rowSum = 0; for (var x = 0; x < 3; x++){ - sum += this.board.playingField[i][x]; + rowSum += this.board.playingField[i][x]; } - if (sum === 3) { + if (rowSum === 3) { return this.players[0]; - } else if (sum === 15) { + } else if (rowSum === 15) { return this.players[1]; } } + for (var i = 0; i< 3; i++) { + var columnSum = 0; + for (var x = 0; x < 3; x++){ + columnSum += this.board.playingField[x][i]; + } + if (columnSum === 3) { + return this.players[0]; + } else if (columnSum === 15) { + return this.players[1]; + } + } + + var leftDiagonalSum = 0; + var rightDiagonalSum = 0; + for (var i = 0; i< 3; i++) { + leftDiagonalSum += this.board.playingField[i][i]; + rightDiagonalSum += this.board.playingField[i][2-i]; + } + if (leftDiagonalSum === 3 || rightDiagonalSum === 3) { + return this.players[0]; + } else if (leftDiagonalSum === 15 || rightDiagonalSum === 15) { + return this.players[1]; + } + return false; }; From 019745920f5be3c63207ee54e738402a7af0771c Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Wed, 14 Dec 2016 12:04:50 -0800 Subject: [PATCH 15/55] refactor checkWin --- spec/tic_tac_toe.spec.js | 17 +++++++++++------ src/tic_tac_toe.js | 35 +++++++++++------------------------ 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index aeb279e..1ed1170 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -77,11 +77,8 @@ describe('TicTacToe', function() { var testColumnWin = new TicTacToe(); expect(testColumnWin.checkWin()).toEqual(false); testColumnWin.board.playingField[0][2] = 1; - // console.log(testColumnWin.board.playingField); testColumnWin.board.playingField[1][2] = 1; - // console.log(testColumnWin.board.playingField); testColumnWin.board.playingField[2][2] = 1; - // console.log(testColumnWin.board.playingField); expect(testColumnWin.checkWin()).toEqual(testColumnWin.players[0]); }); @@ -89,12 +86,20 @@ describe('TicTacToe', function() { var testDiagonalWin = new TicTacToe(); expect(testDiagonalWin.checkWin()).toEqual(false); testDiagonalWin.board.playingField[0][2] = 1; - // // console.log(testDiagonalWin.board.playingField); testDiagonalWin.board.playingField[1][1] = 1; - // // console.log(testDiagonalWin.board.playingField); testDiagonalWin.board.playingField[2][0] = 1; - // // console.log(testDiagonalWin.board.playingField); expect(testDiagonalWin.checkWin()).toEqual(testDiagonalWin.players[0]); }); + + it('should recognize no winner when total sum adds to win but not in correct order', function(){ + var testWackyBoard = new TicTacToe(); + expect(testWackyBoard.checkWin()).toEqual(false); + testWackyBoard.board.playingField[0][0] = 1; + testWackyBoard.board.playingField[1][0] = 5; + testWackyBoard.board.playingField[1][1] = 1; + testWackyBoard.board.playingField[2][0] = 1; + testWackyBoard.board.playingField[2][2] = 5; + expect(testWackyBoard.checkWin()).toEqual(false); + }); }); }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 235a198..70131ef 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -15,41 +15,28 @@ TicTacToe.prototype.placeMarker = function(row, column, player) { }; TicTacToe.prototype.checkWin = function() { - //first, iterate over each row + var leftDiagonalSum = 0; + var rightDiagonalSum = 0; + for (var i = 0; i< 3; i++) { var rowSum = 0; - for (var x = 0; x < 3; x++){ - rowSum += this.board.playingField[i][x]; - } - if (rowSum === 3) { - return this.players[0]; - } else if (rowSum === 15) { - return this.players[1]; - } - } - for (var i = 0; i< 3; i++) { var columnSum = 0; + for (var x = 0; x < 3; x++){ + rowSum += this.board.playingField[i][x]; columnSum += this.board.playingField[x][i]; } - if (columnSum === 3) { + + leftDiagonalSum += this.board.playingField[i][i]; + rightDiagonalSum += this.board.playingField[i][2-i]; + + if (rowSum === 3 || columnSum === 3|| leftDiagonalSum === 3 || rightDiagonalSum === 3) { return this.players[0]; - } else if (columnSum === 15) { + } else if (rowSum === 15 || columnSum === 15 || leftDiagonalSum === 15 || rightDiagonalSum === 15) { return this.players[1]; } } - var leftDiagonalSum = 0; - var rightDiagonalSum = 0; - for (var i = 0; i< 3; i++) { - leftDiagonalSum += this.board.playingField[i][i]; - rightDiagonalSum += this.board.playingField[i][2-i]; - } - if (leftDiagonalSum === 3 || rightDiagonalSum === 3) { - return this.players[0]; - } else if (leftDiagonalSum === 15 || rightDiagonalSum === 15) { - return this.players[1]; - } return false; }; From 2d1a899c3f044cddea3ba3186572e640ff815f51 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Wed, 14 Dec 2016 12:30:42 -0800 Subject: [PATCH 16/55] throws error when game is won. WIP: checkwin error message --- spec/tic_tac_toe.spec.js | 16 ++++++++++++++++ src/tic_tac_toe.js | 13 +++++++++---- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 1ed1170..608cf98 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -53,6 +53,9 @@ describe('TicTacToe', function() { it('should check if player\'s choice is an available spot', function() { expect(testGame.board.emptySpace(1, 1)).toEqual(true); testGame.turn(1, 1); + console.log(testGame.turnCount); + console.log(testGame.checkWin()); + console.log(testGame.board.playingField); expect(testGame.board.emptySpace(1, 1)).toEqual(false); expect(function() {testGame.turn(1, 1);}).toThrow(new Error('Space is occupied. Pick an empty space.')); }); @@ -61,6 +64,19 @@ describe('TicTacToe', function() { testGame.turnCount = 9; expect(function() {testGame.turn(2, 1);}).toThrow(new Error('Game is over! Please clear your board for a new game.')); }); + + // it('should end game when someone wins', function() { + // var winningGame = new TicTacToe(); + // winningGame.turn(0, 1); + // winningGame.turn(1, 0); + // winningGame.turn(0, 0); + // winningGame.turn(1, 1); + // + // expect(function() {winningGame.turn(0,2);}).toThrow(new Error(winningGame.checkWin() + ' is the winner!')); + // + // expect(function() {winningGame.turn(2,2);}).toThrow(new Error('Game is over! Please clear your board for a new game.')); + // }); + // it ('should get player\'s space input', function(){ // expect() ////@TODO wait until backbone // }); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 70131ef..3a5502c 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -11,7 +11,7 @@ var TicTacToe = function(){ }; TicTacToe.prototype.placeMarker = function(row, column, player) { - this.board.playingField[row][column] = player; + this.board.playingField[row][column] = player.marker; }; TicTacToe.prototype.checkWin = function() { @@ -26,7 +26,7 @@ TicTacToe.prototype.checkWin = function() { rowSum += this.board.playingField[i][x]; columnSum += this.board.playingField[x][i]; } - + leftDiagonalSum += this.board.playingField[i][i]; rightDiagonalSum += this.board.playingField[i][2-i]; @@ -43,7 +43,7 @@ TicTacToe.prototype.checkWin = function() { TicTacToe.prototype.turn = function(row, column) { - if (this.turnCount === 9) { + if (this.turnCount === 9) { //|| this.checkWin() !== false) { throw new Error('Game is over! Please clear your board for a new game.'); } @@ -59,7 +59,12 @@ function(row, column) { this.turnCount += 1; - //if turnCount >=5, check for winner + // if turnCount >=5, check for winner + if (this.turnCount >= 5) { + if (this.checkWin() !== false) { + throw new Error(this.checkWin() + ' is the winner!'); + } + } // if turnCount === 9, check for tie if (this.currentPlayer=== this.players[0]) { From 30ec621d3c306db590fc821c7e2daf9b940038ff Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 13:45:36 -0800 Subject: [PATCH 17/55] found bug in Player 2 when initializing new game --- spec/tic_tac_toe.spec.js | 5 +++-- src/tic_tac_toe.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 608cf98..f6568d2 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -31,7 +31,7 @@ describe('TicTacToe', function() { describe('placeMarker', function() { it('should place appropriate player\'s marker on designated space', function() { expect(testGame.board.emptySpace(0,1)).toEqual(true); - testGame.placeMarker(0,1,2); + testGame.placeMarker(0,1,testGame.players[1]); expect(testGame.board.emptySpace(0,1)).toEqual(false); }); }); @@ -52,8 +52,9 @@ describe('TicTacToe', function() { it('should check if player\'s choice is an available spot', function() { expect(testGame.board.emptySpace(1, 1)).toEqual(true); + console.log(testGame.board.playingField); testGame.turn(1, 1); - console.log(testGame.turnCount); + console.log("turn count:" + testGame.turnCount); console.log(testGame.checkWin()); console.log(testGame.board.playingField); expect(testGame.board.emptySpace(1, 1)).toEqual(false); diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 3a5502c..565061e 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -5,7 +5,7 @@ var TicTacToe = function(){ this.MAX_TURNS = 9; this.totalTurns = 0; this.board = new Board(); - this.players = [new Player(1), new Player(2)]; + this.players = [new Player(1), new Player(5)]; this.currentPlayer = this.players[0]; this.turnCount = 0; }; @@ -43,7 +43,7 @@ TicTacToe.prototype.checkWin = function() { TicTacToe.prototype.turn = function(row, column) { - if (this.turnCount === 9) { //|| this.checkWin() !== false) { + if (this.turnCount === 9 || this.checkWin() !== false) { throw new Error('Game is over! Please clear your board for a new game.'); } From a837aa5bfe7085ac8ca11d431e8637c1b4f1a4c7 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 14:08:01 -0800 Subject: [PATCH 18/55] wrote the logic for a tied game --- spec/tic_tac_toe.spec.js | 43 ++++++++++++++++++++++++++-------------- src/tic_tac_toe.js | 7 ++++++- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index f6568d2..37445e9 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -52,11 +52,11 @@ describe('TicTacToe', function() { it('should check if player\'s choice is an available spot', function() { expect(testGame.board.emptySpace(1, 1)).toEqual(true); - console.log(testGame.board.playingField); + // console.log(testGame.board.playingField); testGame.turn(1, 1); - console.log("turn count:" + testGame.turnCount); - console.log(testGame.checkWin()); - console.log(testGame.board.playingField); + // console.log("turn count:" + testGame.turnCount); + // console.log(testGame.checkWin()); + // console.log(testGame.board.playingField); expect(testGame.board.emptySpace(1, 1)).toEqual(false); expect(function() {testGame.turn(1, 1);}).toThrow(new Error('Space is occupied. Pick an empty space.')); }); @@ -66,17 +66,30 @@ describe('TicTacToe', function() { expect(function() {testGame.turn(2, 1);}).toThrow(new Error('Game is over! Please clear your board for a new game.')); }); - // it('should end game when someone wins', function() { - // var winningGame = new TicTacToe(); - // winningGame.turn(0, 1); - // winningGame.turn(1, 0); - // winningGame.turn(0, 0); - // winningGame.turn(1, 1); - // - // expect(function() {winningGame.turn(0,2);}).toThrow(new Error(winningGame.checkWin() + ' is the winner!')); - // - // expect(function() {winningGame.turn(2,2);}).toThrow(new Error('Game is over! Please clear your board for a new game.')); - // }); + it('should end game when someone wins', function() { + var winningGame = new TicTacToe(); + winningGame.turn(0, 1); + winningGame.turn(1, 0); + winningGame.turn(0, 0); + winningGame.turn(1, 1); + // winningGame.turn(0, 2); + // console.log("check win returns: " + winningGame.checkWin()); + expect(function() {winningGame.turn(0,2);}).toThrow(new Error('Player1 is the winner!')); + expect(function() {winningGame.turn(2,2);}).toThrow(new Error('Game is over! Please clear your board for a new game.')); + }); + + it('should return a tie error when there is no winner after 9 turns', function(){ + var tiedGame = new TicTacToe(); + tiedGame.turn(0,0); + tiedGame.turn(0,1); + tiedGame.turn(1,1); + tiedGame.turn(0,2); + tiedGame.turn(1,2); + tiedGame.turn(1,0); + tiedGame.turn(2,0); + tiedGame.turn(2,2); + expect(function() {tiedGame.turn(2,1);}).toThrow(new Error('It\'s a tie!')); + }); // it ('should get player\'s space input', function(){ // expect() ////@TODO wait until backbone diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index 565061e..ac93d1b 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -62,11 +62,16 @@ function(row, column) { // if turnCount >=5, check for winner if (this.turnCount >= 5) { if (this.checkWin() !== false) { - throw new Error(this.checkWin() + ' is the winner!'); + throw new Error("Player" + this.checkWin().marker + ' is the winner!'); + } + else if (this.turnCount === 9) { + throw new Error("It's a tie!"); } } // if turnCount === 9, check for tie + + //this toggles the player at the end of the turn if (this.currentPlayer=== this.players[0]) { this.currentPlayer = this.players[1]; } else { From ec6356571c327d5bf4b0f112e14fbda6cf03520a Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Wed, 14 Dec 2016 14:17:13 -0800 Subject: [PATCH 19/55] finished logic for running tictactoe --- src/player.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/player.js b/src/player.js index 33d336a..d06084e 100644 --- a/src/player.js +++ b/src/player.js @@ -1,6 +1,4 @@ -// var Player = function(){}; var Player = function(num) { - // console.log("this is a num:" + num); this.marker = num; }; From 4ab3a06bf34274bbee7bd26cfbef41ed71782d7b Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Fri, 16 Dec 2016 14:33:08 -0800 Subject: [PATCH 20/55] created file stubs --- src/app.js | 0 src/app/models/application.js | 0 src/app/models/board.js | 0 src/app/views/application_view.js | 0 src/app/views/board_view.js | 0 src/app/views/space_view.js | 0 6 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/app.js create mode 100644 src/app/models/application.js 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/space_view.js diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app/models/application.js b/src/app/models/application.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app/models/board.js b/src/app/models/board.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app/views/space_view.js b/src/app/views/space_view.js new file mode 100644 index 0000000..e69de29 From bd639328842a1c730964bf0784468ddce5971c29 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Fri, 16 Dec 2016 14:45:08 -0800 Subject: [PATCH 21/55] working on html --- build/css/app.css | 0 build/css/foundation.css | 4226 ++++++++++++++++++++++++++++++++++++++ build/index.html | 48 +- 3 files changed, 4273 insertions(+), 1 deletion(-) create mode 100644 build/css/app.css create mode 100644 build/css/foundation.css diff --git a/build/css/app.css b/build/css/app.css new file mode 100644 index 0000000..e69de29 diff --git a/build/css/foundation.css b/build/css/foundation.css new file mode 100644 index 0000000..c59eaf5 --- /dev/null +++ b/build/css/foundation.css @@ -0,0 +1,4226 @@ +@charset "UTF-8"; +/** + * Foundation for Sites by ZURB + * Version 6.2.4 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: not-allowed; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + box-sizing: content-box; + /* 2 */ } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + * [NOTE] We don't enable this ruleset in Foundation, because we want the
element to have plain styling. + */ +/* fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; + } */ +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +.foundation-mq { + font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; } + +html { + font-size: 100%; + box-sizing: border-box; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +body { + padding: 0; + margin: 0; + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: normal; + line-height: 1.5; + color: #0a0a0a; + background: #fefefe; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +img { + max-width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; + display: inline-block; + vertical-align: middle; } + +textarea { + height: auto; + min-height: 50px; + border-radius: 0; } + +select { + width: 100%; + border-radius: 0; } + +#map_canvas img, +#map_canvas embed, +#map_canvas object, +.map_canvas img, +.map_canvas embed, +.map_canvas object, +.mqa-display img, +.mqa-display embed, +.mqa-display object { + max-width: none !important; } + +button { + -webkit-appearance: none; + -moz-appearance: none; + background: transparent; + padding: 0; + border: 0; + border-radius: 0; + line-height: 1; } + [data-whatinput='mouse'] button { + outline: 0; } + +.is-visible { + display: block !important; } + +.is-hidden { + display: none !important; } + +.row { + max-width: 75rem; + margin-left: auto; + margin-right: auto; } + .row::before, .row::after { + content: ' '; + display: table; } + .row::after { + clear: both; } + .row.collapse > .column, .row.collapse > .columns { + padding-left: 0; + padding-right: 0; } + .row .row { + margin-left: -0.625rem; + margin-right: -0.625rem; } + @media screen and (min-width: 40em) { + .row .row { + margin-left: -0.9375rem; + margin-right: -0.9375rem; } } + .row .row.collapse { + margin-left: 0; + margin-right: 0; } + .row.expanded { + max-width: none; } + .row.expanded .row { + margin-left: auto; + margin-right: auto; } + +.column, .columns { + width: 100%; + float: left; + padding-left: 0.625rem; + padding-right: 0.625rem; } + @media screen and (min-width: 40em) { + .column, .columns { + padding-left: 0.9375rem; + padding-right: 0.9375rem; } } + .column:last-child:not(:first-child), .columns:last-child:not(:first-child) { + float: right; } + .column.end:last-child:last-child, .end.columns:last-child:last-child { + float: left; } + +.column.row.row, .row.row.columns { + float: none; } + +.row .column.row.row, .row .row.row.columns { + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; } + +.small-1 { + width: 8.33333%; } + +.small-push-1 { + position: relative; + left: 8.33333%; } + +.small-pull-1 { + position: relative; + left: -8.33333%; } + +.small-offset-0 { + margin-left: 0%; } + +.small-2 { + width: 16.66667%; } + +.small-push-2 { + position: relative; + left: 16.66667%; } + +.small-pull-2 { + position: relative; + left: -16.66667%; } + +.small-offset-1 { + margin-left: 8.33333%; } + +.small-3 { + width: 25%; } + +.small-push-3 { + position: relative; + left: 25%; } + +.small-pull-3 { + position: relative; + left: -25%; } + +.small-offset-2 { + margin-left: 16.66667%; } + +.small-4 { + width: 33.33333%; } + +.small-push-4 { + position: relative; + left: 33.33333%; } + +.small-pull-4 { + position: relative; + left: -33.33333%; } + +.small-offset-3 { + margin-left: 25%; } + +.small-5 { + width: 41.66667%; } + +.small-push-5 { + position: relative; + left: 41.66667%; } + +.small-pull-5 { + position: relative; + left: -41.66667%; } + +.small-offset-4 { + margin-left: 33.33333%; } + +.small-6 { + width: 50%; } + +.small-push-6 { + position: relative; + left: 50%; } + +.small-pull-6 { + position: relative; + left: -50%; } + +.small-offset-5 { + margin-left: 41.66667%; } + +.small-7 { + width: 58.33333%; } + +.small-push-7 { + position: relative; + left: 58.33333%; } + +.small-pull-7 { + position: relative; + left: -58.33333%; } + +.small-offset-6 { + margin-left: 50%; } + +.small-8 { + width: 66.66667%; } + +.small-push-8 { + position: relative; + left: 66.66667%; } + +.small-pull-8 { + position: relative; + left: -66.66667%; } + +.small-offset-7 { + margin-left: 58.33333%; } + +.small-9 { + width: 75%; } + +.small-push-9 { + position: relative; + left: 75%; } + +.small-pull-9 { + position: relative; + left: -75%; } + +.small-offset-8 { + margin-left: 66.66667%; } + +.small-10 { + width: 83.33333%; } + +.small-push-10 { + position: relative; + left: 83.33333%; } + +.small-pull-10 { + position: relative; + left: -83.33333%; } + +.small-offset-9 { + margin-left: 75%; } + +.small-11 { + width: 91.66667%; } + +.small-push-11 { + position: relative; + left: 91.66667%; } + +.small-pull-11 { + position: relative; + left: -91.66667%; } + +.small-offset-10 { + margin-left: 83.33333%; } + +.small-12 { + width: 100%; } + +.small-offset-11 { + margin-left: 91.66667%; } + +.small-up-1 > .column, .small-up-1 > .columns { + width: 100%; + float: left; } + .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) { + clear: both; } + .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child { + float: left; } + +.small-up-2 > .column, .small-up-2 > .columns { + width: 50%; + float: left; } + .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) { + clear: both; } + .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child { + float: left; } + +.small-up-3 > .column, .small-up-3 > .columns { + width: 33.33333%; + float: left; } + .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) { + clear: both; } + .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child { + float: left; } + +.small-up-4 > .column, .small-up-4 > .columns { + width: 25%; + float: left; } + .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) { + clear: both; } + .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child { + float: left; } + +.small-up-5 > .column, .small-up-5 > .columns { + width: 20%; + float: left; } + .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) { + clear: both; } + .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child { + float: left; } + +.small-up-6 > .column, .small-up-6 > .columns { + width: 16.66667%; + float: left; } + .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) { + clear: both; } + .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child { + float: left; } + +.small-up-7 > .column, .small-up-7 > .columns { + width: 14.28571%; + float: left; } + .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) { + clear: both; } + .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child { + float: left; } + +.small-up-8 > .column, .small-up-8 > .columns { + width: 12.5%; + float: left; } + .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) { + clear: none; } + .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) { + clear: both; } + .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child { + float: left; } + +.small-collapse > .column, .small-collapse > .columns { + padding-left: 0; + padding-right: 0; } + +.small-collapse .row { + margin-left: 0; + margin-right: 0; } + +.expanded.row .small-collapse.row { + margin-left: 0; + margin-right: 0; } + +.small-uncollapse > .column, .small-uncollapse > .columns { + padding-left: 0.625rem; + padding-right: 0.625rem; } + +.small-centered { + margin-left: auto; + margin-right: auto; } + .small-centered, .small-centered:last-child:not(:first-child) { + float: none; + clear: both; } + +.small-uncentered, +.small-push-0, +.small-pull-0 { + position: static; + margin-left: 0; + margin-right: 0; + float: left; } + +@media screen and (min-width: 40em) { + .medium-1 { + width: 8.33333%; } + .medium-push-1 { + position: relative; + left: 8.33333%; } + .medium-pull-1 { + position: relative; + left: -8.33333%; } + .medium-offset-0 { + margin-left: 0%; } + .medium-2 { + width: 16.66667%; } + .medium-push-2 { + position: relative; + left: 16.66667%; } + .medium-pull-2 { + position: relative; + left: -16.66667%; } + .medium-offset-1 { + margin-left: 8.33333%; } + .medium-3 { + width: 25%; } + .medium-push-3 { + position: relative; + left: 25%; } + .medium-pull-3 { + position: relative; + left: -25%; } + .medium-offset-2 { + margin-left: 16.66667%; } + .medium-4 { + width: 33.33333%; } + .medium-push-4 { + position: relative; + left: 33.33333%; } + .medium-pull-4 { + position: relative; + left: -33.33333%; } + .medium-offset-3 { + margin-left: 25%; } + .medium-5 { + width: 41.66667%; } + .medium-push-5 { + position: relative; + left: 41.66667%; } + .medium-pull-5 { + position: relative; + left: -41.66667%; } + .medium-offset-4 { + margin-left: 33.33333%; } + .medium-6 { + width: 50%; } + .medium-push-6 { + position: relative; + left: 50%; } + .medium-pull-6 { + position: relative; + left: -50%; } + .medium-offset-5 { + margin-left: 41.66667%; } + .medium-7 { + width: 58.33333%; } + .medium-push-7 { + position: relative; + left: 58.33333%; } + .medium-pull-7 { + position: relative; + left: -58.33333%; } + .medium-offset-6 { + margin-left: 50%; } + .medium-8 { + width: 66.66667%; } + .medium-push-8 { + position: relative; + left: 66.66667%; } + .medium-pull-8 { + position: relative; + left: -66.66667%; } + .medium-offset-7 { + margin-left: 58.33333%; } + .medium-9 { + width: 75%; } + .medium-push-9 { + position: relative; + left: 75%; } + .medium-pull-9 { + position: relative; + left: -75%; } + .medium-offset-8 { + margin-left: 66.66667%; } + .medium-10 { + width: 83.33333%; } + .medium-push-10 { + position: relative; + left: 83.33333%; } + .medium-pull-10 { + position: relative; + left: -83.33333%; } + .medium-offset-9 { + margin-left: 75%; } + .medium-11 { + width: 91.66667%; } + .medium-push-11 { + position: relative; + left: 91.66667%; } + .medium-pull-11 { + position: relative; + left: -91.66667%; } + .medium-offset-10 { + margin-left: 83.33333%; } + .medium-12 { + width: 100%; } + .medium-offset-11 { + margin-left: 91.66667%; } + .medium-up-1 > .column, .medium-up-1 > .columns { + width: 100%; + float: left; } + .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) { + clear: both; } + .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child { + float: left; } + .medium-up-2 > .column, .medium-up-2 > .columns { + width: 50%; + float: left; } + .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) { + clear: both; } + .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child { + float: left; } + .medium-up-3 > .column, .medium-up-3 > .columns { + width: 33.33333%; + float: left; } + .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) { + clear: both; } + .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child { + float: left; } + .medium-up-4 > .column, .medium-up-4 > .columns { + width: 25%; + float: left; } + .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) { + clear: both; } + .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child { + float: left; } + .medium-up-5 > .column, .medium-up-5 > .columns { + width: 20%; + float: left; } + .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) { + clear: both; } + .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child { + float: left; } + .medium-up-6 > .column, .medium-up-6 > .columns { + width: 16.66667%; + float: left; } + .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) { + clear: both; } + .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child { + float: left; } + .medium-up-7 > .column, .medium-up-7 > .columns { + width: 14.28571%; + float: left; } + .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) { + clear: both; } + .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child { + float: left; } + .medium-up-8 > .column, .medium-up-8 > .columns { + width: 12.5%; + float: left; } + .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) { + clear: none; } + .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) { + clear: both; } + .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child { + float: left; } + .medium-collapse > .column, .medium-collapse > .columns { + padding-left: 0; + padding-right: 0; } + .medium-collapse .row { + margin-left: 0; + margin-right: 0; } + .expanded.row .medium-collapse.row { + margin-left: 0; + margin-right: 0; } + .medium-uncollapse > .column, .medium-uncollapse > .columns { + padding-left: 0.9375rem; + padding-right: 0.9375rem; } + .medium-centered { + margin-left: auto; + margin-right: auto; } + .medium-centered, .medium-centered:last-child:not(:first-child) { + float: none; + clear: both; } + .medium-uncentered, + .medium-push-0, + .medium-pull-0 { + position: static; + margin-left: 0; + margin-right: 0; + float: left; } } + +@media screen and (min-width: 64em) { + .large-1 { + width: 8.33333%; } + .large-push-1 { + position: relative; + left: 8.33333%; } + .large-pull-1 { + position: relative; + left: -8.33333%; } + .large-offset-0 { + margin-left: 0%; } + .large-2 { + width: 16.66667%; } + .large-push-2 { + position: relative; + left: 16.66667%; } + .large-pull-2 { + position: relative; + left: -16.66667%; } + .large-offset-1 { + margin-left: 8.33333%; } + .large-3 { + width: 25%; } + .large-push-3 { + position: relative; + left: 25%; } + .large-pull-3 { + position: relative; + left: -25%; } + .large-offset-2 { + margin-left: 16.66667%; } + .large-4 { + width: 33.33333%; } + .large-push-4 { + position: relative; + left: 33.33333%; } + .large-pull-4 { + position: relative; + left: -33.33333%; } + .large-offset-3 { + margin-left: 25%; } + .large-5 { + width: 41.66667%; } + .large-push-5 { + position: relative; + left: 41.66667%; } + .large-pull-5 { + position: relative; + left: -41.66667%; } + .large-offset-4 { + margin-left: 33.33333%; } + .large-6 { + width: 50%; } + .large-push-6 { + position: relative; + left: 50%; } + .large-pull-6 { + position: relative; + left: -50%; } + .large-offset-5 { + margin-left: 41.66667%; } + .large-7 { + width: 58.33333%; } + .large-push-7 { + position: relative; + left: 58.33333%; } + .large-pull-7 { + position: relative; + left: -58.33333%; } + .large-offset-6 { + margin-left: 50%; } + .large-8 { + width: 66.66667%; } + .large-push-8 { + position: relative; + left: 66.66667%; } + .large-pull-8 { + position: relative; + left: -66.66667%; } + .large-offset-7 { + margin-left: 58.33333%; } + .large-9 { + width: 75%; } + .large-push-9 { + position: relative; + left: 75%; } + .large-pull-9 { + position: relative; + left: -75%; } + .large-offset-8 { + margin-left: 66.66667%; } + .large-10 { + width: 83.33333%; } + .large-push-10 { + position: relative; + left: 83.33333%; } + .large-pull-10 { + position: relative; + left: -83.33333%; } + .large-offset-9 { + margin-left: 75%; } + .large-11 { + width: 91.66667%; } + .large-push-11 { + position: relative; + left: 91.66667%; } + .large-pull-11 { + position: relative; + left: -91.66667%; } + .large-offset-10 { + margin-left: 83.33333%; } + .large-12 { + width: 100%; } + .large-offset-11 { + margin-left: 91.66667%; } + .large-up-1 > .column, .large-up-1 > .columns { + width: 100%; + float: left; } + .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) { + clear: both; } + .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child { + float: left; } + .large-up-2 > .column, .large-up-2 > .columns { + width: 50%; + float: left; } + .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) { + clear: both; } + .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child { + float: left; } + .large-up-3 > .column, .large-up-3 > .columns { + width: 33.33333%; + float: left; } + .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) { + clear: both; } + .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child { + float: left; } + .large-up-4 > .column, .large-up-4 > .columns { + width: 25%; + float: left; } + .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) { + clear: both; } + .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child { + float: left; } + .large-up-5 > .column, .large-up-5 > .columns { + width: 20%; + float: left; } + .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) { + clear: both; } + .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child { + float: left; } + .large-up-6 > .column, .large-up-6 > .columns { + width: 16.66667%; + float: left; } + .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) { + clear: both; } + .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child { + float: left; } + .large-up-7 > .column, .large-up-7 > .columns { + width: 14.28571%; + float: left; } + .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) { + clear: both; } + .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child { + float: left; } + .large-up-8 > .column, .large-up-8 > .columns { + width: 12.5%; + float: left; } + .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) { + clear: none; } + .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) { + clear: both; } + .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child { + float: left; } + .large-collapse > .column, .large-collapse > .columns { + padding-left: 0; + padding-right: 0; } + .large-collapse .row { + margin-left: 0; + margin-right: 0; } + .expanded.row .large-collapse.row { + margin-left: 0; + margin-right: 0; } + .large-uncollapse > .column, .large-uncollapse > .columns { + padding-left: 0.9375rem; + padding-right: 0.9375rem; } + .large-centered { + margin-left: auto; + margin-right: auto; } + .large-centered, .large-centered:last-child:not(:first-child) { + float: none; + clear: both; } + .large-uncentered, + .large-push-0, + .large-pull-0 { + position: static; + margin-left: 0; + margin-right: 0; + float: left; } } + +div, +dl, +dt, +dd, +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +form, +p, +blockquote, +th, +td { + margin: 0; + padding: 0; } + +p { + font-size: inherit; + line-height: 1.6; + margin-bottom: 1rem; + text-rendering: optimizeLegibility; } + +em, +i { + font-style: italic; + line-height: inherit; } + +strong, +b { + font-weight: bold; + line-height: inherit; } + +small { + font-size: 80%; + line-height: inherit; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: normal; + font-style: normal; + color: inherit; + text-rendering: optimizeLegibility; + margin-top: 0; + margin-bottom: 0.5rem; + line-height: 1.4; } + h1 small, + h2 small, + h3 small, + h4 small, + h5 small, + h6 small { + color: #cacaca; + line-height: 0; } + +h1 { + font-size: 1.5rem; } + +h2 { + font-size: 1.25rem; } + +h3 { + font-size: 1.1875rem; } + +h4 { + font-size: 1.125rem; } + +h5 { + font-size: 1.0625rem; } + +h6 { + font-size: 1rem; } + +@media screen and (min-width: 40em) { + h1 { + font-size: 3rem; } + h2 { + font-size: 2.5rem; } + h3 { + font-size: 1.9375rem; } + h4 { + font-size: 1.5625rem; } + h5 { + font-size: 1.25rem; } + h6 { + font-size: 1rem; } } + +a { + color: #2199e8; + text-decoration: none; + line-height: inherit; + cursor: pointer; } + a:hover, a:focus { + color: #1585cf; } + a img { + border: 0; } + +hr { + max-width: 75rem; + height: 0; + border-right: 0; + border-top: 0; + border-bottom: 1px solid #cacaca; + border-left: 0; + margin: 1.25rem auto; + clear: both; } + +ul, +ol, +dl { + line-height: 1.6; + margin-bottom: 1rem; + list-style-position: outside; } + +li { + font-size: inherit; } + +ul { + list-style-type: disc; + margin-left: 1.25rem; } + +ol { + margin-left: 1.25rem; } + +ul ul, ol ul, ul ol, ol ol { + margin-left: 1.25rem; + margin-bottom: 0; } + +dl { + margin-bottom: 1rem; } + dl dt { + margin-bottom: 0.3rem; + font-weight: bold; } + +blockquote { + margin: 0 0 1rem; + padding: 0.5625rem 1.25rem 0 1.1875rem; + border-left: 1px solid #cacaca; } + blockquote, blockquote p { + line-height: 1.6; + color: #8a8a8a; } + +cite { + display: block; + font-size: 0.8125rem; + color: #8a8a8a; } + cite:before { + content: '\2014 \0020'; } + +abbr { + color: #0a0a0a; + cursor: help; + border-bottom: 1px dotted #0a0a0a; } + +code { + font-family: Consolas, "Liberation Mono", Courier, monospace; + font-weight: normal; + color: #0a0a0a; + background-color: #e6e6e6; + border: 1px solid #cacaca; + padding: 0.125rem 0.3125rem 0.0625rem; } + +kbd { + padding: 0.125rem 0.25rem 0; + margin: 0; + background-color: #e6e6e6; + color: #0a0a0a; + font-family: Consolas, "Liberation Mono", Courier, monospace; } + +.subheader { + margin-top: 0.2rem; + margin-bottom: 0.5rem; + font-weight: normal; + line-height: 1.4; + color: #8a8a8a; } + +.lead { + font-size: 125%; + line-height: 1.6; } + +.stat { + font-size: 2.5rem; + line-height: 1; } + p + .stat { + margin-top: -1rem; } + +.no-bullet { + margin-left: 0; + list-style: none; } + +.text-left { + text-align: left; } + +.text-right { + text-align: right; } + +.text-center { + text-align: center; } + +.text-justify { + text-align: justify; } + +@media screen and (min-width: 40em) { + .medium-text-left { + text-align: left; } + .medium-text-right { + text-align: right; } + .medium-text-center { + text-align: center; } + .medium-text-justify { + text-align: justify; } } + +@media screen and (min-width: 64em) { + .large-text-left { + text-align: left; } + .large-text-right { + text-align: right; } + .large-text-center { + text-align: center; } + .large-text-justify { + text-align: justify; } } + +.show-for-print { + display: none !important; } + +@media print { + * { + background: transparent !important; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; } + .show-for-print { + display: block !important; } + .hide-for-print { + display: none !important; } + table.show-for-print { + display: table !important; } + thead.show-for-print { + display: table-header-group !important; } + tbody.show-for-print { + display: table-row-group !important; } + tr.show-for-print { + display: table-row !important; } + td.show-for-print { + display: table-cell !important; } + th.show-for-print { + display: table-cell !important; } + a, + a:visited { + text-decoration: underline; } + a[href]:after { + content: " (" attr(href) ")"; } + .ir a:after, + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; } + abbr[title]:after { + content: " (" attr(title) ")"; } + pre, + blockquote { + border: 1px solid #8a8a8a; + page-break-inside: avoid; } + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + @page { + margin: 0.5cm; } + p, + h2, + h3 { + orphans: 3; + widows: 3; } + h2, + h3 { + page-break-after: avoid; } } + +.button { + display: inline-block; + text-align: center; + line-height: 1; + cursor: pointer; + -webkit-appearance: none; + transition: background-color 0.25s ease-out, color 0.25s ease-out; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 0; + padding: 0.85em 1em; + margin: 0 0 1rem 0; + font-size: 0.9rem; + background-color: #2199e8; + color: #fefefe; } + [data-whatinput='mouse'] .button { + outline: 0; } + .button:hover, .button:focus { + background-color: #1583cc; + color: #fefefe; } + .button.tiny { + font-size: 0.6rem; } + .button.small { + font-size: 0.75rem; } + .button.large { + font-size: 1.25rem; } + .button.expanded { + display: block; + width: 100%; + margin-left: 0; + margin-right: 0; } + .button.primary { + background-color: #2199e8; + color: #fefefe; } + .button.primary:hover, .button.primary:focus { + background-color: #147cc0; + color: #fefefe; } + .button.secondary { + background-color: #777; + color: #fefefe; } + .button.secondary:hover, .button.secondary:focus { + background-color: #5f5f5f; + color: #fefefe; } + .button.success { + background-color: #3adb76; + color: #fefefe; } + .button.success:hover, .button.success:focus { + background-color: #22bb5b; + color: #fefefe; } + .button.warning { + background-color: #ffae00; + color: #fefefe; } + .button.warning:hover, .button.warning:focus { + background-color: #cc8b00; + color: #fefefe; } + .button.alert { + background-color: #ec5840; + color: #fefefe; } + .button.alert:hover, .button.alert:focus { + background-color: #da3116; + color: #fefefe; } + .button.hollow { + border: 1px solid #2199e8; + color: #2199e8; } + .button.hollow, .button.hollow:hover, .button.hollow:focus { + background-color: transparent; } + .button.hollow:hover, .button.hollow:focus { + border-color: #0c4d78; + color: #0c4d78; } + .button.hollow.primary { + border: 1px solid #2199e8; + color: #2199e8; } + .button.hollow.primary:hover, .button.hollow.primary:focus { + border-color: #0c4d78; + color: #0c4d78; } + .button.hollow.secondary { + border: 1px solid #777; + color: #777; } + .button.hollow.secondary:hover, .button.hollow.secondary:focus { + border-color: #3c3c3c; + color: #3c3c3c; } + .button.hollow.success { + border: 1px solid #3adb76; + color: #3adb76; } + .button.hollow.success:hover, .button.hollow.success:focus { + border-color: #157539; + color: #157539; } + .button.hollow.warning { + border: 1px solid #ffae00; + color: #ffae00; } + .button.hollow.warning:hover, .button.hollow.warning:focus { + border-color: #805700; + color: #805700; } + .button.hollow.alert { + border: 1px solid #ec5840; + color: #ec5840; } + .button.hollow.alert:hover, .button.hollow.alert:focus { + border-color: #881f0e; + color: #881f0e; } + .button.disabled, .button[disabled] { + opacity: 0.25; + cursor: not-allowed; } + .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { + background-color: #2199e8; + color: #fefefe; } + .button.disabled.primary, .button[disabled].primary { + opacity: 0.25; + cursor: not-allowed; } + .button.disabled.primary:hover, .button.disabled.primary:focus, .button[disabled].primary:hover, .button[disabled].primary:focus { + background-color: #2199e8; + color: #fefefe; } + .button.disabled.secondary, .button[disabled].secondary { + opacity: 0.25; + cursor: not-allowed; } + .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { + background-color: #777; + color: #fefefe; } + .button.disabled.success, .button[disabled].success { + opacity: 0.25; + cursor: not-allowed; } + .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { + background-color: #3adb76; + color: #fefefe; } + .button.disabled.warning, .button[disabled].warning { + opacity: 0.25; + cursor: not-allowed; } + .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus { + background-color: #ffae00; + color: #fefefe; } + .button.disabled.alert, .button[disabled].alert { + opacity: 0.25; + cursor: not-allowed; } + .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { + background-color: #ec5840; + color: #fefefe; } + .button.dropdown::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.4em; + border-color: #fefefe transparent transparent; + border-top-style: solid; + border-bottom-width: 0; + position: relative; + top: 0.4em; + float: right; + margin-left: 1em; + display: inline-block; } + .button.arrow-only::after { + margin-left: 0; + float: none; + top: -0.1em; } + +[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], +textarea { + display: block; + box-sizing: border-box; + width: 100%; + height: 2.4375rem; + padding: 0.5rem; + border: 1px solid #cacaca; + margin: 0 0 1rem; + font-family: inherit; + font-size: 1rem; + color: #0a0a0a; + background-color: #fefefe; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); + border-radius: 0; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; + -webkit-appearance: none; + -moz-appearance: none; } + [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, + textarea:focus { + border: 1px solid #8a8a8a; + background-color: #fefefe; + outline: none; + box-shadow: 0 0 5px #cacaca; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } + +textarea { + max-width: 100%; } + textarea[rows] { + height: auto; } + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #cacaca; } + +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #cacaca; } + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #cacaca; } + +input::placeholder, +textarea::placeholder { + color: #cacaca; } + +input:disabled, input[readonly], +textarea:disabled, +textarea[readonly] { + background-color: #e6e6e6; + cursor: not-allowed; } + +[type='submit'], +[type='button'] { + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; } + +input[type='search'] { + box-sizing: border-box; } + +[type='file'], +[type='checkbox'], +[type='radio'] { + margin: 0 0 1rem; } + +[type='checkbox'] + label, +[type='radio'] + label { + display: inline-block; + margin-left: 0.5rem; + margin-right: 1rem; + margin-bottom: 0; + vertical-align: baseline; } + [type='checkbox'] + label[for], + [type='radio'] + label[for] { + cursor: pointer; } + +label > [type='checkbox'], +label > [type='radio'] { + margin-right: 0.5rem; } + +[type='file'] { + width: 100%; } + +label { + display: block; + margin: 0; + font-size: 0.875rem; + font-weight: normal; + line-height: 1.8; + color: #0a0a0a; } + label.middle { + margin: 0 0 1rem; + padding: 0.5625rem 0; } + +.help-text { + margin-top: -0.5rem; + font-size: 0.8125rem; + font-style: italic; + color: #0a0a0a; } + +.input-group { + display: table; + width: 100%; + margin-bottom: 1rem; } + .input-group > :first-child { + border-radius: 0 0 0 0; } + .input-group > :last-child > * { + border-radius: 0 0 0 0; } + +.input-group-label, .input-group-field, .input-group-button { + margin: 0; + white-space: nowrap; + display: table-cell; + vertical-align: middle; } + +.input-group-label { + text-align: center; + padding: 0 1rem; + background: #e6e6e6; + color: #0a0a0a; + border: 1px solid #cacaca; + white-space: nowrap; + width: 1%; + height: 100%; } + .input-group-label:first-child { + border-right: 0; } + .input-group-label:last-child { + border-left: 0; } + +.input-group-field { + border-radius: 0; + height: 2.5rem; } + +.input-group-button { + padding-top: 0; + padding-bottom: 0; + text-align: center; + height: 100%; + width: 1%; } + .input-group-button a, + .input-group-button input, + .input-group-button button { + margin: 0; } + +.input-group .input-group-button { + display: table-cell; } + +fieldset { + border: 0; + padding: 0; + margin: 0; } + +legend { + margin-bottom: 0.5rem; + max-width: 100%; } + +.fieldset { + border: 1px solid #cacaca; + padding: 1.25rem; + margin: 1.125rem 0; } + .fieldset legend { + background: #fefefe; + padding: 0 0.1875rem; + margin: 0; + margin-left: -0.1875rem; } + +select { + height: 2.4375rem; + padding: 0.5rem; + border: 1px solid #cacaca; + margin: 0 0 1rem; + font-size: 1rem; + font-family: inherit; + line-height: normal; + color: #0a0a0a; + background-color: #fefefe; + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; + background-image: url("data:image/svg+xml;utf8,"); + background-size: 9px 6px; + background-position: right -1rem center; + background-origin: content-box; + background-repeat: no-repeat; + padding-right: 1.5rem; } + @media screen and (min-width: 0\0) { + select { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } + select:disabled { + background-color: #e6e6e6; + cursor: not-allowed; } + select::-ms-expand { + display: none; } + select[multiple] { + height: auto; + background-image: none; } + +.is-invalid-input:not(:focus) { + background-color: rgba(236, 88, 64, 0.1); + border-color: #ec5840; } + +.is-invalid-label { + color: #ec5840; } + +.form-error { + display: none; + margin-top: -0.5rem; + margin-bottom: 1rem; + font-size: 0.75rem; + font-weight: bold; + color: #ec5840; } + .form-error.is-visible { + display: block; } + +.accordion { + list-style-type: none; + background: #fefefe; + margin-left: 0; } + +.accordion-item:first-child > :first-child { + border-radius: 0 0 0 0; } + +.accordion-item:last-child > :last-child { + border-radius: 0 0 0 0; } + +.accordion-title { + display: block; + padding: 1.25rem 1rem; + line-height: 1; + font-size: 0.75rem; + color: #2199e8; + position: relative; + border: 1px solid #e6e6e6; + border-bottom: 0; } + :last-child:not(.is-active) > .accordion-title { + border-radius: 0 0 0 0; + border-bottom: 1px solid #e6e6e6; } + .accordion-title:hover, .accordion-title:focus { + background-color: #e6e6e6; } + .accordion-title::before { + content: '+'; + position: absolute; + right: 1rem; + top: 50%; + margin-top: -0.5rem; } + .is-active > .accordion-title::before { + content: '–'; } + +.accordion-content { + padding: 1rem; + display: none; + border: 1px solid #e6e6e6; + border-bottom: 0; + background-color: #fefefe; + color: #0a0a0a; } + :last-child > .accordion-content:last-child { + border-bottom: 1px solid #e6e6e6; } + +.is-accordion-submenu-parent > a { + position: relative; } + .is-accordion-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 6px; + border-color: #2199e8 transparent transparent; + border-top-style: solid; + border-bottom-width: 0; + position: absolute; + top: 50%; + margin-top: -4px; + right: 1rem; } + +.is-accordion-submenu-parent[aria-expanded='true'] > a::after { + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); } + +.badge { + display: inline-block; + padding: 0.3em; + min-width: 2.1em; + font-size: 0.6rem; + text-align: center; + border-radius: 50%; + background: #2199e8; + color: #fefefe; } + .badge.secondary { + background: #777; + color: #fefefe; } + .badge.success { + background: #3adb76; + color: #fefefe; } + .badge.warning { + background: #ffae00; + color: #fefefe; } + .badge.alert { + background: #ec5840; + color: #fefefe; } + +.breadcrumbs { + list-style: none; + margin: 0 0 1rem 0; } + .breadcrumbs::before, .breadcrumbs::after { + content: ' '; + display: table; } + .breadcrumbs::after { + clear: both; } + .breadcrumbs li { + float: left; + color: #0a0a0a; + font-size: 0.6875rem; + cursor: default; + text-transform: uppercase; } + .breadcrumbs li:not(:last-child)::after { + color: #cacaca; + content: "/"; + margin: 0 0.75rem; + position: relative; + top: 1px; + opacity: 1; } + .breadcrumbs a { + color: #2199e8; } + .breadcrumbs a:hover { + text-decoration: underline; } + .breadcrumbs .disabled { + color: #cacaca; + cursor: not-allowed; } + +.button-group { + margin-bottom: 1rem; + font-size: 0; } + .button-group::before, .button-group::after { + content: ' '; + display: table; } + .button-group::after { + clear: both; } + .button-group .button { + margin: 0; + margin-right: 1px; + margin-bottom: 1px; + font-size: 0.9rem; } + .button-group .button:last-child { + margin-right: 0; } + .button-group.tiny .button { + font-size: 0.6rem; } + .button-group.small .button { + font-size: 0.75rem; } + .button-group.large .button { + font-size: 1.25rem; } + .button-group.expanded { + margin-right: -1px; } + .button-group.expanded::before, .button-group.expanded::after { + display: none; } + .button-group.expanded .button:first-child:nth-last-child(2), .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2) ~ .button { + display: inline-block; + width: calc(50% - 1px); + margin-right: 1px; } + .button-group.expanded .button:first-child:nth-last-child(2):last-child, .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2) ~ .button:last-child { + margin-right: -6px; } + .button-group.expanded .button:first-child:nth-last-child(3), .button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3) ~ .button { + display: inline-block; + width: calc(33.33333% - 1px); + margin-right: 1px; } + .button-group.expanded .button:first-child:nth-last-child(3):last-child, .button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3) ~ .button:last-child { + margin-right: -6px; } + .button-group.expanded .button:first-child:nth-last-child(4), .button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4) ~ .button { + display: inline-block; + width: calc(25% - 1px); + margin-right: 1px; } + .button-group.expanded .button:first-child:nth-last-child(4):last-child, .button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4) ~ .button:last-child { + margin-right: -6px; } + .button-group.expanded .button:first-child:nth-last-child(5), .button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5) ~ .button { + display: inline-block; + width: calc(20% - 1px); + margin-right: 1px; } + .button-group.expanded .button:first-child:nth-last-child(5):last-child, .button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5) ~ .button:last-child { + margin-right: -6px; } + .button-group.expanded .button:first-child:nth-last-child(6), .button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6) ~ .button { + display: inline-block; + width: calc(16.66667% - 1px); + margin-right: 1px; } + .button-group.expanded .button:first-child:nth-last-child(6):last-child, .button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6) ~ .button:last-child { + margin-right: -6px; } + .button-group.primary .button { + background-color: #2199e8; + color: #fefefe; } + .button-group.primary .button:hover, .button-group.primary .button:focus { + background-color: #147cc0; + color: #fefefe; } + .button-group.secondary .button { + background-color: #777; + color: #fefefe; } + .button-group.secondary .button:hover, .button-group.secondary .button:focus { + background-color: #5f5f5f; + color: #fefefe; } + .button-group.success .button { + background-color: #3adb76; + color: #fefefe; } + .button-group.success .button:hover, .button-group.success .button:focus { + background-color: #22bb5b; + color: #fefefe; } + .button-group.warning .button { + background-color: #ffae00; + color: #fefefe; } + .button-group.warning .button:hover, .button-group.warning .button:focus { + background-color: #cc8b00; + color: #fefefe; } + .button-group.alert .button { + background-color: #ec5840; + color: #fefefe; } + .button-group.alert .button:hover, .button-group.alert .button:focus { + background-color: #da3116; + color: #fefefe; } + .button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button { + width: 100%; } + .button-group.stacked .button:last-child, .button-group.stacked-for-small .button:last-child, .button-group.stacked-for-medium .button:last-child { + margin-bottom: 0; } + @media screen and (min-width: 40em) { + .button-group.stacked-for-small .button { + width: auto; + margin-bottom: 0; } } + @media screen and (min-width: 64em) { + .button-group.stacked-for-medium .button { + width: auto; + margin-bottom: 0; } } + @media screen and (max-width: 39.9375em) { + .button-group.stacked-for-small.expanded { + display: block; } + .button-group.stacked-for-small.expanded .button { + display: block; + margin-right: 0; } } + +.callout { + margin: 0 0 1rem 0; + padding: 1rem; + border: 1px solid rgba(10, 10, 10, 0.25); + border-radius: 0; + position: relative; + color: #0a0a0a; + background-color: white; } + .callout > :first-child { + margin-top: 0; } + .callout > :last-child { + margin-bottom: 0; } + .callout.primary { + background-color: #def0fc; } + .callout.secondary { + background-color: #ebebeb; } + .callout.success { + background-color: #e1faea; } + .callout.warning { + background-color: #fff3d9; } + .callout.alert { + background-color: #fce6e2; } + .callout.small { + padding-top: 0.5rem; + padding-right: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.5rem; } + .callout.large { + padding-top: 3rem; + padding-right: 3rem; + padding-bottom: 3rem; + padding-left: 3rem; } + +.close-button { + position: absolute; + color: #8a8a8a; + right: 1rem; + top: 0.5rem; + font-size: 2em; + line-height: 1; + cursor: pointer; } + [data-whatinput='mouse'] .close-button { + outline: 0; } + .close-button:hover, .close-button:focus { + color: #0a0a0a; } + +.menu { + margin: 0; + list-style-type: none; } + .menu > li { + display: table-cell; + vertical-align: middle; } + [data-whatinput='mouse'] .menu > li { + outline: 0; } + .menu > li > a { + display: block; + padding: 0.7rem 1rem; + line-height: 1; } + .menu input, + .menu a, + .menu button { + margin-bottom: 0; } + .menu > li > a img, + .menu > li > a i, + .menu > li > a svg { + vertical-align: middle; } + .menu > li > a img + span, + .menu > li > a i + span, + .menu > li > a svg + span { + vertical-align: middle; } + .menu > li > a img, + .menu > li > a i, + .menu > li > a svg { + margin-right: 0.25rem; + display: inline-block; } + .menu > li { + display: table-cell; } + .menu.vertical > li { + display: block; } + @media screen and (min-width: 40em) { + .menu.medium-horizontal > li { + display: table-cell; } + .menu.medium-vertical > li { + display: block; } } + @media screen and (min-width: 64em) { + .menu.large-horizontal > li { + display: table-cell; } + .menu.large-vertical > li { + display: block; } } + .menu.simple li { + line-height: 1; + display: inline-block; + margin-right: 1rem; } + .menu.simple a { + padding: 0; } + .menu.align-right::before, .menu.align-right::after { + content: ' '; + display: table; } + .menu.align-right::after { + clear: both; } + .menu.align-right > li { + float: right; } + .menu.expanded { + width: 100%; + display: table; + table-layout: fixed; } + .menu.expanded > li:first-child:last-child { + width: 100%; } + .menu.icon-top > li > a { + text-align: center; } + .menu.icon-top > li > a img, + .menu.icon-top > li > a i, + .menu.icon-top > li > a svg { + display: block; + margin: 0 auto 0.25rem; } + .menu.nested { + margin-left: 1rem; } + .menu .active > a { + color: #fefefe; + background: #2199e8; } + +.menu-text { + font-weight: bold; + color: inherit; + line-height: 1; + padding-top: 0; + padding-bottom: 0; + padding: 0.7rem 1rem; } + +.menu-centered { + text-align: center; } + .menu-centered > .menu { + display: inline-block; } + +.no-js [data-responsive-menu] ul { + display: none; } + +.menu-icon { + position: relative; + display: inline-block; + vertical-align: middle; + cursor: pointer; + width: 20px; + height: 16px; } + .menu-icon::after { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 2px; + background: #fefefe; + top: 0; + left: 0; + box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; } + .menu-icon:hover::after { + background: #cacaca; + box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } + +.menu-icon.dark { + position: relative; + display: inline-block; + vertical-align: middle; + cursor: pointer; + width: 20px; + height: 16px; } + .menu-icon.dark::after { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 2px; + background: #0a0a0a; + top: 0; + left: 0; + box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; } + .menu-icon.dark:hover::after { + background: #8a8a8a; + box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; } + +.is-drilldown { + position: relative; + overflow: hidden; } + .is-drilldown li { + display: block !important; } + +.is-drilldown-submenu { + position: absolute; + top: 0; + left: 100%; + z-index: -1; + width: 100%; + background: #fefefe; + transition: -webkit-transform 0.15s linear; + transition: transform 0.15s linear; } + .is-drilldown-submenu.is-active { + z-index: 1; + display: block; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } + .is-drilldown-submenu.is-closing { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.is-drilldown-submenu-parent > a { + position: relative; } + .is-drilldown-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 6px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; + border-right-width: 0; + position: absolute; + top: 50%; + margin-top: -6px; + right: 1rem; } + +.js-drilldown-back > a::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 6px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + border-left-width: 0; + border-left-width: 0; + display: inline-block; + vertical-align: middle; + margin-right: 0.75rem; } + +.dropdown-pane { + background-color: #fefefe; + border: 1px solid #cacaca; + border-radius: 0; + display: block; + font-size: 1rem; + padding: 1rem; + position: absolute; + visibility: hidden; + width: 300px; + z-index: 10; } + .dropdown-pane.is-open { + visibility: visible; } + +.dropdown-pane.tiny { + width: 100px; } + +.dropdown-pane.small { + width: 200px; } + +.dropdown-pane.large { + width: 400px; } + +.dropdown.menu > li.opens-left > .is-dropdown-submenu { + left: auto; + right: 0; + top: 100%; } + +.dropdown.menu > li.opens-right > .is-dropdown-submenu { + right: auto; + left: 0; + top: 100%; } + +.dropdown.menu > li.is-dropdown-submenu-parent > a { + padding-right: 1.5rem; + position: relative; } + +.dropdown.menu > li.is-dropdown-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: #2199e8 transparent transparent; + border-top-style: solid; + border-bottom-width: 0; + right: 5px; + margin-top: -2px; } + +[data-whatinput='mouse'] .dropdown.menu a { + outline: 0; } + +.no-js .dropdown.menu ul { + display: none; } + +.dropdown.menu.vertical > li .is-dropdown-submenu { + top: 0; } + +.dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu { + left: auto; + right: 100%; } + +.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu { + right: auto; + left: 100%; } + +.dropdown.menu.vertical > li > a::after { + right: 14px; + margin-top: -3px; } + +.dropdown.menu.vertical > li.opens-left > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + border-left-width: 0; } + +.dropdown.menu.vertical > li.opens-right > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; + border-right-width: 0; } + +@media screen and (min-width: 40em) { + .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu { + left: auto; + right: 0; + top: 100%; } + .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu { + right: auto; + left: 0; + top: 100%; } + .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a { + padding-right: 1.5rem; + position: relative; } + .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: #2199e8 transparent transparent; + border-top-style: solid; + border-bottom-width: 0; + right: 5px; + margin-top: -2px; } + .dropdown.menu.medium-vertical > li .is-dropdown-submenu { + top: 0; } + .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu { + left: auto; + right: 100%; } + .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu { + right: auto; + left: 100%; } + .dropdown.menu.medium-vertical > li > a::after { + right: 14px; + margin-top: -3px; } + .dropdown.menu.medium-vertical > li.opens-left > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + border-left-width: 0; } + .dropdown.menu.medium-vertical > li.opens-right > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; + border-right-width: 0; } } + +@media screen and (min-width: 64em) { + .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu { + left: auto; + right: 0; + top: 100%; } + .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu { + right: auto; + left: 0; + top: 100%; } + .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a { + padding-right: 1.5rem; + position: relative; } + .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: #2199e8 transparent transparent; + border-top-style: solid; + border-bottom-width: 0; + right: 5px; + margin-top: -2px; } + .dropdown.menu.large-vertical > li .is-dropdown-submenu { + top: 0; } + .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu { + left: auto; + right: 100%; } + .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu { + right: auto; + left: 100%; } + .dropdown.menu.large-vertical > li > a::after { + right: 14px; + margin-top: -3px; } + .dropdown.menu.large-vertical > li.opens-left > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + border-left-width: 0; } + .dropdown.menu.large-vertical > li.opens-right > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; + border-right-width: 0; } } + +.dropdown.menu.align-right .is-dropdown-submenu.first-sub { + top: 100%; + left: auto; + right: 0; } + +.is-dropdown-menu.vertical { + width: 100px; } + .is-dropdown-menu.vertical.align-right { + float: right; } + +.is-dropdown-submenu-parent { + position: relative; } + .is-dropdown-submenu-parent a::after { + position: absolute; + top: 50%; + right: 5px; + margin-top: -2px; } + .is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu { + top: 100%; + left: auto; } + .is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu { + left: auto; + right: 100%; } + .is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu { + right: auto; + left: 100%; } + +.is-dropdown-submenu { + display: none; + position: absolute; + top: 0; + left: 100%; + min-width: 200px; + z-index: 1; + background: #fefefe; + border: 1px solid #cacaca; } + .is-dropdown-submenu .is-dropdown-submenu-parent > a::after { + right: 14px; + margin-top: -3px; } + .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + border-left-width: 0; } + .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; + border-right-width: 0; } + .is-dropdown-submenu .is-dropdown-submenu { + margin-top: -1px; } + .is-dropdown-submenu > li { + width: 100%; } + .is-dropdown-submenu.js-dropdown-active { + display: block; } + +.flex-video { + position: relative; + height: 0; + padding-bottom: 75%; + margin-bottom: 1rem; + overflow: hidden; } + .flex-video iframe, + .flex-video object, + .flex-video embed, + .flex-video video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + .flex-video.widescreen { + padding-bottom: 56.25%; } + .flex-video.vimeo { + padding-top: 0; } + +.label { + display: inline-block; + padding: 0.33333rem 0.5rem; + font-size: 0.8rem; + line-height: 1; + white-space: nowrap; + cursor: default; + border-radius: 0; + background: #2199e8; + color: #fefefe; } + .label.secondary { + background: #777; + color: #fefefe; } + .label.success { + background: #3adb76; + color: #fefefe; } + .label.warning { + background: #ffae00; + color: #fefefe; } + .label.alert { + background: #ec5840; + color: #fefefe; } + +.media-object { + margin-bottom: 1rem; + display: block; } + .media-object img { + max-width: none; } + @media screen and (max-width: 39.9375em) { + .media-object.stack-for-small .media-object-section { + padding: 0; + padding-bottom: 1rem; + display: block; } + .media-object.stack-for-small .media-object-section img { + width: 100%; } } + +.media-object-section { + display: table-cell; + vertical-align: top; } + .media-object-section:first-child { + padding-right: 1rem; } + .media-object-section:last-child:not(:nth-child(2)) { + padding-left: 1rem; } + .media-object-section > :last-child { + margin-bottom: 0; } + .media-object-section.middle { + vertical-align: middle; } + .media-object-section.bottom { + vertical-align: bottom; } + +html, +body { + height: 100%; } + +.off-canvas-wrapper { + width: 100%; + overflow-x: hidden; + position: relative; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-overflow-scrolling: auto; } + +.off-canvas-wrapper-inner { + position: relative; + width: 100%; + min-height: 100%; + transition: -webkit-transform 0.5s ease; + transition: transform 0.5s ease; } + .off-canvas-wrapper-inner::before, .off-canvas-wrapper-inner::after { + content: ' '; + display: table; } + .off-canvas-wrapper-inner::after { + clear: both; } + +.off-canvas-content, +.off-canvas-content { + min-height: 100%; + background: #fefefe; + transition: -webkit-transform 0.5s ease; + transition: transform 0.5s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + z-index: 1; + padding-bottom: 0.1px; + box-shadow: 0 0 10px rgba(10, 10, 10, 0.5); } + +.js-off-canvas-exit { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(254, 254, 254, 0.25); + cursor: pointer; + transition: background 0.5s ease; } + +.off-canvas { + position: absolute; + background: #e6e6e6; + z-index: -1; + max-height: 100%; + overflow-y: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + [data-whatinput='mouse'] .off-canvas { + outline: 0; } + .off-canvas.position-left { + left: -250px; + top: 0; + width: 250px; } + .is-open-left { + -webkit-transform: translateX(250px); + -ms-transform: translateX(250px); + transform: translateX(250px); } + .off-canvas.position-right { + right: -250px; + top: 0; + width: 250px; } + .is-open-right { + -webkit-transform: translateX(-250px); + -ms-transform: translateX(-250px); + transform: translateX(-250px); } + +@media screen and (min-width: 40em) { + .position-left.reveal-for-medium { + left: 0; + z-index: auto; + position: fixed; } + .position-left.reveal-for-medium ~ .off-canvas-content { + margin-left: 250px; } + .position-right.reveal-for-medium { + right: 0; + z-index: auto; + position: fixed; } + .position-right.reveal-for-medium ~ .off-canvas-content { + margin-right: 250px; } } + +@media screen and (min-width: 64em) { + .position-left.reveal-for-large { + left: 0; + z-index: auto; + position: fixed; } + .position-left.reveal-for-large ~ .off-canvas-content { + margin-left: 250px; } + .position-right.reveal-for-large { + right: 0; + z-index: auto; + position: fixed; } + .position-right.reveal-for-large ~ .off-canvas-content { + margin-right: 250px; } } + +.orbit { + position: relative; } + +.orbit-container { + position: relative; + margin: 0; + overflow: hidden; + list-style: none; } + +.orbit-slide { + width: 100%; + max-height: 100%; } + .orbit-slide.no-motionui.is-active { + top: 0; + left: 0; } + +.orbit-figure { + margin: 0; } + +.orbit-image { + margin: 0; + width: 100%; + max-width: 100%; } + +.orbit-caption { + position: absolute; + bottom: 0; + width: 100%; + padding: 1rem; + margin-bottom: 0; + color: #fefefe; + background-color: rgba(10, 10, 10, 0.5); } + +.orbit-previous, .orbit-next { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 10; + padding: 1rem; + color: #fefefe; } + [data-whatinput='mouse'] .orbit-previous, [data-whatinput='mouse'] .orbit-next { + outline: 0; } + .orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus { + background-color: rgba(10, 10, 10, 0.5); } + +.orbit-previous { + left: 0; } + +.orbit-next { + left: auto; + right: 0; } + +.orbit-bullets { + position: relative; + margin-top: 0.8rem; + margin-bottom: 0.8rem; + text-align: center; } + [data-whatinput='mouse'] .orbit-bullets { + outline: 0; } + .orbit-bullets button { + width: 1.2rem; + height: 1.2rem; + margin: 0.1rem; + background-color: #cacaca; + border-radius: 50%; } + .orbit-bullets button:hover { + background-color: #8a8a8a; } + .orbit-bullets button.is-active { + background-color: #8a8a8a; } + +.pagination { + margin-left: 0; + margin-bottom: 1rem; } + .pagination::before, .pagination::after { + content: ' '; + display: table; } + .pagination::after { + clear: both; } + .pagination li { + font-size: 0.875rem; + margin-right: 0.0625rem; + border-radius: 0; + display: none; } + .pagination li:last-child, .pagination li:first-child { + display: inline-block; } + @media screen and (min-width: 40em) { + .pagination li { + display: inline-block; } } + .pagination a, + .pagination button { + color: #0a0a0a; + display: block; + padding: 0.1875rem 0.625rem; + border-radius: 0; } + .pagination a:hover, + .pagination button:hover { + background: #e6e6e6; } + .pagination .current { + padding: 0.1875rem 0.625rem; + background: #2199e8; + color: #fefefe; + cursor: default; } + .pagination .disabled { + padding: 0.1875rem 0.625rem; + color: #cacaca; + cursor: not-allowed; } + .pagination .disabled:hover { + background: transparent; } + .pagination .ellipsis::after { + content: '\2026'; + padding: 0.1875rem 0.625rem; + color: #0a0a0a; } + +.pagination-previous a::before, +.pagination-previous.disabled::before { + content: '\00ab'; + display: inline-block; + margin-right: 0.5rem; } + +.pagination-next a::after, +.pagination-next.disabled::after { + content: '\00bb'; + display: inline-block; + margin-left: 0.5rem; } + +.progress { + background-color: #cacaca; + height: 1rem; + margin-bottom: 1rem; + border-radius: 0; } + .progress.primary .progress-meter { + background-color: #2199e8; } + .progress.secondary .progress-meter { + background-color: #777; } + .progress.success .progress-meter { + background-color: #3adb76; } + .progress.warning .progress-meter { + background-color: #ffae00; } + .progress.alert .progress-meter { + background-color: #ec5840; } + +.progress-meter { + position: relative; + display: block; + width: 0%; + height: 100%; + background-color: #2199e8; } + +.progress-meter-text { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + position: absolute; + margin: 0; + font-size: 0.75rem; + font-weight: bold; + color: #fefefe; + white-space: nowrap; } + +body.is-reveal-open { + overflow: hidden; } + +html.is-reveal-open, +html.is-reveal-open body { + min-height: 100%; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.reveal-overlay { + display: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1005; + background-color: rgba(10, 10, 10, 0.45); + overflow-y: scroll; } + +.reveal { + display: none; + z-index: 1006; + padding: 1rem; + border: 1px solid #cacaca; + background-color: #fefefe; + border-radius: 0; + position: relative; + top: 100px; + margin-left: auto; + margin-right: auto; + overflow-y: auto; } + [data-whatinput='mouse'] .reveal { + outline: 0; } + @media screen and (min-width: 40em) { + .reveal { + min-height: 0; } } + .reveal .column, .reveal .columns, + .reveal .columns { + min-width: 0; } + .reveal > :last-child { + margin-bottom: 0; } + @media screen and (min-width: 40em) { + .reveal { + width: 600px; + max-width: 75rem; } } + @media screen and (min-width: 40em) { + .reveal .reveal { + left: auto; + right: auto; + margin: 0 auto; } } + .reveal.collapse { + padding: 0; } + @media screen and (min-width: 40em) { + .reveal.tiny { + width: 30%; + max-width: 75rem; } } + @media screen and (min-width: 40em) { + .reveal.small { + width: 50%; + max-width: 75rem; } } + @media screen and (min-width: 40em) { + .reveal.large { + width: 90%; + max-width: 75rem; } } + .reveal.full { + top: 0; + left: 0; + width: 100%; + height: 100%; + height: 100vh; + min-height: 100vh; + max-width: none; + margin-left: 0; + border: 0; + border-radius: 0; } + @media screen and (max-width: 39.9375em) { + .reveal { + top: 0; + left: 0; + width: 100%; + height: 100%; + height: 100vh; + min-height: 100vh; + max-width: none; + margin-left: 0; + border: 0; + border-radius: 0; } } + .reveal.without-overlay { + position: fixed; } + +.slider { + position: relative; + height: 0.5rem; + margin-top: 1.25rem; + margin-bottom: 2.25rem; + background-color: #e6e6e6; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: none; + touch-action: none; } + +.slider-fill { + position: absolute; + top: 0; + left: 0; + display: inline-block; + max-width: 100%; + height: 0.5rem; + background-color: #cacaca; + transition: all 0.2s ease-in-out; } + .slider-fill.is-dragging { + transition: all 0s linear; } + +.slider-handle { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + position: absolute; + left: 0; + z-index: 1; + display: inline-block; + width: 1.4rem; + height: 1.4rem; + background-color: #2199e8; + transition: all 0.2s ease-in-out; + -ms-touch-action: manipulation; + touch-action: manipulation; + border-radius: 0; } + [data-whatinput='mouse'] .slider-handle { + outline: 0; } + .slider-handle:hover { + background-color: #1583cc; } + .slider-handle.is-dragging { + transition: all 0s linear; } + +.slider.disabled, +.slider[disabled] { + opacity: 0.25; + cursor: not-allowed; } + +.slider.vertical { + display: inline-block; + width: 0.5rem; + height: 12.5rem; + margin: 0 1.25rem; + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); } + .slider.vertical .slider-fill { + top: 0; + width: 0.5rem; + max-height: 100%; } + .slider.vertical .slider-handle { + position: absolute; + top: 0; + left: 50%; + width: 1.4rem; + height: 1.4rem; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + +.sticky-container { + position: relative; } + +.sticky { + position: absolute; + z-index: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.sticky.is-stuck { + position: fixed; + z-index: 5; } + .sticky.is-stuck.is-at-top { + top: 0; } + .sticky.is-stuck.is-at-bottom { + bottom: 0; } + +.sticky.is-anchored { + position: absolute; + left: auto; + right: auto; } + .sticky.is-anchored.is-at-bottom { + bottom: 0; } + +.switch { + height: 2rem; + margin-bottom: 1rem; + outline: 0; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fefefe; + font-weight: bold; + font-size: 0.875rem; } + +.switch-input { + opacity: 0; + position: absolute; + margin-bottom: 0; } + +.switch-paddle { + background: #cacaca; + cursor: pointer; + display: block; + position: relative; + width: 4rem; + height: 2rem; + transition: all 0.25s ease-out; + border-radius: 0; + color: inherit; + font-weight: inherit; } + input + .switch-paddle { + margin: 0; } + .switch-paddle::after { + background: #fefefe; + content: ''; + display: block; + position: absolute; + height: 1.5rem; + left: 0.25rem; + top: 0.25rem; + width: 1.5rem; + transition: all 0.25s ease-out; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + border-radius: 0; } + input:checked ~ .switch-paddle { + background: #2199e8; } + input:checked ~ .switch-paddle::after { + left: 2.25rem; } + [data-whatinput='mouse'] input:focus ~ .switch-paddle { + outline: 0; } + +.switch-active, .switch-inactive { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.switch-active { + left: 8%; + display: none; } + input:checked + label > .switch-active { + display: block; } + +.switch-inactive { + right: 15%; } + input:checked + label > .switch-inactive { + display: none; } + +.switch.tiny { + height: 1.5rem; } + .switch.tiny .switch-paddle { + width: 3rem; + height: 1.5rem; + font-size: 0.625rem; } + .switch.tiny .switch-paddle::after { + width: 1rem; + height: 1rem; } + .switch.tiny input:checked ~ .switch-paddle::after { + left: 1.75rem; } + +.switch.small { + height: 1.75rem; } + .switch.small .switch-paddle { + width: 3.5rem; + height: 1.75rem; + font-size: 0.75rem; } + .switch.small .switch-paddle::after { + width: 1.25rem; + height: 1.25rem; } + .switch.small input:checked ~ .switch-paddle::after { + left: 2rem; } + +.switch.large { + height: 2.5rem; } + .switch.large .switch-paddle { + width: 5rem; + height: 2.5rem; + font-size: 1rem; } + .switch.large .switch-paddle::after { + width: 2rem; + height: 2rem; } + .switch.large input:checked ~ .switch-paddle::after { + left: 2.75rem; } + +table { + width: 100%; + margin-bottom: 1rem; + border-radius: 0; } + table thead, + table tbody, + table tfoot { + border: 1px solid #f1f1f1; + background-color: #fefefe; } + table caption { + font-weight: bold; + padding: 0.5rem 0.625rem 0.625rem; } + table thead { + background: #f8f8f8; + color: #0a0a0a; } + table tfoot { + background: #f1f1f1; + color: #0a0a0a; } + table thead tr, + table tfoot tr { + background: transparent; } + table thead th, + table thead td, + table tfoot th, + table tfoot td { + padding: 0.5rem 0.625rem 0.625rem; + font-weight: bold; + text-align: left; } + table tbody tr:nth-child(even) { + background-color: #f1f1f1; } + table tbody th, + table tbody td { + padding: 0.5rem 0.625rem 0.625rem; } + +@media screen and (max-width: 63.9375em) { + table.stack thead { + display: none; } + table.stack tfoot { + display: none; } + table.stack tr, + table.stack th, + table.stack td { + display: block; } + table.stack td { + border-top: 0; } } + +table.scroll { + display: block; + width: 100%; + overflow-x: auto; } + +table.hover thead tr:hover { + background-color: #f3f3f3; } + +table.hover tfoot tr:hover { + background-color: #ececec; } + +table.hover tbody tr:hover { + background-color: #f9f9f9; } + +table.hover tbody tr:nth-of-type(even):hover { + background-color: #ececec; } + +.table-scroll { + overflow-x: auto; } + .table-scroll table { + width: auto; } + +.tabs { + margin: 0; + list-style-type: none; + background: #fefefe; + border: 1px solid #e6e6e6; } + .tabs::before, .tabs::after { + content: ' '; + display: table; } + .tabs::after { + clear: both; } + +.tabs.vertical > li { + width: auto; + float: none; + display: block; } + +.tabs.simple > li > a { + padding: 0; } + .tabs.simple > li > a:hover { + background: transparent; } + +.tabs.primary { + background: #2199e8; } + .tabs.primary > li > a { + color: #fefefe; } + .tabs.primary > li > a:hover, .tabs.primary > li > a:focus { + background: #1893e4; } + +.tabs-title { + float: left; } + .tabs-title > a { + display: block; + padding: 1.25rem 1.5rem; + line-height: 1; + font-size: 0.75rem; } + .tabs-title > a:hover { + background: #fefefe; } + .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] { + background: #e6e6e6; } + +.tabs-content { + background: #fefefe; + transition: all 0.5s ease; + border: 1px solid #e6e6e6; + border-top: 0; } + +.tabs-content.vertical { + border: 1px solid #e6e6e6; + border-left: 0; } + +.tabs-panel { + display: none; + padding: 1rem; } + .tabs-panel.is-active { + display: block; } + +.thumbnail { + border: solid 4px #fefefe; + box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); + display: inline-block; + line-height: 0; + max-width: 100%; + transition: box-shadow 200ms ease-out; + border-radius: 0; + margin-bottom: 1rem; } + .thumbnail:hover, .thumbnail:focus { + box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); } + +.title-bar { + background: #0a0a0a; + color: #fefefe; + padding: 0.5rem; } + .title-bar::before, .title-bar::after { + content: ' '; + display: table; } + .title-bar::after { + clear: both; } + .title-bar .menu-icon { + margin-left: 0.25rem; + margin-right: 0.25rem; } + +.title-bar-left { + float: left; } + +.title-bar-right { + float: right; + text-align: right; } + +.title-bar-title { + font-weight: bold; + vertical-align: middle; + display: inline-block; } + +.has-tip { + border-bottom: dotted 1px #8a8a8a; + font-weight: bold; + position: relative; + display: inline-block; + cursor: help; } + +.tooltip { + background-color: #0a0a0a; + color: #fefefe; + font-size: 80%; + padding: 0.75rem; + position: absolute; + z-index: 10; + top: calc(100% + 0.6495rem); + max-width: 10rem !important; + border-radius: 0; } + .tooltip::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: transparent transparent #0a0a0a; + border-bottom-style: solid; + border-top-width: 0; + bottom: 100%; + position: absolute; + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + .tooltip.top::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: #0a0a0a transparent transparent; + border-top-style: solid; + border-bottom-width: 0; + top: 100%; + bottom: auto; } + .tooltip.left::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: transparent transparent transparent #0a0a0a; + border-left-style: solid; + border-right-width: 0; + bottom: auto; + left: 100%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .tooltip.right::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: transparent #0a0a0a transparent transparent; + border-right-style: solid; + border-left-width: 0; + bottom: auto; + left: auto; + right: 100%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.top-bar { + padding: 0.5rem; } + .top-bar::before, .top-bar::after { + content: ' '; + display: table; } + .top-bar::after { + clear: both; } + .top-bar, + .top-bar ul { + background-color: #e6e6e6; } + .top-bar input { + max-width: 200px; + margin-right: 1rem; } + .top-bar .input-group-field { + width: 100%; + margin-right: 0; } + .top-bar input.button { + width: auto; } + .top-bar .top-bar-left, + .top-bar .top-bar-right { + width: 100%; } + @media screen and (min-width: 40em) { + .top-bar .top-bar-left, + .top-bar .top-bar-right { + width: auto; } } + @media screen and (max-width: 63.9375em) { + .top-bar.stacked-for-medium .top-bar-left, + .top-bar.stacked-for-medium .top-bar-right { + width: 100%; } } + @media screen and (max-width: 74.9375em) { + .top-bar.stacked-for-large .top-bar-left, + .top-bar.stacked-for-large .top-bar-right { + width: 100%; } } + +.top-bar-title { + float: left; + margin-right: 1rem; } + +.top-bar-left { + float: left; } + +.top-bar-right { + float: right; } + +.hide { + display: none !important; } + +.invisible { + visibility: hidden; } + +@media screen and (max-width: 39.9375em) { + .hide-for-small-only { + display: none !important; } } + +@media screen and (max-width: 0em), screen and (min-width: 40em) { + .show-for-small-only { + display: none !important; } } + +@media screen and (min-width: 40em) { + .hide-for-medium { + display: none !important; } } + +@media screen and (max-width: 39.9375em) { + .show-for-medium { + display: none !important; } } + +@media screen and (min-width: 40em) and (max-width: 63.9375em) { + .hide-for-medium-only { + display: none !important; } } + +@media screen and (max-width: 39.9375em), screen and (min-width: 64em) { + .show-for-medium-only { + display: none !important; } } + +@media screen and (min-width: 64em) { + .hide-for-large { + display: none !important; } } + +@media screen and (max-width: 63.9375em) { + .show-for-large { + display: none !important; } } + +@media screen and (min-width: 64em) and (max-width: 74.9375em) { + .hide-for-large-only { + display: none !important; } } + +@media screen and (max-width: 63.9375em), screen and (min-width: 75em) { + .show-for-large-only { + display: none !important; } } + +.show-for-sr, +.show-on-focus { + position: absolute !important; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); } + +.show-on-focus:active, .show-on-focus:focus { + position: static !important; + height: auto; + width: auto; + overflow: visible; + clip: auto; } + +.show-for-landscape, +.hide-for-portrait { + display: block !important; } + @media screen and (orientation: landscape) { + .show-for-landscape, + .hide-for-portrait { + display: block !important; } } + @media screen and (orientation: portrait) { + .show-for-landscape, + .hide-for-portrait { + display: none !important; } } + +.hide-for-landscape, +.show-for-portrait { + display: none !important; } + @media screen and (orientation: landscape) { + .hide-for-landscape, + .show-for-portrait { + display: none !important; } } + @media screen and (orientation: portrait) { + .hide-for-landscape, + .show-for-portrait { + display: block !important; } } + +.float-left { + float: left !important; } + +.float-right { + float: right !important; } + +.float-center { + display: block; + margin-left: auto; + margin-right: auto; } + +.clearfix::before, .clearfix::after { + content: ' '; + display: table; } + +.clearfix::after { + clear: both; } + +.slide-in-down.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-down.mui-enter.mui-enter-active { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + +.slide-in-left.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-left.mui-enter.mui-enter-active { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + +.slide-in-up.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-up.mui-enter.mui-enter-active { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + +.slide-in-right.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-right.mui-enter.mui-enter-active { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + +.slide-out-down.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-down.mui-leave.mui-leave-active { + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); } + +.slide-out-right.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-right.mui-leave.mui-leave-active { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.slide-out-up.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-up.mui-leave.mui-leave-active { + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); } + +.slide-out-left.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-left.mui-leave.mui-leave-active { + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } + +.fade-in.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + opacity: 0; + transition-property: opacity; } + +.fade-in.mui-enter.mui-enter-active { + opacity: 1; } + +.fade-out.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + opacity: 1; + transition-property: opacity; } + +.fade-out.mui-leave.mui-leave-active { + opacity: 0; } + +.hinge-in-from-top.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + -webkit-transform-origin: top; + -ms-transform-origin: top; + transform-origin: top; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-top.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-right.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + -webkit-transform-origin: right; + -ms-transform-origin: right; + transform-origin: right; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-right.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-bottom.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotateX(90deg); + transform: perspective(2000px) rotateX(90deg); + -webkit-transform-origin: bottom; + -ms-transform-origin: bottom; + transform-origin: bottom; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-bottom.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-left.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + -webkit-transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-left.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-middle-x.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-middle-x.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-middle-y.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-middle-y.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-out-from-top.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: top; + -ms-transform-origin: top; + transform-origin: top; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-top.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; } + +.hinge-out-from-right.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: right; + -ms-transform-origin: right; + transform-origin: right; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-right.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; } + +.hinge-out-from-bottom.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: bottom; + -ms-transform-origin: bottom; + transform-origin: bottom; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-bottom.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateX(90deg); + transform: perspective(2000px) rotateX(90deg); + opacity: 0; } + +.hinge-out-from-left.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-left.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; } + +.hinge-out-from-middle-x.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-middle-x.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; } + +.hinge-out-from-middle-y.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-middle-y.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; } + +.scale-in-up.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.scale-in-up.mui-enter.mui-enter-active { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; } + +.scale-in-down.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.scale-in-down.mui-enter.mui-enter-active { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; } + +.scale-out-up.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.scale-out-up.mui-leave.mui-leave-active { + -webkit-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); + opacity: 0; } + +.scale-out-down.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.scale-out-down.mui-leave.mui-leave-active { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + opacity: 0; } + +.spin-in.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: rotate(-0.75turn); + -ms-transform: rotate(-0.75turn); + transform: rotate(-0.75turn); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.spin-in.mui-enter.mui-enter-active { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; } + +.spin-out.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.spin-out.mui-leave.mui-leave-active { + -webkit-transform: rotate(0.75turn); + -ms-transform: rotate(0.75turn); + transform: rotate(0.75turn); + opacity: 0; } + +.spin-in-ccw.mui-enter { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: rotate(0.75turn); + -ms-transform: rotate(0.75turn); + transform: rotate(0.75turn); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.spin-in-ccw.mui-enter.mui-enter-active { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; } + +.spin-out-ccw.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.spin-out-ccw.mui-leave.mui-leave-active { + -webkit-transform: rotate(-0.75turn); + -ms-transform: rotate(-0.75turn); + transform: rotate(-0.75turn); + opacity: 0; } + +.slow { + transition-duration: 750ms !important; } + +.fast { + transition-duration: 250ms !important; } + +.linear { + transition-timing-function: linear !important; } + +.ease { + transition-timing-function: ease !important; } + +.ease-in { + transition-timing-function: ease-in !important; } + +.ease-out { + transition-timing-function: ease-out !important; } + +.ease-in-out { + transition-timing-function: ease-in-out !important; } + +.bounce-in { + transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } + +.bounce-out { + transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } + +.bounce-in-out { + transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } + +.short-delay { + transition-delay: 300ms !important; } + +.long-delay { + transition-delay: 700ms !important; } + +.shake { + -webkit-animation-name: shake-7; + animation-name: shake-7; } + +@-webkit-keyframes shake-7 { + 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { + -webkit-transform: translateX(7%); + transform: translateX(7%); } + 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { + -webkit-transform: translateX(-7%); + transform: translateX(-7%); } } + +@keyframes shake-7 { + 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { + -webkit-transform: translateX(7%); + transform: translateX(7%); } + 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { + -webkit-transform: translateX(-7%); + transform: translateX(-7%); } } + +.spin-cw { + -webkit-animation-name: spin-cw-1turn; + animation-name: spin-cw-1turn; } + +@-webkit-keyframes spin-cw-1turn { + 0% { + -webkit-transform: rotate(-1turn); + transform: rotate(-1turn); } + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +@keyframes spin-cw-1turn { + 0% { + -webkit-transform: rotate(-1turn); + transform: rotate(-1turn); } + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +.spin-ccw { + -webkit-animation-name: spin-cw-1turn; + animation-name: spin-cw-1turn; } + +@keyframes spin-cw-1turn { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); } + 100% { + -webkit-transform: rotate(1turn); + transform: rotate(1turn); } } + +.wiggle { + -webkit-animation-name: wiggle-7deg; + animation-name: wiggle-7deg; } + +@-webkit-keyframes wiggle-7deg { + 40%, 50%, 60% { + -webkit-transform: rotate(7deg); + transform: rotate(7deg); } + 35%, 45%, 55%, 65% { + -webkit-transform: rotate(-7deg); + transform: rotate(-7deg); } + 0%, 30%, 70%, 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +@keyframes wiggle-7deg { + 40%, 50%, 60% { + -webkit-transform: rotate(7deg); + transform: rotate(7deg); } + 35%, 45%, 55%, 65% { + -webkit-transform: rotate(-7deg); + transform: rotate(-7deg); } + 0%, 30%, 70%, 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +.shake, +.spin-cw, +.spin-ccw, +.wiggle { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; } + +.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + +.slow { + -webkit-animation-duration: 750ms !important; + animation-duration: 750ms !important; } + +.fast { + -webkit-animation-duration: 250ms !important; + animation-duration: 250ms !important; } + +.linear { + -webkit-animation-timing-function: linear !important; + animation-timing-function: linear !important; } + +.ease { + -webkit-animation-timing-function: ease !important; + animation-timing-function: ease !important; } + +.ease-in { + -webkit-animation-timing-function: ease-in !important; + animation-timing-function: ease-in !important; } + +.ease-out { + -webkit-animation-timing-function: ease-out !important; + animation-timing-function: ease-out !important; } + +.ease-in-out { + -webkit-animation-timing-function: ease-in-out !important; + animation-timing-function: ease-in-out !important; } + +.bounce-in { + -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; + animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } + +.bounce-out { + -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; + animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } + +.bounce-in-out { + -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; + animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } + +.short-delay { + -webkit-animation-delay: 300ms !important; + animation-delay: 300ms !important; } + +.long-delay { + -webkit-animation-delay: 700ms !important; + animation-delay: 700ms !important; } diff --git a/build/index.html b/build/index.html index 00eb541..64c142f 100644 --- a/build/index.html +++ b/build/index.html @@ -1,10 +1,56 @@ - Tic-Tac-Toe + Tic-Tac-Toed + + + +
+
+

Tic-Tac-To(a/e)d

+
+
+ + + +

Save

+

Cancel

+
+
+
+ +
+
    +
    +
    +
    + + + + + + + From e4dfe4b5f9978029a374f9c7ea433b0b1c00b413 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Fri, 16 Dec 2016 15:02:12 -0800 Subject: [PATCH 22/55] added more stuff to html, still working on structure --- build/index.html | 26 +++++--------------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/build/index.html b/build/index.html index 64c142f..1ee329d 100644 --- a/build/index.html +++ b/build/index.html @@ -11,30 +11,14 @@

    Tic-Tac-To(a/e)d

    -
    -
    - - - -

    Save

    -

    Cancel

    -
    +
    +
      +
      +
      -
      -
        -
        -
        +
        From 2e2f9269697e9ff0ac1ac4b8912fa477b562722e Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Fri, 16 Dec 2016 15:22:24 -0800 Subject: [PATCH 23/55] add table with spaces to fill with spaceviews --- build/index.html | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/build/index.html b/build/index.html index 1ee329d..1cb512d 100644 --- a/build/index.html +++ b/build/index.html @@ -12,7 +12,25 @@

        Tic-Tac-To(a/e)d

        -
          + + + + + + + + + + + + + + + + + + +
          a1a2a3
          b1b2b3
          c1c2c3
          @@ -22,18 +40,12 @@

          Tic-Tac-To(a/e)d

          - - - From 5dfe4a3980709fb0209ec83cfad236eae8836842 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Fri, 16 Dec 2016 15:26:02 -0800 Subject: [PATCH 24/55] add new game button --- build/index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/build/index.html b/build/index.html index 1cb512d..14fbd58 100644 --- a/build/index.html +++ b/build/index.html @@ -11,7 +11,8 @@

          Tic-Tac-To(a/e)d

          -
          +
          +
          @@ -32,9 +33,9 @@

          Tic-Tac-To(a/e)d

          a1
          + +

          Start New Game

          - -
          From c0441571a3ceb83afd93d0a5ea597cdd31917d43 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Fri, 16 Dec 2016 15:38:48 -0800 Subject: [PATCH 25/55] add foundation columns for player info --- build/index.html | 93 +++++++++++++++++++++++++----------------------- 1 file changed, 49 insertions(+), 44 deletions(-) diff --git a/build/index.html b/build/index.html index 14fbd58..b191544 100644 --- a/build/index.html +++ b/build/index.html @@ -1,53 +1,58 @@ - - Tic-Tac-Toed - - - - - - -
          -
          -

          Tic-Tac-To(a/e)d

          -
          -
          - - - - - - - - - - - - - - - - + + Tic-Tac-Toed + + + + + + +
          +
          +

          Tic-Tac-To(a/e)d

          +
          +
          +
          +

          PLAYERS

          +
          +
          +
          a1a2a3
          b1b2b3
          c1c2c3
          + + + + + + + + + + + + + + + - -
          a1a2a3
          b1b2b3
          c1c2c3
          -
          + + + -

          Start New Game

          -
          +

          Start New Game

          + + -
          + - - + + - - - + + + From 7f3c5dc7945edf3de4882e253af3060c0d60beb2 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Fri, 16 Dec 2016 15:49:12 -0800 Subject: [PATCH 26/55] view files set up --- src/app.js | 7 +++++++ src/app/views/application_view.js | 8 ++++++++ src/app/views/board_view.js | 9 +++++++++ src/app/views/space_view.js | 8 ++++++++ 4 files changed, 32 insertions(+) diff --git a/src/app.js b/src/app.js index e69de29..b03773a 100644 --- a/src/app.js +++ b/src/app.js @@ -0,0 +1,7 @@ +import Application from 'app/models/application'; +import ApplicationView from 'app/views/application_view'; + +var appView = new ApplicationView({ + el: '#application', + model: application +}); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index e69de29..ef20c8b 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Board from 'app/views/board'; + +var ApplicationView = Backbone.View.extend({ + +}); + +export default ApplicationView; diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index e69de29..7f804e1 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -0,0 +1,9 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; +import SpaceView from 'app/views/space_view'; + +var BoardView = Backbone.View.extend({ + +}); + +export default BoardView; diff --git a/src/app/views/space_view.js b/src/app/views/space_view.js index e69de29..e44c531 100644 --- a/src/app/views/space_view.js +++ b/src/app/views/space_view.js @@ -0,0 +1,8 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; + +var SpaceView = Backbone.View.extend({ + +}); + +export default SpaceView; From 200e6ffc8aecbd8b522cd6242fe4dbff356d929c Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Fri, 16 Dec 2016 15:57:47 -0800 Subject: [PATCH 27/55] comment imports/exports so that project compiles --- src/app/views/application_view.js | 6 +++--- src/app/views/board_view.js | 8 ++++---- src/app/views/space_view.js | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index ef20c8b..84d82a8 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,8 +1,8 @@ -import Backbone from 'backbone'; -import Board from 'app/views/board'; +// import Backbone from 'backbone'; +// import Board from 'app/views/board'; var ApplicationView = Backbone.View.extend({ }); -export default ApplicationView; +// export default ApplicationView; diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 7f804e1..72f19e0 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -1,9 +1,9 @@ -import _ from 'underscore'; -import Backbone from 'backbone'; -import SpaceView from 'app/views/space_view'; +// import _ from 'underscore'; +// import Backbone from 'backbone'; +// import SpaceView from 'app/views/space_view'; var BoardView = Backbone.View.extend({ }); -export default BoardView; +// export default BoardView; diff --git a/src/app/views/space_view.js b/src/app/views/space_view.js index e44c531..96a461b 100644 --- a/src/app/views/space_view.js +++ b/src/app/views/space_view.js @@ -1,8 +1,8 @@ -import _ from 'underscore'; -import Backbone from 'backbone'; +// import _ from 'underscore'; +// import Backbone from 'backbone'; var SpaceView = Backbone.View.extend({ }); -export default SpaceView; +// export default SpaceView; From c7a27c1b6244bcfdb7f16dc44471f2c83ad28b18 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 09:08:50 -0800 Subject: [PATCH 28/55] attempt at making board have events --- src/app/views/board_view.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 72f19e0..f46ff3a 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -3,7 +3,24 @@ // import SpaceView from 'app/views/space_view'; var BoardView = Backbone.View.extend({ + initialize: function() { + console.log("BoardView created"); + // this.template = _.template(Backbone.$('#tmpl-trip-card').html()); + }, + events: { + 'click': 'onClick' + }, + + onClick: function(e) { + console.log('on click'); + this.trigger('select', this); + + // We return false to tell jQuery not to run any more event handlers. + // Otherwise, it would run the 'click' event handler on RolodexView + // as well. + return false; + }, }); // export default BoardView; From 77e95835a4fef95a5c8b605eb2ef09cfc3b22733 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Mon, 19 Dec 2016 09:31:15 -0800 Subject: [PATCH 29/55] server starting successfully, working on rendering board and space views --- src/app/views/application_view.js | 10 ++++++---- src/app/views/board_view.js | 8 ++++---- src/app/views/space_view.js | 10 ++++++---- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 84d82a8..62229ce 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,8 +1,10 @@ -// import Backbone from 'backbone'; -// import Board from 'app/views/board'; +import Backbone from 'backbone'; +import Board from 'app/views/board_view'; var ApplicationView = Backbone.View.extend({ - + initialize: function(){ + console.log("ApplicationView created"); + }, }); -// export default ApplicationView; +export default ApplicationView; diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index f46ff3a..e852dcf 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -1,6 +1,6 @@ -// import _ from 'underscore'; -// import Backbone from 'backbone'; -// import SpaceView from 'app/views/space_view'; +import _ from 'underscore'; +import Backbone from 'backbone'; +import SpaceView from 'app/views/space_view'; var BoardView = Backbone.View.extend({ initialize: function() { @@ -23,4 +23,4 @@ var BoardView = Backbone.View.extend({ }, }); -// export default BoardView; +export default BoardView; diff --git a/src/app/views/space_view.js b/src/app/views/space_view.js index 96a461b..ec95b30 100644 --- a/src/app/views/space_view.js +++ b/src/app/views/space_view.js @@ -1,8 +1,10 @@ -// import _ from 'underscore'; -// import Backbone from 'backbone'; +import _ from 'underscore'; +import Backbone from 'backbone'; var SpaceView = Backbone.View.extend({ - + initialize: function(){ + console.log("SpaceView created"); + } }); -// export default SpaceView; +export default SpaceView; From 6d19803092883d01a9166af9fd1d3c3dd170b226 Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Mon, 19 Dec 2016 09:39:05 -0800 Subject: [PATCH 30/55] added render to initialize --- src/app/views/application_view.js | 13 +++++++++++++ src/app/views/board_view.js | 1 + src/app/views/space_view.js | 6 ++++++ 3 files changed, 20 insertions(+) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 62229ce..0c7e183 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -4,7 +4,20 @@ import Board from 'app/views/board_view'; var ApplicationView = Backbone.View.extend({ initialize: function(){ console.log("ApplicationView created"); + this.render(); + }, + + render: function(){ + console.log("rendering within appView"); + // var boardView = new BoardView({ + // // model: + // el: this.$('#board') + // }); + // boardView.render(); + // + // return this; + } }); export default ApplicationView; diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index e852dcf..12b5e46 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -6,6 +6,7 @@ var BoardView = Backbone.View.extend({ initialize: function() { console.log("BoardView created"); // this.template = _.template(Backbone.$('#tmpl-trip-card').html()); + this.render(); }, events: { diff --git a/src/app/views/space_view.js b/src/app/views/space_view.js index ec95b30..c964346 100644 --- a/src/app/views/space_view.js +++ b/src/app/views/space_view.js @@ -4,6 +4,12 @@ import Backbone from 'backbone'; var SpaceView = Backbone.View.extend({ initialize: function(){ console.log("SpaceView created"); + this.render(); + }, + + render: function(){ + console.log("inside space render"); + return this; } }); From ea755a8b2039e360a3548bc05fa245ae772f992f Mon Sep 17 00:00:00 2001 From: Dianne Laguerta Date: Mon, 19 Dec 2016 10:09:17 -0800 Subject: [PATCH 31/55] added click handling for each cell in our board table --- build/index.html | 18 +++++++++--------- src/app/models/application.js | 7 +++++++ src/app/views/application_view.js | 10 ++++++++++ 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/build/index.html b/build/index.html index b191544..ff3c2cd 100644 --- a/build/index.html +++ b/build/index.html @@ -19,19 +19,19 @@

          PLAYERS

          - - - + + + - - - + + + - - - + + + diff --git a/src/app/models/application.js b/src/app/models/application.js index e69de29..cc17e54 100644 --- a/src/app/models/application.js +++ b/src/app/models/application.js @@ -0,0 +1,7 @@ +// import Backbone from 'backbone'; +// +// +// +// +// +// export default Application; diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 0c7e183..3bc9d7d 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -8,6 +8,16 @@ var ApplicationView = Backbone.View.extend({ }, + events: { + 'click .table-cell': 'cellClick' + }, + + cellClick: function(e){ + console.log('clicked inside the board!'); + console.log(e.currentTarget.id); + + }, + render: function(){ console.log("rendering within appView"); // var boardView = new BoardView({ From b8d84bbcf109413d9d1db7c5be15f589a45b515d Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 10:19:46 -0800 Subject: [PATCH 32/55] board identifies cell that was clicked --- build/index.html | 18 +++++++++--------- src/app/views/application_view.js | 18 +++++------------- src/app/views/board_view.js | 10 +++++----- 3 files changed, 19 insertions(+), 27 deletions(-) diff --git a/build/index.html b/build/index.html index ff3c2cd..b191544 100644 --- a/build/index.html +++ b/build/index.html @@ -19,19 +19,19 @@

          PLAYERS

          a1a2a3a1a2a3
          b1b2b3b1b2b3
          c1c2c3c1c2c3
          - - - + + + - - - + + + - - - + + + diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 3bc9d7d..0dc0af6 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,21 +1,13 @@ import Backbone from 'backbone'; -import Board from 'app/views/board_view'; +import BoardView from 'app/views/board_view'; var ApplicationView = Backbone.View.extend({ initialize: function(){ console.log("ApplicationView created"); - this.render(); - - }, - - events: { - 'click .table-cell': 'cellClick' - }, - - cellClick: function(e){ - console.log('clicked inside the board!'); - console.log(e.currentTarget.id); - + // this.render(); + var boardView = new BoardView({ + el: this.$('#board') + }); }, render: function(){ diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 12b5e46..da94e76 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -6,16 +6,16 @@ var BoardView = Backbone.View.extend({ initialize: function() { console.log("BoardView created"); // this.template = _.template(Backbone.$('#tmpl-trip-card').html()); - this.render(); + // this.render(); }, events: { - 'click': 'onClick' + 'click td': 'cellClick' }, - onClick: function(e) { - console.log('on click'); - this.trigger('select', this); + cellClick: function(e) { + console.log(e.currentTarget.id); + // this.trigger('select', this); // We return false to tell jQuery not to run any more event handlers. // Otherwise, it would run the 'click' event handler on RolodexView From efebd7c3db65147dfd3c13d26631dcecf40d9e9e Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 10:42:52 -0800 Subject: [PATCH 33/55] WIP: CSS --- build/css/app.css | 228 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) diff --git a/build/css/app.css b/build/css/app.css index e69de29..fd3008e 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -0,0 +1,228 @@ +tr { + height: 8em; +} + +td { + background-color: #78bec5; + /*width: 10ems;*/ + margin: 10px; + /*height: 50px;*/ + width: 100em; + border: 1px solid black; +} + +td:hover { + background-color: #3d4250; +} + + +$size-sm: 90px; +$size: 140px; +$spacing: 5px; + +$player-1-icon: "\f00d"; +$player-2-icon: "\f10c"; + +$player-1-color: #dc685a; +$player-2-color: #ecaf4f; +$hover-color: #3d4250; + +/* Body and Notice styling +-------------------------------------------------------------- */ + +body { + color: #b6b5ca; + font-family: 'Arial', sans-serif; + margin: 0; + text-align: center; +} + +h5 { + font-weight: 400; + padding: 0 20px; +} + +/* Tic-tac-toe game +-------------------------------------------------------------- */ + +.tic-tac-toe { + font-family: 'Open Sans', sans-serif; + height: ($size-sm + $spacing*2)*3; + overflow: hidden; + margin: 50px auto 30px auto; + position: relative; + width: ($size-sm + $spacing*2)*3; + + @media(min-width: 450px) { + height: ($size + $spacing*2)*3; + width: ($size + $spacing*2)*3; + } + + input[type="radio"] { + // Hide radio buttons + display: none; + + // Put the label above the rest, when checked + &:checked + label { + cursor: default; + z-index: 10 !important; + } + + // Player 1 icon + &.player-1 + label:after { content: $player-1-icon; } + + // Player 2 icon + &.player-2 + label:after { content: $player-2-icon; } + + // Show icon when checked + &.player-1:checked + label:after, + &.player-2:checked + label:after { opacity: 1; } + + // Player 1 color + &.player-1:checked + label { background-color: $player-1-color; } + + // Player 2 color + &.player-2:checked + label { background-color: $player-2-color; } + + // Stack each turn on top of another + @for $i from 1 through 9 { + &.turn-#{$i} + label { + z-index: $i; + } + } + + // Display the first turn + &.turn-1 + label { display: block; } + + // Show next turn, once the current label has been :checked + @for $i from 1 through 8 { + &.turn-#{$i}:checked ~ .turn-#{$i+1} + label { display: block; } + } + + // Label positioning + &.left + label { left: 0; } + &.top + label { top: 0; } + + &.middle + label { left: ($size-sm + $spacing*2); } + &.right + label { left: ($size-sm + $spacing*2)*2; } + &.center + label { top: ($size-sm + $spacing*2); } + &.bottom + label { top: ($size-sm + $spacing*2)*2; } + + @media(min-width: 450px) { + &.middle + label { left: ($size + $spacing*2); } + &.right + label { left: ($size + $spacing*2)*2; } + &.center + label { top: ($size + $spacing*2); } + &.bottom + label { top: ($size + $spacing*2)*2; } + } + } + + // If all 9 turns have been played, show the end pop-up and set the text to "It is a tie!" + input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ + input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ + input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end { + display: block; + + > h3:before { content: "It is a tie!"; } + } + + // Check for all posibble victories, for both players individually + @for $i from 1 through 2 { + .player-#{$i}.first-column:checked ~ .player-#{$i}.first-column:checked ~ .player-#{$i}.first-column:checked ~ .end, + .player-#{$i}.second-column:checked ~ .player-#{$i}.second-column:checked ~ .player-#{$i}.second-column:checked ~ .end, + .player-#{$i}.third-column:checked ~ .player-#{$i}.third-column:checked ~ .player-#{$i}.third-column:checked ~ .end, + .player-#{$i}.first-row:checked ~ .player-#{$i}.first-row:checked ~ .player-#{$i}.first-row:checked ~ .end, + .player-#{$i}.second-row:checked ~ .player-#{$i}.second-row:checked ~ .player-#{$i}.second-row:checked ~ .end, + .player-#{$i}.third-row:checked ~ .player-#{$i}.third-row:checked ~ .player-#{$i}.third-row:checked ~ .end, + .player-#{$i}.first-diagonal:checked ~ .player-#{$i}.first-diagonal:checked ~ .player-#{$i}.first-diagonal:checked ~ .end, + .player-#{$i}.second-diagonal:checked ~ .player-#{$i}.second-diagonal:checked ~ .player-#{$i}.second-diagonal:checked ~ .end { + display: block; + + h3:before { content: "Player #{$i} wins!" !important; } + } + } + + // Label style + label { + background-color: #78bec5; + border-radius: 14px; + cursor: pointer; + color: #fff; + display: none; + height: $size-sm; + margin: $spacing; + position: absolute; + width: $size-sm; + @include transition(background-color .3s); + + @media(min-width: 450px) { + height: $size; + width: $size; + } + + // Label hover effect + &:hover { + background-color: $hover-color; + + &:after { opacity: .4; } + } + + // Icon style + &:after { + left: 0; + font-family: "FontAwesome"; + font-size: $size-sm*0.5; + margin-top: -($size-sm*0.5)/2; + opacity: 0; + position: absolute; + text-align: center; + text-shadow: 2px 2px 4px rgba(0, 0, 0, .2); + top: 50%; + width: 100%; + + @media(min-width: 450px) { + font-size: $size*0.5; + margin-top: -($size*0.5)/2; + } + } + } + + // End screen style + .end { + background: rgba(255, 255, 255, .8); + bottom: 5px; + color: #3d4250; + display: none; + left: 5px; + padding-top: 55px; + position: absolute; + right: 5px; + top: 5px; + text-align: center; + z-index: 11; + + @media(min-width: 450px) { + padding-top: 110px; + } + + h3 { + font-size: 30px; + font-weight: 300; + + @media(min-width: 450px) { font-size: 40px; } + } + + a { + background-color: #3d4250; + border-radius: 4px; + color: #fff; + padding: 14px 45px; + text-decoration: none; + @include transition(background-color .2s); + + &:hover { + background-color: #262934; + cursor: pointer; + } + } + } +} From 78a32ebe21dd831f7e89b4f4a250e448d48cda09 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 11:18:03 -0800 Subject: [PATCH 34/55] successful game board spacing --- build/css/app.css | 222 ++-------------------------------------------- build/index.html | 18 ++-- 2 files changed, 16 insertions(+), 224 deletions(-) diff --git a/build/css/app.css b/build/css/app.css index fd3008e..0aef854 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -1,228 +1,20 @@ +table { + border-collapse: separate; + border-spacing: 7px 7px; +} + tr { height: 8em; } td { + border-radius: 14px; + margin: 20px; background-color: #78bec5; - /*width: 10ems;*/ margin: 10px; - /*height: 50px;*/ width: 100em; - border: 1px solid black; } td:hover { background-color: #3d4250; } - - -$size-sm: 90px; -$size: 140px; -$spacing: 5px; - -$player-1-icon: "\f00d"; -$player-2-icon: "\f10c"; - -$player-1-color: #dc685a; -$player-2-color: #ecaf4f; -$hover-color: #3d4250; - -/* Body and Notice styling --------------------------------------------------------------- */ - -body { - color: #b6b5ca; - font-family: 'Arial', sans-serif; - margin: 0; - text-align: center; -} - -h5 { - font-weight: 400; - padding: 0 20px; -} - -/* Tic-tac-toe game --------------------------------------------------------------- */ - -.tic-tac-toe { - font-family: 'Open Sans', sans-serif; - height: ($size-sm + $spacing*2)*3; - overflow: hidden; - margin: 50px auto 30px auto; - position: relative; - width: ($size-sm + $spacing*2)*3; - - @media(min-width: 450px) { - height: ($size + $spacing*2)*3; - width: ($size + $spacing*2)*3; - } - - input[type="radio"] { - // Hide radio buttons - display: none; - - // Put the label above the rest, when checked - &:checked + label { - cursor: default; - z-index: 10 !important; - } - - // Player 1 icon - &.player-1 + label:after { content: $player-1-icon; } - - // Player 2 icon - &.player-2 + label:after { content: $player-2-icon; } - - // Show icon when checked - &.player-1:checked + label:after, - &.player-2:checked + label:after { opacity: 1; } - - // Player 1 color - &.player-1:checked + label { background-color: $player-1-color; } - - // Player 2 color - &.player-2:checked + label { background-color: $player-2-color; } - - // Stack each turn on top of another - @for $i from 1 through 9 { - &.turn-#{$i} + label { - z-index: $i; - } - } - - // Display the first turn - &.turn-1 + label { display: block; } - - // Show next turn, once the current label has been :checked - @for $i from 1 through 8 { - &.turn-#{$i}:checked ~ .turn-#{$i+1} + label { display: block; } - } - - // Label positioning - &.left + label { left: 0; } - &.top + label { top: 0; } - - &.middle + label { left: ($size-sm + $spacing*2); } - &.right + label { left: ($size-sm + $spacing*2)*2; } - &.center + label { top: ($size-sm + $spacing*2); } - &.bottom + label { top: ($size-sm + $spacing*2)*2; } - - @media(min-width: 450px) { - &.middle + label { left: ($size + $spacing*2); } - &.right + label { left: ($size + $spacing*2)*2; } - &.center + label { top: ($size + $spacing*2); } - &.bottom + label { top: ($size + $spacing*2)*2; } - } - } - - // If all 9 turns have been played, show the end pop-up and set the text to "It is a tie!" - input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ - input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ - input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end { - display: block; - - > h3:before { content: "It is a tie!"; } - } - - // Check for all posibble victories, for both players individually - @for $i from 1 through 2 { - .player-#{$i}.first-column:checked ~ .player-#{$i}.first-column:checked ~ .player-#{$i}.first-column:checked ~ .end, - .player-#{$i}.second-column:checked ~ .player-#{$i}.second-column:checked ~ .player-#{$i}.second-column:checked ~ .end, - .player-#{$i}.third-column:checked ~ .player-#{$i}.third-column:checked ~ .player-#{$i}.third-column:checked ~ .end, - .player-#{$i}.first-row:checked ~ .player-#{$i}.first-row:checked ~ .player-#{$i}.first-row:checked ~ .end, - .player-#{$i}.second-row:checked ~ .player-#{$i}.second-row:checked ~ .player-#{$i}.second-row:checked ~ .end, - .player-#{$i}.third-row:checked ~ .player-#{$i}.third-row:checked ~ .player-#{$i}.third-row:checked ~ .end, - .player-#{$i}.first-diagonal:checked ~ .player-#{$i}.first-diagonal:checked ~ .player-#{$i}.first-diagonal:checked ~ .end, - .player-#{$i}.second-diagonal:checked ~ .player-#{$i}.second-diagonal:checked ~ .player-#{$i}.second-diagonal:checked ~ .end { - display: block; - - h3:before { content: "Player #{$i} wins!" !important; } - } - } - - // Label style - label { - background-color: #78bec5; - border-radius: 14px; - cursor: pointer; - color: #fff; - display: none; - height: $size-sm; - margin: $spacing; - position: absolute; - width: $size-sm; - @include transition(background-color .3s); - - @media(min-width: 450px) { - height: $size; - width: $size; - } - - // Label hover effect - &:hover { - background-color: $hover-color; - - &:after { opacity: .4; } - } - - // Icon style - &:after { - left: 0; - font-family: "FontAwesome"; - font-size: $size-sm*0.5; - margin-top: -($size-sm*0.5)/2; - opacity: 0; - position: absolute; - text-align: center; - text-shadow: 2px 2px 4px rgba(0, 0, 0, .2); - top: 50%; - width: 100%; - - @media(min-width: 450px) { - font-size: $size*0.5; - margin-top: -($size*0.5)/2; - } - } - } - - // End screen style - .end { - background: rgba(255, 255, 255, .8); - bottom: 5px; - color: #3d4250; - display: none; - left: 5px; - padding-top: 55px; - position: absolute; - right: 5px; - top: 5px; - text-align: center; - z-index: 11; - - @media(min-width: 450px) { - padding-top: 110px; - } - - h3 { - font-size: 30px; - font-weight: 300; - - @media(min-width: 450px) { font-size: 40px; } - } - - a { - background-color: #3d4250; - border-radius: 4px; - color: #fff; - padding: 14px 45px; - text-decoration: none; - @include transition(background-color .2s); - - &:hover { - background-color: #262934; - cursor: pointer; - } - } - } -} diff --git a/build/index.html b/build/index.html index b191544..533afaa 100644 --- a/build/index.html +++ b/build/index.html @@ -19,19 +19,19 @@

          PLAYERS

          a1a2a3a1a2a3
          b1b2b3b1b2b3
          c1c2c3c1c2c3
          - - - + + + - - - + + + - - - + + + From 50eeab3149eb6848ad2edc3cd967fe6e602dd721 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 12:06:56 -0800 Subject: [PATCH 35/55] displays no hover after cell has been clicked --- build/css/app.css | 11 +++++++++++ src/app/views/board_view.js | 5 +++++ 2 files changed, 16 insertions(+) diff --git a/build/css/app.css b/build/css/app.css index 0aef854..4ab6688 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -18,3 +18,14 @@ td { td:hover { background-color: #3d4250; } + +.clicked { + background-color: rgb(173, 66, 92); +} +.clicked:hover { + background-color: rgb(173, 66, 92); +} + +.other_clicked { + background-color: rgb(42, 129, 198); +} diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index da94e76..04a7529 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -1,4 +1,5 @@ import _ from 'underscore'; +import $ from 'jquery'; import Backbone from 'backbone'; import SpaceView from 'app/views/space_view'; @@ -15,6 +16,10 @@ var BoardView = Backbone.View.extend({ cellClick: function(e) { console.log(e.currentTarget.id); + console.log(e.currentTarget); + + // Add class associated with player's number to determine marker color + $(e.currentTarget).addClass('clicked'); // this.trigger('select', this); // We return false to tell jQuery not to run any more event handlers. From 986755803836bac51f208d3b02726959becab4a5 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 14:52:07 -0800 Subject: [PATCH 36/55] Move model files and update import statements --- spec/board.spec.js | 2 +- spec/player.spec.js | 2 +- spec/tic_tac_toe.spec.js | 4 ++-- src/app/models/application.js | 7 ------- src/app/models/board.js | 13 +++++++++++++ src/{ => app/models}/player.js | 0 src/board.js | 13 ------------- src/tic_tac_toe.js | 4 ++-- 8 files changed, 19 insertions(+), 26 deletions(-) delete mode 100644 src/app/models/application.js rename src/{ => app/models}/player.js (100%) delete mode 100644 src/board.js diff --git a/spec/board.spec.js b/spec/board.spec.js index 2627e5b..cb954c0 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -1,4 +1,4 @@ -import Board from 'board'; +import Board from 'app/models/board'; describe('Board', function() { var testBoard = new Board(); diff --git a/spec/player.spec.js b/spec/player.spec.js index 1c78d57..215372a 100644 --- a/spec/player.spec.js +++ b/spec/player.spec.js @@ -1,4 +1,4 @@ -import Player from 'player'; +import Player from 'app/models/player'; describe('Player', function() { var testPlayer = new Player(1); diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index 37445e9..b6d1791 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -1,6 +1,6 @@ import TicTacToe from 'tic_tac_toe'; -import Board from 'board'; -import Player from 'player'; +import Board from 'app/models/board'; +import Player from 'app/models/player'; describe('TicTacToe', function() { var testGame = new TicTacToe(); diff --git a/src/app/models/application.js b/src/app/models/application.js deleted file mode 100644 index cc17e54..0000000 --- a/src/app/models/application.js +++ /dev/null @@ -1,7 +0,0 @@ -// import Backbone from 'backbone'; -// -// -// -// -// -// export default Application; diff --git a/src/app/models/board.js b/src/app/models/board.js index e69de29..c75bd6a 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -0,0 +1,13 @@ +var Board = function() { + this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; +}; + +Board.prototype.emptySpace = function(row, column) { + if (this.playingField[row][column] === 0) { + return true; + } else { + return false; + } +}; + +export default Board; diff --git a/src/player.js b/src/app/models/player.js similarity index 100% rename from src/player.js rename to src/app/models/player.js diff --git a/src/board.js b/src/board.js deleted file mode 100644 index c75bd6a..0000000 --- a/src/board.js +++ /dev/null @@ -1,13 +0,0 @@ -var Board = function() { - this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; -}; - -Board.prototype.emptySpace = function(row, column) { - if (this.playingField[row][column] === 0) { - return true; - } else { - return false; - } -}; - -export default Board; diff --git a/src/tic_tac_toe.js b/src/tic_tac_toe.js index ac93d1b..c3ef05a 100644 --- a/src/tic_tac_toe.js +++ b/src/tic_tac_toe.js @@ -1,5 +1,5 @@ -import Board from 'board'; -import Player from 'player'; +import Board from 'app/models/board'; +import Player from 'app/models/player'; var TicTacToe = function(){ this.MAX_TURNS = 9; From 8ccae0e431747a0dc6bdd4b413f98c25e572c558 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 14:54:44 -0800 Subject: [PATCH 37/55] Move tic tac toe model to game in models folder and update import statement --- spec/tic_tac_toe.spec.js | 2 +- src/{tic_tac_toe.js => app/models/game.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{tic_tac_toe.js => app/models/game.js} (100%) diff --git a/spec/tic_tac_toe.spec.js b/spec/tic_tac_toe.spec.js index b6d1791..7785419 100644 --- a/spec/tic_tac_toe.spec.js +++ b/spec/tic_tac_toe.spec.js @@ -1,4 +1,4 @@ -import TicTacToe from 'tic_tac_toe'; +import TicTacToe from 'app/models/game'; import Board from 'app/models/board'; import Player from 'app/models/player'; diff --git a/src/tic_tac_toe.js b/src/app/models/game.js similarity index 100% rename from src/tic_tac_toe.js rename to src/app/models/game.js From 5af368c2f5692720dd52820996ced7b2a29b4026 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 15:04:10 -0800 Subject: [PATCH 38/55] Convert board to Backbone model --- src/app/models/board.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/app/models/board.js b/src/app/models/board.js index c75bd6a..9bad937 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -1,13 +1,17 @@ -var Board = function() { - this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; -}; +import Backbone from 'backbone'; -Board.prototype.emptySpace = function(row, column) { - if (this.playingField[row][column] === 0) { - return true; - } else { - return false; +const Board = Backbone.Model.extend({ + initialize: function() { + this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; + }, + + emptySpace: function(row, column) { + if (this.playingField[row][column] === 0) { + return true; + } else { + return false; + } } -}; +}); export default Board; From b8b848aa6baf4918a674d1a8bcaf82a91ef47598 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 15:05:34 -0800 Subject: [PATCH 39/55] Convert player to Backbone model --- src/app/models/player.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/models/player.js b/src/app/models/player.js index d06084e..bb239fe 100644 --- a/src/app/models/player.js +++ b/src/app/models/player.js @@ -1,6 +1,10 @@ -var Player = function(num) { - this.marker = num; -}; +import Backbone from 'backbone'; + +const Player = Backbone.Model.extend({ + initialize: function(num) { + this.marker = num; + } +}); export default Player; From 801c2b788300405c1a9a045fc7e57b13eecfa216 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 15:21:27 -0800 Subject: [PATCH 40/55] change player initializer to take in options --- spec/player.spec.js | 4 +++- src/app/models/game.js | 2 +- src/app/models/player.js | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/spec/player.spec.js b/spec/player.spec.js index 215372a..b1a7e93 100644 --- a/spec/player.spec.js +++ b/spec/player.spec.js @@ -1,7 +1,9 @@ import Player from 'app/models/player'; describe('Player', function() { - var testPlayer = new Player(1); + var testPlayer = new Player({ + num: 1 + }); // console.log(Object.getOwnPropertyNames(testPlayer)); describe('player', function() { it('should have a marker', function() { diff --git a/src/app/models/game.js b/src/app/models/game.js index c3ef05a..aae2ce8 100644 --- a/src/app/models/game.js +++ b/src/app/models/game.js @@ -5,7 +5,7 @@ var TicTacToe = function(){ this.MAX_TURNS = 9; this.totalTurns = 0; this.board = new Board(); - this.players = [new Player(1), new Player(5)]; + this.players = [new Player({num: 1}), new Player({num: 5})]; this.currentPlayer = this.players[0]; this.turnCount = 0; }; diff --git a/src/app/models/player.js b/src/app/models/player.js index bb239fe..715bf3d 100644 --- a/src/app/models/player.js +++ b/src/app/models/player.js @@ -1,8 +1,8 @@ import Backbone from 'backbone'; const Player = Backbone.Model.extend({ - initialize: function(num) { - this.marker = num; + initialize: function(options) { + this.marker = options['num']; } }); From 64dc58a543b8734c0c4840cca8509dc2df215fba Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 15:25:58 -0800 Subject: [PATCH 41/55] Change game to Backbone model --- spec/{tic_tac_toe.spec.js => game.spec.js} | 0 src/app/models/game.js | 131 +++++++++++---------- 2 files changed, 66 insertions(+), 65 deletions(-) rename spec/{tic_tac_toe.spec.js => game.spec.js} (100%) diff --git a/spec/tic_tac_toe.spec.js b/spec/game.spec.js similarity index 100% rename from spec/tic_tac_toe.spec.js rename to spec/game.spec.js diff --git a/src/app/models/game.js b/src/app/models/game.js index aae2ce8..ed7a6a8 100644 --- a/src/app/models/game.js +++ b/src/app/models/game.js @@ -1,82 +1,83 @@ +import Backbone from 'backbone'; import Board from 'app/models/board'; import Player from 'app/models/player'; -var TicTacToe = function(){ - this.MAX_TURNS = 9; - this.totalTurns = 0; - this.board = new Board(); - this.players = [new Player({num: 1}), new Player({num: 5})]; - this.currentPlayer = this.players[0]; - this.turnCount = 0; -}; - -TicTacToe.prototype.placeMarker = function(row, column, player) { - this.board.playingField[row][column] = player.marker; -}; - -TicTacToe.prototype.checkWin = function() { - var leftDiagonalSum = 0; - var rightDiagonalSum = 0; - - for (var i = 0; i< 3; i++) { - var rowSum = 0; - var columnSum = 0; - - for (var x = 0; x < 3; x++){ - rowSum += this.board.playingField[i][x]; - columnSum += this.board.playingField[x][i]; - } - - leftDiagonalSum += this.board.playingField[i][i]; - rightDiagonalSum += this.board.playingField[i][2-i]; +const TicTacToe = Backbone.Model.extend({ - if (rowSum === 3 || columnSum === 3|| leftDiagonalSum === 3 || rightDiagonalSum === 3) { - return this.players[0]; - } else if (rowSum === 15 || columnSum === 15 || leftDiagonalSum === 15 || rightDiagonalSum === 15) { - return this.players[1]; + initialize: function(){ + this.MAX_TURNS = 9; + this.totalTurns = 0; + this.board = new Board(); + this.players = [new Player({num: 1}), new Player({num: 5})]; + this.currentPlayer = this.players[0]; + this.turnCount = 0; + }, + + placeMarker: function(row, column, player) { + this.board.playingField[row][column] = player.marker; + }, + + checkWin: function() { + var leftDiagonalSum = 0; + var rightDiagonalSum = 0; + + for (var i = 0; i< 3; i++) { + var rowSum = 0; + var columnSum = 0; + + for (var x = 0; x < 3; x++){ + rowSum += this.board.playingField[i][x]; + columnSum += this.board.playingField[x][i]; + } + + leftDiagonalSum += this.board.playingField[i][i]; + rightDiagonalSum += this.board.playingField[i][2-i]; + + if (rowSum === 3 || columnSum === 3|| leftDiagonalSum === 3 || rightDiagonalSum === 3) { + return this.players[0]; + } else if (rowSum === 15 || columnSum === 15 || leftDiagonalSum === 15 || rightDiagonalSum === 15) { + return this.players[1]; + } } - } - return false; -}; - -TicTacToe.prototype.turn = -function(row, column) { - if (this.turnCount === 9 || this.checkWin() !== false) { - throw new Error('Game is over! Please clear your board for a new game.'); - } - - // if space is empty, placeMarker - // if not, throw error and start turn over - if (this.board.emptySpace(row, column) === true) { - this.placeMarker(row, column, this.currentPlayer); - } else { - throw new Error('Space is occupied. Pick an empty space.'); - } + return false; + }, + turn: function(row, column) { + if (this.turnCount === 9 || this.checkWin() !== false) { + throw new Error('Game is over! Please clear your board for a new game.'); + } + // if space is empty, placeMarker + // if not, throw error and start turn over + if (this.board.emptySpace(row, column) === true) { + this.placeMarker(row, column, this.currentPlayer); + } else { + throw new Error('Space is occupied. Pick an empty space.'); + } - this.turnCount += 1; + this.turnCount += 1; - // if turnCount >=5, check for winner - if (this.turnCount >= 5) { - if (this.checkWin() !== false) { - throw new Error("Player" + this.checkWin().marker + ' is the winner!'); - } - else if (this.turnCount === 9) { - throw new Error("It's a tie!"); + // if turnCount >=5, check for winner + if (this.turnCount >= 5) { + if (this.checkWin() !== false) { + throw new Error("Player" + this.checkWin().marker + ' is the winner!'); + } + else if (this.turnCount === 9) { + throw new Error("It's a tie!"); + } } - } - // if turnCount === 9, check for tie + // if turnCount === 9, check for tie - //this toggles the player at the end of the turn - if (this.currentPlayer=== this.players[0]) { - this.currentPlayer = this.players[1]; - } else { - this.currentPlayer = this.players[0]; + //this toggles the player at the end of the turn + if (this.currentPlayer=== this.players[0]) { + this.currentPlayer = this.players[1]; + } else { + this.currentPlayer = this.players[0]; + } } -}; +}); export default TicTacToe; From 331e05a0eeba1eee8b13f118e37006964a2720e2 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 15:27:33 -0800 Subject: [PATCH 42/55] Use dot notation in Player initializer --- src/app/models/player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/models/player.js b/src/app/models/player.js index 715bf3d..a625818 100644 --- a/src/app/models/player.js +++ b/src/app/models/player.js @@ -2,7 +2,7 @@ import Backbone from 'backbone'; const Player = Backbone.Model.extend({ initialize: function(options) { - this.marker = options['num']; + this.marker = options.num; } }); From 0583bf66fcd31e19a3aea15d946663a9652e5f81 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Mon, 19 Dec 2016 15:35:09 -0800 Subject: [PATCH 43/55] File name changes for consistency --- spec/{game.spec.js => application.spec.js} | 2 +- src/app/models/{game.js => application.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename spec/{game.spec.js => application.spec.js} (99%) rename src/app/models/{game.js => application.js} (100%) diff --git a/spec/game.spec.js b/spec/application.spec.js similarity index 99% rename from spec/game.spec.js rename to spec/application.spec.js index 7785419..32c18a2 100644 --- a/spec/game.spec.js +++ b/spec/application.spec.js @@ -1,4 +1,4 @@ -import TicTacToe from 'app/models/game'; +import TicTacToe from 'app/models/application'; import Board from 'app/models/board'; import Player from 'app/models/player'; diff --git a/src/app/models/game.js b/src/app/models/application.js similarity index 100% rename from src/app/models/game.js rename to src/app/models/application.js From 798816c7403e944e66b3933f6736ad487c1945ee Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 20 Dec 2016 11:55:57 -0800 Subject: [PATCH 44/55] create game and board instances to be passed in as models --- src/app.js | 6 ++++-- src/app/views/application_view.js | 3 +++ src/app/views/board_view.js | 5 ++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/app.js b/src/app.js index b03773a..b235483 100644 --- a/src/app.js +++ b/src/app.js @@ -1,7 +1,9 @@ -import Application from 'app/models/application'; +import TicTacToe from 'app/models/application'; import ApplicationView from 'app/views/application_view'; +var game = new TicTacToe(); + var appView = new ApplicationView({ el: '#application', - model: application + model: game }); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 0dc0af6..aa09d01 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,11 +1,14 @@ import Backbone from 'backbone'; +import Board from 'app/models/board'; import BoardView from 'app/views/board_view'; var ApplicationView = Backbone.View.extend({ initialize: function(){ console.log("ApplicationView created"); // this.render(); + var board = new Board(); var boardView = new BoardView({ + model: board, el: this.$('#board') }); }, diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 04a7529..35f85ae 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -1,7 +1,8 @@ import _ from 'underscore'; import $ from 'jquery'; import Backbone from 'backbone'; -import SpaceView from 'app/views/space_view'; +import TicTacToe from 'app/models/application'; +import Board from 'app/models/board'; var BoardView = Backbone.View.extend({ initialize: function() { @@ -15,8 +16,10 @@ var BoardView = Backbone.View.extend({ }, cellClick: function(e) { + console.log(this.model.playingField); console.log(e.currentTarget.id); console.log(e.currentTarget); + console.log(); // Add class associated with player's number to determine marker color $(e.currentTarget).addClass('clicked'); From 7b54a05710037d66c02e7be26194dee34045435f Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 20 Dec 2016 12:18:54 -0800 Subject: [PATCH 45/55] Change table ids to match coordinates --- build/index.html | 18 +++++++++--------- src/app/views/application_view.js | 6 +++++- src/app/views/board_view.js | 12 ++++++++---- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/build/index.html b/build/index.html index 533afaa..55d9554 100644 --- a/build/index.html +++ b/build/index.html @@ -19,19 +19,19 @@

          PLAYERS

          a1a2a3
          b1b2b3
          c1c2c3
          - - - + + + - - - + + + - - - + + + diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index aa09d01..378e443 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -5,14 +5,18 @@ import BoardView from 'app/views/board_view'; var ApplicationView = Backbone.View.extend({ initialize: function(){ console.log("ApplicationView created"); - // this.render(); var board = new Board(); var boardView = new BoardView({ model: board, el: this.$('#board') }); + this.render(); }, + // turn: function(row, column){ + // this.model.turn(row, column); + // }, + render: function(){ console.log("rendering within appView"); // var boardView = new BoardView({ diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 35f85ae..cfa5cfc 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -16,10 +16,14 @@ var BoardView = Backbone.View.extend({ }, cellClick: function(e) { - console.log(this.model.playingField); - console.log(e.currentTarget.id); - console.log(e.currentTarget); - console.log(); + var row = parseInt(e.currentTarget.id[0]), + column = parseInt(e.currentTarget.id[2]); + // console.log(this.model.playingField); + // console.log(e.currentTarget.id); + // console.log(e.currentTarget); + // console.log('row ' + row); + // console.log('column ' + column); + // Add class associated with player's number to determine marker color $(e.currentTarget).addClass('clicked'); From d008c442c6959b9649e8e11afb8d848f647a7463 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 20 Dec 2016 12:25:20 -0800 Subject: [PATCH 46/55] Click handler passes coordinates to ApplicationView --- src/app/views/application_view.js | 5 +++++ src/app/views/board_view.js | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 378e443..ff4ea59 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -10,9 +10,14 @@ var ApplicationView = Backbone.View.extend({ model: board, el: this.$('#board') }); + this.listenTo(boardView, 'turn', this.takeTurn); this.render(); }, + takeTurn: function(coordinates){ + console.log(coordinates); + }, + // turn: function(row, column){ // this.model.turn(row, column); // }, diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index cfa5cfc..54945cb 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -12,7 +12,7 @@ var BoardView = Backbone.View.extend({ }, events: { - 'click td': 'cellClick' + 'click td': 'cellClick', }, cellClick: function(e) { @@ -24,6 +24,8 @@ var BoardView = Backbone.View.extend({ // console.log('row ' + row); // console.log('column ' + column); + this.trigger('turn', [row, column]); + // Add class associated with player's number to determine marker color $(e.currentTarget).addClass('clicked'); From c3607b32f75d03b0dddce1e14cec3e66d2559b88 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 20 Dec 2016 13:45:07 -0800 Subject: [PATCH 47/55] Turn is called with each click and winner/ties/occupied spaces are declared as errors --- src/app/views/application_view.js | 1 + src/app/views/board_view.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index ff4ea59..8a56ccf 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -16,6 +16,7 @@ var ApplicationView = Backbone.View.extend({ takeTurn: function(coordinates){ console.log(coordinates); + this.model.turn(coordinates[0], coordinates[1]); }, // turn: function(row, column){ diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 54945cb..bcd9aaa 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -24,11 +24,12 @@ var BoardView = Backbone.View.extend({ // console.log('row ' + row); // console.log('column ' + column); + // Add class associated with player's number to determine marker color + $(e.currentTarget).addClass('clicked'); + this.trigger('turn', [row, column]); - // Add class associated with player's number to determine marker color - $(e.currentTarget).addClass('clicked'); // this.trigger('select', this); // We return false to tell jQuery not to run any more event handlers. From 7a35c0c9b7c350e7de00a3d1abe04a45b5b7f7c1 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 20 Dec 2016 14:50:36 -0800 Subject: [PATCH 48/55] Square color changes with player. WIP: Last square chage color --- build/css/app.css | 10 ++++--- spec/application.spec.js | 2 +- src/app.js | 2 +- .../models/{application.js => tic_tac_toe.js} | 0 src/app/views/application_view.js | 14 +++++----- src/app/views/board_view.js | 26 +++++++++++++++---- 6 files changed, 37 insertions(+), 17 deletions(-) rename src/app/models/{application.js => tic_tac_toe.js} (100%) diff --git a/build/css/app.css b/build/css/app.css index 4ab6688..1819bcf 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -19,13 +19,17 @@ td:hover { background-color: #3d4250; } -.clicked { +.player-one { background-color: rgb(173, 66, 92); } -.clicked:hover { +.player-one:hover { background-color: rgb(173, 66, 92); } -.other_clicked { +.player-two { + background-color: rgb(42, 129, 198); +} + +.player-two:hover { background-color: rgb(42, 129, 198); } diff --git a/spec/application.spec.js b/spec/application.spec.js index 32c18a2..27f514f 100644 --- a/spec/application.spec.js +++ b/spec/application.spec.js @@ -1,4 +1,4 @@ -import TicTacToe from 'app/models/application'; +import TicTacToe from 'app/models/tic_tac_toe'; import Board from 'app/models/board'; import Player from 'app/models/player'; diff --git a/src/app.js b/src/app.js index b235483..04bf896 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,4 @@ -import TicTacToe from 'app/models/application'; +import TicTacToe from 'app/models/tic_tac_toe'; import ApplicationView from 'app/views/application_view'; var game = new TicTacToe(); diff --git a/src/app/models/application.js b/src/app/models/tic_tac_toe.js similarity index 100% rename from src/app/models/application.js rename to src/app/models/tic_tac_toe.js diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 8a56ccf..e34cfa6 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,14 +1,17 @@ import Backbone from 'backbone'; import Board from 'app/models/board'; import BoardView from 'app/views/board_view'; +import TicTacToe from 'app/models/tic_tac_toe'; var ApplicationView = Backbone.View.extend({ initialize: function(){ console.log("ApplicationView created"); - var board = new Board(); + // var board = new Board(); + // console.log(this.model.board); var boardView = new BoardView({ - model: board, - el: this.$('#board') + model: this.model.board, + el: this.$('#board'), + // application_view: this }); this.listenTo(boardView, 'turn', this.takeTurn); this.render(); @@ -16,13 +19,10 @@ var ApplicationView = Backbone.View.extend({ takeTurn: function(coordinates){ console.log(coordinates); + console.log(this.model.currentPlayer.get("num")); this.model.turn(coordinates[0], coordinates[1]); }, - // turn: function(row, column){ - // this.model.turn(row, column); - // }, - render: function(){ console.log("rendering within appView"); // var boardView = new BoardView({ diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index bcd9aaa..04ed3e2 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -1,12 +1,15 @@ import _ from 'underscore'; import $ from 'jquery'; import Backbone from 'backbone'; -import TicTacToe from 'app/models/application'; +import TicTacToe from 'app/models/tic_tac_toe'; import Board from 'app/models/board'; -var BoardView = Backbone.View.extend({ - initialize: function() { +const BoardView = Backbone.View.extend({ + initialize: function(options) { console.log("BoardView created"); + + // this.application_view = this.options.application_view; + // this.template = _.template(Backbone.$('#tmpl-trip-card').html()); // this.render(); }, @@ -25,10 +28,19 @@ var BoardView = Backbone.View.extend({ // console.log('column ' + column); // Add class associated with player's number to determine marker color - $(e.currentTarget).addClass('clicked'); - + // $(e.currentTarget).addClass('clicked'); + // console.log(TicTacToe.get(currentPlayer)); + this.trigger('turn', [row, column]); + if (this.model.playingField[row][column] === 1) { + $(e.currentTarget).addClass('player-one'); + } else if (this.model.playingField[row][column] === 5) { + $(e.currentTarget).addClass('player-two'); + } + + + this.render(); // this.trigger('select', this); @@ -37,6 +49,10 @@ var BoardView = Backbone.View.extend({ // as well. return false; }, + + render: function() { + return this; + } }); export default BoardView; From 31533b06e3ed9bb36fef0a4676f6022a243b3b1c Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Tue, 20 Dec 2016 16:00:41 -0800 Subject: [PATCH 49/55] Displays color of last square --- src/app/models/tic_tac_toe.js | 18 +++++++++--------- src/app/views/application_view.js | 21 +++++++++++++++++++++ src/app/views/board_view.js | 3 ++- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/app/models/tic_tac_toe.js b/src/app/models/tic_tac_toe.js index ed7a6a8..a201149 100644 --- a/src/app/models/tic_tac_toe.js +++ b/src/app/models/tic_tac_toe.js @@ -59,15 +59,15 @@ const TicTacToe = Backbone.Model.extend({ this.turnCount += 1; - // if turnCount >=5, check for winner - if (this.turnCount >= 5) { - if (this.checkWin() !== false) { - throw new Error("Player" + this.checkWin().marker + ' is the winner!'); - } - else if (this.turnCount === 9) { - throw new Error("It's a tie!"); - } - } + // // if turnCount >=5, check for winner + // if (this.turnCount >= 5) { + // if (this.checkWin() !== false) { + // throw new Error("Player" + this.checkWin().marker + ' is the winner!'); + // } + // else if (this.turnCount === 9) { + // throw new Error("It's a tie!"); + // } + // } // if turnCount === 9, check for tie diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index e34cfa6..75a0de4 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -14,15 +14,36 @@ var ApplicationView = Backbone.View.extend({ // application_view: this }); this.listenTo(boardView, 'turn', this.takeTurn); + this.listenTo(boardView, "checkwinner", this.checkWinner); this.render(); }, + events: { + 'click .btn-new-game': 'newGame' + }, + takeTurn: function(coordinates){ console.log(coordinates); console.log(this.model.currentPlayer.get("num")); this.model.turn(coordinates[0], coordinates[1]); }, + checkWinner: function(boardView) { + if (this.model.turnCount >= 5) { + this.model.checkWin(); + console.log(this.model.checkWin()); + } + }, + + newGame: function(){ + console.log('new game clicked'); + // var boardView = new BoardView({ + // model: this.model.board, + // el: this.$('#board') + // }); + // boardView.render(); + }, + render: function(){ console.log("rendering within appView"); // var boardView = new BoardView({ diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 04ed3e2..90ae037 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -11,7 +11,7 @@ const BoardView = Backbone.View.extend({ // this.application_view = this.options.application_view; // this.template = _.template(Backbone.$('#tmpl-trip-card').html()); - // this.render(); + this.render(); }, events: { @@ -39,6 +39,7 @@ const BoardView = Backbone.View.extend({ $(e.currentTarget).addClass('player-two'); } + this.trigger('checkwinner', [this.model]); this.render(); From b8f23d9b76fe1fdaea5a602160738554972f0dec Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Wed, 21 Dec 2016 10:57:28 -0800 Subject: [PATCH 50/55] New game feature functioning --- build/index.html | 2 ++ src/app/views/application_view.js | 31 ++++++++++++++----------------- src/app/views/board_view.js | 14 +++++--------- 3 files changed, 21 insertions(+), 26 deletions(-) diff --git a/build/index.html b/build/index.html index 55d9554..d12ad29 100644 --- a/build/index.html +++ b/build/index.html @@ -15,6 +15,8 @@

          Tic-Tac-To(a/e)d

          PLAYERS

          +

          Current player:

          +

          diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 75a0de4..3be6aeb 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,4 +1,5 @@ import Backbone from 'backbone'; +import $ from 'jquery'; import Board from 'app/models/board'; import BoardView from 'app/views/board_view'; import TicTacToe from 'app/models/tic_tac_toe'; @@ -8,13 +9,13 @@ var ApplicationView = Backbone.View.extend({ console.log("ApplicationView created"); // var board = new Board(); // console.log(this.model.board); - var boardView = new BoardView({ + this.boardView = new BoardView({ model: this.model.board, el: this.$('#board'), // application_view: this }); - this.listenTo(boardView, 'turn', this.takeTurn); - this.listenTo(boardView, "checkwinner", this.checkWinner); + this.listenTo(this.boardView, 'turn', this.takeTurn); + this.listenTo(this.boardView, "checkwinner", this.checkWinner); this.render(); }, @@ -23,36 +24,32 @@ var ApplicationView = Backbone.View.extend({ }, takeTurn: function(coordinates){ - console.log(coordinates); + // console.log(this.model.currentPlayer); + // console.log(coordinates); console.log(this.model.currentPlayer.get("num")); this.model.turn(coordinates[0], coordinates[1]); }, checkWinner: function(boardView) { if (this.model.turnCount >= 5) { - this.model.checkWin(); + if (this.model.checkWin() !== false){ + window.confirm('someone won'); + } console.log(this.model.checkWin()); } }, newGame: function(){ console.log('new game clicked'); - // var boardView = new BoardView({ - // model: this.model.board, - // el: this.$('#board') - // }); - // boardView.render(); + // console.log(this.model.board); + this.model = new TicTacToe(); + this.boardView.model = this.model.board; + this.render(); }, render: function(){ console.log("rendering within appView"); - // var boardView = new BoardView({ - // // model: - // el: this.$('#board') - // }); - // boardView.render(); - // - // return this; + $('td').removeClass(); } }); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 90ae037..6f997ef 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -7,6 +7,7 @@ import Board from 'app/models/board'; const BoardView = Backbone.View.extend({ initialize: function(options) { console.log("BoardView created"); + console.log(this.model.playingField); // this.application_view = this.options.application_view; @@ -21,24 +22,18 @@ const BoardView = Backbone.View.extend({ cellClick: function(e) { var row = parseInt(e.currentTarget.id[0]), column = parseInt(e.currentTarget.id[2]); - // console.log(this.model.playingField); - // console.log(e.currentTarget.id); - // console.log(e.currentTarget); - // console.log('row ' + row); - // console.log('column ' + column); - - // Add class associated with player's number to determine marker color - // $(e.currentTarget).addClass('clicked'); - // console.log(TicTacToe.get(currentPlayer)); this.trigger('turn', [row, column]); + // Add class associated with player's number to determine marker color if (this.model.playingField[row][column] === 1) { $(e.currentTarget).addClass('player-one'); } else if (this.model.playingField[row][column] === 5) { $(e.currentTarget).addClass('player-two'); } + console.log(this.model.playingField); + // console.log(this.model); this.trigger('checkwinner', [this.model]); this.render(); @@ -52,6 +47,7 @@ const BoardView = Backbone.View.extend({ }, render: function() { + // $('td').removeClass(); return this; } }); From cb3e38e6c2d602ddce5df4daaa03b708afd79b20 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Wed, 21 Dec 2016 12:00:44 -0800 Subject: [PATCH 51/55] Toad and toes added with static box size --- build/css/app.css | 7 ++++++- src/app/views/application_view.js | 3 +-- src/app/views/board_view.js | 10 ++++++---- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/build/css/app.css b/build/css/app.css index 1819bcf..7f4dc45 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -1,6 +1,8 @@ table { border-collapse: separate; border-spacing: 7px 7px; + max-width: 600px; + table-layout: fixed; } tr { @@ -12,7 +14,10 @@ td { margin: 20px; background-color: #78bec5; margin: 10px; - width: 100em; + width: 50px; + height: 50px; + font-size: 4em; + text-align: center; } td:hover { diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 3be6aeb..4d7db56 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -44,12 +44,11 @@ var ApplicationView = Backbone.View.extend({ // console.log(this.model.board); this.model = new TicTacToe(); this.boardView.model = this.model.board; - this.render(); + this.boardView.render(); }, render: function(){ console.log("rendering within appView"); - $('td').removeClass(); } }); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 6f997ef..f4f76b0 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -27,16 +27,16 @@ const BoardView = Backbone.View.extend({ // Add class associated with player's number to determine marker color if (this.model.playingField[row][column] === 1) { - $(e.currentTarget).addClass('player-one'); + $(e.currentTarget).addClass('player-one').append(' 🐸'); } else if (this.model.playingField[row][column] === 5) { - $(e.currentTarget).addClass('player-two'); + $(e.currentTarget).addClass('player-two').append('👣'); } console.log(this.model.playingField); // console.log(this.model); this.trigger('checkwinner', [this.model]); - this.render(); + // this.render(); // this.trigger('select', this); @@ -47,7 +47,9 @@ const BoardView = Backbone.View.extend({ }, render: function() { - // $('td').removeClass(); + console.log('rendering in boardview'); + $('td').removeClass(); + $('td').empty(); return this; } }); From e0b9e76b4e7304fd23a4c441fef7e50dfc107a95 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Wed, 21 Dec 2016 15:10:48 -0800 Subject: [PATCH 52/55] Show appropriate current player and hide current player when game ends --- build/css/app.css | 4 ++++ build/index.html | 5 +++-- src/app/models/board.js | 1 + src/app/views/application_view.js | 33 +++++++++++++++++++++++++++---- src/app/views/board_view.js | 4 ++-- 5 files changed, 39 insertions(+), 8 deletions(-) diff --git a/build/css/app.css b/build/css/app.css index 7f4dc45..fe41dd1 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -24,6 +24,10 @@ td:hover { background-color: #3d4250; } +p { + font-size: 3em; +} + .player-one { background-color: rgb(173, 66, 92); } diff --git a/build/index.html b/build/index.html index d12ad29..18b9ca0 100644 --- a/build/index.html +++ b/build/index.html @@ -15,8 +15,9 @@

          Tic-Tac-To(a/e)d

          PLAYERS

          -

          Current player:

          -

          +

          Current player:

          +

          +

          diff --git a/src/app/models/board.js b/src/app/models/board.js index 9bad937..f936027 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -3,6 +3,7 @@ import Backbone from 'backbone'; const Board = Backbone.Model.extend({ initialize: function() { this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; + this.markers = ['🐸', '👣']; }, emptySpace: function(row, column) { diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 4d7db56..fe1b827 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -14,6 +14,7 @@ var ApplicationView = Backbone.View.extend({ el: this.$('#board'), // application_view: this }); + $('.current-player').append(this.model.board.markers[0]); this.listenTo(this.boardView, 'turn', this.takeTurn); this.listenTo(this.boardView, "checkwinner", this.checkWinner); this.render(); @@ -24,18 +25,35 @@ var ApplicationView = Backbone.View.extend({ }, takeTurn: function(coordinates){ + this.player = 0; + if (this.model.currentPlayer == this.model.players[0]) { + this.player = 0; + } else { + this.player = 1; + } // console.log(this.model.currentPlayer); // console.log(coordinates); console.log(this.model.currentPlayer.get("num")); + $('.current-player').empty(); + console.log(this.player / 1); + $('.current-player').append(this.model.board.markers[(1 - this.player)]); this.model.turn(coordinates[0], coordinates[1]); + // this.render(); }, checkWinner: function(boardView) { if (this.model.turnCount >= 5) { - if (this.model.checkWin() !== false){ - window.confirm('someone won'); - } - console.log(this.model.checkWin()); + var winner = this.model.checkWin(); + if (winner !== false){ + // alert('someone won'); + $('.winner').append(this.model.board.markers[this.player] + " won!"); + $('.current-player').hide(); + $('.current-player-header').hide(); + } else if (this.model.turnCount == 9) { + $('.current-player').hide(); + $('.current-player-header').hide(); + $('.winner').append("It's a tie! Play again."); + } } }, @@ -44,11 +62,18 @@ var ApplicationView = Backbone.View.extend({ // console.log(this.model.board); this.model = new TicTacToe(); this.boardView.model = this.model.board; + $('.current-player').show(); + $('.current-player-header').show(); + $('.current-player').append(this.model.board.markers[0]); this.boardView.render(); + this.render(); }, render: function(){ console.log("rendering within appView"); + $('.current-player').empty().append(this.model.board.markers[0]); + $('.winner').empty(); + return this; } }); diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index f4f76b0..33ee080 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -27,9 +27,9 @@ const BoardView = Backbone.View.extend({ // Add class associated with player's number to determine marker color if (this.model.playingField[row][column] === 1) { - $(e.currentTarget).addClass('player-one').append(' 🐸'); + $(e.currentTarget).addClass('player-one').append(this.model.markers[0]); } else if (this.model.playingField[row][column] === 5) { - $(e.currentTarget).addClass('player-two').append('👣'); + $(e.currentTarget).addClass('player-two').append(this.model.markers[1]); } console.log(this.model.playingField); From dcf67c64b0e0281a074c9527760a13e3d2c3945b Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Thu, 22 Dec 2016 11:02:44 -0800 Subject: [PATCH 53/55] Successfully posting game results to API --- src/app/models/board.js | 4 +- src/app/models/tic_tac_toe.js | 79 +++++++++++++++++++++++-------- src/app/views/application_view.js | 18 ++++--- src/app/views/board_view.js | 6 +-- 4 files changed, 77 insertions(+), 30 deletions(-) diff --git a/src/app/models/board.js b/src/app/models/board.js index f936027..4dbf68c 100644 --- a/src/app/models/board.js +++ b/src/app/models/board.js @@ -2,12 +2,12 @@ import Backbone from 'backbone'; const Board = Backbone.Model.extend({ initialize: function() { - this.playingField = [[0,0,0],[0,0,0],[0,0,0]]; + this.playingField = [[' ',' ',' '],[' ',' ',' '],[' ',' ',' ']]; this.markers = ['🐸', '👣']; }, emptySpace: function(row, column) { - if (this.playingField[row][column] === 0) { + if (this.playingField[row][column] === ' ') { return true; } else { return false; diff --git a/src/app/models/tic_tac_toe.js b/src/app/models/tic_tac_toe.js index a201149..adb0b41 100644 --- a/src/app/models/tic_tac_toe.js +++ b/src/app/models/tic_tac_toe.js @@ -3,12 +3,30 @@ import Board from 'app/models/board'; import Player from 'app/models/player'; const TicTacToe = Backbone.Model.extend({ + url: 'http://localhost:3000/api/v1/games', + + parse: function(response) { + return response; + }, + + toJSON: function(){ + var merged = [].concat.apply([], this.board.playingField); + + var object = { + board: merged, + players: ["X Player","O Player" ], + outcome: this.winner + }; + return object; + }, initialize: function(){ this.MAX_TURNS = 9; this.totalTurns = 0; this.board = new Board(); - this.players = [new Player({num: 1}), new Player({num: 5})]; + this.players = [new Player({num: 'X'}), new Player({num: 'O'})]; + this.winner = 'draw'; + this.currentMarker = 'X'; this.currentPlayer = this.players[0]; this.turnCount = 0; }, @@ -20,27 +38,61 @@ const TicTacToe = Backbone.Model.extend({ checkWin: function() { var leftDiagonalSum = 0; var rightDiagonalSum = 0; + var playerValue = 0; for (var i = 0; i< 3; i++) { var rowSum = 0; var columnSum = 0; for (var x = 0; x < 3; x++){ - rowSum += this.board.playingField[i][x]; - columnSum += this.board.playingField[x][i]; + if (this.board.playingField[i][x] == 'X') { + rowSum += 1; + } else if (this.board.playingField[i][x] == 'O') { + rowSum += 5; + // } else { + // playerValue = 0; + } + if (this.board.playingField[x][i] == 'X') { + columnSum += 1; + } else if (this.board.playingField[x][i] == 'O') { + columnSum += 5; + } + // rowSum += playerValue; + // columnSum += playerValue; + } + + if (this.board.playingField[i][i] == 'X') { + leftDiagonalSum += 1; + } else if (this.board.playingField[i][i] == 'O') { + leftDiagonalSum += 5; + // } else { + // playerValue = 0; + } + // leftDiagonalSum += playerValue; + + if (this.board.playingField[i][2-i] == 'X') { + rightDiagonalSum += 1; + } else if (this.board.playingField[i][2-i] == 'O') { + rightDiagonalSum += 5; + // } else { + // playerValue = 0; } + // rightDiagonalSum += playerValue; - leftDiagonalSum += this.board.playingField[i][i]; - rightDiagonalSum += this.board.playingField[i][2-i]; if (rowSum === 3 || columnSum === 3|| leftDiagonalSum === 3 || rightDiagonalSum === 3) { + // toads + this.winner = 'X'; return this.players[0]; + // return true; } else if (rowSum === 15 || columnSum === 15 || leftDiagonalSum === 15 || rightDiagonalSum === 15) { + // toes + this.winner = 'O'; return this.players[1]; + // return true; } } - return false; }, @@ -57,21 +109,10 @@ const TicTacToe = Backbone.Model.extend({ throw new Error('Space is occupied. Pick an empty space.'); } + // increase turn count this.turnCount += 1; - // // if turnCount >=5, check for winner - // if (this.turnCount >= 5) { - // if (this.checkWin() !== false) { - // throw new Error("Player" + this.checkWin().marker + ' is the winner!'); - // } - // else if (this.turnCount === 9) { - // throw new Error("It's a tie!"); - // } - // } - - // if turnCount === 9, check for tie - - //this toggles the player at the end of the turn + // toggle the player if (this.currentPlayer=== this.players[0]) { this.currentPlayer = this.players[1]; } else { diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index fe1b827..298f489 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -6,6 +6,9 @@ import TicTacToe from 'app/models/tic_tac_toe'; var ApplicationView = Backbone.View.extend({ initialize: function(){ + + + console.log("ApplicationView created"); // var board = new Board(); // console.log(this.model.board); @@ -25,17 +28,16 @@ var ApplicationView = Backbone.View.extend({ }, takeTurn: function(coordinates){ + // console.log(this.model.winner); this.player = 0; if (this.model.currentPlayer == this.model.players[0]) { this.player = 0; + this.currentMarker = 'X'; } else { this.player = 1; + this.currentMarker = 'O'; } - // console.log(this.model.currentPlayer); - // console.log(coordinates); - console.log(this.model.currentPlayer.get("num")); $('.current-player').empty(); - console.log(this.player / 1); $('.current-player').append(this.model.board.markers[(1 - this.player)]); this.model.turn(coordinates[0], coordinates[1]); // this.render(); @@ -43,16 +45,20 @@ var ApplicationView = Backbone.View.extend({ checkWinner: function(boardView) { if (this.model.turnCount >= 5) { - var winner = this.model.checkWin(); - if (winner !== false){ + console.log(this.model.checkWin()); + // var winner = this.model.winner; + // console.log(winner); + if (this.model.checkWin() !== false){ // alert('someone won'); $('.winner').append(this.model.board.markers[this.player] + " won!"); $('.current-player').hide(); $('.current-player-header').hide(); + this.model.save(this.model.toJSON); } else if (this.model.turnCount == 9) { $('.current-player').hide(); $('.current-player-header').hide(); $('.winner').append("It's a tie! Play again."); + this.model.save(this.model.toJSON); } } }, diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 33ee080..5d550cf 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -26,13 +26,13 @@ const BoardView = Backbone.View.extend({ this.trigger('turn', [row, column]); // Add class associated with player's number to determine marker color - if (this.model.playingField[row][column] === 1) { + if (this.model.playingField[row][column] === 'X') { $(e.currentTarget).addClass('player-one').append(this.model.markers[0]); - } else if (this.model.playingField[row][column] === 5) { + } else if (this.model.playingField[row][column] === 'O') { $(e.currentTarget).addClass('player-two').append(this.model.markers[1]); } - console.log(this.model.playingField); + // console.log(this.model.playingField); // console.log(this.model); this.trigger('checkwinner', [this.model]); From d94ba0e7481a94ce3784fe174373fd442e132365 Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Thu, 22 Dec 2016 11:39:16 -0800 Subject: [PATCH 54/55] Shows correct current player marker when occupied spot is selected, clean up tests --- spec/application.spec.js | 16 +++++++-------- spec/board.spec.js | 4 ++-- src/app/models/tic_tac_toe.js | 34 +++++++++++-------------------- src/app/views/application_view.js | 4 +++- 4 files changed, 25 insertions(+), 33 deletions(-) diff --git a/spec/application.spec.js b/spec/application.spec.js index 27f514f..67f6579 100644 --- a/spec/application.spec.js +++ b/spec/application.spec.js @@ -15,7 +15,7 @@ describe('TicTacToe', function() { }); it('should start with an empty board', function() { - expect(testGame.board.playingField).toEqual([[0,0,0],[0,0,0],[0,0,0]]); + expect(testGame.board.playingField).toEqual([[' ',' ',' '],[' ',' ',' '],[' ',' ',' ']]); }); it('should start with two players', function() { @@ -100,24 +100,24 @@ describe('TicTacToe', function() { it('should recognize a winner (or not) in a row', function(){ var testRowWin = new TicTacToe(); expect(testRowWin.checkWin()).toEqual(false); - testRowWin.board.playingField[1] = [5,5,5]; + testRowWin.board.playingField[1] = ['O','O','O']; expect(testRowWin.checkWin()).toEqual(testRowWin.players[1]); }); it('should recognize a winner (or not) in a column', function(){ var testColumnWin = new TicTacToe(); expect(testColumnWin.checkWin()).toEqual(false); - testColumnWin.board.playingField[0][2] = 1; - testColumnWin.board.playingField[1][2] = 1; - testColumnWin.board.playingField[2][2] = 1; + testColumnWin.board.playingField[0][2] = 'X'; + testColumnWin.board.playingField[1][2] = 'X'; + testColumnWin.board.playingField[2][2] = 'X'; expect(testColumnWin.checkWin()).toEqual(testColumnWin.players[0]); }); it('should recognize a winner (or not) in a diagonal', function(){ var testDiagonalWin = new TicTacToe(); expect(testDiagonalWin.checkWin()).toEqual(false); - testDiagonalWin.board.playingField[0][2] = 1; - testDiagonalWin.board.playingField[1][1] = 1; - testDiagonalWin.board.playingField[2][0] = 1; + testDiagonalWin.board.playingField[0][2] = 'X'; + testDiagonalWin.board.playingField[1][1] = 'X'; + testDiagonalWin.board.playingField[2][0] = 'X'; expect(testDiagonalWin.checkWin()).toEqual(testDiagonalWin.players[0]); }); diff --git a/spec/board.spec.js b/spec/board.spec.js index cb954c0..8d7d25b 100644 --- a/spec/board.spec.js +++ b/spec/board.spec.js @@ -12,8 +12,8 @@ describe('Board', function() { expect(testBoard.playingField instanceof Array).toEqual(true); }); - it('should have 9 empty spaces with default value of 0', function(){ - expect(testBoard.playingField).toEqual([[0,0,0],[0,0,0],[0,0,0]]); + it('should have 9 empty spaces with default value of " "', function(){ + expect(testBoard.playingField).toEqual([[' ',' ',' '],[' ',' ',' '],[' ',' ',' ']]); }); }); diff --git a/src/app/models/tic_tac_toe.js b/src/app/models/tic_tac_toe.js index adb0b41..1f57b1e 100644 --- a/src/app/models/tic_tac_toe.js +++ b/src/app/models/tic_tac_toe.js @@ -49,47 +49,35 @@ const TicTacToe = Backbone.Model.extend({ rowSum += 1; } else if (this.board.playingField[i][x] == 'O') { rowSum += 5; - // } else { - // playerValue = 0; } + if (this.board.playingField[x][i] == 'X') { columnSum += 1; } else if (this.board.playingField[x][i] == 'O') { columnSum += 5; } - // rowSum += playerValue; - // columnSum += playerValue; } if (this.board.playingField[i][i] == 'X') { leftDiagonalSum += 1; } else if (this.board.playingField[i][i] == 'O') { leftDiagonalSum += 5; - // } else { - // playerValue = 0; } - // leftDiagonalSum += playerValue; if (this.board.playingField[i][2-i] == 'X') { rightDiagonalSum += 1; } else if (this.board.playingField[i][2-i] == 'O') { rightDiagonalSum += 5; - // } else { - // playerValue = 0; } - // rightDiagonalSum += playerValue; - if (rowSum === 3 || columnSum === 3|| leftDiagonalSum === 3 || rightDiagonalSum === 3) { // toads this.winner = 'X'; return this.players[0]; - // return true; } else if (rowSum === 15 || columnSum === 15 || leftDiagonalSum === 15 || rightDiagonalSum === 15) { // toes this.winner = 'O'; return this.players[1]; - // return true; } } @@ -105,19 +93,21 @@ const TicTacToe = Backbone.Model.extend({ // if not, throw error and start turn over if (this.board.emptySpace(row, column) === true) { this.placeMarker(row, column, this.currentPlayer); - } else { - throw new Error('Space is occupied. Pick an empty space.'); - } - // increase turn count - this.turnCount += 1; + // increase turn count + this.turnCount += 1; - // toggle the player - if (this.currentPlayer=== this.players[0]) { - this.currentPlayer = this.players[1]; + // toggle the player + if (this.currentPlayer=== this.players[0]) { + this.currentPlayer = this.players[1]; + } else { + this.currentPlayer = this.players[0]; + } } else { - this.currentPlayer = this.players[0]; + alert('Space is occupied. Pick an empty space.'); + throw new Error('Space is occupied. Pick an empty space.'); } + } }); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 298f489..63e806a 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -37,9 +37,11 @@ var ApplicationView = Backbone.View.extend({ this.player = 1; this.currentMarker = 'O'; } + console.log(this.player); + console.log('turncount: ' + this.model.turnCount); + this.model.turn(coordinates[0], coordinates[1]); $('.current-player').empty(); $('.current-player').append(this.model.board.markers[(1 - this.player)]); - this.model.turn(coordinates[0], coordinates[1]); // this.render(); }, From 2bd636f25eb8fd592a9c1b08e42e42048ef14ebc Mon Sep 17 00:00:00 2001 From: Danielle Schrimmer Date: Thu, 22 Dec 2016 14:10:47 -0800 Subject: [PATCH 55/55] WIP: fetching past games --- build/css/app.css | 4 ++ build/index.html | 28 ++++++++-- src/app.js | 26 +++++++-- src/app/collections/tic_tac_toe_list.js | 13 +++++ src/app/models/tic_tac_toe.js | 1 + src/app/views/application_view.js | 5 +- src/app/views/board_view.js | 2 +- src/app/views/tic_tac_toe_list_view.js | 74 +++++++++++++++++++++++++ 8 files changed, 139 insertions(+), 14 deletions(-) create mode 100644 src/app/collections/tic_tac_toe_list.js create mode 100644 src/app/views/tic_tac_toe_list_view.js diff --git a/build/css/app.css b/build/css/app.css index fe41dd1..1d39c17 100644 --- a/build/css/app.css +++ b/build/css/app.css @@ -42,3 +42,7 @@ p { .player-two:hover { background-color: rgb(42, 129, 198); } + +#past-games { + text-align: center; +} diff --git a/build/index.html b/build/index.html index 18b9ca0..9bd65bd 100644 --- a/build/index.html +++ b/build/index.html @@ -10,12 +10,12 @@
          -

          Tic-Tac-To(a/e)d

          +

          Tic-Tac-Toad vs Toe

          -

          PLAYERS

          -

          Current player:

          + +

          Current player:

          @@ -45,15 +45,31 @@

          Start New Game

          +
            +
          + +
          + + + -
          - --> diff --git a/src/app.js b/src/app.js index 04bf896..798edea 100644 --- a/src/app.js +++ b/src/app.js @@ -1,9 +1,27 @@ +import $ from 'jquery'; import TicTacToe from 'app/models/tic_tac_toe'; +// import TicTacToeList from 'app/collections/tic_tac_toe_list'; +// import TicTacToeListView from 'app/views/tic_tac_toe_list_view'; import ApplicationView from 'app/views/application_view'; -var game = new TicTacToe(); +$(document).ready(function() { + console.log("doing anything at all"); -var appView = new ApplicationView({ - el: '#application', - model: game + var game = new TicTacToe(); + + var appView = new ApplicationView({ + el: '#application', + model: game + }); + + // var ticTacToeList = new TicTacToeList(); + // ticTacToeList.fetch(); + // // console.log(ticTacToeList); + // + // var options = { + // el: $('#past-games'), + // model: ticTacToeList + // }; + // var gamesList = new TicTacToeListView(options); + // gamesList.render(); }); diff --git a/src/app/collections/tic_tac_toe_list.js b/src/app/collections/tic_tac_toe_list.js new file mode 100644 index 0000000..4c5c015 --- /dev/null +++ b/src/app/collections/tic_tac_toe_list.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +import TicTacToe from 'app/models/tic_tac_toe'; + +var TicTacToeList = Backbone.Collection.extend({ + model: TicTacToe, + url: 'http://localhost:3000/api/v1/games/', + parse: function(data){ + return data; + } +}); + +export default TicTacToeList; diff --git a/src/app/models/tic_tac_toe.js b/src/app/models/tic_tac_toe.js index 1f57b1e..47f60c2 100644 --- a/src/app/models/tic_tac_toe.js +++ b/src/app/models/tic_tac_toe.js @@ -21,6 +21,7 @@ const TicTacToe = Backbone.Model.extend({ }, initialize: function(){ + console.log('model created'); this.MAX_TURNS = 9; this.totalTurns = 0; this.board = new Board(); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 63e806a..8ef7047 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -37,8 +37,8 @@ var ApplicationView = Backbone.View.extend({ this.player = 1; this.currentMarker = 'O'; } - console.log(this.player); - console.log('turncount: ' + this.model.turnCount); + // console.log(this.player); + // console.log('turncount: ' + this.model.turnCount); this.model.turn(coordinates[0], coordinates[1]); $('.current-player').empty(); $('.current-player').append(this.model.board.markers[(1 - this.player)]); @@ -47,7 +47,6 @@ var ApplicationView = Backbone.View.extend({ checkWinner: function(boardView) { if (this.model.turnCount >= 5) { - console.log(this.model.checkWin()); // var winner = this.model.winner; // console.log(winner); if (this.model.checkWin() !== false){ diff --git a/src/app/views/board_view.js b/src/app/views/board_view.js index 5d550cf..2a2baa7 100644 --- a/src/app/views/board_view.js +++ b/src/app/views/board_view.js @@ -7,7 +7,7 @@ import Board from 'app/models/board'; const BoardView = Backbone.View.extend({ initialize: function(options) { console.log("BoardView created"); - console.log(this.model.playingField); + // console.log(this.model.playingField); // this.application_view = this.options.application_view; diff --git a/src/app/views/tic_tac_toe_list_view.js b/src/app/views/tic_tac_toe_list_view.js new file mode 100644 index 0000000..d1f69e4 --- /dev/null +++ b/src/app/views/tic_tac_toe_list_view.js @@ -0,0 +1,74 @@ +import $ from 'jquery'; +import Backbone from 'backbone'; + +import ApplicationView from 'app/views/application_view'; + +var TicTacToeListView = Backbone.View.extend({ + initialize: function(options) { + // Compile a template to be shared between the individual tasks + this.gameTemplate = _.template($('#game-template').html()); + + // Keep track of the
            element + this.listElement = this.$('.game-list'); + + // We'll keep track of a list of game models and a list of game views. + this.gameList = []; + + this.model.forEach(function(rawGame) { + // console.log('rawgame: ' + rawGame); + this.addGame(rawGame); + }, this); // bind `this` so it's available inside forEach + + // // When a model is added to the collection, create + // // a card for that model and add it to our list of cards + // this.listenTo(this.model, 'add', this.addGame); + // + // // When a model is removed from the collection, remove + // // the card for that task from our list of cards + // this.listenTo(this.model, 'remove', this.removeGame); + // + // // When the model updates, re-render the list of cards + // this.listenTo(this.model, 'update', this.render); + }, + + render: function() { + // Make sure the list in the DOM is empty + // before we start appending items + this.listElement.empty(); +// console.log('gamelist ' + JSON.stringify(this.gameList)); + // Loop through the data assigned to this view + this.gameList.forEach(function(game) { + // Cause the game to render + game.render(); + + // Add that HTML to our game list + this.listElement.append(game.$el); + }, this); + + this.input = { + title: this.$('.new-task input[name="title"]'), + description: this.$('.new-task input[name="description"]') + }; + + return this; // enable chained calls + }, + + addGame: function(gameInfo) { + var game = new ApplicationView({ + model: gameInfo + // , + // template: this.gameTemplate + }); + console.log(game); + + // Add the card to our card list + this.gameList.push(game); + }, + + removeGame: function(task) { + + } + +}); + +export default TicTacToeListView;