cmauban
commented
9 years ago Journal Week 4
You know the drill: reflective entry done, tutorial entry draft for Monday, 2x :+1: for each. You've got this.
Reading APIs
Here's your next batch of questions for the Github API, which you'll need for the last leg of our Github Revolution:
- How can I use the Github API to...
- get all the comments for a particular issue?
- add a comment to an issue?
And since libraries like jQuery and Lodash have feelings... I mean APIs, too, read through some of the documentation to answer these questions:
- How can I use the jQuery API to...
- get the HTML contents of an element?
- create a new HTML element?
- add an HTML element to the page?
- How can I use the Lodash API to...
- replace placeholders with values from an object?
- repeat code for every item of an array?
The Chessboard: It's Baaaaaack.
"Chess won't stay dead."
Time for a reboot. Chess won't defeat us! We're trying again, and this time, we'll win.
First, reset your tests.js and main.js. Wipe everything clean, except your 8x8 grid.
Use the Starting Point provided and write tests with mocha and chai in the browser for the API described; put the mocha boilerplate in a new file called tests.html. The tests should really have their own file, too; let's call it js/tests.js. What happens when you use browser-sync to view tests.html...? Maybe link some <scripts>, and don't forget the chai!
Start with tested Model-layer code that represents the current state of the board and each move in the game. How can we navigate through the game, move by move? How could we back up a step? Start over? Skip to the finish?
Feel free to use tracer bullets and interactive debugging to help you understand the internal state of the application, but don't leave breakpoints or tracer bullets lying around in your submitted code, please. Always start with "EnglishScript" -- pseudocode -- that explains your intent, so you have something to submit.
BEAST MODE
The next step is wiring up that core game logic to the visual representation of the board in HTML. How can we update the HTML -- the View-layer -- when a change occurs in the Model-layer? How can we signal the Model-layer that an interactive event -- clicking a button -- has occurred in the View-layer? That sounds like View Helpers and Controllers to me!
Write pseudocode for some of the Controllers -- Event Listeners and their associated callbacks -- and View Helpers -- Functions that just update the View. We'll need both of them to make this ship sail!
NIGHTMARE MODE
Can you write tested code for those View Helpers? How would you even write tests for that? Hmm... Give it a swing and document what approach you took in code comments. You'll may run into some difficulty; don't bulldog it. Write up your experience and what challenges you encountered.
Starting Point
(function(globals){
// Don't worry if that seems a little funky...
/**
* Internal representation of the game board in its current state.
*
* @see game.board
* @see game.tracer
* @see initial
* @var {Array} of {Array} of {String|null}
*/
var board = initial(); // initialize the `board`
/**
* List of moves for the "Catalan Opening: Closed Variation" suitable for use
* as arguments to `applyMove` below.
*
* @see applyMove
* @var {Array} of...?
*/
var moves = [
// TODO: Fill me in!
]; // END moves
// var current; TODO: do we need this?
// You don't need to understand `globals` yet...
var game = globals.game = {
/**
* Provide a _copy_ of the game board in order to update the View from it
*
* @return {Array} of {Array} of {String|null}
*/
board: function(){
return board.map(function(row){
return row.slice();
});
},
/**
* Reset the internal game board to it's initial state.
*
* @return {Object} the game object for Method Chaining
*/
reset: function(){
board = initial();
return this;
},
/**
* Advance the internal game board to the next move.
*
* @return {Object} the game object for Method Chaining
* @todo Make this work!
*/
next: function(){
// Doesn't this seem to be missing something?
return this;
},
/**
* Advance the internal game board to the previous move.
*
* @return {Object} the game object for Method Chaining
* @todo Make this work!
*/
prev: function(){
// Another good place for code...
return this;
},
/**
* Advance the internal game board to the last move.
*
* @return {Object} the game object for Method Chaining
* @todo Make this work!
*/
end: function(){
// Write some code here...
return this;
},
/**
* Provide a printable representation of the game board for use as a tracer
*
* @return {String} representation of `board`
* @todo Refactor to use Array methods?
*/
tracer: function(){
var bullet = '';
for ( var rank = 0; rank < board.length; rank++ ){
bullet += '|';
for ( var file = 0; file < board[rank].length; file++ ){
bullet += board[rank][file] || ' |';
}
bullet += '\n';
}
return bullet;
},
/**
* Apply a move to the game board, given a `from` and `to` position that both
* contain values for `rank` and `file`.
*
* @param {Object} from with `rank` and `file`
* @param {Object} to with `rank` and `file`
* @return undefined
*
* @todo Fill me in! ...and remove this comment.
*/
function applyMove(from, to){
// You should write something in here...
} // END applyMove
}; // END game
/**
* Provide the initial state of the game board, useful for any game.
*
* @return {Array} of {Array} of {String|null}
*/
function initial(){
return [
[ 'R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R' ],
[ 'P', 'P', 'P', 'P', 'P', 'P', 'P', 'P' ],
Array(8).fill(null),
Array(8).fill(null),
Array(8).fill(null),
Array(8).fill(null),
[ 'p', 'p', 'p', 'p', 'p', 'p', 'p', 'p' ],
[ 'r', 'n', 'b', 'q', 'k', 'b', 'n', 'r' ],
];
} // END initial
// You are not expected to understand anything below this line...
})(window || module && module.exports || this);
kellymurray
al-the-x
TIY-Assignmentsnamed18--night-of-the-chessboardfrommasterUSERNAME.GitHub.io:journal-week-4journal-week-4.mdor something creativetutorial-week-4.mdor something creativeTIY-Assignments:18--night-of-the-chessboardCheatSheets/GitHubAPI.mdTIY-Chessboard:chess-2.0USERNAME.GitHub.iofromjournal-week-4intomasterTIY-Assignmentsfrom18--night-of-the-chessboardintomasterTIY-Chessboard:chess-2.0js/main.jstests.html(see below)chaiintests.html... CDN, anyone?requirewon't work here... justmocha.it!game.board...? What does it do?game.reset? What does it return? Any side-effects?game.applyMove?game.applyMoveis cheating;game.next...!game.resetis more interesting?game.nextbut can yougame.prev...?game.endis really a lot ofgame.next...game.play, tho... How U evensetInterval?