{{title}}
"; 7 | 8 | var after = before.replace("{{title}}", "Fitness App v1.0 Live!"); 9 | 10 | console.log(before); 11 | console.log(after); 12 | 13 | 14 | 15 | /* Further Adventures 16 | * 17 | * 1) Run the program. 18 | * 19 | * 2) Declare a title variable and assign it 20 | * a value; 21 | * 22 | * 3) Use before.replace to replace the {{title}} 23 | * placeholder with the value of the title 24 | * variable, rather than with a string literal. 25 | * 26 | * 4) Include a second placeholder in the 27 | * original string. 28 | * 29 | * 5) Use the replace method to fill both your 30 | * placeholder and {{title}} with a value. 31 | * 32 | */ 33 | -------------------------------------------------------------------------------- /Ch19_Templates/listing19.03.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 19.03 3 | * Chaining calls to replace 4 | */ 5 | 6 | var data = { 7 | author : "Oskar", 8 | social : "@appOskar51" 9 | }; 10 | 11 | var before = "Follow {{author}} {{social}}"; 12 | 13 | var after = before 14 | .replace("{{author}}", data.author) 15 | .replace("{{social}}", data.social); 16 | 17 | console.log(before); 18 | console.log(after); 19 | 20 | 21 | 22 | /* Further Adventures 23 | * 24 | * 1) Run the program. 25 | * 26 | * 2) Replace the author property in the data 27 | * with two new properties: firstName 28 | * and lastName. 29 | * 30 | * 3) Update the placeholders in the before 31 | * string to use the new properties. 32 | * 33 | * 4) Update the calls to the replace method 34 | * so all three placeholders are filled 35 | * with data. 36 | * 37 | */ 38 | -------------------------------------------------------------------------------- /Ch19_Templates/listing19.05.js: -------------------------------------------------------------------------------- 1 | // Get Programming with JavaScript 2 | // Listing 19.05 3 | // Using a while loop to count 4 | 5 | var count = 1; 6 | 7 | while (count < 11) { 8 | console.log(count); 9 | count++; 10 | } 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Run the program. 17 | * 18 | * 2) Change the program so it 19 | * counts down from 10 to 1. 20 | * 21 | * 3) Change it so it shows all 22 | * the odd numbers from 1 to 100. 23 | * 24 | * 4) Create an array of numbers and 25 | * assign it to a variable. 26 | * 27 | * e.g. var nums = [2, 7, 1, 9]; 28 | * 29 | * 5) Use a while loop to display 30 | * the elements of the array. 31 | * 32 | * Hint: console.log(nums[count]) 33 | * 34 | */ 35 | -------------------------------------------------------------------------------- /Ch19_Templates/listing19.06.js: -------------------------------------------------------------------------------- 1 | // Get Programming with JavaScript 2 | // Listing 19.06 3 | // Using a while loop with replace 4 | 5 | var template = "{{title}} by {{author}}. Follow {{author}} {{social}}"; 6 | 7 | var filled = template; 8 | 9 | console.log("Starting replacement..."); 10 | 11 | while (filled.indexOf("{{author}}") !== -1) { 12 | filled = filled.replace("{{author}}", "Oskar"); 13 | console.log(filled); 14 | } 15 | 16 | console.log("...replacement finished."); 17 | 18 | 19 | 20 | 21 | /* Further Adventures 22 | * 23 | * 1) Run the program. 24 | * 25 | * 2) Create your own replace function. Move 26 | * the while loop into your function. The 27 | * function should accept three arguments: 28 | * template, placeholder and data. 29 | * 30 | * Declaration: 31 | * function replace (template, placeholder, data) { 32 | * // use a while loop to replace 33 | * // the placeholder in the template 34 | * // with its data 35 | * } 36 | * 37 | * Invocation: 38 | * var filled = replace(myTemplate, "{{title}}", "My Title") 39 | * 40 | */ 41 | -------------------------------------------------------------------------------- /Ch19_Templates/listing19.11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Fitness App News
11 | 12 |
13 |
14 |
15 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/Ch19_Templates/listing19.12.js:
--------------------------------------------------------------------------------
1 | /* Get Programming with JavaScript
2 | * Listings 19.11 and 19.12
3 | * A modular news page
4 | */
5 |
6 | (function () {
7 | "use strict";
8 |
9 | var templateScript = document.getElementById("newsItemTemplate");
10 | var templateString = templateScript.innerHTML;
11 | var newsContainer = document.getElementById("news");
12 |
13 |
14 | var newsData = fitnessApp.news.getItems(3);
15 |
16 | newsContainer.innerHTML = gpwj.templates.fillList(templateString, newsData);
17 |
18 | })();
19 |
20 |
21 |
22 | /* Further Adventures
23 | *
24 | * 1) Create a showItems function that
25 | * displays a specified number of
26 | * news items on the page.
27 | *
28 | * e.g. showItems(3)
29 | *
30 | * 2) Add a drop-down list to the page
31 | * so the reader can choose the number
32 | * of items to display.
33 | *
34 | * 3) Create an update function that reads
35 | * the number of items to display from
36 | * the drop-down list and then calls
37 | * showItems with the specified number.
38 | *
39 | * 4) Add a 'show' button that calls the
40 | * update function when clicked.
41 | *
42 | */
43 |
--------------------------------------------------------------------------------
/Ch19_Templates/listing19.14.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Listing 19.14
3 | // A message view using templates
4 | // Depends on gpwj.templates
5 |
6 | (function () {
7 | "use strict";
8 |
9 | var messageDiv = document.getElementById("messages");
10 | var templateScript = document.getElementById("messageTemplate");
11 | var template = templateScript.innerHTML;
12 |
13 | function render (message) {
14 | var data = { message: message };
15 | messageDiv.innerHTML = gpwj.templates.fill(template, data);
16 | }
17 |
18 | function clear () {
19 | messageDiv.innerHTML = "";
20 | }
21 |
22 | if (window.theCrypt === undefined) {
23 | window.theCrypt = {};
24 | }
25 |
26 | theCrypt.messageView = {
27 | render: render,
28 | clear: clear
29 | };
30 |
31 | })();
32 |
--------------------------------------------------------------------------------
/Ch19_Templates/listing19.15.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Listing 19.15
3 | // A player view using templates
4 | // Depends on gpwj.templates
5 |
6 | (function () {
7 | "use strict";
8 |
9 | var playerDiv = document.getElementById("player");
10 | var playerScript = document.getElementById("playerTemplate");
11 | var itemScript = document.getElementById("itemTemplate");
12 |
13 | var playerTemplate = playerScript.innerHTML;
14 | var itemTemplate = itemScript.innerHTML;
15 |
16 | function render (player) {
17 | var data = player.getData();
18 | var itemsDiv;
19 |
20 | var items = data.items.map(function (itemName) {
21 | return { item : itemName };
22 | });
23 |
24 | playerDiv.innerHTML = gpwj.templates.fill(playerTemplate, data);
25 |
26 | itemsDiv = document.getElementById("playerItems");
27 | itemsDiv.innerHTML = gpwj.templates.fillList(itemTemplate, items);
28 | }
29 |
30 | if (window.theCrypt === undefined) {
31 | window.theCrypt = {};
32 | }
33 |
34 | theCrypt.playerView = {
35 | render: render
36 | };
37 |
38 | })();
39 |
--------------------------------------------------------------------------------
/Ch20_XHR/listing20.01.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Listing 20.01
3 | // Using an XHR object to load user data
4 |
5 | var xhr = new XMLHttpRequest();
6 | var url = "http://output.jsbin.com/qiwizo.json";
7 |
8 | xhr.addEventListener("load", function () {
9 | console.log(xhr.responseText);
10 | });
11 |
12 | xhr.open("GET", url);
13 | xhr.send();
14 |
15 |
16 |
17 | /* Further Adventures
18 | *
19 | * 1) Run the program to see the data load.
20 | *
21 | * 2) Change the URL to pobapa.json
22 | * instead of qiwizo.json and
23 | * run the program again.
24 | *
25 | */
26 |
--------------------------------------------------------------------------------
/Ch20_XHR/listing20.02.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Listing 20.02
3 | // Parsing JSON text to obtain a JavaScript object
4 |
5 | var xhr = new XMLHttpRequest();
6 | var url = "http://output.jsbin.com/qiwizo.json";
7 |
8 | xhr.addEventListener("load", function () {
9 | var data = JSON.parse(xhr.responseText);
10 | console.log(data);
11 | });
12 |
13 | xhr.open("GET", url);
14 | xhr.send();
15 |
16 |
17 | /* Further Adventures
18 | *
19 | * 1) Run the program.
20 | *
21 | * Once loaded, the data is converted
22 | * into a JavaScript object you can use.
23 | *
24 | * 2) Add more console.log lines inside
25 | * the event listener function:
26 | *
27 | * console.log(data.name);
28 | * console.log(data.duration);
29 | * console.log(data.sessions[0]);
30 | *
31 | * 3) At the console prompt,
32 | * try to access the data variable:
33 | *
34 | * > data
35 | *
36 | * Why is there an error?
37 | *
38 | */
39 |
--------------------------------------------------------------------------------
/Ch20_XHR/listing20.05.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Ch20_XHR/listing20.06.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Listings 20.05 and 20.06
3 | // The fitness app
4 |
5 | var app = fitnessApp.init("qiwizo");
6 |
7 | // pobapa - Obinna
8 | // qapavi - Liang
9 | // qiwizo - Mahesha
10 |
11 |
12 | /* Further Adventures
13 | *
14 | * 1) Run the program.
15 | *
16 | * 2) Log some sessions:
17 | *
18 | * > app.log("2017-02-07", 20)
19 | *
20 | * 3) Load another user:
21 | *
22 | * > app.loadUser("pobapa")
23 | * > app.log("2017-02-10", 45)
24 | *
25 | */
26 |
--------------------------------------------------------------------------------
/Ch20_XHR/listing20.07.json:
--------------------------------------------------------------------------------
1 | {
2 | "title" : "The Kitchen",
3 | "id" : "qulude",
4 | "description" : "You are in a kitchen. There is a disturbing smell.",
5 | "items" : [ "a piece of cheese" ],
6 | "exits" : [
7 | {
8 | "direction" : "south",
9 | "to" : "The Old Library",
10 | "id" : "kacaluy"
11 | },
12 | {
13 | "direction" : "west",
14 | "to" : "The Kitchen Garden",
15 | "id" : "xulare"
16 | },
17 | {
18 | "direction" : "east",
19 | "to" : "The Kitchen Cupboard",
20 | "id" : "jodeyo"
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/Ch20_XHR/listing20.11.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Listing 20.11
3 | // The Crypt
4 |
5 | var playerName = "Kandra";
6 | var firstPlaceId = "vitewib";
7 |
8 | game.init(firstPlaceId, playerName);
9 |
--------------------------------------------------------------------------------
/Ch21_Conclusion/TheCrypt/img/rock2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch21_Conclusion/TheCrypt/img/rock2.jpg
--------------------------------------------------------------------------------
/Ch21_Conclusion/TheCrypt/img/sand2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch21_Conclusion/TheCrypt/img/sand2.jpg
--------------------------------------------------------------------------------
/Ch21_Conclusion/TheCrypt/js/messageView.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Chapter 21
3 | // A message view using templates
4 | // Depends on gpwj.templates
5 |
6 | (function () {
7 | "use strict";
8 |
9 | var messageDiv = document.getElementById("messages");
10 | var templateScript = document.getElementById("messageTemplate");
11 | var template = templateScript.innerHTML;
12 |
13 | function render (message) {
14 | var data = { message: message };
15 | messageDiv.innerHTML = gpwj.templates.fill(template, data);
16 | }
17 |
18 | function clear () {
19 | messageDiv.innerHTML = "";
20 | }
21 |
22 | if (window.theCrypt === undefined) {
23 | window.theCrypt = {};
24 | }
25 |
26 | theCrypt.messageView = {
27 | render: render,
28 | clear: clear
29 | };
30 |
31 | })();
32 |
--------------------------------------------------------------------------------
/Ch21_Conclusion/TheCrypt/js/playerView.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Chapter 21
3 | // A player view using templates
4 | // Depends on gpwj.templates
5 |
6 | (function () {
7 | "use strict";
8 |
9 | var playerDiv = document.getElementById("player");
10 | var playerScript = document.getElementById("playerTemplate");
11 | var itemScript = document.getElementById("itemTemplate");
12 |
13 | var playerTemplate = playerScript.innerHTML;
14 | var itemTemplate = itemScript.innerHTML;
15 |
16 | function render (player) {
17 | var data = player.getData();
18 | var itemsDiv;
19 |
20 | var items = data.items.map(function (itemName) {
21 | return { item : itemName };
22 | });
23 |
24 | playerDiv.innerHTML = gpwj.templates.fill(playerTemplate, data);
25 |
26 | itemsDiv = document.getElementById("playerItems");
27 | itemsDiv.innerHTML = gpwj.templates.fillList(itemTemplate, items);
28 | }
29 |
30 | if (window.theCrypt === undefined) {
31 | window.theCrypt = {};
32 | }
33 |
34 | theCrypt.playerView = {
35 | render: render
36 | };
37 |
38 | })();
39 |
--------------------------------------------------------------------------------
/Ch21_Conclusion/TheCrypt/js/template.js:
--------------------------------------------------------------------------------
1 | // Get Programming with JavaScript
2 | // Chapter 21
3 | // The templates module
4 |
5 | (function () {
6 | "use strict";
7 |
8 | function fill (template, data) {
9 | Object.keys(data).forEach(function (key) {
10 | var placeholder = "{{" + key + "}}";
11 | var value = data[key];
12 |
13 | while (template.indexOf(placeholder) !== -1) {
14 | template = template.replace(placeholder, value);
15 | }
16 | });
17 |
18 | return template;
19 | }
20 |
21 | function fillList (template, dataArray) {
22 | var listString = "";
23 |
24 | dataArray.forEach(function (data) {
25 | listString += fill(template, data);
26 | });
27 |
28 | return listString;
29 | }
30 |
31 | if (window.gpwj === undefined) {
32 | window.gpwj = {};
33 | }
34 |
35 | gpwj.templates = {
36 | fill: fill,
37 | fillList: fillList
38 | };
39 |
40 | })();
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/Ch21_Conclusion/chapter21.md:
--------------------------------------------------------------------------------
1 | # Chapter 21 - Conclusion: get programming with JavaScript
2 |
3 | The folder called The Crypt contains the modules needed to play the game. Open theCrypt.html in a browser.
4 |
--------------------------------------------------------------------------------
/Ch22_Node/between.js:
--------------------------------------------------------------------------------
1 | var between = function (lowest, highest) {
2 | var range = highest - lowest + 1;
3 | return lowest + Math.floor(Math.random() * range);
4 | };
5 |
6 | module.exports = between;
--------------------------------------------------------------------------------
/Ch22_Node/chapter22.md:
--------------------------------------------------------------------------------
1 | # Chapter 22 - Node: running JavaScript outside the browser
--------------------------------------------------------------------------------
/Ch22_Node/fruit.js:
--------------------------------------------------------------------------------
1 | var between = require('./between');
2 |
3 | var fruit = ['Apple', 'Orange', 'Lime', 'Lemon', 'Strawberry',
4 | 'Cranberry', 'Banana', 'Pineapple', 'Mango', 'Kumquat'];
5 |
6 | var fruitIndex = between(0, 9);
7 |
8 | console.log(fruit[fruitIndex]);
--------------------------------------------------------------------------------
/Ch22_Node/hello.js:
--------------------------------------------------------------------------------
1 | console.log("Hello World!");
--------------------------------------------------------------------------------
/Ch22_Node/jahvers-crypt/lib/game.js:
--------------------------------------------------------------------------------
1 | var buildMap = require('./mapBuilder');
2 |
3 | function Game (id, mapData) {
4 | this.id = id;
5 | this._players = [];
6 |
7 | this._firstPlace = buildMap(mapData);
8 | }
9 |
10 | Game.prototype = {
11 | getPlayersInPlace: function (placeTitle, playerToOmit) {
12 | var playersInPlace = [];
13 |
14 | this._players.forEach(function (player) {
15 |
16 | if (player !== playerToOmit) {
17 |
18 | var playerPlace = player.getPlace().getData();
19 |
20 | if (playerPlace.title === placeTitle) {
21 | playersInPlace.push(player.getData());
22 | }
23 |
24 | }
25 |
26 | });
27 |
28 | return playersInPlace;
29 | },
30 |
31 | addPlayer: function (player) {
32 | this._players.push(player);
33 | player.setPlace(this._firstPlace);
34 | }
35 | };
36 |
37 | module.exports = Game;
--------------------------------------------------------------------------------
/Ch22_Node/jahvers-crypt/lib/place.js:
--------------------------------------------------------------------------------
1 | var Place = function (title, description) {
2 | var exits = {};
3 | var items = [];
4 | var challenges = {};
5 |
6 | this.addItem = function (item) {
7 | items.push(item);
8 | };
9 |
10 | this.getLastItem = function () {
11 | return items.pop();
12 | };
13 |
14 | this.addExit = function (direction, exit) {
15 | exits[direction] = exit;
16 | };
17 |
18 | this.getExit = function (direction) {
19 | return exits[direction];
20 | };
21 |
22 | this.addChallenge = function (direction, challenge) {
23 | challenges[direction] = challenge;
24 | };
25 |
26 | this.getChallenge = function (direction) {
27 | return challenges[direction];
28 | };
29 |
30 | this.getData = function () {
31 | var data = {
32 | "title" : title,
33 | "description" : description,
34 | "items" : items.slice(),
35 | "exits" : Object.keys(exits)
36 | };
37 |
38 | return data;
39 | };
40 | };
41 |
42 | module.exports = Place;
--------------------------------------------------------------------------------
/Ch22_Node/jahvers-crypt/lib/player.js:
--------------------------------------------------------------------------------
1 | var Player = function (name, health) {
2 | var items = [];
3 | var place = null;
4 |
5 | this.addItem = function (item) {
6 | items.push(item);
7 | };
8 |
9 | this.hasItem = function (item) {
10 | return items.indexOf(item) !== -1;
11 | };
12 |
13 | this.removeItem = function (item) {
14 | var itemIndex = items.indexOf(item);
15 | if (itemIndex !== -1) {
16 | items.splice(itemIndex, 1);
17 | }
18 | };
19 |
20 | this.setPlace = function (destination) {
21 | place = destination;
22 | };
23 |
24 | this.getPlace = function () {
25 | return place;
26 | };
27 |
28 | this.applyDamage = function (damage) {
29 | health = health - damage;
30 | };
31 |
32 | this.getData = function () {
33 | var data = {
34 | "name" : name,
35 | "health" : health,
36 | "items" : items.slice()
37 | };
38 |
39 | if (place !== null) {
40 | data.place = place.getData().title;
41 | }
42 |
43 | return data;
44 | };
45 | };
46 |
47 | module.exports = Player;
--------------------------------------------------------------------------------
/Ch22_Node/jahvers-crypt/replTest/playerGameTest.js:
--------------------------------------------------------------------------------
1 | var Game = require('../lib/game');
2 | var PlayerGame = require('../lib/playerGame');
3 | var mapData = require('../maps/theDarkHouse');
4 |
5 | var game = new Game(1, mapData);
6 |
7 | var dax = new PlayerGame('Dax', game);
8 | var kandra = new PlayerGame('Kandra', game);
9 | var jahver = new PlayerGame('Jahver', game);
--------------------------------------------------------------------------------
/Ch22_Node/multifruit.js:
--------------------------------------------------------------------------------
1 | var between = require('./between');
2 |
3 | var fruit = ['Apple', 'Orange', 'Lime', 'Lemon', 'Strawberry',
4 | 'Cranberry', 'Banana', 'Pineapple', 'Mango', 'Kumquat'];
5 |
6 | var i, fruitIndex;
7 |
8 | for (i = 1; i < 6; i++) {
9 | fruitIndex = between(0, 9);
10 | console.log(fruit[fruitIndex]);
11 | }
--------------------------------------------------------------------------------
/Ch22_Node/multifruitWhile.js:
--------------------------------------------------------------------------------
1 | var between = require('./between');
2 |
3 | var fruit = ['Apple', 'Orange', 'Lime', 'Lemon', 'Strawberry',
4 | 'Cranberry', 'Banana', 'Pineapple', 'Mango', 'Kumquat'];
5 |
6 | var i, fruitIndex;
7 |
8 | i = 1;
9 |
10 | while (i < 6) {
11 |
12 | fruitIndex = between(0, 9);
13 | console.log(fruit[fruitIndex]);
14 |
15 | i++;
16 | }
--------------------------------------------------------------------------------
/Ch22_Node/quiz.js:
--------------------------------------------------------------------------------
1 | var displayQuestion = function (questionAndAnswer) {
2 | var options = [ "A", "B", "C", "D", "E" ];
3 |
4 | console.log(questionAndAnswer.question);
5 |
6 | questionAndAnswer.answers.forEach(
7 | function (answer, i) {
8 | console.log(options[i] + " - " + answer);
9 | }
10 | );
11 | };
12 |
13 | var question1 = {
14 | question : "What is the capital of France?",
15 | answers : [
16 | "Bordeaux",
17 | "F",
18 | "Paris",
19 | "Brussels"
20 | ],
21 | correctAnswer : "Paris"
22 | };
23 |
24 | displayQuestion(question1);
--------------------------------------------------------------------------------
/Ch22_Node/quiz2.js:
--------------------------------------------------------------------------------
1 | var between = require('./between');
2 |
3 | var qIndex = 0;
4 |
5 | var questions = [
6 | { question: "7 x 8", answer: "56" },
7 | { question: "12 x 12", answer: "144" },
8 | { question: "5 x 6", answer: "30" },
9 | { question: "9 x 3", answer: "27" }
10 | ];
11 |
12 | var getQuestion = function () {
13 | qIndex = between(0, questions.length - 1);
14 | return questions[qIndex].question;
15 | };
16 |
17 | var checkAnswer = function (userAnswer) {
18 | if (userAnswer === questions[qIndex].answer) {
19 | return "Correct!";
20 | } else {
21 | return "No, the answer is " + questions[qIndex].answer;
22 | }
23 | };
24 |
25 | module.exports = {
26 | quizMe: getQuestion,
27 | submit: checkAnswer
28 | };
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/gameServer.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var app = express();
3 |
4 | var bodyParser = require('body-parser');
5 | app.use(bodyParser.json());
6 |
7 | var mapData = require('./maps/theDarkHouse');
8 | var Game = require('./lib/game');
9 | var PlayerGame = require('./lib/playerGame');
10 |
11 | var game = new Game(1, mapData);
12 | var playerGame = new PlayerGame("Kandra", game);
13 |
14 |
15 | app.post('/api/get', get);
16 | app.post('/api/go', go);
17 | app.post('/api/use', use);
18 | app.get('/api/start', start);
19 |
20 | function get (req, res) {
21 | playerGame.clearMessages();
22 | res.json(playerGame.get());
23 | }
24 |
25 | function go (req, res) {
26 | playerGame.clearMessages();
27 | var command = req.body.command;
28 | res.json(playerGame.go(command.direction));
29 | }
30 |
31 | function use (req, res) {
32 | playerGame.clearMessages();
33 | var command = req.body.command;
34 | res.json(playerGame.use(command.item, command.direction));
35 | }
36 |
37 | function start (req, res) {
38 | res.json(playerGame.getData());
39 | }
40 |
41 |
42 | app.use(express.static("public"));
43 |
44 | app.listen(1337);
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/lib/game.js:
--------------------------------------------------------------------------------
1 | var buildMap = require('../lib/mapBuilder');
2 |
3 | function Game (id, mapData) {
4 | this.id = id;
5 | this._players = [];
6 |
7 | this._firstPlace = buildMap(mapData);
8 | }
9 |
10 | Game.prototype = {
11 | getPlayersInPlace: function (placeTitle, playerToOmit) {
12 | var playersInPlace = [];
13 |
14 | this._players.forEach(function (player) {
15 | if (player === undefined || player !== playerToOmit) {
16 | var playerPlace = player.getPlace().getData();
17 |
18 | if (playerPlace.title === placeTitle) {
19 | playersInPlace.push(player.getData());
20 | }
21 | }
22 | });
23 |
24 | return playersInPlace;
25 | },
26 |
27 | addPlayer: function (player) {
28 | this._players.push(player);
29 | player.setPlace(this._firstPlace);
30 | }
31 | };
32 |
33 |
34 | // exports
35 |
36 | module.exports = Game;
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/lib/place.js:
--------------------------------------------------------------------------------
1 | var Place = function (title, description) {
2 | var exits = {};
3 | var items = [];
4 | var challenges = {};
5 |
6 | this.addItem = function (item) {
7 | items.push(item);
8 | };
9 |
10 | this.getLastItem = function () {
11 | return items.pop();
12 | };
13 |
14 | this.addExit = function (direction, exit) {
15 | exits[direction] = exit;
16 | };
17 |
18 | this.getExit = function (direction) {
19 | return exits[direction];
20 | };
21 |
22 | this.addChallenge = function (direction, challenge) {
23 | challenges[direction] = challenge;
24 | };
25 |
26 | this.getChallenge = function (direction) {
27 | return challenges[direction];
28 | };
29 |
30 | this.getData = function () {
31 | var data = {
32 | "title" : title,
33 | "description" : description,
34 | "items" : items.slice(),
35 | "exits" : Object.keys(exits)
36 | };
37 |
38 | return data;
39 | };
40 | };
41 |
42 | module.exports = Place;
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/lib/player.js:
--------------------------------------------------------------------------------
1 | var Player = function (name, health) {
2 | var items = [];
3 | var place = null;
4 |
5 | this.addItem = function (item) {
6 | items.push(item);
7 | };
8 |
9 | this.hasItem = function (item) {
10 | return items.indexOf(item) !== -1;
11 | };
12 |
13 | this.removeItem = function (item) {
14 | var itemIndex = items.indexOf(item);
15 | if (itemIndex !== -1) {
16 | items.splice(itemIndex, 1);
17 | }
18 | };
19 |
20 | this.setPlace = function (destination) {
21 | place = destination;
22 | };
23 |
24 | this.getPlace = function () {
25 | return place;
26 | };
27 |
28 | this.applyDamage = function (damage) {
29 | health = health - damage;
30 | };
31 |
32 | this.getData = function () {
33 | var data = {
34 | "name" : name,
35 | "health" : health,
36 | "items" : items.slice()
37 | };
38 |
39 | if (place !== null) {
40 | data.place = place.getData().title;
41 | }
42 |
43 | return data;
44 | };
45 | };
46 |
47 | module.exports = Player;
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jahvers-crypt-express",
3 | "version": "1.0.0",
4 | "description": "A text-based adventure game",
5 | "main": "gameServer.js",
6 | "dependencies": {
7 | "body-parser": "^1.15.1",
8 | "express": "^4.13.4"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/public/img/rock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch23_Express/TheCrypt/public/img/rock.jpg
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/public/img/sand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch23_Express/TheCrypt/public/img/sand.jpg
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/public/js/commands.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | function parseCommand (commandString) {
5 | var commandWords = commandString.split(" ");
6 | var command = {
7 | type: commandWords.shift()
8 | };
9 |
10 | if (command.type === "go" || command.type === "use") {
11 | command.direction = commandWords.pop();
12 | }
13 |
14 | command.item = commandWords.join(" ");
15 |
16 | return command;
17 | }
18 |
19 | function doAction () {
20 | var txtCommand = document.getElementById("txtCommand");
21 | var commandString = txtCommand.value;
22 | var command = parseCommand(commandString);
23 |
24 | theCrypt.messageView.clear();
25 |
26 | game.do(command);
27 |
28 | txtCommand.value = "";
29 | txtCommand.focus();
30 | }
31 |
32 | var commandButton = document.getElementById("btnCommand");
33 | commandButton.addEventListener("click", doAction);
34 |
35 | })();
--------------------------------------------------------------------------------
/Ch23_Express/TheCrypt/public/js/gameController.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | function render (data) {
5 | if (data.place) {
6 | theCrypt.placeView.render(data.place);
7 | }
8 |
9 | if (data.players) {
10 | theCrypt.playerView.render(data.players);
11 | }
12 |
13 | if (data.messages && data.messages.length) {
14 | theCrypt.messageView.render(data.messages.join('
')); 15 | } 16 | } 17 | 18 | function updateState (data) { 19 | theCrypt.gameID = data.gameID; 20 | render(data); 21 | } 22 | 23 | function init (playerName, gameID) { 24 | theCrypt.playerName = playerName; 25 | theCrypt.gameID = gameID; 26 | 27 | theCrypt.data.getStartData(updateState); 28 | } 29 | 30 | function doAction (command) { 31 | theCrypt.data.postAction(command, updateState); 32 | } 33 | 34 | // Assign the public interface 35 | window.game = { 36 | do: doAction, 37 | init: init 38 | }; 39 | 40 | })(); -------------------------------------------------------------------------------- /Ch23_Express/TheCrypt/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /Ch23_Express/TheCrypt/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); -------------------------------------------------------------------------------- /Ch23_Express/chapter23.md: -------------------------------------------------------------------------------- 1 | # Chapter 23 - Express: building an API -------------------------------------------------------------------------------- /Ch23_Express/webserver/fitnessServer.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var bodyParser = require('body-parser'); 4 | 5 | app.use(express.static('public')); 6 | app.use(bodyParser.json()); 7 | 8 | app.post('/fitness', processSession); 9 | 10 | function processSession (req, res) { 11 | console.log(req.body); 12 | 13 | // this code is added later 14 | // in the chapter 15 | res.json({ 16 | 'status': 'OK', 17 | 'message': 'Session received for ' + req.body.name 18 | }); 19 | 20 | }; 21 | 22 | app.listen(1337); -------------------------------------------------------------------------------- /Ch23_Express/webserver/hello.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | 3 | var app = express(); 4 | 5 | app.get('/', sayHello); 6 | 7 | function sayHello (req, res) { 8 | res.send('Client-Server Interaction
6 |
7 |
8 |
9 |
10 | Fitness Data
6 |
7 |
8 |
9 | High Fives Auctions
6 |
7 |
8 |
9 |
12 |
13 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Ch24_Polling/HighFives_XHR/public/auction.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | var bid = document.getElementById("bid");
5 | var asking = document.getElementById("asking");
6 | var bidButton = document.getElementById("btnBid");
7 |
8 | function loadData(url, method, callback) {
9 | var xhr = new XMLHttpRequest();
10 | xhr.open(method, url);
11 |
12 | xhr.addEventListener("load", function () {
13 | var data = JSON.parse(xhr.responseText);
14 | callback(data);
15 | });
16 |
17 | xhr.send();
18 | }
19 |
20 | function updateDisplay(data) {
21 | bid.innerHTML = data.bid;
22 | asking.innerHTML = data.bid + 5;
23 | }
24 |
25 | function sendBid() {
26 | loadData("/bid", "POST", updateDisplay);
27 | }
28 |
29 | function getState() {
30 | loadData("/state", "GET", updateDisplay);
31 | }
32 |
33 | bidButton.addEventListener("click", sendBid);
34 |
35 | getState();
36 |
37 | setInterval(getState, 1000);
38 |
39 | })();
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/lib/game.js:
--------------------------------------------------------------------------------
1 | var buildMap = require('../lib/mapBuilder');
2 |
3 | function Game (id, mapData) {
4 | this.id = id;
5 | this._players = [];
6 |
7 | this._firstPlace = buildMap(mapData);
8 | }
9 |
10 | Game.prototype = {
11 | getPlayersInPlace: function (placeTitle, playerToOmit) {
12 | var playersInPlace = [];
13 |
14 | this._players.forEach(function (player) {
15 | if (player === undefined || player !== playerToOmit) {
16 | var playerPlace = player.getPlace().getData();
17 |
18 | if (playerPlace.title === placeTitle) {
19 | playersInPlace.push(player.getData());
20 | }
21 | }
22 | });
23 |
24 | return playersInPlace;
25 | },
26 |
27 | addPlayer: function (player) {
28 | this._players.push(player);
29 | player.setPlace(this._firstPlace);
30 | }
31 | };
32 |
33 |
34 | // exports
35 |
36 | module.exports = Game;
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/lib/gameManager.js:
--------------------------------------------------------------------------------
1 | var Game = require('./game');
2 | var PlayerGame = require('./playerGame');
3 | var mapData = require('../maps/theDarkHouse.json');
4 |
5 | var games = {};
6 | var playerGames = {};
7 |
8 | function getID () {
9 | var id;
10 |
11 | do {
12 | id = Math.floor(Math.random() * 100000 + 1);
13 | } while (games[id]);
14 |
15 | return id;
16 | }
17 |
18 | function getNewGame () {
19 | var game = new Game(getID(), mapData);
20 | games[game.id] = game;
21 |
22 | return game;
23 | }
24 |
25 | function joinGame (playerName, id) {
26 | var game = games[id] || getNewGame();
27 |
28 | var playerGame = new PlayerGame(playerName, game);
29 | playerGames[game.id + "_" + playerName] = playerGame;
30 |
31 | return playerGame;
32 | }
33 |
34 | function getPlayerGame (playerName, id) {
35 | return playerGames[id + "_" + playerName];
36 | }
37 |
38 | module.exports = {
39 | join: joinGame,
40 | getPlayerGame: getPlayerGame
41 | };
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/lib/place.js:
--------------------------------------------------------------------------------
1 | var Place = function (title, description) {
2 | var exits = {};
3 | var items = [];
4 | var challenges = {};
5 |
6 | this.addItem = function (item) {
7 | items.push(item);
8 | };
9 |
10 | this.getLastItem = function () {
11 | return items.pop();
12 | };
13 |
14 | this.addExit = function (direction, exit) {
15 | exits[direction] = exit;
16 | };
17 |
18 | this.getExit = function (direction) {
19 | return exits[direction];
20 | };
21 |
22 | this.addChallenge = function (direction, challenge) {
23 | challenges[direction] = challenge;
24 | };
25 |
26 | this.getChallenge = function (direction) {
27 | return challenges[direction];
28 | };
29 |
30 | this.getData = function () {
31 | var data = {
32 | "title" : title,
33 | "description" : description,
34 | "items" : items.slice(),
35 | "exits" : Object.keys(exits)
36 | };
37 |
38 | return data;
39 | };
40 | };
41 |
42 | module.exports = Place;
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/lib/player.js:
--------------------------------------------------------------------------------
1 | var Player = function (name, health) {
2 | var items = [];
3 | var place = null;
4 |
5 | this.addItem = function (item) {
6 | items.push(item);
7 | };
8 |
9 | this.hasItem = function (item) {
10 | return items.indexOf(item) !== -1;
11 | };
12 |
13 | this.removeItem = function (item) {
14 | var itemIndex = items.indexOf(item);
15 | if (itemIndex !== -1) {
16 | items.splice(itemIndex, 1);
17 | }
18 | };
19 |
20 | this.setPlace = function (destination) {
21 | place = destination;
22 | };
23 |
24 | this.getPlace = function () {
25 | return place;
26 | };
27 |
28 | this.applyDamage = function (damage) {
29 | health = health - damage;
30 | };
31 |
32 | this.getData = function () {
33 | var data = {
34 | "name" : name,
35 | "health" : health,
36 | "items" : items.slice()
37 | };
38 |
39 | if (place !== null) {
40 | data.place = place.getData().title;
41 | }
42 |
43 | return data;
44 | };
45 | };
46 |
47 | module.exports = Player;
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jahvers-crypt-express",
3 | "version": "1.0.0",
4 | "description": "A text-based adventure game",
5 | "main": "gameServer.js",
6 | "dependencies": {
7 | "body-parser": "^1.15.1",
8 | "express": "^4.13.4"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/public/img/rock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch24_Polling/TheCrypt/public/img/rock.jpg
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/public/img/sand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch24_Polling/TheCrypt/public/img/sand.jpg
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/public/js/commands.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | function parseCommand (commandString) {
5 | var commandWords = commandString.split(" ");
6 | var command = {
7 | type: commandWords.shift()
8 | };
9 |
10 | if (command.type === "go" || command.type === "use") {
11 | command.direction = commandWords.pop();
12 | }
13 |
14 | command.item = commandWords.join(" ");
15 |
16 | return command;
17 | }
18 |
19 | function doAction () {
20 | var txtCommand = document.getElementById("txtCommand");
21 | var commandString = txtCommand.value;
22 | var command = parseCommand(commandString);
23 |
24 | theCrypt.messageView.clear();
25 |
26 | game.do(command);
27 |
28 | txtCommand.value = "";
29 | txtCommand.focus();
30 | }
31 |
32 | var commandButton = document.getElementById("btnCommand");
33 | commandButton.addEventListener("click", doAction);
34 |
35 | })();
--------------------------------------------------------------------------------
/Ch24_Polling/TheCrypt/public/js/gameController.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | function render (data) {
5 | theCrypt.mainView.render();
6 |
7 | if (data.place) {
8 | theCrypt.placeView.render(data.place);
9 | }
10 |
11 | if (data.players) {
12 | theCrypt.playerView.render(data.players);
13 | }
14 |
15 | if (data.messages && data.messages.length) {
16 | theCrypt.messageView.render(data.messages.join('
')); 17 | } 18 | } 19 | 20 | function updateState (data) { 21 | theCrypt.gameID = data.gameID; 22 | render(data); 23 | } 24 | 25 | function init (playerName, gameID) { 26 | theCrypt.playerName = playerName; 27 | theCrypt.gameID = gameID; 28 | 29 | theCrypt.data.getStartData(updateState); 30 | } 31 | 32 | function doAction (command) { 33 | theCrypt.data.postAction(command, updateState); 34 | } 35 | 36 | // Assign the public interface 37 | window.game = { 38 | do: doAction, 39 | init: init 40 | }; 41 | 42 | })(); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/mainView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var mainDiv = document.getElementById("main"); 5 | var startFormDiv = document.getElementById("startControls"); 6 | 7 | var userDetailsTemplate = document.getElementById("userDetailsTemplate").innerHTML; 8 | 9 | function showMain () { 10 | mainDiv.className = ""; 11 | } 12 | 13 | function renderUser () { 14 | startFormDiv.innerHTML = gpwj.templates.fill(userDetailsTemplate, { 15 | playerName: theCrypt.playerName, 16 | gameID: theCrypt.gameID 17 | }); 18 | } 19 | 20 | function render () { 21 | showMain(); 22 | renderUser(); 23 | } 24 | 25 | if (window.theCrypt === undefined) { 26 | window.theCrypt = {}; 27 | } 28 | 29 | theCrypt.mainView = { 30 | render: render 31 | }; 32 | 33 | })(); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/startGame.js: -------------------------------------------------------------------------------- 1 | var btnStart = document.getElementById('btnStart'); 2 | 3 | btnStart.addEventListener('click', function () { 4 | var playerName = document.getElementById('txtPlayerName').value; 5 | var gameID = document.getElementById('txtGameID').value; 6 | 7 | game.init(playerName, gameID); 8 | }); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/auctionApp.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | var server = require('http').Server(app); 5 | var io = require('socket.io')(server); 6 | 7 | var bid = 5; 8 | 9 | io.on('connection', socketsRouter); 10 | 11 | function socketsRouter (socket) { 12 | 13 | socket.on('bid', makeBid); 14 | socket.on('state', getState); 15 | 16 | function makeBid () { 17 | bid = bid + 5; 18 | io.emit('update', { bid: bid }); 19 | } 20 | 21 | function getState () { 22 | socket.emit('update', { bid: bid }); 23 | } 24 | 25 | } 26 | 27 | app.use(express.static("public")); 28 | 29 | server.listen(1337); -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "high-fives", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "express": "^4.13.4", 6 | "socket.io": "^1.4.6" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/public/auction.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin:0; 3 | padding: 0; 4 | text-align:center; 5 | font-family:"Helvetica Neue", Helvetica, sans-serif; 6 | } 7 | 8 | h1 { 9 | background-color:rebeccapurple; 10 | color: #ffc; 11 | padding:0.5em; 12 | margin:0 0 1em; 13 | } 14 | 15 | table { 16 | width: 80%; 17 | margin:0 auto; 18 | border-collapse: collapse; 19 | } 20 | 21 | th, td { 22 | padding:0.3em; 23 | } 24 | 25 | th { 26 | background-color:rebeccapurple; 27 | color: #ffc; 28 | } 29 | 30 | td { 31 | border-bottom:1px solid rebeccapurple; 32 | } 33 | 34 | #bid { 35 | background-color: #eef; 36 | width:20%; 37 | } 38 | 39 | #asking { 40 | background-color: #fee; 41 | width:20%; 42 | } -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/public/auction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |High Fives Auctions
6 |
7 |
8 |
9 |
12 |
13 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/Ch25_Sockets/HighFives_Sockets/public/auction.js:
--------------------------------------------------------------------------------
1 | var bid = document.getElementById("bid");
2 | var asking = document.getElementById("asking");
3 | var bidButton = document.getElementById("btnBid");
4 | var socket = io('http://localhost:1337');
5 |
6 | function updateDisplay (data) {
7 | bid.innerHTML = data.bid;
8 | asking.innerHTML = data.bid + 5;
9 | }
10 |
11 | function sendBid () {
12 | socket.emit('bid');
13 | }
14 |
15 | bidButton.addEventListener("click", sendBid);
16 |
17 | socket.on('update', updateDisplay);
18 | socket.emit('state');
--------------------------------------------------------------------------------
/Ch25_Sockets/HighFives_SocketsRooms/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "high-fives",
3 | "version": "1.0.0",
4 | "dependencies": {
5 | "express": "^4.13.4",
6 | "socket.io": "^1.4.6"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/Ch25_Sockets/HighFives_SocketsRooms/public/auction.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin:0;
3 | padding: 0;
4 | text-align:center;
5 | font-family:"Helvetica Neue", Helvetica, sans-serif;
6 | }
7 |
8 | h1 {
9 | background-color:rebeccapurple;
10 | color: #ffc;
11 | padding:0.5em;
12 | margin:0 0 1em;
13 | }
14 |
15 | table {
16 | width: 80%;
17 | margin:0 auto;
18 | border-collapse: collapse;
19 | }
20 |
21 | th, td {
22 | padding:0.3em;
23 | }
24 |
25 | th {
26 | background-color:rebeccapurple;
27 | color: #ffc;
28 | }
29 |
30 | td {
31 | border-bottom:1px solid rebeccapurple;
32 | }
33 |
34 | #item {
35 | width:50%;
36 | }
37 |
38 | #bid {
39 | background-color: #eef;
40 | width:20%;
41 | }
42 |
43 | #asking {
44 | background-color: #fee;
45 | width:20%;
46 | }
--------------------------------------------------------------------------------
/Ch25_Sockets/HighFives_SocketsRooms/public/auction.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | High Fives Auctions
6 |
7 |
8 |
9 |
18 |
19 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/lib/game.js:
--------------------------------------------------------------------------------
1 | var buildMap = require('../lib/mapBuilder');
2 |
3 | function Game (id, mapData) {
4 | this.id = id;
5 | this._players = [];
6 |
7 | this._firstPlace = buildMap(mapData);
8 | }
9 |
10 | Game.prototype = {
11 | getPlayersInPlace: function (placeTitle, playerToOmit) {
12 | var playersInPlace = [];
13 |
14 | this._players.forEach(function (player) {
15 | if (player === undefined || player !== playerToOmit) {
16 | var playerPlace = player.getPlace().getData();
17 |
18 | if (playerPlace.title === placeTitle) {
19 | playersInPlace.push(player.getData());
20 | }
21 | }
22 | });
23 |
24 | return playersInPlace;
25 | },
26 |
27 | addPlayer: function (player) {
28 | this._players.push(player);
29 | player.setPlace(this._firstPlace);
30 | }
31 | };
32 |
33 |
34 | // exports
35 |
36 | module.exports = Game;
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/lib/gameManager.js:
--------------------------------------------------------------------------------
1 | var Game = require('./game');
2 | var PlayerGame = require('./playerGame');
3 | var mapData = require('../maps/theDarkHouse.json');
4 |
5 | var games = {};
6 | var playerGames = {};
7 |
8 |
9 | // handy function
10 |
11 | function getID () {
12 | var id;
13 |
14 | do {
15 | id = Math.floor(Math.random() * 100000 + 1);
16 | } while (games[id]);
17 |
18 | return id;
19 | }
20 |
21 |
22 | // creating games for players
23 |
24 | function getNewGame () {
25 | var game = new Game(getID(), mapData);
26 | games[game.id] = game;
27 |
28 | return game;
29 | }
30 |
31 | function joinGame (playerName, id) {
32 | var game = games[id] || getNewGame(playerName);
33 |
34 | var playerGame = new PlayerGame(playerName, game);
35 | playerGames[game.id + "_" + playerName] = playerGame;
36 |
37 | return playerGame;
38 | }
39 |
40 | function getPlayerGame (playerName, id) {
41 | return playerGames[id + "_" + playerName];
42 | }
43 |
44 |
45 | // exports
46 |
47 | module.exports = {
48 | join: joinGame,
49 | getPlayerGame: getPlayerGame
50 | };
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/lib/place.js:
--------------------------------------------------------------------------------
1 | var Place = function (title, description) {
2 | var exits = {};
3 | var items = [];
4 | var challenges = {};
5 |
6 | this.addItem = function (item) {
7 | items.push(item);
8 | };
9 |
10 | this.getLastItem = function () {
11 | return items.pop();
12 | };
13 |
14 | this.addExit = function (direction, exit) {
15 | exits[direction] = exit;
16 | };
17 |
18 | this.getExit = function (direction) {
19 | return exits[direction];
20 | };
21 |
22 | this.addChallenge = function (direction, challenge) {
23 | challenges[direction] = challenge;
24 | };
25 |
26 | this.getChallenge = function (direction) {
27 | return challenges[direction];
28 | };
29 |
30 | this.getData = function () {
31 | var data = {
32 | "title" : title,
33 | "description" : description,
34 | "items" : items.slice(),
35 | "exits" : Object.keys(exits)
36 | };
37 |
38 | return data;
39 | };
40 | };
41 |
42 | module.exports = Place;
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/lib/player.js:
--------------------------------------------------------------------------------
1 | var Player = function (name, health) {
2 | var items = [];
3 | var place = null;
4 |
5 | this.addItem = function (item) {
6 | items.push(item);
7 | };
8 |
9 | this.hasItem = function (item) {
10 | return items.indexOf(item) !== -1;
11 | };
12 |
13 | this.removeItem = function (item) {
14 | var itemIndex = items.indexOf(item);
15 | if (itemIndex !== -1) {
16 | items.splice(itemIndex, 1);
17 | }
18 | };
19 |
20 | this.setPlace = function (destination) {
21 | place = destination;
22 | };
23 |
24 | this.getPlace = function () {
25 | return place;
26 | };
27 |
28 | this.applyDamage = function (damage) {
29 | health = health - damage;
30 | };
31 |
32 | this.getData = function () {
33 | var data = {
34 | "name" : name,
35 | "health" : health,
36 | "items" : items.slice()
37 | };
38 |
39 | if (place !== null) {
40 | data.place = place.getData().title;
41 | }
42 |
43 | return data;
44 | };
45 | };
46 |
47 | module.exports = Player;
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jahvers-crypt-sockets",
3 | "version": "1.0.0",
4 | "description": "A text-based adventure game",
5 | "main": "gameServer.js",
6 | "dependencies": {
7 | "express": "^4.13.4",
8 | "socket.io": "^1.4.6"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/public/img/rock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch25_Sockets/TheCrypt/public/img/rock.jpg
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/public/img/sand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch25_Sockets/TheCrypt/public/img/sand.jpg
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/public/js/commands.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | function parseCommand (commandString) {
5 | var commandWords = commandString.split(" ");
6 | var command = {
7 | type: commandWords.shift()
8 | };
9 |
10 | if (command.type === "go" || command.type === "use") {
11 | command.direction = commandWords.pop();
12 | }
13 |
14 | command.item = commandWords.join(" ");
15 |
16 | return command;
17 | }
18 |
19 | function doAction () {
20 | var txtCommand = document.getElementById("txtCommand");
21 | var commandString = txtCommand.value;
22 | var command = parseCommand(commandString);
23 |
24 | theCrypt.messageView.clear();
25 |
26 | game.do(command);
27 |
28 | txtCommand.value = "";
29 | txtCommand.focus();
30 | }
31 |
32 | var commandButton = document.getElementById("btnCommand");
33 | commandButton.addEventListener("click", doAction);
34 |
35 | })();
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/public/js/dataLoader-socketio.js:
--------------------------------------------------------------------------------
1 | // dataLoader for use with socket.io
2 |
3 | (function () {
4 | "use strict";
5 |
6 | var socket = io('http://localhost:1337');
7 |
8 | function postAction (command) {
9 | var data = {
10 | gameID: theCrypt.gameID,
11 | playerName: theCrypt.playerName,
12 | command: command
13 | };
14 |
15 | socket.emit(command.type, data);
16 | }
17 |
18 | function getStartData (callback) {
19 | var gameID = theCrypt.gameID;
20 |
21 | var data = {
22 | playerName: theCrypt.playerName
23 | };
24 |
25 | if (gameID !== undefined && gameID !== "") {
26 | data.gameID = gameID;
27 | }
28 |
29 | socket.on('state', callback);
30 |
31 | socket.emit('start', data);
32 | }
33 |
34 | if (window.theCrypt === undefined) {
35 | window.theCrypt = {};
36 | }
37 |
38 | theCrypt.data = {
39 | postAction: postAction,
40 | getStartData: getStartData
41 | };
42 |
43 | })();
--------------------------------------------------------------------------------
/Ch25_Sockets/TheCrypt/public/js/gameController.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | "use strict";
3 |
4 | function render (data) {
5 | theCrypt.mainView.render();
6 |
7 | if (data.place) {
8 | theCrypt.placeView.render(data.place);
9 | }
10 |
11 | if (data.players) {
12 | theCrypt.playerView.render(data.players);
13 | }
14 |
15 | if (data.messages && data.messages.length) {
16 | theCrypt.messageView.render(data.messages.join('
')); 17 | } 18 | } 19 | 20 | function updateState (data) { 21 | theCrypt.gameID = data.gameID; 22 | render(data); 23 | } 24 | 25 | function init (playerName, gameID) { 26 | theCrypt.playerName = playerName; 27 | theCrypt.gameID = gameID; 28 | 29 | theCrypt.data.getStartData(updateState); 30 | } 31 | 32 | function doAction (command) { 33 | theCrypt.data.postAction(command, updateState); 34 | } 35 | 36 | // Assign the public interface 37 | window.game = { 38 | do: doAction, 39 | init: init 40 | }; 41 | 42 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/mainView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var mainDiv = document.getElementById("main"); 5 | var startFormDiv = document.getElementById("startControls"); 6 | 7 | var userDetailsTemplate = document.getElementById("userDetailsTemplate").innerHTML; 8 | 9 | function showMain () { 10 | mainDiv.className = ""; 11 | } 12 | 13 | function renderUser () { 14 | startFormDiv.innerHTML = gpwj.templates.fill(userDetailsTemplate, { 15 | playerName: theCrypt.playerName, 16 | gameID: theCrypt.gameID 17 | }); 18 | } 19 | 20 | function render () { 21 | showMain(); 22 | renderUser(); 23 | } 24 | 25 | if (window.theCrypt === undefined) { 26 | window.theCrypt = {}; 27 | } 28 | 29 | theCrypt.mainView = { 30 | render: render 31 | }; 32 | 33 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/startGame.js: -------------------------------------------------------------------------------- 1 | var btnStart = document.getElementById('btnStart'); 2 | 3 | btnStart.addEventListener('click', function () { 4 | var playerName = document.getElementById('txtPlayerName').value; 5 | var gameID = document.getElementById('txtGameID').value; 6 | 7 | game.init(playerName, gameID); 8 | }); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); -------------------------------------------------------------------------------- /js_next/listing2.10.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 2.10 3 | * Declaring and assigning a variable with let 4 | */ 5 | 6 | 7 | // declare the variable 8 | let score; 9 | 10 | // assign it a value 11 | score = 100; 12 | 13 | console.log(score); 14 | 15 | // assign a new value 16 | score = score + 50; 17 | 18 | console.log(score); 19 | 20 | 21 | 22 | /* Further Adventures 23 | * 24 | * 1) Assign a new value to the score variable. 25 | * 26 | * 2) Log the new value to the console. 27 | * 28 | * 3) Declare two more variables using let, 29 | * and assign them values. 30 | * 31 | */ -------------------------------------------------------------------------------- /js_next/listing2.11.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 2.11 3 | * Declaring and assigning a constant with const 4 | */ 5 | 6 | 7 | // declare a variable that may change 8 | let playerLocation = "The Dungeon"; 9 | 10 | // declare a variable that won't change 11 | const playerName = "Kandra"; 12 | 13 | console.log(playerName + " is in " + playerLocation); 14 | 15 | // assign a new value 16 | playerLocation = "The Old Library"; 17 | 18 | console.log(playerName + " is in " + playerLocation); 19 | 20 | 21 | 22 | /* Further Adventures 23 | * 24 | * 1) Try assigning a new value to playerName. 25 | * 26 | * Variables declared with const must be assigned 27 | * a value when they are declared. They cannot 28 | * have a new value assigned to them later. 29 | * 30 | * 2) Try separating the declaration of playerName 31 | * from its first assignment. 32 | * 33 | * const playerName; 34 | * playerName = "Kandra"; 35 | * 36 | */ -------------------------------------------------------------------------------- /js_next/listing2.12.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 2.12 3 | * Using template literals when logging variables 4 | */ 5 | 6 | 7 | let playerLocation = "The Dungeon"; 8 | const playerName = "Kandra"; 9 | 10 | // use backticks and placeholders to display values 11 | console.log(`${playerName} is in ${playerLocation}`); 12 | 13 | playerLocation = "The Old Library"; 14 | 15 | console.log(`${playerName} is in ${playerLocation}`); 16 | 17 | 18 | 19 | /* Further Adventures 20 | * 21 | * Place text between backticks to create a 22 | * template literal. 23 | * 24 | * 1) Change the location again and display the updated 25 | * player info. 26 | * 27 | * Variable values can be included in the template 28 | * by using a placeholder: 29 | * 30 | * `${variableName}` 31 | * 32 | * The value of the variable will replace the placeholder. 33 | * 34 | * 2) Create a new variable (using let or const). 35 | * 36 | * 3) Display the variable's value by using a template. 37 | * 38 | */ -------------------------------------------------------------------------------- /js_next/listing3.17.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.17 3 | * Using dot notation in templates 4 | */ 5 | 6 | 7 | const book = { 8 | title : "The Hobbit", 9 | author : "J. R. R. Tolkien", 10 | published : 1937 11 | }; 12 | 13 | console.log(`${book.title} by ${book.author}`); 14 | 15 | 16 | 17 | /* Further Adventures 18 | * 19 | * 1) Use a placeholder to include the published 20 | * property in the template string. 21 | * 22 | * 2) Add a second book. 23 | * 24 | * 3) Log its details to the console using a template. 25 | * 26 | * The book variable is declared as a constant. 27 | * 28 | * 4) Try to update one of the properties. 29 | * Does the program still work? 30 | * 31 | * book.published = 1938; 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing3.18.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.18 3 | * Assigning properties to variables 4 | */ 5 | 6 | 7 | const book = { 8 | title : "The Hobbit", 9 | author : "J. R. R. Tolkien", 10 | published : 1937 11 | }; 12 | 13 | // declare two variables whose names match 14 | // properties of the object. 15 | // assign the matching values to the variables 16 | 17 | const { title, author } = book; 18 | 19 | console.log(`${title} by ${author}`); 20 | 21 | 22 | 23 | /* Further Adventures 24 | * 25 | * Using curly braces on the left of an assignment, 26 | * 27 | * { name1, name2 } = myObject; 28 | * 29 | * assigns property values of the object on the right 30 | * to variables with matching names. 31 | * 32 | * The process is called object destructuring 33 | * 34 | * 1) Assign the published property to a matching variable. 35 | * 36 | * 2) Include the new variable in the template. 37 | * 38 | * The destructured variables are declared as constants. 39 | * 40 | * 4) Add a second book and try the destructuring 41 | * process again. 42 | * 43 | */ -------------------------------------------------------------------------------- /js_next/listing3.19.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.19 3 | * Assigning variables to matching properties 4 | */ 5 | 6 | const author = "Mark Twain"; 7 | const title = "The Adventures of Tom Sawyer"; 8 | 9 | const book = { 10 | author, 11 | title 12 | }; 13 | 14 | console.log(book); 15 | 16 | 17 | 18 | /* Further Adventures 19 | * 20 | * 1) Run the program. 21 | * 22 | * The book object is displayed on the console. 23 | * 24 | * When a variable name matches a property name 25 | * you want to assign, you can use the shorthand 26 | * shown in the listing above. 27 | * 28 | * 2) Change the program to use the longer syntax. 29 | * 30 | * e.g. for just the author property: 31 | * 32 | * const book = { 33 | * author: author 34 | * }; 35 | * 36 | * Does it still work? 37 | * 38 | * 3) Add a third variable and matching property 39 | * using the shorthand. 40 | * 41 | */ -------------------------------------------------------------------------------- /js_next/listing3.20.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.20 3 | * Updating objects assigned to constants 4 | */ 5 | 6 | const player1 = { 7 | name: "Max", 8 | attempted: 0, 9 | correct: 0 10 | }; 11 | 12 | player1.attempted = 1; 13 | player1.correct = 1; 14 | player1.score = 50; 15 | 16 | const playerInfo = ` 17 | * ${player1.name} 18 | * has score 19 | * ${player1.score} 20 | `; 21 | 22 | console.log(playerInfo); 23 | 24 | 25 | 26 | /* Further Adventures 27 | * 28 | * 1) Add more lines to the program to 29 | * update the name and score. 30 | * 31 | * 2) Log the updated player info to the console. 32 | * 33 | * You can only assign a value once to a variable 34 | * declared with const. However, if you assign an 35 | * object to the variable, you can update the 36 | * variable's properties. 37 | * 38 | * 3) At the end of the program, 39 | * try assigning a new object to player1: 40 | * 41 | * player1 = { name: "Kandra" }; 42 | * 43 | * 4) Play with the playerInfo template to make 44 | * the info logged more interesting. 45 | * 46 | * Template strings can span multiple lines. 47 | * 48 | */ -------------------------------------------------------------------------------- /js_next/listing4.15.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 4.15 3 | * Using fat arrow notation 4 | */ 5 | 6 | const sayHello = () => { 7 | console.log("Hello World!"); 8 | }; 9 | 10 | sayHello(); 11 | sayHello(); 12 | sayHello(); 13 | 14 | 15 | 16 | /* Further Adventures 17 | * 18 | * 1) Change the message from the sayHello function. 19 | * 20 | * Enclose the message in backticks to spread it 21 | * across multiple lines. 22 | * 23 | * 2) Break the Hello World! message across two lines. 24 | * 25 | * 3) Create a function that prints the letters 26 | * of "Hello World!" one by one down the page. 27 | * 28 | */ -------------------------------------------------------------------------------- /js_next/listing4.16.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 4.16 3 | * Displaying a menu using a template string 4 | */ 5 | 6 | const displayMenu = () => { 7 | console.log(` 8 | Please choose an option: 9 | (1) Print log 10 | (2) Upload file 11 | (9) Quit 12 | ` ); 13 | }; 14 | 15 | displayMenu(); 16 | 17 | 18 | 19 | /* Further Adventures 20 | * 21 | * 1) Add two more options to the displayMenu 22 | * function and run the program. 23 | * 24 | * 2) Create your own displayMyMenu function. 25 | * 26 | * 3) Add a line to call your function as well. 27 | * Run the program 28 | * 29 | */ -------------------------------------------------------------------------------- /js_next/listing4.17.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 4.17 3 | * A function to display player information 4 | */ 5 | 6 | let player; 7 | 8 | const player1 = { 9 | name: "Kandra", 10 | place: "The Dungeon of Doom", 11 | health: 50 12 | }; 13 | 14 | const player2 = { 15 | name: "Dax", 16 | place: "The Old Library", 17 | health: 40 18 | }; 19 | 20 | const showPlayerInfo = () => { 21 | const { name, place, health } = player; 22 | console.log(` 23 | ${name} 24 | ------------------------------ 25 | ${name} is in ${place} 26 | ${name} has health ${health} 27 | ------------------------------ 28 | ` ); 29 | }; 30 | 31 | player = player1; 32 | showPlayerInfo(); 33 | 34 | player = player2; 35 | showPlayerInfo(); 36 | 37 | 38 | 39 | /* Further Adventures 40 | * 41 | * 1) Write a function that just shows 42 | * where the player is. 43 | * 44 | * 2) Write a function that just shows 45 | * the player's health. 46 | * 47 | * 3) Change the showPlayerInfo function 48 | * to use your two functions. 49 | * 50 | */ -------------------------------------------------------------------------------- /js_next/listing5.15.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.15 3 | * Calling the same function with different arguments 4 | */ 5 | 6 | const showMessage = message => console.log(`The message is: ${message}`); 7 | 8 | showMessage("It's full of stars!"); 9 | showMessage("Hello to Jason Isaacs"); 10 | showMessage("Hello to Jason Isaacs and Stephen Fry"); 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Create a showMessage2 function to 17 | * display its prefixed text on a 18 | * separate line to the message. 19 | * 20 | * 2) Declare a myMessage variable and 21 | * assign it a string value. 22 | * 23 | * 3) Call the showMessage2 function with 24 | * myMessage as the argument. 25 | * 26 | */ -------------------------------------------------------------------------------- /js_next/listing5.16.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.16 3 | * Defining a function with a default argument 4 | */ 5 | 6 | const showMessage = (message = "Hello World!") => { 7 | console.log(`The message is: ${message}`); 8 | }; 9 | 10 | showMessage("It's full of stars!"); 11 | showMessage("Hello to Jason Isaacs"); 12 | showMessage(); 13 | 14 | 15 | 16 | /* Further Adventures 17 | * 18 | * 1) Add a second parameter to the function 19 | * called prefix. 20 | * 21 | * 2) Change the template string to log the 22 | * prefix followed by the message. 23 | * 24 | * 3) Include a default value for the prefix. 25 | * 26 | */ -------------------------------------------------------------------------------- /js_next/listing5.17.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.17 3 | * Using the square function 4 | */ 5 | 6 | const square = numberToSquare => { 7 | const result = numberToSquare ** 2; 8 | console.log(`${numberToSquare} * ${numberToSquare} = ${result}`); 9 | }; 10 | 11 | square(10); 12 | square(-2); 13 | square(1111); 14 | square(0.5); 15 | 16 | 17 | 18 | /* Further Adventures 19 | * 20 | * 1) Define a cube function that cubes 21 | * any number passed in as an argument. 22 | * 23 | * 2) Test your cube function 24 | * four times with different arguments. 25 | * 26 | * Math.sqrt is a built-in function to find 27 | * the positive square root of a number. 28 | * e.g. Math.sqrt(9) finds the square root of 9. 29 | * 30 | * 3) Define and test a squareRoot function 31 | * to find square roots and display 32 | * them on the console. 33 | * e.g. The square root of 9 is 3. 34 | * 35 | */ -------------------------------------------------------------------------------- /js_next/listing5.18.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.18 3 | * A function with two arguments 4 | */ 5 | 6 | const showSum = (number1, number2) => { 7 | const total = number1 + number2; 8 | console.log(`The sum is ${total}`); 9 | }; 10 | 11 | showSum(30, 23); 12 | showSum(2.8, -5); 13 | 14 | 15 | 16 | /* Further Adventures 17 | * 18 | * 1) Use the showSum function to add 56 and 74. 19 | * 20 | * To multiply two numbers, use the * symbol. 21 | * e.g. 3 * 5 is 3 multiplied by 5. 22 | * 23 | * 2) Create a showProduct function to multiply two numbers. 24 | * 25 | * 3) Use your function to multiply three pairs of numbers. 26 | * 27 | * To divide one number by another, use /. 28 | * e.g. 10 / 2 is 10 divided by 2. 29 | * 30 | * 4) What about showDifference and showQuotient 31 | * for subtraction and division? 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing6.11.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 6.11 3 | * Returning a value from a function 4 | */ 5 | 6 | const getMessage = () => "I’m going on an adventure!"; 7 | 8 | const response = getMessage(); 9 | 10 | console.log(response); 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Write a getMyMessage function 17 | * that returns a message of 18 | * your choosing. 19 | * 20 | */ -------------------------------------------------------------------------------- /js_next/listing6.12.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 6.12 3 | * Using the return value as an argument 4 | */ 5 | 6 | const getHelloTo = name => `Hello to ${name}`; 7 | 8 | console.log(getHelloTo("Kandra")); 9 | console.log(getHelloTo("Dax")); 10 | 11 | 12 | 13 | /* Further Adventures 14 | * 15 | * 1) Rewrite the function using curly braces 16 | * for the function body and an explicit 17 | * return statement. 18 | * 19 | * 2) Run the program to check the output 20 | * is unaffected by the change in form. 21 | * 22 | * Do you prefer the function with or without 23 | * the return statement? 24 | * 25 | */ -------------------------------------------------------------------------------- /js_next/listing6.13.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 6.13 3 | * Returning the sum of two numbers 4 | */ 5 | 6 | const add = (x, y) => x + y; 7 | 8 | const sum = add(50, 23); 9 | 10 | console.log(sum); 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Find and display the sum of 17 | * a different pair of numbers 18 | * 19 | * 2) Change the call to console.log so that 20 | * the display on the console reads: 21 | * 'The sum of 50 and 23 is 73' 22 | * using the add function to generate the answer. 23 | * 24 | * 3) Can you use the add function as it is 25 | * to add more than two numbers? 26 | * Hint: You can nest calls to add. 27 | * 28 | * 4) Create a function to return the sum of 29 | * three numbers given as arguments. 30 | * 31 | */ -------------------------------------------------------------------------------- /js_next/listing7.12.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.12 3 | * Destructuring an object argument 4 | */ 5 | 6 | const planet1 = { 7 | name: "Jupiter", 8 | position: 5, 9 | type: "Gas Giant", 10 | radius: 69911, 11 | sizeRank: 1 12 | }; 13 | 14 | const getPlanetInfo = planet => { 15 | const { name, position } = planet; 16 | return `${name}: planet number ${position}`; 17 | }; 18 | 19 | console.log(getPlanetInfo(planet1)); 20 | 21 | 22 | 23 | /* Further Adventures 24 | * 25 | * 1) Create a second planet object. 26 | * 27 | * 2) Use getPlanetInfo to log details of 28 | * the second planet. 29 | * 30 | * 3) Update the getPlanetInfo function to 31 | * include more information about 32 | * each planet. 33 | * 34 | */ -------------------------------------------------------------------------------- /js_next/listing7.13.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.13 3 | * Shorthand properties and argument destructuring 4 | */ 5 | 6 | const buildPlanet = function (name, position, type, radius, rank) { 7 | return { 8 | name, 9 | position, 10 | type, 11 | radius, 12 | sizeRank: rank 13 | }; 14 | }; 15 | 16 | const getPlanetInfo = ({name, position}) => `${name.toUpperCase()}: planet ${position}`; 17 | 18 | const planet1 = buildPlanet("Jupiter", 5, "Gas Giant", 69911, 1); 19 | const planet2 = buildPlanet("Neptune", 8, "Ice Giant", 24622, 4); 20 | 21 | console.log(getPlanetInfo(planet1)); 22 | console.log(getPlanetInfo(planet2)); 23 | 24 | 25 | 26 | /* Further Adventures 27 | * 28 | * 1) Create a getPlanetInfo2 function that 29 | * uses destructuring to gather other planet 30 | * properties and returns a different string 31 | * of info. 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing7.14.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.14 3 | * Renaming properties when object destructuring 4 | */ 5 | 6 | const move = ({x, y}, {x: dx, y: dy}) => ({x: x + dx, y: y + dy}); 7 | 8 | const showPoint = ({x, y}) => console.log(`( ${x} , ${y} )`); 9 | 10 | const point1 = { x : 2, y : 5 }; 11 | 12 | const point2 = move(point1, { x : 4, y : -2 }); 13 | 14 | showPoint(point1); 15 | console.log("Move 4 across and 2 down"); 16 | showPoint(point2); 17 | 18 | 19 | 20 | /* Further Adventures 21 | * 22 | * 1) Change the amount by which the point is moved 23 | * by altering the x and y properties of 24 | * the object literal passed to the move function. 25 | * 26 | * 2) Write a reflectX function that reflects 27 | * a point in the x-axis, returning the new point. 28 | * 29 | * 3) How about a rotate90 function that rotates 30 | * the point by 90 degrees anticlockwise 31 | * around ( 0 , 0 )? 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing7.15.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.15 3 | * Shorthand object methods and padding 4 | */ 5 | 6 | var spacer = { 7 | blank() { 8 | return ""; 9 | }, 10 | 11 | newLine() { 12 | return "\n"; 13 | }, 14 | 15 | line(length, character) { 16 | return ''.padStart(length, character); 17 | }, 18 | 19 | wrap(text, length, character) { 20 | return (character + " " + text).padEnd(length - 1) + character; 21 | }, 22 | 23 | box(text, length, character) { 24 | const border = spacer.line(length, character); 25 | const wrapText = spacer.wrap(text, length, character); 26 | 27 | return ` 28 | ${border} 29 | ${wrapText} 30 | ${border} 31 | `; 32 | } 33 | }; 34 | 35 | console.log(spacer.box("Mercury", 11, "=")); 36 | console.log(spacer.box("Mars", 11, "*")); 37 | 38 | 39 | 40 | /* Further Adventures 41 | * 42 | * 1) Change the Spacer.box function so that 43 | * the box is 5 lines high. 44 | * 45 | * Spacer.box("Earth"); 46 | * 47 | * > ========= 48 | * > = = 49 | * > = Earth = 50 | * > = = 51 | * > ========= 52 | * 53 | */ -------------------------------------------------------------------------------- /projects/theCrypt_Node/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var path = require('path'); 4 | var apiRouter = require('./api'); 5 | 6 | app.use(express.static(path.resolve(__dirname, "public"))); 7 | app.use('/api', apiRouter); 8 | 9 | app.listen(1337); -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/game.js: -------------------------------------------------------------------------------- 1 | var Player = require('./player'); 2 | var gameCounter = 0; 3 | 4 | function getID () { 5 | gameCounter += 1; 6 | return gameCounter; 7 | } 8 | 9 | function Game (playerName, playerHealth, firstPlace) { 10 | this.id = getID(); 11 | this.messages = []; 12 | 13 | this.player = new Player(playerName, playerHealth); 14 | this.player.setPlace(firstPlace); 15 | 16 | this.inPlay = true; 17 | } 18 | 19 | Game.prototype = { 20 | getData: function () { 21 | var player = this.player; 22 | var place = player.getPlace(); 23 | 24 | return { 25 | gameID: this.id, 26 | player: player.getData(), 27 | place: place.getData(), 28 | messages: this.messages, 29 | inPlay: this.inPlay 30 | }; 31 | }, 32 | 33 | clearMessages: function () { 34 | this.messages = []; 35 | }, 36 | 37 | addMessage: function (message) { 38 | this.messages.push(message); 39 | } 40 | }; 41 | 42 | module.exports = Game; -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/gameCache.js: -------------------------------------------------------------------------------- 1 | var Game = require('./game'); 2 | var games = {}; 3 | 4 | var buildMap = require('./mapBuilder'); 5 | var mapData = require('../maps/TheDarkHouse.json'); 6 | 7 | function startGame (playerName, playerHealth) { 8 | var map = buildMap(mapData); 9 | var place = map.store[map.firstPlace]; 10 | 11 | var game = new Game(playerName, playerHealth, place); 12 | 13 | games[game.id] = game; 14 | return game; 15 | } 16 | 17 | function endGame (id) { 18 | delete games[id]; 19 | } 20 | 21 | function getGame (id) { 22 | return games[id]; 23 | } 24 | 25 | module.exports = { 26 | start: startGame, 27 | end: endGame, 28 | get: getGame 29 | }; -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/place.js: -------------------------------------------------------------------------------- 1 | var Place = function (title, description) { 2 | var exits = {}; 3 | var items = []; 4 | var challenges = {}; 5 | 6 | this.addItem = function (item) { 7 | items.push(item); 8 | }; 9 | 10 | this.getLastItem = function () { 11 | return items.pop(); 12 | }; 13 | 14 | this.addExit = function (direction, exit) { 15 | exits[direction] = exit; 16 | }; 17 | 18 | this.getExit = function (direction) { 19 | return exits[direction]; 20 | }; 21 | 22 | this.addChallenge = function (direction, challenge) { 23 | challenges[direction] = challenge; 24 | }; 25 | 26 | this.getChallenge = function (direction) { 27 | return challenges[direction]; 28 | }; 29 | 30 | this.getData = function () { 31 | var data = { 32 | "title" : title, 33 | "description" : description, 34 | "items" : items.slice(), 35 | "exits" : Object.keys(exits) 36 | }; 37 | 38 | return data; 39 | }; 40 | }; 41 | 42 | module.exports = Place; -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/player.js: -------------------------------------------------------------------------------- 1 | var Player = function (name, health) { 2 | var items = []; 3 | var place = null; 4 | 5 | this.addItem = function (item) { 6 | items.push(item); 7 | }; 8 | 9 | this.hasItem = function (item) { 10 | return items.indexOf(item) !== -1; 11 | }; 12 | 13 | this.removeItem = function (item) { 14 | var itemIndex = items.indexOf(item); 15 | if (itemIndex !== -1) { 16 | items.splice(itemIndex, 1); 17 | } 18 | }; 19 | 20 | this.setPlace = function (destination) { 21 | place = destination; 22 | }; 23 | 24 | this.getPlace = function () { 25 | return place; 26 | }; 27 | 28 | this.applyDamage = function (damage) { 29 | health = health - damage; 30 | }; 31 | 32 | this.getData = function () { 33 | var data = { 34 | "name" : name, 35 | "health" : health, 36 | "items" : items.slice() 37 | }; 38 | 39 | if (place !== null) { 40 | data.place = place.title; 41 | } 42 | 43 | return data; 44 | }; 45 | }; 46 | 47 | module.exports = Player; -------------------------------------------------------------------------------- /projects/theCrypt_Node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "the-crypt-node", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "A text-based adventure game", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "thecrypt@room51.co.uk", 11 | "dependencies": { 12 | "express": "^4.13.4" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/img/rock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/projects/theCrypt_Node/public/img/rock.jpg -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/img/sand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/projects/theCrypt_Node/public/img/sand.jpg -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/commands.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function parseCommand (commandString) { 5 | var commandWords = commandString.split(" "); 6 | var command = { 7 | type: commandWords.shift() 8 | }; 9 | 10 | if (command.type === "go" || command.type === "use") { 11 | command.direction = commandWords.pop(); 12 | } 13 | 14 | command.item = commandWords.join(" "); 15 | 16 | return command; 17 | } 18 | 19 | function doAction () { 20 | var txtCommand = document.getElementById("txtCommand"); 21 | var commandString = txtCommand.value; 22 | var command = parseCommand(commandString); 23 | 24 | theCrypt.messageView.clear(); 25 | 26 | game.do(command); 27 | 28 | txtCommand.value = ""; 29 | txtCommand.focus(); 30 | } 31 | 32 | var commandButton = document.getElementById("btnCommand"); 33 | commandButton.addEventListener("click", doAction); 34 | 35 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/gameController.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function render (data) { 5 | theCrypt.placeView.render(data.place); 6 | theCrypt.playerView.render(data.player); 7 | if (data.messages !== undefined) { 8 | renderMessages(data.messages); 9 | } 10 | } 11 | 12 | function renderMessage (message) { 13 | theCrypt.messageView.render(message); 14 | } 15 | 16 | function renderMessages (messages) { 17 | messages.forEach(renderMessage); 18 | } 19 | 20 | function init () { 21 | gpwj.data.getStartData(function (data) { 22 | render(data); 23 | theCrypt.gameID = data.gameID; 24 | }); 25 | } 26 | 27 | function doAction (command) { 28 | gpwj.data.postAction(theCrypt.gameID, command, function (data) { 29 | render(data); 30 | }); 31 | } 32 | 33 | // Assign the public interface 34 | window.game = { 35 | do: doAction, 36 | init: init, 37 | message: renderMessage 38 | }; 39 | 40 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/playerView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var playerDiv = document.getElementById("player"); 5 | var playerScript = document.getElementById("playerTemplate"); 6 | var itemScript = document.getElementById("itemTemplate"); 7 | 8 | var playerTemplate = playerScript.innerHTML; 9 | var itemTemplate = itemScript.innerHTML; 10 | 11 | function render (data) { 12 | var itemsDiv; 13 | 14 | var items = data.items.map(function (itemName) { 15 | return { item : itemName }; 16 | }); 17 | 18 | playerDiv.innerHTML = gpwj.templates.fill(playerTemplate, data); 19 | 20 | itemsDiv = document.getElementById("playerItems"); 21 | itemsDiv.innerHTML = gpwj.templates.fillList(itemTemplate, items); 22 | } 23 | 24 | if (window.theCrypt === undefined) { 25 | window.theCrypt = {}; 26 | } 27 | 28 | theCrypt.playerView = { 29 | render: render 30 | }; 31 | 32 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); --------------------------------------------------------------------------------
')); 15 | } 16 | } 17 | 18 | function updateState (data) { 19 | theCrypt.gameID = data.gameID; 20 | render(data); 21 | } 22 | 23 | function init (playerName, gameID) { 24 | theCrypt.playerName = playerName; 25 | theCrypt.gameID = gameID; 26 | 27 | theCrypt.data.getStartData(updateState); 28 | } 29 | 30 | function doAction (command) { 31 | theCrypt.data.postAction(command, updateState); 32 | } 33 | 34 | // Assign the public interface 35 | window.game = { 36 | do: doAction, 37 | init: init 38 | }; 39 | 40 | })(); -------------------------------------------------------------------------------- /Ch23_Express/TheCrypt/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /Ch23_Express/TheCrypt/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); -------------------------------------------------------------------------------- /Ch23_Express/chapter23.md: -------------------------------------------------------------------------------- 1 | # Chapter 23 - Express: building an API -------------------------------------------------------------------------------- /Ch23_Express/webserver/fitnessServer.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var bodyParser = require('body-parser'); 4 | 5 | app.use(express.static('public')); 6 | app.use(bodyParser.json()); 7 | 8 | app.post('/fitness', processSession); 9 | 10 | function processSession (req, res) { 11 | console.log(req.body); 12 | 13 | // this code is added later 14 | // in the chapter 15 | res.json({ 16 | 'status': 'OK', 17 | 'message': 'Session received for ' + req.body.name 18 | }); 19 | 20 | }; 21 | 22 | app.listen(1337); -------------------------------------------------------------------------------- /Ch23_Express/webserver/hello.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | 3 | var app = express(); 4 | 5 | app.get('/', sayHello); 6 | 7 | function sayHello (req, res) { 8 | res.send('
Hello World!
'); 9 | } 10 | 11 | app.listen(1337); -------------------------------------------------------------------------------- /Ch23_Express/webserver/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-server", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "express": "^4.13.4" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /Ch23_Express/webserver/public/adventure.html: -------------------------------------------------------------------------------- 1 |I'm going on an adventure!
-------------------------------------------------------------------------------- /Ch23_Express/webserver/public/client-server-GET.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/Ch23_Express/webserver/public/client-server-GET.png -------------------------------------------------------------------------------- /Ch23_Express/webserver/public/client-server.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Client-Server Interaction
11 |The steps involved in requesting a resource.
12 |
13 | 
17 |
Fitness Data
10 |The data is sent to the server automatically.
11 | 12 | 13 | -------------------------------------------------------------------------------- /Ch23_Express/webserver/public/index.html: -------------------------------------------------------------------------------- 1 |Hello World!
-------------------------------------------------------------------------------- /Ch23_Express/webserver/public/js/xhrPost.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | name: "Mahesha", 3 | sessionDate: "2017-02-07", 4 | duration: 60 5 | }; 6 | var json = JSON.stringify(data); 7 | 8 | var url = "/fitness"; 9 | 10 | var xhr = new XMLHttpRequest(); 11 | xhr.open("POST", url); 12 | 13 | xhr.setRequestHeader('Content-Type', 'application/json'); 14 | 15 | /* code added later in chapter */ 16 | xhr.addEventListener("load", function () { 17 | var responseData = JSON.parse(xhr.responseText); 18 | alert(responseData.message); 19 | }); 20 | /* end */ 21 | 22 | xhr.send(json); -------------------------------------------------------------------------------- /Ch23_Express/webserver/public/moon.html: -------------------------------------------------------------------------------- 1 |Moon Quote
2 |We choose to go to the moon
-------------------------------------------------------------------------------- /Ch23_Express/webserver/static.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static('public')); 5 | 6 | app.listen(1337); -------------------------------------------------------------------------------- /Ch23_Express/webserver/threeRoutes.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.get('/', sayHello); 5 | app.get('/moon', goMoon); 6 | app.get('/adventure', setOff); 7 | 8 | function sayHello (req, res) { 9 | res.send('Hello World!
'); 10 | } 11 | 12 | function goMoon (req, res) { 13 | var html = 'Moon Quote
'; 14 | html += 'We choose to go to the moon.
'; 15 | res.send(html); 16 | } 17 | 18 | function setOff (req, res) { 19 | res.send('I’m going on an adventure!
'); 20 | } 21 | 22 | app.listen(1337); -------------------------------------------------------------------------------- /Ch24_Polling/HighFives_XHR/auctionApp.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | var bid = 5; 5 | 6 | app.get('/state', getState); 7 | app.post('/bid', makeBid); 8 | 9 | function makeBid (req, res) { 10 | bid = bid + 5; 11 | res.json({ bid: bid }); 12 | } 13 | 14 | function getState (req, res) { 15 | res.json({ bid: bid }); 16 | } 17 | 18 | app.use(express.static("public")); 19 | 20 | app.listen(1337); -------------------------------------------------------------------------------- /Ch24_Polling/HighFives_XHR/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "high-fives", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "express": "^4.13.4" 6 | } 7 | } -------------------------------------------------------------------------------- /Ch24_Polling/HighFives_XHR/public/auction.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin:0; 3 | padding: 0; 4 | text-align:center; 5 | font-family:"Helvetica Neue", Helvetica, sans-serif; 6 | } 7 | 8 | h1 { 9 | background-color:rebeccapurple; 10 | color: #ffc; 11 | padding:0.5em; 12 | margin:0 0 1em; 13 | } 14 | 15 | table { 16 | width: 80%; 17 | margin:0 auto; 18 | border-collapse: collapse; 19 | } 20 | 21 | th, td { 22 | padding:0.3em; 23 | } 24 | 25 | th { 26 | background-color:rebeccapurple; 27 | color: #ffc; 28 | } 29 | 30 | td { 31 | border-bottom:1px solid rebeccapurple; 32 | } 33 | 34 | #bid { 35 | background-color: #eef; 36 | width:20%; 37 | } 38 | 39 | #asking { 40 | background-color: #fee; 41 | width:20%; 42 | } -------------------------------------------------------------------------------- /Ch24_Polling/HighFives_XHR/public/auction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |High Fives Auctions
10 | 11 || Item | 15 |Bid | 16 |Asking | 17 |Action | 18 |
|---|---|---|---|
| The Fruitinator! Action Figure | 23 |...loading... | 24 |...loading... | 25 |26 | |
')); 17 | } 18 | } 19 | 20 | function updateState (data) { 21 | theCrypt.gameID = data.gameID; 22 | render(data); 23 | } 24 | 25 | function init (playerName, gameID) { 26 | theCrypt.playerName = playerName; 27 | theCrypt.gameID = gameID; 28 | 29 | theCrypt.data.getStartData(updateState); 30 | } 31 | 32 | function doAction (command) { 33 | theCrypt.data.postAction(command, updateState); 34 | } 35 | 36 | // Assign the public interface 37 | window.game = { 38 | do: doAction, 39 | init: init 40 | }; 41 | 42 | })(); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/mainView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var mainDiv = document.getElementById("main"); 5 | var startFormDiv = document.getElementById("startControls"); 6 | 7 | var userDetailsTemplate = document.getElementById("userDetailsTemplate").innerHTML; 8 | 9 | function showMain () { 10 | mainDiv.className = ""; 11 | } 12 | 13 | function renderUser () { 14 | startFormDiv.innerHTML = gpwj.templates.fill(userDetailsTemplate, { 15 | playerName: theCrypt.playerName, 16 | gameID: theCrypt.gameID 17 | }); 18 | } 19 | 20 | function render () { 21 | showMain(); 22 | renderUser(); 23 | } 24 | 25 | if (window.theCrypt === undefined) { 26 | window.theCrypt = {}; 27 | } 28 | 29 | theCrypt.mainView = { 30 | render: render 31 | }; 32 | 33 | })(); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/startGame.js: -------------------------------------------------------------------------------- 1 | var btnStart = document.getElementById('btnStart'); 2 | 3 | btnStart.addEventListener('click', function () { 4 | var playerName = document.getElementById('txtPlayerName').value; 5 | var gameID = document.getElementById('txtGameID').value; 6 | 7 | game.init(playerName, gameID); 8 | }); -------------------------------------------------------------------------------- /Ch24_Polling/TheCrypt/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/auctionApp.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | var server = require('http').Server(app); 5 | var io = require('socket.io')(server); 6 | 7 | var bid = 5; 8 | 9 | io.on('connection', socketsRouter); 10 | 11 | function socketsRouter (socket) { 12 | 13 | socket.on('bid', makeBid); 14 | socket.on('state', getState); 15 | 16 | function makeBid () { 17 | bid = bid + 5; 18 | io.emit('update', { bid: bid }); 19 | } 20 | 21 | function getState () { 22 | socket.emit('update', { bid: bid }); 23 | } 24 | 25 | } 26 | 27 | app.use(express.static("public")); 28 | 29 | server.listen(1337); -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "high-fives", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "express": "^4.13.4", 6 | "socket.io": "^1.4.6" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/public/auction.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin:0; 3 | padding: 0; 4 | text-align:center; 5 | font-family:"Helvetica Neue", Helvetica, sans-serif; 6 | } 7 | 8 | h1 { 9 | background-color:rebeccapurple; 10 | color: #ffc; 11 | padding:0.5em; 12 | margin:0 0 1em; 13 | } 14 | 15 | table { 16 | width: 80%; 17 | margin:0 auto; 18 | border-collapse: collapse; 19 | } 20 | 21 | th, td { 22 | padding:0.3em; 23 | } 24 | 25 | th { 26 | background-color:rebeccapurple; 27 | color: #ffc; 28 | } 29 | 30 | td { 31 | border-bottom:1px solid rebeccapurple; 32 | } 33 | 34 | #bid { 35 | background-color: #eef; 36 | width:20%; 37 | } 38 | 39 | #asking { 40 | background-color: #fee; 41 | width:20%; 42 | } -------------------------------------------------------------------------------- /Ch25_Sockets/HighFives_Sockets/public/auction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
High Fives Auctions
10 | 11 || Item | 15 |Bid | 16 |Asking | 17 |Action | 18 |
|---|---|---|---|
| The Fruitinator! Action Figure | 23 |...loading... | 24 |...loading... | 25 |26 | |
High Fives Auctions
10 | 11 |12 | 13 | 14 | 15 |
16 | 17 || Item | 21 |Bid | 22 |Asking | 23 |Action | 24 |
|---|---|---|---|
| 29 | | 30 | | 31 | | 32 | |
')); 17 | } 18 | } 19 | 20 | function updateState (data) { 21 | theCrypt.gameID = data.gameID; 22 | render(data); 23 | } 24 | 25 | function init (playerName, gameID) { 26 | theCrypt.playerName = playerName; 27 | theCrypt.gameID = gameID; 28 | 29 | theCrypt.data.getStartData(updateState); 30 | } 31 | 32 | function doAction (command) { 33 | theCrypt.data.postAction(command, updateState); 34 | } 35 | 36 | // Assign the public interface 37 | window.game = { 38 | do: doAction, 39 | init: init 40 | }; 41 | 42 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/mainView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var mainDiv = document.getElementById("main"); 5 | var startFormDiv = document.getElementById("startControls"); 6 | 7 | var userDetailsTemplate = document.getElementById("userDetailsTemplate").innerHTML; 8 | 9 | function showMain () { 10 | mainDiv.className = ""; 11 | } 12 | 13 | function renderUser () { 14 | startFormDiv.innerHTML = gpwj.templates.fill(userDetailsTemplate, { 15 | playerName: theCrypt.playerName, 16 | gameID: theCrypt.gameID 17 | }); 18 | } 19 | 20 | function render () { 21 | showMain(); 22 | renderUser(); 23 | } 24 | 25 | if (window.theCrypt === undefined) { 26 | window.theCrypt = {}; 27 | } 28 | 29 | theCrypt.mainView = { 30 | render: render 31 | }; 32 | 33 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/startGame.js: -------------------------------------------------------------------------------- 1 | var btnStart = document.getElementById('btnStart'); 2 | 3 | btnStart.addEventListener('click', function () { 4 | var playerName = document.getElementById('txtPlayerName').value; 5 | var gameID = document.getElementById('txtGameID').value; 6 | 7 | game.init(playerName, gameID); 8 | }); -------------------------------------------------------------------------------- /Ch25_Sockets/TheCrypt/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); -------------------------------------------------------------------------------- /js_next/listing2.10.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 2.10 3 | * Declaring and assigning a variable with let 4 | */ 5 | 6 | 7 | // declare the variable 8 | let score; 9 | 10 | // assign it a value 11 | score = 100; 12 | 13 | console.log(score); 14 | 15 | // assign a new value 16 | score = score + 50; 17 | 18 | console.log(score); 19 | 20 | 21 | 22 | /* Further Adventures 23 | * 24 | * 1) Assign a new value to the score variable. 25 | * 26 | * 2) Log the new value to the console. 27 | * 28 | * 3) Declare two more variables using let, 29 | * and assign them values. 30 | * 31 | */ -------------------------------------------------------------------------------- /js_next/listing2.11.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 2.11 3 | * Declaring and assigning a constant with const 4 | */ 5 | 6 | 7 | // declare a variable that may change 8 | let playerLocation = "The Dungeon"; 9 | 10 | // declare a variable that won't change 11 | const playerName = "Kandra"; 12 | 13 | console.log(playerName + " is in " + playerLocation); 14 | 15 | // assign a new value 16 | playerLocation = "The Old Library"; 17 | 18 | console.log(playerName + " is in " + playerLocation); 19 | 20 | 21 | 22 | /* Further Adventures 23 | * 24 | * 1) Try assigning a new value to playerName. 25 | * 26 | * Variables declared with const must be assigned 27 | * a value when they are declared. They cannot 28 | * have a new value assigned to them later. 29 | * 30 | * 2) Try separating the declaration of playerName 31 | * from its first assignment. 32 | * 33 | * const playerName; 34 | * playerName = "Kandra"; 35 | * 36 | */ -------------------------------------------------------------------------------- /js_next/listing2.12.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 2.12 3 | * Using template literals when logging variables 4 | */ 5 | 6 | 7 | let playerLocation = "The Dungeon"; 8 | const playerName = "Kandra"; 9 | 10 | // use backticks and placeholders to display values 11 | console.log(`${playerName} is in ${playerLocation}`); 12 | 13 | playerLocation = "The Old Library"; 14 | 15 | console.log(`${playerName} is in ${playerLocation}`); 16 | 17 | 18 | 19 | /* Further Adventures 20 | * 21 | * Place text between backticks to create a 22 | * template literal. 23 | * 24 | * 1) Change the location again and display the updated 25 | * player info. 26 | * 27 | * Variable values can be included in the template 28 | * by using a placeholder: 29 | * 30 | * `${variableName}` 31 | * 32 | * The value of the variable will replace the placeholder. 33 | * 34 | * 2) Create a new variable (using let or const). 35 | * 36 | * 3) Display the variable's value by using a template. 37 | * 38 | */ -------------------------------------------------------------------------------- /js_next/listing3.17.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.17 3 | * Using dot notation in templates 4 | */ 5 | 6 | 7 | const book = { 8 | title : "The Hobbit", 9 | author : "J. R. R. Tolkien", 10 | published : 1937 11 | }; 12 | 13 | console.log(`${book.title} by ${book.author}`); 14 | 15 | 16 | 17 | /* Further Adventures 18 | * 19 | * 1) Use a placeholder to include the published 20 | * property in the template string. 21 | * 22 | * 2) Add a second book. 23 | * 24 | * 3) Log its details to the console using a template. 25 | * 26 | * The book variable is declared as a constant. 27 | * 28 | * 4) Try to update one of the properties. 29 | * Does the program still work? 30 | * 31 | * book.published = 1938; 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing3.18.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.18 3 | * Assigning properties to variables 4 | */ 5 | 6 | 7 | const book = { 8 | title : "The Hobbit", 9 | author : "J. R. R. Tolkien", 10 | published : 1937 11 | }; 12 | 13 | // declare two variables whose names match 14 | // properties of the object. 15 | // assign the matching values to the variables 16 | 17 | const { title, author } = book; 18 | 19 | console.log(`${title} by ${author}`); 20 | 21 | 22 | 23 | /* Further Adventures 24 | * 25 | * Using curly braces on the left of an assignment, 26 | * 27 | * { name1, name2 } = myObject; 28 | * 29 | * assigns property values of the object on the right 30 | * to variables with matching names. 31 | * 32 | * The process is called object destructuring 33 | * 34 | * 1) Assign the published property to a matching variable. 35 | * 36 | * 2) Include the new variable in the template. 37 | * 38 | * The destructured variables are declared as constants. 39 | * 40 | * 4) Add a second book and try the destructuring 41 | * process again. 42 | * 43 | */ -------------------------------------------------------------------------------- /js_next/listing3.19.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.19 3 | * Assigning variables to matching properties 4 | */ 5 | 6 | const author = "Mark Twain"; 7 | const title = "The Adventures of Tom Sawyer"; 8 | 9 | const book = { 10 | author, 11 | title 12 | }; 13 | 14 | console.log(book); 15 | 16 | 17 | 18 | /* Further Adventures 19 | * 20 | * 1) Run the program. 21 | * 22 | * The book object is displayed on the console. 23 | * 24 | * When a variable name matches a property name 25 | * you want to assign, you can use the shorthand 26 | * shown in the listing above. 27 | * 28 | * 2) Change the program to use the longer syntax. 29 | * 30 | * e.g. for just the author property: 31 | * 32 | * const book = { 33 | * author: author 34 | * }; 35 | * 36 | * Does it still work? 37 | * 38 | * 3) Add a third variable and matching property 39 | * using the shorthand. 40 | * 41 | */ -------------------------------------------------------------------------------- /js_next/listing3.20.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 3.20 3 | * Updating objects assigned to constants 4 | */ 5 | 6 | const player1 = { 7 | name: "Max", 8 | attempted: 0, 9 | correct: 0 10 | }; 11 | 12 | player1.attempted = 1; 13 | player1.correct = 1; 14 | player1.score = 50; 15 | 16 | const playerInfo = ` 17 | * ${player1.name} 18 | * has score 19 | * ${player1.score} 20 | `; 21 | 22 | console.log(playerInfo); 23 | 24 | 25 | 26 | /* Further Adventures 27 | * 28 | * 1) Add more lines to the program to 29 | * update the name and score. 30 | * 31 | * 2) Log the updated player info to the console. 32 | * 33 | * You can only assign a value once to a variable 34 | * declared with const. However, if you assign an 35 | * object to the variable, you can update the 36 | * variable's properties. 37 | * 38 | * 3) At the end of the program, 39 | * try assigning a new object to player1: 40 | * 41 | * player1 = { name: "Kandra" }; 42 | * 43 | * 4) Play with the playerInfo template to make 44 | * the info logged more interesting. 45 | * 46 | * Template strings can span multiple lines. 47 | * 48 | */ -------------------------------------------------------------------------------- /js_next/listing4.15.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 4.15 3 | * Using fat arrow notation 4 | */ 5 | 6 | const sayHello = () => { 7 | console.log("Hello World!"); 8 | }; 9 | 10 | sayHello(); 11 | sayHello(); 12 | sayHello(); 13 | 14 | 15 | 16 | /* Further Adventures 17 | * 18 | * 1) Change the message from the sayHello function. 19 | * 20 | * Enclose the message in backticks to spread it 21 | * across multiple lines. 22 | * 23 | * 2) Break the Hello World! message across two lines. 24 | * 25 | * 3) Create a function that prints the letters 26 | * of "Hello World!" one by one down the page. 27 | * 28 | */ -------------------------------------------------------------------------------- /js_next/listing4.16.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 4.16 3 | * Displaying a menu using a template string 4 | */ 5 | 6 | const displayMenu = () => { 7 | console.log(` 8 | Please choose an option: 9 | (1) Print log 10 | (2) Upload file 11 | (9) Quit 12 | ` ); 13 | }; 14 | 15 | displayMenu(); 16 | 17 | 18 | 19 | /* Further Adventures 20 | * 21 | * 1) Add two more options to the displayMenu 22 | * function and run the program. 23 | * 24 | * 2) Create your own displayMyMenu function. 25 | * 26 | * 3) Add a line to call your function as well. 27 | * Run the program 28 | * 29 | */ -------------------------------------------------------------------------------- /js_next/listing4.17.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 4.17 3 | * A function to display player information 4 | */ 5 | 6 | let player; 7 | 8 | const player1 = { 9 | name: "Kandra", 10 | place: "The Dungeon of Doom", 11 | health: 50 12 | }; 13 | 14 | const player2 = { 15 | name: "Dax", 16 | place: "The Old Library", 17 | health: 40 18 | }; 19 | 20 | const showPlayerInfo = () => { 21 | const { name, place, health } = player; 22 | console.log(` 23 | ${name} 24 | ------------------------------ 25 | ${name} is in ${place} 26 | ${name} has health ${health} 27 | ------------------------------ 28 | ` ); 29 | }; 30 | 31 | player = player1; 32 | showPlayerInfo(); 33 | 34 | player = player2; 35 | showPlayerInfo(); 36 | 37 | 38 | 39 | /* Further Adventures 40 | * 41 | * 1) Write a function that just shows 42 | * where the player is. 43 | * 44 | * 2) Write a function that just shows 45 | * the player's health. 46 | * 47 | * 3) Change the showPlayerInfo function 48 | * to use your two functions. 49 | * 50 | */ -------------------------------------------------------------------------------- /js_next/listing5.15.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.15 3 | * Calling the same function with different arguments 4 | */ 5 | 6 | const showMessage = message => console.log(`The message is: ${message}`); 7 | 8 | showMessage("It's full of stars!"); 9 | showMessage("Hello to Jason Isaacs"); 10 | showMessage("Hello to Jason Isaacs and Stephen Fry"); 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Create a showMessage2 function to 17 | * display its prefixed text on a 18 | * separate line to the message. 19 | * 20 | * 2) Declare a myMessage variable and 21 | * assign it a string value. 22 | * 23 | * 3) Call the showMessage2 function with 24 | * myMessage as the argument. 25 | * 26 | */ -------------------------------------------------------------------------------- /js_next/listing5.16.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.16 3 | * Defining a function with a default argument 4 | */ 5 | 6 | const showMessage = (message = "Hello World!") => { 7 | console.log(`The message is: ${message}`); 8 | }; 9 | 10 | showMessage("It's full of stars!"); 11 | showMessage("Hello to Jason Isaacs"); 12 | showMessage(); 13 | 14 | 15 | 16 | /* Further Adventures 17 | * 18 | * 1) Add a second parameter to the function 19 | * called prefix. 20 | * 21 | * 2) Change the template string to log the 22 | * prefix followed by the message. 23 | * 24 | * 3) Include a default value for the prefix. 25 | * 26 | */ -------------------------------------------------------------------------------- /js_next/listing5.17.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.17 3 | * Using the square function 4 | */ 5 | 6 | const square = numberToSquare => { 7 | const result = numberToSquare ** 2; 8 | console.log(`${numberToSquare} * ${numberToSquare} = ${result}`); 9 | }; 10 | 11 | square(10); 12 | square(-2); 13 | square(1111); 14 | square(0.5); 15 | 16 | 17 | 18 | /* Further Adventures 19 | * 20 | * 1) Define a cube function that cubes 21 | * any number passed in as an argument. 22 | * 23 | * 2) Test your cube function 24 | * four times with different arguments. 25 | * 26 | * Math.sqrt is a built-in function to find 27 | * the positive square root of a number. 28 | * e.g. Math.sqrt(9) finds the square root of 9. 29 | * 30 | * 3) Define and test a squareRoot function 31 | * to find square roots and display 32 | * them on the console. 33 | * e.g. The square root of 9 is 3. 34 | * 35 | */ -------------------------------------------------------------------------------- /js_next/listing5.18.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 5.18 3 | * A function with two arguments 4 | */ 5 | 6 | const showSum = (number1, number2) => { 7 | const total = number1 + number2; 8 | console.log(`The sum is ${total}`); 9 | }; 10 | 11 | showSum(30, 23); 12 | showSum(2.8, -5); 13 | 14 | 15 | 16 | /* Further Adventures 17 | * 18 | * 1) Use the showSum function to add 56 and 74. 19 | * 20 | * To multiply two numbers, use the * symbol. 21 | * e.g. 3 * 5 is 3 multiplied by 5. 22 | * 23 | * 2) Create a showProduct function to multiply two numbers. 24 | * 25 | * 3) Use your function to multiply three pairs of numbers. 26 | * 27 | * To divide one number by another, use /. 28 | * e.g. 10 / 2 is 10 divided by 2. 29 | * 30 | * 4) What about showDifference and showQuotient 31 | * for subtraction and division? 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing6.11.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 6.11 3 | * Returning a value from a function 4 | */ 5 | 6 | const getMessage = () => "I’m going on an adventure!"; 7 | 8 | const response = getMessage(); 9 | 10 | console.log(response); 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Write a getMyMessage function 17 | * that returns a message of 18 | * your choosing. 19 | * 20 | */ -------------------------------------------------------------------------------- /js_next/listing6.12.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 6.12 3 | * Using the return value as an argument 4 | */ 5 | 6 | const getHelloTo = name => `Hello to ${name}`; 7 | 8 | console.log(getHelloTo("Kandra")); 9 | console.log(getHelloTo("Dax")); 10 | 11 | 12 | 13 | /* Further Adventures 14 | * 15 | * 1) Rewrite the function using curly braces 16 | * for the function body and an explicit 17 | * return statement. 18 | * 19 | * 2) Run the program to check the output 20 | * is unaffected by the change in form. 21 | * 22 | * Do you prefer the function with or without 23 | * the return statement? 24 | * 25 | */ -------------------------------------------------------------------------------- /js_next/listing6.13.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 6.13 3 | * Returning the sum of two numbers 4 | */ 5 | 6 | const add = (x, y) => x + y; 7 | 8 | const sum = add(50, 23); 9 | 10 | console.log(sum); 11 | 12 | 13 | 14 | /* Further Adventures 15 | * 16 | * 1) Find and display the sum of 17 | * a different pair of numbers 18 | * 19 | * 2) Change the call to console.log so that 20 | * the display on the console reads: 21 | * 'The sum of 50 and 23 is 73' 22 | * using the add function to generate the answer. 23 | * 24 | * 3) Can you use the add function as it is 25 | * to add more than two numbers? 26 | * Hint: You can nest calls to add. 27 | * 28 | * 4) Create a function to return the sum of 29 | * three numbers given as arguments. 30 | * 31 | */ -------------------------------------------------------------------------------- /js_next/listing7.12.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.12 3 | * Destructuring an object argument 4 | */ 5 | 6 | const planet1 = { 7 | name: "Jupiter", 8 | position: 5, 9 | type: "Gas Giant", 10 | radius: 69911, 11 | sizeRank: 1 12 | }; 13 | 14 | const getPlanetInfo = planet => { 15 | const { name, position } = planet; 16 | return `${name}: planet number ${position}`; 17 | }; 18 | 19 | console.log(getPlanetInfo(planet1)); 20 | 21 | 22 | 23 | /* Further Adventures 24 | * 25 | * 1) Create a second planet object. 26 | * 27 | * 2) Use getPlanetInfo to log details of 28 | * the second planet. 29 | * 30 | * 3) Update the getPlanetInfo function to 31 | * include more information about 32 | * each planet. 33 | * 34 | */ -------------------------------------------------------------------------------- /js_next/listing7.13.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.13 3 | * Shorthand properties and argument destructuring 4 | */ 5 | 6 | const buildPlanet = function (name, position, type, radius, rank) { 7 | return { 8 | name, 9 | position, 10 | type, 11 | radius, 12 | sizeRank: rank 13 | }; 14 | }; 15 | 16 | const getPlanetInfo = ({name, position}) => `${name.toUpperCase()}: planet ${position}`; 17 | 18 | const planet1 = buildPlanet("Jupiter", 5, "Gas Giant", 69911, 1); 19 | const planet2 = buildPlanet("Neptune", 8, "Ice Giant", 24622, 4); 20 | 21 | console.log(getPlanetInfo(planet1)); 22 | console.log(getPlanetInfo(planet2)); 23 | 24 | 25 | 26 | /* Further Adventures 27 | * 28 | * 1) Create a getPlanetInfo2 function that 29 | * uses destructuring to gather other planet 30 | * properties and returns a different string 31 | * of info. 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing7.14.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.14 3 | * Renaming properties when object destructuring 4 | */ 5 | 6 | const move = ({x, y}, {x: dx, y: dy}) => ({x: x + dx, y: y + dy}); 7 | 8 | const showPoint = ({x, y}) => console.log(`( ${x} , ${y} )`); 9 | 10 | const point1 = { x : 2, y : 5 }; 11 | 12 | const point2 = move(point1, { x : 4, y : -2 }); 13 | 14 | showPoint(point1); 15 | console.log("Move 4 across and 2 down"); 16 | showPoint(point2); 17 | 18 | 19 | 20 | /* Further Adventures 21 | * 22 | * 1) Change the amount by which the point is moved 23 | * by altering the x and y properties of 24 | * the object literal passed to the move function. 25 | * 26 | * 2) Write a reflectX function that reflects 27 | * a point in the x-axis, returning the new point. 28 | * 29 | * 3) How about a rotate90 function that rotates 30 | * the point by 90 degrees anticlockwise 31 | * around ( 0 , 0 )? 32 | * 33 | */ -------------------------------------------------------------------------------- /js_next/listing7.15.js: -------------------------------------------------------------------------------- 1 | /* Get Programming with JavaScript 2 | * Listing 7.15 3 | * Shorthand object methods and padding 4 | */ 5 | 6 | var spacer = { 7 | blank() { 8 | return ""; 9 | }, 10 | 11 | newLine() { 12 | return "\n"; 13 | }, 14 | 15 | line(length, character) { 16 | return ''.padStart(length, character); 17 | }, 18 | 19 | wrap(text, length, character) { 20 | return (character + " " + text).padEnd(length - 1) + character; 21 | }, 22 | 23 | box(text, length, character) { 24 | const border = spacer.line(length, character); 25 | const wrapText = spacer.wrap(text, length, character); 26 | 27 | return ` 28 | ${border} 29 | ${wrapText} 30 | ${border} 31 | `; 32 | } 33 | }; 34 | 35 | console.log(spacer.box("Mercury", 11, "=")); 36 | console.log(spacer.box("Mars", 11, "*")); 37 | 38 | 39 | 40 | /* Further Adventures 41 | * 42 | * 1) Change the Spacer.box function so that 43 | * the box is 5 lines high. 44 | * 45 | * Spacer.box("Earth"); 46 | * 47 | * > ========= 48 | * > = = 49 | * > = Earth = 50 | * > = = 51 | * > ========= 52 | * 53 | */ -------------------------------------------------------------------------------- /projects/theCrypt_Node/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var path = require('path'); 4 | var apiRouter = require('./api'); 5 | 6 | app.use(express.static(path.resolve(__dirname, "public"))); 7 | app.use('/api', apiRouter); 8 | 9 | app.listen(1337); -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/game.js: -------------------------------------------------------------------------------- 1 | var Player = require('./player'); 2 | var gameCounter = 0; 3 | 4 | function getID () { 5 | gameCounter += 1; 6 | return gameCounter; 7 | } 8 | 9 | function Game (playerName, playerHealth, firstPlace) { 10 | this.id = getID(); 11 | this.messages = []; 12 | 13 | this.player = new Player(playerName, playerHealth); 14 | this.player.setPlace(firstPlace); 15 | 16 | this.inPlay = true; 17 | } 18 | 19 | Game.prototype = { 20 | getData: function () { 21 | var player = this.player; 22 | var place = player.getPlace(); 23 | 24 | return { 25 | gameID: this.id, 26 | player: player.getData(), 27 | place: place.getData(), 28 | messages: this.messages, 29 | inPlay: this.inPlay 30 | }; 31 | }, 32 | 33 | clearMessages: function () { 34 | this.messages = []; 35 | }, 36 | 37 | addMessage: function (message) { 38 | this.messages.push(message); 39 | } 40 | }; 41 | 42 | module.exports = Game; -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/gameCache.js: -------------------------------------------------------------------------------- 1 | var Game = require('./game'); 2 | var games = {}; 3 | 4 | var buildMap = require('./mapBuilder'); 5 | var mapData = require('../maps/TheDarkHouse.json'); 6 | 7 | function startGame (playerName, playerHealth) { 8 | var map = buildMap(mapData); 9 | var place = map.store[map.firstPlace]; 10 | 11 | var game = new Game(playerName, playerHealth, place); 12 | 13 | games[game.id] = game; 14 | return game; 15 | } 16 | 17 | function endGame (id) { 18 | delete games[id]; 19 | } 20 | 21 | function getGame (id) { 22 | return games[id]; 23 | } 24 | 25 | module.exports = { 26 | start: startGame, 27 | end: endGame, 28 | get: getGame 29 | }; -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/place.js: -------------------------------------------------------------------------------- 1 | var Place = function (title, description) { 2 | var exits = {}; 3 | var items = []; 4 | var challenges = {}; 5 | 6 | this.addItem = function (item) { 7 | items.push(item); 8 | }; 9 | 10 | this.getLastItem = function () { 11 | return items.pop(); 12 | }; 13 | 14 | this.addExit = function (direction, exit) { 15 | exits[direction] = exit; 16 | }; 17 | 18 | this.getExit = function (direction) { 19 | return exits[direction]; 20 | }; 21 | 22 | this.addChallenge = function (direction, challenge) { 23 | challenges[direction] = challenge; 24 | }; 25 | 26 | this.getChallenge = function (direction) { 27 | return challenges[direction]; 28 | }; 29 | 30 | this.getData = function () { 31 | var data = { 32 | "title" : title, 33 | "description" : description, 34 | "items" : items.slice(), 35 | "exits" : Object.keys(exits) 36 | }; 37 | 38 | return data; 39 | }; 40 | }; 41 | 42 | module.exports = Place; -------------------------------------------------------------------------------- /projects/theCrypt_Node/lib/player.js: -------------------------------------------------------------------------------- 1 | var Player = function (name, health) { 2 | var items = []; 3 | var place = null; 4 | 5 | this.addItem = function (item) { 6 | items.push(item); 7 | }; 8 | 9 | this.hasItem = function (item) { 10 | return items.indexOf(item) !== -1; 11 | }; 12 | 13 | this.removeItem = function (item) { 14 | var itemIndex = items.indexOf(item); 15 | if (itemIndex !== -1) { 16 | items.splice(itemIndex, 1); 17 | } 18 | }; 19 | 20 | this.setPlace = function (destination) { 21 | place = destination; 22 | }; 23 | 24 | this.getPlace = function () { 25 | return place; 26 | }; 27 | 28 | this.applyDamage = function (damage) { 29 | health = health - damage; 30 | }; 31 | 32 | this.getData = function () { 33 | var data = { 34 | "name" : name, 35 | "health" : health, 36 | "items" : items.slice() 37 | }; 38 | 39 | if (place !== null) { 40 | data.place = place.title; 41 | } 42 | 43 | return data; 44 | }; 45 | }; 46 | 47 | module.exports = Player; -------------------------------------------------------------------------------- /projects/theCrypt_Node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "the-crypt-node", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "A text-based adventure game", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "thecrypt@room51.co.uk", 11 | "dependencies": { 12 | "express": "^4.13.4" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/img/rock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/projects/theCrypt_Node/public/img/rock.jpg -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/img/sand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jrlarsen/GetProgramming/9f89c8aaaaecd518c6fea61de94a4ecd129ab03a/projects/theCrypt_Node/public/img/sand.jpg -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/commands.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function parseCommand (commandString) { 5 | var commandWords = commandString.split(" "); 6 | var command = { 7 | type: commandWords.shift() 8 | }; 9 | 10 | if (command.type === "go" || command.type === "use") { 11 | command.direction = commandWords.pop(); 12 | } 13 | 14 | command.item = commandWords.join(" "); 15 | 16 | return command; 17 | } 18 | 19 | function doAction () { 20 | var txtCommand = document.getElementById("txtCommand"); 21 | var commandString = txtCommand.value; 22 | var command = parseCommand(commandString); 23 | 24 | theCrypt.messageView.clear(); 25 | 26 | game.do(command); 27 | 28 | txtCommand.value = ""; 29 | txtCommand.focus(); 30 | } 31 | 32 | var commandButton = document.getElementById("btnCommand"); 33 | commandButton.addEventListener("click", doAction); 34 | 35 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/gameController.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function render (data) { 5 | theCrypt.placeView.render(data.place); 6 | theCrypt.playerView.render(data.player); 7 | if (data.messages !== undefined) { 8 | renderMessages(data.messages); 9 | } 10 | } 11 | 12 | function renderMessage (message) { 13 | theCrypt.messageView.render(message); 14 | } 15 | 16 | function renderMessages (messages) { 17 | messages.forEach(renderMessage); 18 | } 19 | 20 | function init () { 21 | gpwj.data.getStartData(function (data) { 22 | render(data); 23 | theCrypt.gameID = data.gameID; 24 | }); 25 | } 26 | 27 | function doAction (command) { 28 | gpwj.data.postAction(theCrypt.gameID, command, function (data) { 29 | render(data); 30 | }); 31 | } 32 | 33 | // Assign the public interface 34 | window.game = { 35 | do: doAction, 36 | init: init, 37 | message: renderMessage 38 | }; 39 | 40 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/messageView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var messageDiv = document.getElementById("messages"); 5 | var templateScript = document.getElementById("messageTemplate"); 6 | var template = templateScript.innerHTML; 7 | 8 | function render (message) { 9 | var data = { message: message }; 10 | messageDiv.innerHTML = gpwj.templates.fill(template, data); 11 | } 12 | 13 | function clear () { 14 | messageDiv.innerHTML = ""; 15 | } 16 | 17 | if (window.theCrypt === undefined) { 18 | window.theCrypt = {}; 19 | } 20 | 21 | theCrypt.messageView = { 22 | render: render, 23 | clear: clear 24 | }; 25 | 26 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/playerView.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var playerDiv = document.getElementById("player"); 5 | var playerScript = document.getElementById("playerTemplate"); 6 | var itemScript = document.getElementById("itemTemplate"); 7 | 8 | var playerTemplate = playerScript.innerHTML; 9 | var itemTemplate = itemScript.innerHTML; 10 | 11 | function render (data) { 12 | var itemsDiv; 13 | 14 | var items = data.items.map(function (itemName) { 15 | return { item : itemName }; 16 | }); 17 | 18 | playerDiv.innerHTML = gpwj.templates.fill(playerTemplate, data); 19 | 20 | itemsDiv = document.getElementById("playerItems"); 21 | itemsDiv.innerHTML = gpwj.templates.fillList(itemTemplate, items); 22 | } 23 | 24 | if (window.theCrypt === undefined) { 25 | window.theCrypt = {}; 26 | } 27 | 28 | theCrypt.playerView = { 29 | render: render 30 | }; 31 | 32 | })(); -------------------------------------------------------------------------------- /projects/theCrypt_Node/public/js/templates.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | function fill (template, data) { 5 | Object.keys(data).forEach(function (key) { 6 | var placeholder = "{{" + key + "}}"; 7 | var value = data[key]; 8 | 9 | while (template.indexOf(placeholder) !== -1) { 10 | template = template.replace(placeholder, value); 11 | } 12 | }); 13 | 14 | return template; 15 | } 16 | 17 | function fillList (template, dataArray) { 18 | var listString = ""; 19 | 20 | dataArray.forEach(function (data) { 21 | listString += fill(template, data); 22 | }); 23 | 24 | return listString; 25 | } 26 | 27 | if (window.gpwj === undefined) { 28 | window.gpwj = {}; 29 | } 30 | 31 | gpwj.templates = { 32 | fill: fill, 33 | fillList: fillList 34 | }; 35 | 36 | })(); --------------------------------------------------------------------------------