From 4534c858726545ecacd3d8c540017ee8123d7fba Mon Sep 17 00:00:00 2001 From: James Walker Date: Tue, 12 Sep 2017 01:15:36 -0500 Subject: [PATCH 01/12] checkers - creating colorful board in console.log --- 05week/checkersOriginal.js | 154 +++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 05week/checkersOriginal.js diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js new file mode 100644 index 000000000..14e8763b7 --- /dev/null +++ b/05week/checkersOriginal.js @@ -0,0 +1,154 @@ +'use strict'; + +function Game () { + this.board = new Board(); + + this.start = function () { + this.board.createGrid(); + this.board.addPieces(); + + }; + + this.moveChecker = function (fromHere, toHere) { + + } +} + +// This function object does... +function Board () { + this.grid = []; + this.constructor = { + name: 'Board', + whiteSquare: '\u2B1C', // Unicode 25A1 is a white sqaure symbol + blackSquare: '\u2B1B', // Unicode 25A0 is a black sqaure symbol + whiteChecker: '\u26C0', // Unicode 26C0 is a white checker symbol + blackChecker: '\u26C2' // Unicode 26C2 is a black checker symbol + }; + + // The createGrid function creates an 8x8 Checker Board array, + // filled with alternating black and white squares. + this.createGrid = function () { + // A booleen flag is used to flip between colors. + let flag = true; + for (let row = 0; row < 8; row++) { + this.grid[row] = []; + for (let column = 0; column < 8; column++) { + if (flag) { + this.grid[row].push(this.constructor.blackSquare); + flag = !flag; + } else { + switch (true) { + case row <= 2: + this.grid[row].push(this.constructor.blackChecker); + break; + case row <= 4: + this.grid[row].push(this.constructor.whiteSquare); + break; + default: + this.grid[row].push(this.constructor.whiteChecker); + } + flag = !flag; + } + } + flag = !flag; + } + }; + + this.addPieces = function () { + // add the X's and O's + } + + // prints out the board + this.viewGrid = function () { + // add our column numbers + let string = '%c 0 1 2 3 4 5 6 7\n'; + for (let row = 0; row < 8; row++) { + // we start with our row number in our array + const rowOfCheckers = [row]; + // a loop within a loop + for (let column = 0; column < 8; column++) { + // if the location is "truthy" (contains a checker piece, in this case) + if (this.grid[row][column]) { + // push the symbol of the check in that location into the array + rowOfCheckers.push(this.grid[row][column]); + //rowOfCheckers.push(this.grid[row][column].symbol); + } else { + // just push in a blank space + // rowOfCheckers.push('\u2B1B'); + // rowOfCheckers.push(' '); + } + } + // join the rowOfCheckers array to a string, separated by a space + string += rowOfCheckers.join(' '); + // add a 'new line' + string += '\n'; + } + console.log(string,"background-color:blue; color:red; font-size:large;"); + }; + + this.checkers = function () { + // not sure what. is used in test + } + +} + +function Checker () { + // Your code here +} + + + +const game = new Game(); +game.start(); +game.board.viewGrid(); + +// Tests +/******* +const assert = require('assert'); +const readline = require('readline'); +const rl = readline.createInterface({ + input: process.stdin, + output: process.stdout +}); + +if (typeof describe === 'function') { + describe('Game', () => { + it('should have a board', () => { + assert.equal(game.board.constructor.name, 'Board'); + }); + it('board should have 24 checkers', () => { + assert.equal(game.board.checkers.length, 24); + }); + }); + + describe('Game.moveChecker()', function () { + it('should move a checker', function () { + assert(!game.board.grid[4][1]); + game.moveChecker('50', '41'); + assert(game.board.grid[4][1]); + game.moveChecker('21', '30'); + assert(game.board.grid[3][0]); + game.moveChecker('52', '43'); + assert(game.board.grid[4][3]); + }); + it('should be able to jump over and kill another checker', () => { + game.moveChecker('30', '52'); + assert(game.board.grid[5][2]); + assert(!game.board.grid[4][1]); + assert.equal(game.board.checkers.length, 23); + }); + }); +} else { + getPrompt(); +} + +function getPrompt() { + game.board.viewGrid(); + rl.question('which piece?: ', (whichPiece) => { + rl.question('to where?: ', (toWhere) => { + game.moveChecker(whichPiece, toWhere); + getPrompt(); + }); + }); +} +*******/ From b4d422ec6ef4fa44608df6f082de3f48fe418764 Mon Sep 17 00:00:00 2001 From: James Walker Date: Wed, 13 Sep 2017 07:19:57 -0500 Subject: [PATCH 02/12] checkers - figured out how to obtain get user input from the console --- 05week/checkersOriginal.js | 150 +++++++++++++++++++++++++------------ 05week/index.html | 8 ++ 05week/test.js | 16 ++++ 3 files changed, 128 insertions(+), 46 deletions(-) create mode 100644 05week/index.html create mode 100644 05week/test.js diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 14e8763b7..11761f8a8 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -1,29 +1,37 @@ 'use strict'; function Game () { + this.gameInPlay = true; this.board = new Board(); + this.board.createGrid(); this.start = function () { - this.board.createGrid(); - this.board.addPieces(); - + this.board.viewGrid(); }; - this.moveChecker = function (fromHere, toHere) { - } + + + + this.moveChecker = function (whichPiece, toWhere) { + // make sure move legal, flip player, adjust gameInPlay + }; } -// This function object does... function Board () { this.grid = []; this.constructor = { name: 'Board', - whiteSquare: '\u2B1C', // Unicode 25A1 is a white sqaure symbol - blackSquare: '\u2B1B', // Unicode 25A0 is a black sqaure symbol - whiteChecker: '\u26C0', // Unicode 26C0 is a white checker symbol - blackChecker: '\u26C2' // Unicode 26C2 is a black checker symbol + blueChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', + redChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', + openSquare: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', + blackSquare: 'background-color:black; font-size:40px; padding:0px 12px; color:black; line-height:40px;', + labelSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', + cornerSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:white; line-height:40px;' }; + this.currentPlayer = 'Blue'; + this.currentChecker = this.constructor.blueChecker; + // The createGrid function creates an 8x8 Checker Board array, // filled with alternating black and white squares. @@ -39,13 +47,13 @@ function Board () { } else { switch (true) { case row <= 2: - this.grid[row].push(this.constructor.blackChecker); + this.grid[row].push(this.constructor.blueChecker); break; case row <= 4: - this.grid[row].push(this.constructor.whiteSquare); + this.grid[row].push(this.constructor.openSquare); break; default: - this.grid[row].push(this.constructor.whiteChecker); + this.grid[row].push(this.constructor.redChecker); } flag = !flag; } @@ -54,53 +62,103 @@ function Board () { } }; - this.addPieces = function () { - // add the X's and O's - } - // prints out the board this.viewGrid = function () { - // add our column numbers - let string = '%c 0 1 2 3 4 5 6 7\n'; - for (let row = 0; row < 8; row++) { - // we start with our row number in our array - const rowOfCheckers = [row]; - // a loop within a loop - for (let column = 0; column < 8; column++) { - // if the location is "truthy" (contains a checker piece, in this case) - if (this.grid[row][column]) { - // push the symbol of the check in that location into the array - rowOfCheckers.push(this.grid[row][column]); - //rowOfCheckers.push(this.grid[row][column].symbol); - } else { - // just push in a blank space - // rowOfCheckers.push('\u2B1B'); - // rowOfCheckers.push(' '); - } - } - // join the rowOfCheckers array to a string, separated by a space - string += rowOfCheckers.join(' '); - // add a 'new line' - string += '\n'; + console.log('\n'); + console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.cornerSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare); + for (let i = 0; i < 8; i++) { + console.log(`%c${i}` + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[i][0], this.grid[i][1], this.grid[i][2], this.grid[i][3], this.grid[i][4], this.grid[i][5], this.grid[i][6], this.grid[i][7]); } - console.log(string,"background-color:blue; color:red; font-size:large;"); + console.log('\n'); }; this.checkers = function () { // not sure what. is used in test - } + }; +} + +const game = new Game(); +game.start(); +let fromSquare = {}; +nullUserInputs(); + +function nullUserInputs () { + fromSquare.row = null; + fromSquare.col = null; +} +function toggleUser () { + if (game.board.currentPlayer === 'Blue') { + game.board.currentPlayer = 'Red'; + game.board.currentChecker = game.board.constructor.redChecker; + console.log() + } else { + game.board.currentPlayer = 'Blue'; + game.board.currentChecker = game.board.constructor.blueChecker; + } } -function Checker () { - // Your code here +function setInputs (pointer, rowColInput) { + let row = parseInt(rowColInput / 10); + let col = rowColInput - row * 10; + console.log(`Row: ${row} Col: ${col}`); + if (pointer === 'from' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && game.board.grid[row][col] === game.board.currentChecker) { + fromSquare.row = row; + fromSquare.col = col; + console.log(`Confirmation: Moving from Row:${fromSquare.row} Col:${fromSquare.col}`); + } else if (pointer === 'to' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && Math.abs(fromSquare.row - row) === 1 && Math.abs(fromSquare.col - col) === 1 && game.board.grid[row][col] === game.board.constructor.openSquare) { + if (fromSquare.row) { + game.board.grid[fromSquare.row][fromSquare.col] = game.board.constructor.openSquare; + game.board.grid[row][col] = game.board.currentChecker; + console.log(`Confirmation: Moved to open cell, Row:${row} Col:${col}`); + nullUserInputs(); + game.board.viewGrid(); + toggleUser(); + } + } } +function from (consoleInput) { + setInputs('from', consoleInput); +} +function to (consoleInput) { + setInputs('to', consoleInput); +} -const game = new Game(); -game.start(); -game.board.viewGrid(); +/* +console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.cornerSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare); +console.log('%c0' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[0][0], this.grid[0][1], this.grid[0][2], this.grid[0][3], this.grid[0][4], this.grid[0][5], this.grid[0][6], this.grid[0][7]); +console.log('%c1' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[1][0], this.grid[1][1], this.grid[1][2], this.grid[1][3], this.grid[1][4], this.grid[1][5], this.grid[1][6], this.grid[1][7]); +console.log('%c2' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[2][0], this.grid[2][1], this.grid[2][2], this.grid[2][3], this.grid[2][4], this.grid[2][5], this.grid[2][6], this.grid[2][7]); +console.log('%c3' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[3][0], this.grid[3][1], this.grid[3][2], this.grid[3][3], this.grid[3][4], this.grid[3][5], this.grid[3][6], this.grid[3][7]); +console.log('%c4' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[4][0], this.grid[4][1], this.grid[4][2], this.grid[4][3], this.grid[4][4], this.grid[4][5], this.grid[4][6], this.grid[4][7]); +console.log('%c5' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[5][0], this.grid[5][1], this.grid[5][2], this.grid[5][3], this.grid[5][4], this.grid[5][5], this.grid[5][6], this.grid[5][7]); +console.log('%c6' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[6][0], this.grid[6][1], this.grid[6][2], this.grid[6][3], this.grid[6][4], this.grid[6][5], this.grid[6][6], this.grid[6][7]); +console.log('%c7' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[7][0], this.grid[7][1], this.grid[7][2], this.grid[7][3], this.grid[7][4], this.grid[7][5], this.grid[7][6], this.grid[7][7]); +console.log('\n'); + + console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', corner, label, label, label, label, label, label, label, label); + console.log('%c0' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, blue, black, blue, black, blue, black, blue); + console.log('%c1' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, blue, black, blue, black, blue, black, blue, black); + console.log('%c2' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, blue, black, blue, black, blue, black, blue); + console.log('%c3' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, open, black, open, black, open, black, open, black); + console.log('%c4' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, open, black, open, black, open, black, open); + console.log('%c5' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, red, black, red, black, red, black, red, black); + console.log('%c6' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, red, black, red, black, red, black, red); + console.log('%c7' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, red, black, red, black, red, black, red, black); + +const grid = [ + [black, blue, black, blue, black, blue, black, blue], + [blue, black, blue, black, blue, black, blue, black], + [black, blue, black, blue, black, blue, black, blue], + [open, black, open, black, open, black, open, black], + [black, open, black, open, black, open, black, open], + [red, black, red, black, red, black, red, black], + [black, red, black, red, black, red, black, red], + [red, black, red, black, red, black, red, black] +]; +*/ // Tests /******* diff --git a/05week/index.html b/05week/index.html new file mode 100644 index 000000000..0f34795f2 --- /dev/null +++ b/05week/index.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/05week/test.js b/05week/test.js new file mode 100644 index 000000000..f959a5c4e --- /dev/null +++ b/05week/test.js @@ -0,0 +1,16 @@ + + game.board.viewGrid(); + game.moveChecker(whichPiece, toWhere); + assert.equal(game.board.constructor.name, 'Board'); + assert.equal(game.board.checkers.length, 24); + assert(!game.board.grid[4][1]); + game.moveChecker('50', '41'); // ###################################### + assert(game.board.grid[4][1]); // ###################################### + game.moveChecker('21', '30'); // ###################################### + assert(game.board.grid[3][0]); // ###################################### + game.moveChecker('52', '43'); // ###################################### + assert(game.board.grid[4][3]); // ###################################### + game.moveChecker('30', '52'); // ###################################### + assert(game.board.grid[5][2]); // ###################################### + assert(!game.board.grid[4][1]); // ###################################### + assert.equal(game.board.checkers.length, 23); // ###################################### From 6fd3382f64e772ab4ba13009c0d36641373c384b Mon Sep 17 00:00:00 2001 From: James Walker Date: Wed, 13 Sep 2017 14:13:11 -0500 Subject: [PATCH 03/12] renamed many variables, working on moveChecker, reorganized structure --- 05week/checkersOriginal.js | 152 ++++++++++++++++++++++--------------- 1 file changed, 89 insertions(+), 63 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 11761f8a8..f61b61121 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -1,41 +1,106 @@ 'use strict'; function Game () { - this.gameInPlay = true; this.board = new Board(); - this.board.createGrid(); this.start = function () { - this.board.viewGrid(); + this.gameInPlay = true; + console.log('how to play...'); }; + function removeChecker (row, col) { + game.board.grid[row][col] = game.board.constructor.openSquare; + game.board.checkers.pop; + } + function addChecker (row, col) { + game.board.grid[row][col] = game.board.currentPlayerChecker; + game.board.checkers.push('placeHolder'); + } - + function togglePlayer () { + if (game.board.currentPlayerColor === this.constructor.firstPlayerColor) { + game.board.currentPlayerColor = this.constructor.secondPlayerColor; + game.board.currentPlayerChecker = game.board.constructor.secondPlayerChecker; + } else { + game.board.currentPlayerColor = this.constructor.firstPlayerColor; + game.board.currentPlayerChecker = game.board.constructor.firstPlayerChecker; + } + } this.moveChecker = function (whichPiece, toWhere) { - // make sure move legal, flip player, adjust gameInPlay + if (parseInt(whichPiece) >= 0 && parseInt(whichPiece) <= 77 && parseInt(toWhere) >= 0 && parseInt(toWhere) <= 77) { + const fromRow = parseInt(whichPiece / 10); + const fromCol = whichPiece - fromRow * 10; + const toRow = parseInt(whichPiece / 10); + const toCol = whichPiece - toRow * 10; + if (game.board.grid[fromRow][fromCol] === game.board.currentPlayerChecker && game.board.grid[toRow][toCol] === game.board.constructor.openSquare) { + switch (true) { + // Player Blue is moving a checker into an open square + case this.board.currentPlayerColor === this.board.constructor.firstPlayerColor && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: + removeChecker(fromRow, fromCol); + addChecker(toRow, toCol); + togglePlayer(); + break; + case this.board.currentPlayerColor === this.board.constructor.secondPlayerColor && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: + removeChecker(fromRow, fromCol); + addChecker(toRow, toCol); + togglePlayer(); + break; + } + } else { console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}. Player ${this.board.currentPlayerColor}, please submit a valid move.`); } + } else { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds. Player ${this.board.currentPlayerColor}, please submit a valid move.`); } + }; + + this.validateInput = function (pointer, rowColInput) { + let row = parseInt(rowColInput / 10); + let col = rowColInput - row * 10; + console.log(`Row: ${row} Col: ${col}`); + if (pointer === 'from' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && game.board.grid[row][col] === game.board.currentPlayerChecker) { + fromSquare.row = row; + fromSquare.col = col; + console.log(`Confirmation: Moving from Row:${fromSquare.row} Col:${fromSquare.col}`); + } else if (pointer === 'to' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && Math.abs(fromSquare.row - row) === 1 && Math.abs(fromSquare.col - col) === 1 && game.board.grid[row][col] === game.board.constructor.openSquare) { + if (fromSquare.row) { + game.board.grid[fromSquare.row][fromSquare.col] = game.board.constructor.openSquare; + game.board.grid[row][col] = game.board.currentPlayerChecker; + console.log(`Confirmation: Moved to open cell, Row:${row} Col:${col}`); + game.board.viewGrid(); + toggleUser(); + } + } }; } function Board () { - this.grid = []; this.constructor = { name: 'Board', - blueChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', - redChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', + firstPlayerColor: 'Blue', // Synced with firstPlayerChecker's css color + firstPlayerChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', + secondPlayerColor: 'Red', // Synced with secondPlayerChecker's css color + secondPlayerChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', openSquare: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', blackSquare: 'background-color:black; font-size:40px; padding:0px 12px; color:black; line-height:40px;', labelSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', cornerSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:white; line-height:40px;' }; - this.currentPlayer = 'Blue'; - this.currentChecker = this.constructor.blueChecker; - + this.currentPlayerColor = this.constructor.firstPlayerColor; + this.currentPlayerChecker = this.constructor.firstPlayerChecker; + createCheckers(); + createGrid(); + + function createCheckers () { + this.checkers = []; + for (let i = 0; i < 24; i++) { + this.checkers.push('placeHolder'); + } + } // The createGrid function creates an 8x8 Checker Board array, // filled with alternating black and white squares. - this.createGrid = function () { + function createGrid () { + // @@@@@@@@@@@@@ make below consoleGrid & create 2nd grid for normal program + this.grid = []; // A booleen flag is used to flip between colors. let flag = true; for (let row = 0; row < 8; row++) { @@ -47,20 +112,20 @@ function Board () { } else { switch (true) { case row <= 2: - this.grid[row].push(this.constructor.blueChecker); + this.grid[row].push(this.constructor.firstPlayerChecker); break; case row <= 4: this.grid[row].push(this.constructor.openSquare); break; default: - this.grid[row].push(this.constructor.redChecker); + this.grid[row].push(this.constructor.secondPlayerChecker); } flag = !flag; } } flag = !flag; } - }; + } // prints out the board this.viewGrid = function () { @@ -71,60 +136,21 @@ function Board () { } console.log('\n'); }; +} - this.checkers = function () { - // not sure what. is used in test +function c () { + this.move = function (whichPiece, toWhere) { + this.game.moveChecker(whichPiece, toWhere); + }; + + this.reset = function () { + this.game.start(); }; } const game = new Game(); game.start(); -let fromSquare = {}; -nullUserInputs(); - -function nullUserInputs () { - fromSquare.row = null; - fromSquare.col = null; -} - -function toggleUser () { - if (game.board.currentPlayer === 'Blue') { - game.board.currentPlayer = 'Red'; - game.board.currentChecker = game.board.constructor.redChecker; - console.log() - } else { - game.board.currentPlayer = 'Blue'; - game.board.currentChecker = game.board.constructor.blueChecker; - } -} - -function setInputs (pointer, rowColInput) { - let row = parseInt(rowColInput / 10); - let col = rowColInput - row * 10; - console.log(`Row: ${row} Col: ${col}`); - if (pointer === 'from' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && game.board.grid[row][col] === game.board.currentChecker) { - fromSquare.row = row; - fromSquare.col = col; - console.log(`Confirmation: Moving from Row:${fromSquare.row} Col:${fromSquare.col}`); - } else if (pointer === 'to' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && Math.abs(fromSquare.row - row) === 1 && Math.abs(fromSquare.col - col) === 1 && game.board.grid[row][col] === game.board.constructor.openSquare) { - if (fromSquare.row) { - game.board.grid[fromSquare.row][fromSquare.col] = game.board.constructor.openSquare; - game.board.grid[row][col] = game.board.currentChecker; - console.log(`Confirmation: Moved to open cell, Row:${row} Col:${col}`); - nullUserInputs(); - game.board.viewGrid(); - toggleUser(); - } - } -} - -function from (consoleInput) { - setInputs('from', consoleInput); -} - -function to (consoleInput) { - setInputs('to', consoleInput); -} +game.board.viewGrid(); /* console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.cornerSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare); From 8040c521053c33f2e1e59ab00052e15e1e3c8575 Mon Sep 17 00:00:00 2001 From: James Walker Date: Wed, 13 Sep 2017 20:07:07 -0500 Subject: [PATCH 04/12] working version, prior to changing player info from individual values to objects --- 05week/checkersOriginal.js | 130 +++++++++++++++++-------------------- 1 file changed, 60 insertions(+), 70 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index f61b61121..5cf92d7ef 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -5,79 +5,82 @@ function Game () { this.start = function () { this.gameInPlay = true; - console.log('how to play...'); + this.board.createGrid(); + console.clear(); + this.board.viewGrid(); + console.log(`Play instructions`); + console.log(`${this.board.currentPlayerColor}'s turn.`); }; - function removeChecker (row, col) { - game.board.grid[row][col] = game.board.constructor.openSquare; - game.board.checkers.pop; - } + this.removeChecker = function (row, col) { + this.board.grid[row][col] = this.board.constructor.openSquare; + this.board.checkers.pop; + }; - function addChecker (row, col) { - game.board.grid[row][col] = game.board.currentPlayerChecker; - game.board.checkers.push('placeHolder'); - } + this.addChecker = function (row, col) { + this.board.grid[row][col] = this.board.currentPlayerChecker; + this.board.checkers.push('placeHolder'); + }; - function togglePlayer () { - if (game.board.currentPlayerColor === this.constructor.firstPlayerColor) { - game.board.currentPlayerColor = this.constructor.secondPlayerColor; - game.board.currentPlayerChecker = game.board.constructor.secondPlayerChecker; + this.togglePlayer = function () { + if (this.board.currentPlayerColor === this.board.constructor.firstPlayerColor) { + this.board.currentPlayerColor = this.board.constructor.secondPlayerColor; + this.board.currentPlayerChecker = this.board.constructor.secondPlayerChecker; } else { - game.board.currentPlayerColor = this.constructor.firstPlayerColor; - game.board.currentPlayerChecker = game.board.constructor.firstPlayerChecker; + this.board.currentPlayerColor = this.board.constructor.firstPlayerColor; + this.board.currentPlayerChecker = this.board.constructor.firstPlayerChecker; } - } + console.clear(); + this.board.viewGrid(); + console.log(`Play instructions`); + console.log(`${this.board.currentPlayerColor}'s turn.`); + }; this.moveChecker = function (whichPiece, toWhere) { if (parseInt(whichPiece) >= 0 && parseInt(whichPiece) <= 77 && parseInt(toWhere) >= 0 && parseInt(toWhere) <= 77) { const fromRow = parseInt(whichPiece / 10); const fromCol = whichPiece - fromRow * 10; - const toRow = parseInt(whichPiece / 10); - const toCol = whichPiece - toRow * 10; - if (game.board.grid[fromRow][fromCol] === game.board.currentPlayerChecker && game.board.grid[toRow][toCol] === game.board.constructor.openSquare) { + const toRow = parseInt(toWhere / 10); + const toCol = toWhere - toRow * 10; + if (this.board.grid[fromRow][fromCol] === this.board.currentPlayerChecker && this.board.grid[toRow][toCol] === this.board.constructor.openSquare) { switch (true) { - // Player Blue is moving a checker into an open square + // FirstPlayer is moving a checker in a downwards direction into an open square case this.board.currentPlayerColor === this.board.constructor.firstPlayerColor && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: - removeChecker(fromRow, fromCol); - addChecker(toRow, toCol); - togglePlayer(); + this.removeChecker(fromRow, fromCol); + this.addChecker(toRow, toCol); + this.togglePlayer(); break; - case this.board.currentPlayerColor === this.board.constructor.secondPlayerColor && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: - removeChecker(fromRow, fromCol); - addChecker(toRow, toCol); - togglePlayer(); + // SecondPlayer is moving a checker in a upwards direction into an open square + case this.board.currentPlayerColor === this.board.constructor.secondPlayerColor && fromRow - toRow === 1 && Math.abs(toCol - fromCol) === 1: + this.removeChecker(fromRow, fromCol); + this.addChecker(toRow, toCol); + this.togglePlayer(); break; + // + case + } } else { console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}. Player ${this.board.currentPlayerColor}, please submit a valid move.`); } } else { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds. Player ${this.board.currentPlayerColor}, please submit a valid move.`); } }; - - this.validateInput = function (pointer, rowColInput) { - let row = parseInt(rowColInput / 10); - let col = rowColInput - row * 10; - console.log(`Row: ${row} Col: ${col}`); - if (pointer === 'from' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && game.board.grid[row][col] === game.board.currentPlayerChecker) { - fromSquare.row = row; - fromSquare.col = col; - console.log(`Confirmation: Moving from Row:${fromSquare.row} Col:${fromSquare.col}`); - } else if (pointer === 'to' && row >= 0 && col >= 0 && row <= 7 && col <= 7 && Math.abs(fromSquare.row - row) === 1 && Math.abs(fromSquare.col - col) === 1 && game.board.grid[row][col] === game.board.constructor.openSquare) { - if (fromSquare.row) { - game.board.grid[fromSquare.row][fromSquare.col] = game.board.constructor.openSquare; - game.board.grid[row][col] = game.board.currentPlayerChecker; - console.log(`Confirmation: Moved to open cell, Row:${row} Col:${col}`); - game.board.viewGrid(); - toggleUser(); - } - } - }; } function Board () { this.constructor = { name: 'Board', - firstPlayerColor: 'Blue', // Synced with firstPlayerChecker's css color + firstPlayer: { + color: 'Blue', // Must be synced with firstPlayer.checkerCSS's color value + checkerCSS: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', + direction: 1 + }, + secondPlayer: { + color: 'Red', // Must be synced with secondPlayer.checkerCSS's color value + checkerCSS: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', + direction: -1 + }, + firstPlayerColor: 'Blue', // Must be synced with firstPlayerChecker's css color firstPlayerChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', - secondPlayerColor: 'Red', // Synced with secondPlayerChecker's css color + secondPlayerColor: 'Red', // Must be synced with secondPlayerChecker's css color secondPlayerChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', openSquare: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', blackSquare: 'background-color:black; font-size:40px; padding:0px 12px; color:black; line-height:40px;', @@ -86,21 +89,15 @@ function Board () { }; this.currentPlayerColor = this.constructor.firstPlayerColor; this.currentPlayerChecker = this.constructor.firstPlayerChecker; - createCheckers(); - createGrid(); + this.grid = []; + + this.currentPlayer = {...this.constructor.firstPlayer}; - function createCheckers () { - this.checkers = []; - for (let i = 0; i < 24; i++) { - this.checkers.push('placeHolder'); - } - } // The createGrid function creates an 8x8 Checker Board array, // filled with alternating black and white squares. - function createGrid () { + this.createGrid = function () { // @@@@@@@@@@@@@ make below consoleGrid & create 2nd grid for normal program - this.grid = []; // A booleen flag is used to flip between colors. let flag = true; for (let row = 0; row < 8; row++) { @@ -125,7 +122,7 @@ function Board () { } flag = !flag; } - } + }; // prints out the board this.viewGrid = function () { @@ -138,19 +135,12 @@ function Board () { }; } -function c () { - this.move = function (whichPiece, toWhere) { - this.game.moveChecker(whichPiece, toWhere); - }; - - this.reset = function () { - this.game.start(); - }; -} - const game = new Game(); game.start(); -game.board.viewGrid(); + +function move (whichPiece, toWhere) { + game.moveChecker(whichPiece, toWhere); +} /* console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.cornerSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare); From 057f038a3912f03f852d44b0f51ba551008bc475 Mon Sep 17 00:00:00 2001 From: James Walker Date: Wed, 13 Sep 2017 20:27:36 -0500 Subject: [PATCH 05/12] successful variable to object conversion, made board.checkers functional --- 05week/checkersOriginal.js | 46 ++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 5cf92d7ef..95794eef3 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -6,10 +6,11 @@ function Game () { this.start = function () { this.gameInPlay = true; this.board.createGrid(); + this.board.createCheckers(); console.clear(); this.board.viewGrid(); console.log(`Play instructions`); - console.log(`${this.board.currentPlayerColor}'s turn.`); + console.log(`${this.board.currentPlayer.color}'s turn.`); }; this.removeChecker = function (row, col) { @@ -18,22 +19,22 @@ function Game () { }; this.addChecker = function (row, col) { - this.board.grid[row][col] = this.board.currentPlayerChecker; + this.board.grid[row][col] = this.board.currentPlayer.checkerCSS; this.board.checkers.push('placeHolder'); }; this.togglePlayer = function () { - if (this.board.currentPlayerColor === this.board.constructor.firstPlayerColor) { - this.board.currentPlayerColor = this.board.constructor.secondPlayerColor; - this.board.currentPlayerChecker = this.board.constructor.secondPlayerChecker; + if (this.board.currentPlayer.color === this.board.constructor.firstPlayer.color) { + this.board.currentPlayer.color = this.board.constructor.secondPlayer.color; + this.board.currentPlayer.checkerCSS = this.board.constructor.secondPlayer.checkerCSS; } else { - this.board.currentPlayerColor = this.board.constructor.firstPlayerColor; - this.board.currentPlayerChecker = this.board.constructor.firstPlayerChecker; + this.board.currentPlayer.color = this.board.constructor.firstPlayer.color; + this.board.currentPlayer.checkerCSS = this.board.constructor.firstPlayer.checkerCSS; } console.clear(); this.board.viewGrid(); console.log(`Play instructions`); - console.log(`${this.board.currentPlayerColor}'s turn.`); + console.log(`${this.board.currentPlayer.color}'s turn.`); }; this.moveChecker = function (whichPiece, toWhere) { @@ -42,26 +43,24 @@ function Game () { const fromCol = whichPiece - fromRow * 10; const toRow = parseInt(toWhere / 10); const toCol = toWhere - toRow * 10; - if (this.board.grid[fromRow][fromCol] === this.board.currentPlayerChecker && this.board.grid[toRow][toCol] === this.board.constructor.openSquare) { + if (this.board.grid[fromRow][fromCol] === this.board.currentPlayer.checkerCSS && this.board.grid[toRow][toCol] === this.board.constructor.openSquare) { switch (true) { // FirstPlayer is moving a checker in a downwards direction into an open square - case this.board.currentPlayerColor === this.board.constructor.firstPlayerColor && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: + case this.board.currentPlayer.color === this.board.constructor.firstPlayer.color && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: this.removeChecker(fromRow, fromCol); this.addChecker(toRow, toCol); this.togglePlayer(); break; // SecondPlayer is moving a checker in a upwards direction into an open square - case this.board.currentPlayerColor === this.board.constructor.secondPlayerColor && fromRow - toRow === 1 && Math.abs(toCol - fromCol) === 1: + case this.board.currentPlayer.color === this.board.constructor.secondPlayer.color && fromRow - toRow === 1 && Math.abs(toCol - fromCol) === 1: this.removeChecker(fromRow, fromCol); this.addChecker(toRow, toCol); this.togglePlayer(); break; - // - case } - } else { console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}. Player ${this.board.currentPlayerColor}, please submit a valid move.`); } - } else { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds. Player ${this.board.currentPlayerColor}, please submit a valid move.`); } + } else { console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}. Player ${this.board.currentPlayer.color}, please submit a valid move.`); } + } else { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds. Player ${this.board.currentPlayer.color}, please submit a valid move.`); } }; } @@ -78,21 +77,20 @@ function Board () { checkerCSS: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', direction: -1 }, - firstPlayerColor: 'Blue', // Must be synced with firstPlayerChecker's css color - firstPlayerChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', - secondPlayerColor: 'Red', // Must be synced with secondPlayerChecker's css color - secondPlayerChecker: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', openSquare: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', blackSquare: 'background-color:black; font-size:40px; padding:0px 12px; color:black; line-height:40px;', labelSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', cornerSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:white; line-height:40px;' }; - this.currentPlayerColor = this.constructor.firstPlayerColor; - this.currentPlayerChecker = this.constructor.firstPlayerChecker; this.grid = []; - + this.checkers = []; this.currentPlayer = {...this.constructor.firstPlayer}; + this.createCheckers = function () { + for (let i = 0; i < 24; i++) { + this.checkers.push('placeHolder'); + } + }; // The createGrid function creates an 8x8 Checker Board array, // filled with alternating black and white squares. @@ -109,13 +107,13 @@ function Board () { } else { switch (true) { case row <= 2: - this.grid[row].push(this.constructor.firstPlayerChecker); + this.grid[row].push(this.constructor.firstPlayer.checkerCSS); break; case row <= 4: this.grid[row].push(this.constructor.openSquare); break; default: - this.grid[row].push(this.constructor.secondPlayerChecker); + this.grid[row].push(this.constructor.secondPlayer.checkerCSS); } flag = !flag; } From 3fb3721a19145e08fcf488435b8aa94d19924be3 Mon Sep 17 00:00:00 2001 From: James Walker Date: Wed, 13 Sep 2017 21:39:07 -0500 Subject: [PATCH 06/12] successful conversion of all css into object, which simplified code in functions --- 05week/checkersOriginal.js | 72 +++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 39 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 95794eef3..b737e87f0 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -14,22 +14,20 @@ function Game () { }; this.removeChecker = function (row, col) { - this.board.grid[row][col] = this.board.constructor.openSquare; + this.board.grid[row][col] = this.board.constructor.squareCss.open; this.board.checkers.pop; }; this.addChecker = function (row, col) { - this.board.grid[row][col] = this.board.currentPlayer.checkerCSS; + this.board.grid[row][col] = this.board.currentPlayer.checkerCss; this.board.checkers.push('placeHolder'); }; this.togglePlayer = function () { if (this.board.currentPlayer.color === this.board.constructor.firstPlayer.color) { - this.board.currentPlayer.color = this.board.constructor.secondPlayer.color; - this.board.currentPlayer.checkerCSS = this.board.constructor.secondPlayer.checkerCSS; + this.board.currentPlayer = {...this.board.constructor.secondPlayer}; } else { - this.board.currentPlayer.color = this.board.constructor.firstPlayer.color; - this.board.currentPlayer.checkerCSS = this.board.constructor.firstPlayer.checkerCSS; + this.board.currentPlayer = {...this.board.constructor.firstPlayer}; } console.clear(); this.board.viewGrid(); @@ -43,21 +41,15 @@ function Game () { const fromCol = whichPiece - fromRow * 10; const toRow = parseInt(toWhere / 10); const toCol = toWhere - toRow * 10; - if (this.board.grid[fromRow][fromCol] === this.board.currentPlayer.checkerCSS && this.board.grid[toRow][toCol] === this.board.constructor.openSquare) { + debugger + if (this.board.grid[fromRow][fromCol] === this.board.currentPlayer.checkerCss && this.board.grid[toRow][toCol] === this.board.constructor.squareCss.open) { switch (true) { - // FirstPlayer is moving a checker in a downwards direction into an open square - case this.board.currentPlayer.color === this.board.constructor.firstPlayer.color && toRow - fromRow === 1 && Math.abs(toCol - fromCol) === 1: + // Either player moves a checker into an open square + case toRow - fromRow === this.board.currentPlayer.direction && Math.abs(toCol - fromCol) === 1: this.removeChecker(fromRow, fromCol); this.addChecker(toRow, toCol); this.togglePlayer(); break; - // SecondPlayer is moving a checker in a upwards direction into an open square - case this.board.currentPlayer.color === this.board.constructor.secondPlayer.color && fromRow - toRow === 1 && Math.abs(toCol - fromCol) === 1: - this.removeChecker(fromRow, fromCol); - this.addChecker(toRow, toCol); - this.togglePlayer(); - break; - } } else { console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}. Player ${this.board.currentPlayer.color}, please submit a valid move.`); } } else { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds. Player ${this.board.currentPlayer.color}, please submit a valid move.`); } @@ -68,19 +60,21 @@ function Board () { this.constructor = { name: 'Board', firstPlayer: { - color: 'Blue', // Must be synced with firstPlayer.checkerCSS's color value - checkerCSS: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', + color: 'Blue', // Must be synced with firstPlayer.checkerCss's color value + checkerCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', direction: 1 }, secondPlayer: { - color: 'Red', // Must be synced with secondPlayer.checkerCSS's color value - checkerCSS: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', + color: 'Red', // Must be synced with secondPlayer.checkerCss's color value + checkerCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', direction: -1 }, - openSquare: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', - blackSquare: 'background-color:black; font-size:40px; padding:0px 12px; color:black; line-height:40px;', - labelSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', - cornerSquare: 'background-color:white; font-size:40px; padding:0px 12px; color:white; line-height:40px;' + squareCss: { + open: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', + black: 'background-color:black; font-size:40px; padding:0px 12px; color:black; line-height:40px;', + label: 'background-color:white; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', + corner: 'background-color:white; font-size:40px; padding:0px 12px; color:white; line-height:40px;' + } }; this.grid = []; this.checkers = []; @@ -102,18 +96,18 @@ function Board () { this.grid[row] = []; for (let column = 0; column < 8; column++) { if (flag) { - this.grid[row].push(this.constructor.blackSquare); + this.grid[row].push(this.constructor.squareCss.black); flag = !flag; } else { switch (true) { case row <= 2: - this.grid[row].push(this.constructor.firstPlayer.checkerCSS); + this.grid[row].push(this.constructor.firstPlayer.checkerCss); break; case row <= 4: - this.grid[row].push(this.constructor.openSquare); + this.grid[row].push(this.constructor.squareCss.open); break; default: - this.grid[row].push(this.constructor.secondPlayer.checkerCSS); + this.grid[row].push(this.constructor.secondPlayer.checkerCss); } flag = !flag; } @@ -125,9 +119,9 @@ function Board () { // prints out the board this.viewGrid = function () { console.log('\n'); - console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.cornerSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare); + console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.squareCss.corner, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label); for (let i = 0; i < 8; i++) { - console.log(`%c${i}` + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[i][0], this.grid[i][1], this.grid[i][2], this.grid[i][3], this.grid[i][4], this.grid[i][5], this.grid[i][6], this.grid[i][7]); + console.log(`%c${i}` + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[i][0], this.grid[i][1], this.grid[i][2], this.grid[i][3], this.grid[i][4], this.grid[i][5], this.grid[i][6], this.grid[i][7]); } console.log('\n'); }; @@ -141,15 +135,15 @@ function move (whichPiece, toWhere) { } /* -console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.cornerSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare, this.constructor.labelSquare); -console.log('%c0' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[0][0], this.grid[0][1], this.grid[0][2], this.grid[0][3], this.grid[0][4], this.grid[0][5], this.grid[0][6], this.grid[0][7]); -console.log('%c1' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[1][0], this.grid[1][1], this.grid[1][2], this.grid[1][3], this.grid[1][4], this.grid[1][5], this.grid[1][6], this.grid[1][7]); -console.log('%c2' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[2][0], this.grid[2][1], this.grid[2][2], this.grid[2][3], this.grid[2][4], this.grid[2][5], this.grid[2][6], this.grid[2][7]); -console.log('%c3' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[3][0], this.grid[3][1], this.grid[3][2], this.grid[3][3], this.grid[3][4], this.grid[3][5], this.grid[3][6], this.grid[3][7]); -console.log('%c4' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[4][0], this.grid[4][1], this.grid[4][2], this.grid[4][3], this.grid[4][4], this.grid[4][5], this.grid[4][6], this.grid[4][7]); -console.log('%c5' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[5][0], this.grid[5][1], this.grid[5][2], this.grid[5][3], this.grid[5][4], this.grid[5][5], this.grid[5][6], this.grid[5][7]); -console.log('%c6' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[6][0], this.grid[6][1], this.grid[6][2], this.grid[6][3], this.grid[6][4], this.grid[6][5], this.grid[6][6], this.grid[6][7]); -console.log('%c7' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.labelSquare, this.grid[7][0], this.grid[7][1], this.grid[7][2], this.grid[7][3], this.grid[7][4], this.grid[7][5], this.grid[7][6], this.grid[7][7]); +console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.squareCss.corner, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label); +console.log('%c0' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[0][0], this.grid[0][1], this.grid[0][2], this.grid[0][3], this.grid[0][4], this.grid[0][5], this.grid[0][6], this.grid[0][7]); +console.log('%c1' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[1][0], this.grid[1][1], this.grid[1][2], this.grid[1][3], this.grid[1][4], this.grid[1][5], this.grid[1][6], this.grid[1][7]); +console.log('%c2' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[2][0], this.grid[2][1], this.grid[2][2], this.grid[2][3], this.grid[2][4], this.grid[2][5], this.grid[2][6], this.grid[2][7]); +console.log('%c3' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[3][0], this.grid[3][1], this.grid[3][2], this.grid[3][3], this.grid[3][4], this.grid[3][5], this.grid[3][6], this.grid[3][7]); +console.log('%c4' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[4][0], this.grid[4][1], this.grid[4][2], this.grid[4][3], this.grid[4][4], this.grid[4][5], this.grid[4][6], this.grid[4][7]); +console.log('%c5' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[5][0], this.grid[5][1], this.grid[5][2], this.grid[5][3], this.grid[5][4], this.grid[5][5], this.grid[5][6], this.grid[5][7]); +console.log('%c6' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[6][0], this.grid[6][1], this.grid[6][2], this.grid[6][3], this.grid[6][4], this.grid[6][5], this.grid[6][6], this.grid[6][7]); +console.log('%c7' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[7][0], this.grid[7][1], this.grid[7][2], this.grid[7][3], this.grid[7][4], this.grid[7][5], this.grid[7][6], this.grid[7][7]); console.log('\n'); console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', corner, label, label, label, label, label, label, label, label); From e589145e7caf6534e7aaff80cb533b298ee0dca9 Mon Sep 17 00:00:00 2001 From: James Walker Date: Thu, 14 Sep 2017 16:07:01 -0500 Subject: [PATCH 07/12] console.log aspect of game working correctly including requiring second jumps when possible by same player as per checker game rules --- 05week/checkersOriginal.js | 150 ++++++++++++++++++++++--------------- 1 file changed, 88 insertions(+), 62 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index b737e87f0..965c1cfeb 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -7,15 +7,12 @@ function Game () { this.gameInPlay = true; this.board.createGrid(); this.board.createCheckers(); - console.clear(); this.board.viewGrid(); - console.log(`Play instructions`); - console.log(`${this.board.currentPlayer.color}'s turn.`); }; this.removeChecker = function (row, col) { this.board.grid[row][col] = this.board.constructor.squareCss.open; - this.board.checkers.pop; + this.board.checkers.pop(); }; this.addChecker = function (row, col) { @@ -29,30 +26,87 @@ function Game () { } else { this.board.currentPlayer = {...this.board.constructor.firstPlayer}; } - console.clear(); + this.board.currentPlayer.pendingJump = false; this.board.viewGrid(); - console.log(`Play instructions`); - console.log(`${this.board.currentPlayer.color}'s turn.`); }; this.moveChecker = function (whichPiece, toWhere) { - if (parseInt(whichPiece) >= 0 && parseInt(whichPiece) <= 77 && parseInt(toWhere) >= 0 && parseInt(toWhere) <= 77) { - const fromRow = parseInt(whichPiece / 10); - const fromCol = whichPiece - fromRow * 10; - const toRow = parseInt(toWhere / 10); - const toCol = toWhere - toRow * 10; - debugger - if (this.board.grid[fromRow][fromCol] === this.board.currentPlayer.checkerCss && this.board.grid[toRow][toCol] === this.board.constructor.squareCss.open) { - switch (true) { - // Either player moves a checker into an open square - case toRow - fromRow === this.board.currentPlayer.direction && Math.abs(toCol - fromCol) === 1: - this.removeChecker(fromRow, fromCol); - this.addChecker(toRow, toCol); - this.togglePlayer(); - break; - } - } else { console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}. Player ${this.board.currentPlayer.color}, please submit a valid move.`); } - } else { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds. Player ${this.board.currentPlayer.color}, please submit a valid move.`); } + // Error Check -- Return if 'whichPiece' or 'toWhere' is not on the grid + if (parseInt(whichPiece) < 0 || parseInt(whichPiece) > 77 || + parseInt(toWhere) < 0 || parseInt(toWhere) > 77) { + console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds.`); + return; + } + // Determine grid coordinates + const fromRow = parseInt(whichPiece / 10); + const fromCol = whichPiece - fromRow * 10; + const toRow = parseInt(toWhere / 10); + const toCol = toWhere - toRow * 10; + // Error Check -- Return if player does not have a checker at 'whichPiece' + // or 'toWhere' not open + if (this.board.grid[fromRow][fromCol] !== this.board.currentPlayer.checkerCss || + this.board.grid[toRow][toCol] !== this.board.constructor.squareCss.open) { + console.log(`ERROR: Either your checker is not on ${whichPiece} or there is a checker on ${toWhere}.`); + return; + } + // Process single move (no jumps) if move is valid + // Verify that: checker moving in the correct direction, + // both row & col are changed by 1, and player is not on an + // extra move due to an additional available jump + if (toRow - fromRow === this.board.currentPlayer.direction && + Math.abs(toCol - fromCol) === 1 && + this.board.currentPlayer.pendingJump === false) { + this.removeChecker(fromRow, fromCol); + this.addChecker(toRow, toCol); + this.togglePlayer(); + return; + } + // The only remaining possible move is a jump. + // Error Check -- Is it a valid move? + const jumpRow = (toRow + fromRow) / 2; + const jumpCol = (toCol + fromCol) / 2; + if (toRow - fromRow !== this.board.currentPlayer.direction * 2 || + Math.abs(toCol - fromCol) !== 2 || + this.board.grid[jumpRow][jumpCol] !== this.board.currentPlayer.opponentCss) { + console.log(`ERROR: Invalid move. No jump possible here.`); + return; + } + // Process the jump + this.removeChecker(fromRow, fromCol); + this.addChecker(toRow, toCol); + this.removeChecker(jumpRow, jumpCol); + this.board.viewGrid(); + // After a jump the checker must be jumped again, if possible. + // check to see if there is an available jump. + const jumpToLeftRow = toRow + this.board.currentPlayer.direction * 2; + const jumpToLeftCol = toCol - 2; + const jumpToRightRow = jumpToLeftRow; + const jumpToRightCol = toCol + 2; + if (this.canJumpAgain(toRow, toCol, jumpToLeftRow, jumpToLeftCol) || + this.canJumpAgain(toRow, toCol, jumpToRightRow, jumpToRightCol)) { + console.log(`There is another jump available for that checker. It is still ${this.board.currentPlayer.color}'s turn.`); + this.board.currentPlayer.pendingJump = true; + return; + } else { + this.togglePlayer(); + return; + } + }; + + // This will verify that an additional jump can be made. Returns Booleen. + // Will verify that and there is an opposing piece to be jumped and that + // the destination square is open. + this.canJumpAgain = function (fromRow, fromCol, toRow, toCol) { + if (toRow < 0 || toRow > 7 || toCol < 0 || toCol > 7) { + return false; + } + const row = (fromRow + toRow) / 2; + const col = (fromCol + toCol) / 2; + if (this.board.grid[row][col] === this.board.currentPlayer.opponentCss && + this.board.grid[toRow][toCol] === this.board.constructor.squareCss.open) { + return true; + } + return false; }; } @@ -60,14 +114,16 @@ function Board () { this.constructor = { name: 'Board', firstPlayer: { - color: 'Blue', // Must be synced with firstPlayer.checkerCss's color value + color: 'Blue', // Must be synced with checkerCss's color value checkerCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', - direction: 1 + direction: 1, + opponentCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;' }, secondPlayer: { - color: 'Red', // Must be synced with secondPlayer.checkerCss's color value + color: 'Red', // Must be synced with checkerCss's color value checkerCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', - direction: -1 + direction: -1, + opponentCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;' }, squareCss: { open: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:greenyellow; line-height:40px;', @@ -79,6 +135,7 @@ function Board () { this.grid = []; this.checkers = []; this.currentPlayer = {...this.constructor.firstPlayer}; + this.currentPlayer.pendingJump = false; this.createCheckers = function () { for (let i = 0; i < 24; i++) { @@ -118,12 +175,15 @@ function Board () { // prints out the board this.viewGrid = function () { + console.clear(); console.log('\n'); console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.squareCss.corner, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label); for (let i = 0; i < 8; i++) { console.log(`%c${i}` + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[i][0], this.grid[i][1], this.grid[i][2], this.grid[i][3], this.grid[i][4], this.grid[i][5], this.grid[i][6], this.grid[i][7]); } console.log('\n'); + console.log(`Play instructions`); + console.log(`${this.currentPlayer.color}'s turn.`); }; } @@ -134,40 +194,6 @@ function move (whichPiece, toWhere) { game.moveChecker(whichPiece, toWhere); } -/* -console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', this.constructor.squareCss.corner, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label, this.constructor.squareCss.label); -console.log('%c0' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[0][0], this.grid[0][1], this.grid[0][2], this.grid[0][3], this.grid[0][4], this.grid[0][5], this.grid[0][6], this.grid[0][7]); -console.log('%c1' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[1][0], this.grid[1][1], this.grid[1][2], this.grid[1][3], this.grid[1][4], this.grid[1][5], this.grid[1][6], this.grid[1][7]); -console.log('%c2' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[2][0], this.grid[2][1], this.grid[2][2], this.grid[2][3], this.grid[2][4], this.grid[2][5], this.grid[2][6], this.grid[2][7]); -console.log('%c3' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[3][0], this.grid[3][1], this.grid[3][2], this.grid[3][3], this.grid[3][4], this.grid[3][5], this.grid[3][6], this.grid[3][7]); -console.log('%c4' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[4][0], this.grid[4][1], this.grid[4][2], this.grid[4][3], this.grid[4][4], this.grid[4][5], this.grid[4][6], this.grid[4][7]); -console.log('%c5' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[5][0], this.grid[5][1], this.grid[5][2], this.grid[5][3], this.grid[5][4], this.grid[5][5], this.grid[5][6], this.grid[5][7]); -console.log('%c6' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[6][0], this.grid[6][1], this.grid[6][2], this.grid[6][3], this.grid[6][4], this.grid[6][5], this.grid[6][6], this.grid[6][7]); -console.log('%c7' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[7][0], this.grid[7][1], this.grid[7][2], this.grid[7][3], this.grid[7][4], this.grid[7][5], this.grid[7][6], this.grid[7][7]); -console.log('\n'); - - console.log('%cC' + '%c0' + '%c1' + '%c2' + '%c3' + '%c4' + '%c5' + '%c6' + '%c7', corner, label, label, label, label, label, label, label, label); - console.log('%c0' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, blue, black, blue, black, blue, black, blue); - console.log('%c1' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, blue, black, blue, black, blue, black, blue, black); - console.log('%c2' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, blue, black, blue, black, blue, black, blue); - console.log('%c3' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, open, black, open, black, open, black, open, black); - console.log('%c4' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, open, black, open, black, open, black, open); - console.log('%c5' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, red, black, red, black, red, black, red, black); - console.log('%c6' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, black, red, black, red, black, red, black, red); - console.log('%c7' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', label, red, black, red, black, red, black, red, black); - -const grid = [ - [black, blue, black, blue, black, blue, black, blue], - [blue, black, blue, black, blue, black, blue, black], - [black, blue, black, blue, black, blue, black, blue], - [open, black, open, black, open, black, open, black], - [black, open, black, open, black, open, black, open], - [red, black, red, black, red, black, red, black], - [black, red, black, red, black, red, black, red], - [red, black, red, black, red, black, red, black] -]; -*/ - // Tests /******* const assert = require('assert'); From 98729c9df7ebe55ea3ddf0a9dbb0926b0b63c352 Mon Sep 17 00:00:00 2001 From: James Walker Date: Fri, 15 Sep 2017 02:26:32 -0500 Subject: [PATCH 08/12] added comments. updated statements to ES6 --- 05week/checkersOriginal.js | 132 ++++++++++++++++++++++++++----------- 1 file changed, 93 insertions(+), 39 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 965c1cfeb..3586478fc 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -1,37 +1,66 @@ 'use strict'; +// Console Checkers for Two Players +// This is a simplified version of checkers, which is played in the browser's +// console. In this game, there are no kings and players are not required +// to jump an opponent's checker if there is an alternative move (non-jump) +// available. However, if a player jumps once and that checker has additional +// jumps available, the player must either execute the next available jump or +// execute a jump with another checker. If this second checker has additional +// jumps available, then the same rules apply, and so on. + +// Javascript programs may not seek user input from the console, so a work +// around has been used. Players submit their inputs in the form of "move(x,y)" +// which in actuality is a command to execute the move function with x and y +// arguments. In effect, this console game is 'event-driven. + + + function Game () { this.board = new Board(); this.start = function () { this.gameInPlay = true; this.board.createGrid(); - this.board.createCheckers(); this.board.viewGrid(); }; + // This removes a checker from the board. It is used a player makes a move + // from one square to another and when an opposing player's checker is jumped. this.removeChecker = function (row, col) { this.board.grid[row][col] = this.board.constructor.squareCss.open; this.board.checkers.pop(); }; + // This is used to add a player's checker to the board when it is moved. this.addChecker = function (row, col) { this.board.grid[row][col] = this.board.currentPlayer.checkerCss; this.board.checkers.push('placeHolder'); }; + // After the completion of a turn, this is used to flip between the two + // players. The currentPlayer object's color value is compared. Then the + // currentPlayer is changed by making a clone of the constructor object. this.togglePlayer = function () { if (this.board.currentPlayer.color === this.board.constructor.firstPlayer.color) { this.board.currentPlayer = {...this.board.constructor.secondPlayer}; } else { this.board.currentPlayer = {...this.board.constructor.firstPlayer}; } + // the pendingJump value must be added after currentPlayer is cloned this.board.currentPlayer.pendingJump = false; + // Finally, the board is cleared and re-rendered. this.board.viewGrid(); }; + // This function facilitates the movement of the checkers. + // Validation that the move is permissible: correct color checker, Moving + // in correct direction, the correct distance, that the space being Moved + // to is vacant. If a jump is being made, confirms that an opponent's checker + // is correctly positioned to be jumped. If a jump has been made and + // a second move is possible, ensuring that the second move is a jump. this.moveChecker = function (whichPiece, toWhere) { - // Error Check -- Return if 'whichPiece' or 'toWhere' is not on the grid + // Error Check -- Exit if 'whichPiece' or 'toWhere' is not on the grid if (parseInt(whichPiece) < 0 || parseInt(whichPiece) > 77 || parseInt(toWhere) < 0 || parseInt(toWhere) > 77) { console.log(`ERROR: Either ${whichPiece} or ${toWhere} is out of bounds.`); @@ -53,7 +82,7 @@ function Game () { // Verify that: checker moving in the correct direction, // both row & col are changed by 1, and player is not on an // extra move due to an additional available jump - if (toRow - fromRow === this.board.currentPlayer.direction && + if (toRow - fromRow === this.board.currentPlayer.rowOffset && Math.abs(toCol - fromCol) === 1 && this.board.currentPlayer.pendingJump === false) { this.removeChecker(fromRow, fromCol); @@ -65,7 +94,7 @@ function Game () { // Error Check -- Is it a valid move? const jumpRow = (toRow + fromRow) / 2; const jumpCol = (toCol + fromCol) / 2; - if (toRow - fromRow !== this.board.currentPlayer.direction * 2 || + if (toRow - fromRow !== this.board.currentPlayer.rowOffset * 2 || Math.abs(toCol - fromCol) !== 2 || this.board.grid[jumpRow][jumpCol] !== this.board.currentPlayer.opponentCss) { console.log(`ERROR: Invalid move. No jump possible here.`); @@ -77,17 +106,23 @@ function Game () { this.removeChecker(jumpRow, jumpCol); this.board.viewGrid(); // After a jump the checker must be jumped again, if possible. - // check to see if there is an available jump. - const jumpToLeftRow = toRow + this.board.currentPlayer.direction * 2; + // First, the 2 row-col grid positions of where the checker must be + // jumped to are determined. + const jumpToLeftRow = toRow + this.board.currentPlayer.rowOffset * 2; const jumpToLeftCol = toCol - 2; const jumpToRightRow = jumpToLeftRow; const jumpToRightCol = toCol + 2; + // Then these positions are sent to canJumpAgain to determine if either + // one is would be a valid second jump. if (this.canJumpAgain(toRow, toCol, jumpToLeftRow, jumpToLeftCol) || this.canJumpAgain(toRow, toCol, jumpToRightRow, jumpToRightCol)) { + // A second jump is available, so a message is written to the console + // and pendingJump is set to true to prevent the player's next move from + // being a non-jump. console.log(`There is another jump available for that checker. It is still ${this.board.currentPlayer.color}'s turn.`); - this.board.currentPlayer.pendingJump = true; return; } else { + // No more jumps are available, so flip player this.togglePlayer(); return; } @@ -95,7 +130,8 @@ function Game () { // This will verify that an additional jump can be made. Returns Booleen. // Will verify that and there is an opposing piece to be jumped and that - // the destination square is open. + // the destination square is open. pendingJump must also be set to true + // to prevent the player from making a non-jump second move. this.canJumpAgain = function (fromRow, fromCol, toRow, toCol) { if (toRow < 0 || toRow > 7 || toCol < 0 || toCol > 7) { return false; @@ -104,25 +140,39 @@ function Game () { const col = (fromCol + toCol) / 2; if (this.board.grid[row][col] === this.board.currentPlayer.opponentCss && this.board.grid[toRow][toCol] === this.board.constructor.squareCss.open) { + this.board.currentPlayer.pendingJump = true; return true; } + this.board.currentPlayer.pendingJump = false; return false; }; } +// Due to the limited capability to render elements and css properties in the +// console via the console.log() method, the checkerboard is actually an 8x8 +// grid of circles, unicode 25cf. These circles are then styled through CSS to +// appear as squares on a checkerboard in the various states: +// +// Black square: black circle with a black background +// Empty playable square: greenyellow circle on a greenyellow background +// Checker on a playable square: Red or Blue circle on a greenyellow background. +// +// The 8x8 grid is a 2-dimensional array holding the CSS values for the 'square' +// +// function Board () { this.constructor = { name: 'Board', firstPlayer: { color: 'Blue', // Must be synced with checkerCss's color value checkerCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;', - direction: 1, + rowOffset: 1, // Blue checkers move down - row value increases 1 for normal move opponentCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;' }, secondPlayer: { - color: 'Red', // Must be synced with checkerCss's color value + color: 'Red', // Must be synced with checkerCss's color value checkerCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:red; line-height:40px;', - direction: -1, + rowOffset: -1, // Red checkers move up - row value decreases -1 for normal move opponentCss: 'background-color:greenyellow; font-size:40px; padding:0px 12px; color:blue; line-height:40px;' }, squareCss: { @@ -133,37 +183,39 @@ function Board () { } }; this.grid = []; - this.checkers = []; + // Checkers holds 1 element per checker on the board. It is unneeded, but + // was required for testing, so it is filled with placeHolders. + this.checkers = Array(24).fill(0).map((e, i) => 'placeholder'); + // Clone object using ES6 this.currentPlayer = {...this.constructor.firstPlayer}; + // If another jump is available after a jump this flag set to true. Enables + // the same player to get multiples plays on the same turn. this.currentPlayer.pendingJump = false; - this.createCheckers = function () { - for (let i = 0; i < 24; i++) { - this.checkers.push('placeHolder'); - } - }; - - // The createGrid function creates an 8x8 Checker Board array, - // filled with alternating black and white squares. + // The createGrid function creates an 8x8 Checker Board array, filled with + // the CSS needed to render the board in viewGrid() this.createGrid = function () { - // @@@@@@@@@@@@@ make below consoleGrid & create 2nd grid for normal program - // A booleen flag is used to flip between colors. + // A booleen flag is used to flip between playable & non-Playable squares. let flag = true; for (let row = 0; row < 8; row++) { this.grid[row] = []; for (let column = 0; column < 8; column++) { if (flag) { + // Non-playable square this.grid[row].push(this.constructor.squareCss.black); flag = !flag; } else { switch (true) { case row <= 2: + // Playable square. firstPlayer's checker. this.grid[row].push(this.constructor.firstPlayer.checkerCss); break; case row <= 4: + // Playable square. No checker. this.grid[row].push(this.constructor.squareCss.open); break; default: + // Playable square. secondPlayer's checker. this.grid[row].push(this.constructor.secondPlayer.checkerCss); } flag = !flag; @@ -173,7 +225,9 @@ function Board () { } }; - // prints out the board + // In the console.log() method, the special symbol '%c' indicates that CSS + // is used for this entity (string/variable/symbol). Limitations of the + // method make it necessary to write out each entity. this.viewGrid = function () { console.clear(); console.log('\n'); @@ -187,15 +241,15 @@ function Board () { }; } -const game = new Game(); -game.start(); - function move (whichPiece, toWhere) { game.moveChecker(whichPiece, toWhere); } +const game = new Game(); +game.start(); + // Tests -/******* +/***** const assert = require('assert'); const readline = require('readline'); const rl = readline.createInterface({ @@ -203,6 +257,16 @@ const rl = readline.createInterface({ output: process.stdout }); +function getPrompt () { + game.board.viewGrid(); + rl.question('which piece?: ', (whichPiece) => { + rl.question('to where?: ', (toWhere) => { + game.moveChecker(whichPiece, toWhere); + getPrompt(); + }); + }); +} + if (typeof describe === 'function') { describe('Game', () => { it('should have a board', () => { @@ -213,7 +277,7 @@ if (typeof describe === 'function') { }); }); - describe('Game.moveChecker()', function () { + describe ('Game.moveChecker()', function () { it('should move a checker', function () { assert(!game.board.grid[4][1]); game.moveChecker('50', '41'); @@ -233,14 +297,4 @@ if (typeof describe === 'function') { } else { getPrompt(); } - -function getPrompt() { - game.board.viewGrid(); - rl.question('which piece?: ', (whichPiece) => { - rl.question('to where?: ', (toWhere) => { - game.moveChecker(whichPiece, toWhere); - getPrompt(); - }); - }); -} -*******/ +*****/ From 52a729e29347ad428ed18f2568aea6a04fb354ac Mon Sep 17 00:00:00 2001 From: James Walker Date: Fri, 15 Sep 2017 03:16:11 -0500 Subject: [PATCH 09/12] added instructions in console --- 05week/checkersOriginal.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 3586478fc..138ea6c3b 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -12,9 +12,8 @@ // Javascript programs may not seek user input from the console, so a work // around has been used. Players submit their inputs in the form of "move(x,y)" // which in actuality is a command to execute the move function with x and y -// arguments. In effect, this console game is 'event-driven. - - +// arguments. The game design waits the players to call its move function, +// much the same as an event-driven game awaits user-generated events. function Game () { this.board = new Board(); @@ -236,11 +235,16 @@ function Board () { console.log(`%c${i}` + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[i][0], this.grid[i][1], this.grid[i][2], this.grid[i][3], this.grid[i][4], this.grid[i][5], this.grid[i][6], this.grid[i][7]); } console.log('\n'); - console.log(`Play instructions`); - console.log(`${this.currentPlayer.color}'s turn.`); + console.log(`%cInstructions: ` + `%center checker movements by typing: move(xy,ab)`, `font-size:150%; font-weight:bold;`, `font-size:125%;`); + console.log(`%cWhere 'xy' is the checker's current row-col position and 'ab' is its destination.`, `font-size:125%;`); + console.log(`%cExample: move(21,32) Subsequent moves are more easily entered using the up arrow key & editing.`, `font-size:125%;`); + console.log('\n'); + console.log(`%c${this.currentPlayer.color}'s turn.`, `font-size:125%;`); }; } +// This function simply acts as a pointer. It is used to reduce the amount of +// typing that players must make each turn and helps to encapsulate the code. function move (whichPiece, toWhere) { game.moveChecker(whichPiece, toWhere); } @@ -249,7 +253,7 @@ const game = new Game(); game.start(); // Tests -/***** +/***** CAN NOT BE USED (with ease) DUE TO PRESENCE OF ES6 STATEMENTS const assert = require('assert'); const readline = require('readline'); const rl = readline.createInterface({ From ff81fe6f50bbd9177728c57adafa58fc9003c41d Mon Sep 17 00:00:00 2001 From: James Walker Date: Fri, 15 Sep 2017 03:31:47 -0500 Subject: [PATCH 10/12] CSS styled the console instructions. minor tweaks. --- 05week/checkersOriginal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 138ea6c3b..612f96ef6 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -226,7 +226,7 @@ function Board () { // In the console.log() method, the special symbol '%c' indicates that CSS // is used for this entity (string/variable/symbol). Limitations of the - // method make it necessary to write out each entity. + // method make it necessary to write out each entity & use a for loop. this.viewGrid = function () { console.clear(); console.log('\n'); From 77481c5f000d7f2e638ed8d1f57819631820a946 Mon Sep 17 00:00:00 2001 From: James Walker Date: Sun, 1 Oct 2017 23:31:38 -0500 Subject: [PATCH 11/12] striving to make checkers capabale of being checked without the node require. wip --- 05week/checkersOriginal.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/05week/checkersOriginal.js b/05week/checkersOriginal.js index 612f96ef6..db8317ffc 100644 --- a/05week/checkersOriginal.js +++ b/05week/checkersOriginal.js @@ -22,6 +22,7 @@ function Game () { this.gameInPlay = true; this.board.createGrid(); this.board.viewGrid(); + getPrompt(); }; // This removes a checker from the board. It is used a player makes a move @@ -235,7 +236,7 @@ function Board () { console.log(`%c${i}` + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf' + '%c\u25cf', this.constructor.squareCss.label, this.grid[i][0], this.grid[i][1], this.grid[i][2], this.grid[i][3], this.grid[i][4], this.grid[i][5], this.grid[i][6], this.grid[i][7]); } console.log('\n'); - console.log(`%cInstructions: ` + `%center checker movements by typing: move(xy,ab)`, `font-size:150%; font-weight:bold;`, `font-size:125%;`); + console.log(`%cCONSOLE CHECKERS ` + `%cInstructions: ` + `%center checker movements by typing: move(xy,ab)`, `font-size:150%; font-weight:bold; color:blue`, `font-size:150%; font-weight:bold;`, `font-size:125%;`); console.log(`%cWhere 'xy' is the checker's current row-col position and 'ab' is its destination.`, `font-size:125%;`); console.log(`%cExample: move(21,32) Subsequent moves are more easily entered using the up arrow key & editing.`, `font-size:125%;`); console.log('\n'); @@ -249,11 +250,7 @@ function move (whichPiece, toWhere) { game.moveChecker(whichPiece, toWhere); } -const game = new Game(); -game.start(); - // Tests -/***** CAN NOT BE USED (with ease) DUE TO PRESENCE OF ES6 STATEMENTS const assert = require('assert'); const readline = require('readline'); const rl = readline.createInterface({ @@ -261,6 +258,9 @@ const rl = readline.createInterface({ output: process.stdout }); +const game = new Game(); +game.start(); + function getPrompt () { game.board.viewGrid(); rl.question('which piece?: ', (whichPiece) => { @@ -301,4 +301,3 @@ if (typeof describe === 'function') { } else { getPrompt(); } -*****/ From 4156394dafc86154659cc17210b90187df3ac3b2 Mon Sep 17 00:00:00 2001 From: James Walker Date: Sun, 1 Oct 2017 23:35:56 -0500 Subject: [PATCH 12/12] replace var with const --- 03week/towersOfHanoi.js | 2 +- simpleStarWars/app.css | 54 +++++++++++++++++++++++++++++ simpleStarWars/app.js | 73 +++++++++++++++++++++++++++++++++++++++ simpleStarWars/index.html | 18 ++++++++++ simpleStarWars/tester.js | 21 +++++++++++ 5 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 simpleStarWars/app.css create mode 100644 simpleStarWars/app.js create mode 100644 simpleStarWars/index.html create mode 100644 simpleStarWars/tester.js diff --git a/03week/towersOfHanoi.js b/03week/towersOfHanoi.js index 35c3ce280..4946e25dd 100644 --- a/03week/towersOfHanoi.js +++ b/03week/towersOfHanoi.js @@ -1,6 +1,6 @@ 'use strict'; -var stacks = { +const stacks = { a: [4, 3, 2, 1], b: [], c: [] diff --git a/simpleStarWars/app.css b/simpleStarWars/app.css new file mode 100644 index 000000000..187533281 --- /dev/null +++ b/simpleStarWars/app.css @@ -0,0 +1,54 @@ +.app { + text-align: center; + background-color: black; + width: 500px; +} + +#title { + background-color: black; + height: 20px; + padding: 30px; + color: blue; +} + +.name { + height: 35px; + width: 150px; + color: white; + background-color: blue; +} + +.spacer { + height: 35px; + width: 60px; + color: black; + background-color: black; +} + +.gender { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} + +.hair { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} + +.eyes { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} + +.year { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} diff --git a/simpleStarWars/app.js b/simpleStarWars/app.js new file mode 100644 index 000000000..db2e6baf3 --- /dev/null +++ b/simpleStarWars/app.js @@ -0,0 +1,73 @@ +'use strict'; + +class StarWars extends React.Component { + constructor (props) { + super(props); + this.resetState = { + characters: [] + }; + this.state = {...this.resetState}; + } + + componentDidMount () { + fetch('https://swapi.co/api/people/') + .then((response) => response.json()) + .then((responseJson) => { + return this.setState({characters: responseJson.results}); + }) + .catch((error) => { + console.error(error); + }); + } + + renderCharacterDataHeadings () { + return ( + + Name + . + Gender + Hair + Eyes + Birth + + ); + } + + renderCharacterData () { + return ( + this.state.characters.map((character, index) => { + return ( + + this.handleChange(e)} key={`Name-${index}`} data-characterName={character.name} className='name'>{character.name} + . + {character.gender} + {character.hair_color} + {character.eye_color} + {character.birth_year} + + ); + }) + ); + } + + render () { + if (!this.state.characters.length) { + return ( +

error loading data from api

+ ); + } + return ( +
+

Star Wars Trivia Matchup

+ + + {this.renderCharacterDataHeadings()} + {this.renderCharacterData()} + +
+
+ ); + } +} + +ReactDOM.render(, document.getElementById('game')); diff --git a/simpleStarWars/index.html b/simpleStarWars/index.html new file mode 100644 index 000000000..3468a5a81 --- /dev/null +++ b/simpleStarWars/index.html @@ -0,0 +1,18 @@ + + + + + Star Wars Trivia Game + + + +
+ + + + diff --git a/simpleStarWars/tester.js b/simpleStarWars/tester.js new file mode 100644 index 000000000..dba603a7e --- /dev/null +++ b/simpleStarWars/tester.js @@ -0,0 +1,21 @@ +function duplicateCount (text) { + let characters = {}; + let count = 0; + for (let char of text) { + char.toLowerCase(); + if (!characters.hasOwnProperty(char)) { + characters[char] = 1; + } else if (characters[char] === 1) { + characters[char] = 2; + count++; + } + } + return count; +} + +console.log(duplicateCount('')); +console.log(duplicateCount('abcde')); +console.log(duplicateCount('aabbcde')); +console.log(duplicateCount('aabBcde')); +console.log(duplicateCount('Indivisibility')); +console.log(duplicateCount('Indivisibilities'));