From ddab20ff8651cccd0fc6310d188c60b9c542f189 Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 13:21:06 -0700 Subject: [PATCH 1/7] Add to messenger: comments & limit 10 --- JavaScript/code-style.md | 6 ++-- JavaScript/index.html | 5 +-- JavaScript/js/gameDefinition.js | 4 +-- JavaScript/js/messengerDefinition.js | 46 +++++++++++++++++++++------- 4 files changed, 43 insertions(+), 18 deletions(-) diff --git a/JavaScript/code-style.md b/JavaScript/code-style.md index e9fbcbc..0802438 100644 --- a/JavaScript/code-style.md +++ b/JavaScript/code-style.md @@ -35,7 +35,7 @@ gameFunctions, etc. - getter names do not contain the word "get" (or return, etc.) - setter names do contain the word "set" (although these should be rare) - camelCase for most items - - PascalCase + - PascalCase for Objects ### New ideas from one of us: @@ -50,8 +50,8 @@ gameFunctions, etc. room.doors(), entity.inventoryList(), etc. - Procedures (change something and rarely return values other than errors/success) - - Name describes the side effects + - Name describes the side effects (changes effected outside the function) - Usually contain a verb - - Rarely contains "And" - could be a sign of too much in one procedure + - Rarely contain "And" - could be a sign of too much in one procedure - Good examples: player.setLocation(newRoom), updateDisplay(), displayMessage(message) diff --git a/JavaScript/index.html b/JavaScript/index.html index f782496..7887a10 100644 --- a/JavaScript/index.html +++ b/JavaScript/index.html @@ -18,9 +18,10 @@
- +
-
+
diff --git a/JavaScript/js/gameDefinition.js b/JavaScript/js/gameDefinition.js index c072d30..726e6aa 100644 --- a/JavaScript/js/gameDefinition.js +++ b/JavaScript/js/gameDefinition.js @@ -4,10 +4,10 @@ class Game { constructor(setupData) { //setup the DOM with jquery const $userInput = $("#command") - const $outputBox = $("#message") + const $messageArea = $("#message") //create a messenger with access to the dom output box - const messenger = new Messenger($outputBox) + const messenger = new Messenger($messageArea) //create a new interpreter/parser with availible commands and synonyms const parser = new Parser({ diff --git a/JavaScript/js/messengerDefinition.js b/JavaScript/js/messengerDefinition.js index 899fe2f..943c8a8 100644 --- a/JavaScript/js/messengerDefinition.js +++ b/JavaScript/js/messengerDefinition.js @@ -1,24 +1,48 @@ -// Jacob's working on this... +// JD's working on this... +/** + * For displaying messages to the player + */ class Messenger { - constructor($outputBox) { - this.outputBox = $outputBox - this.outputHistory = [] + + /** + * @param messageArea A dom object in which to place message text + */ + constructor($messageArea) { + this.messageArea = $messageArea // A dom object in which to place messages + this.messageHistory = [] // A list of all previous messages, newest first } - addOutput(str) { - this.outputHistory.push(str) + /** + * @param message A string to display to the user + */ + addMessage(message) { + // Add the new message to the beginning of the history list (FILO) + this.messageHistory.unshift(message) + + // And display all messages this.render() } clearHistory() { - this.outputHistory = [] + this.messageHistory = [] } + // Display the list of messages render() { - let listItems = this.outputHistory.reduce((acc, curr) => acc + `
${curr}
`, '') - let messagesList = `
${listItems}
` - this.outputBox.children().remove() - this.outputBox.append(messagesList) + // Trim off all but the last ten messages in the history (first ten in array) + const MAX_MESSAGES_TO_DISPLAY = 10 + let lastTenMessages = this.messageHistory.slice(0, MAX_MESSAGES_TO_DISPLAY) + + // Create an html message list (using BEM css class structure) + let htmlMessages = lastTenMessages.reduce( + (acc, message) => acc + `
${message}
`, + '' + ) + let htmlMessagesGroup = `
${htmlMessages}
` + + // Replace current messages with the updated list + this.messageArea.children().remove() + this.messageArea.append(htmlMessagesGroup) } } \ No newline at end of file From 8f22ae829bc029d9379dc988b54ddadca2b75664 Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 13:50:04 -0700 Subject: [PATCH 2/7] Add descriptor objects --- JavaScript/index.html | 3 +- JavaScript/js/descriptorDefinition.js | 26 ++++++++++++++ JavaScript/js/gameDefinition.js | 50 +++++++++++++++++---------- 3 files changed, 60 insertions(+), 19 deletions(-) create mode 100644 JavaScript/js/descriptorDefinition.js diff --git a/JavaScript/index.html b/JavaScript/index.html index 7887a10..2b3b7ca 100644 --- a/JavaScript/index.html +++ b/JavaScript/index.html @@ -23,7 +23,7 @@
-
+

@@ -43,6 +43,7 @@ + diff --git a/JavaScript/js/descriptorDefinition.js b/JavaScript/js/descriptorDefinition.js new file mode 100644 index 0000000..1710ee5 --- /dev/null +++ b/JavaScript/js/descriptorDefinition.js @@ -0,0 +1,26 @@ +// JD's working on this... + +/** + * For displaying descriptions to the player (text about game that replaces itself) + */ +class Descriptor { + + /** + * @param descriptionArea A dom object in which to place description text + */ + constructor($descriptionArea) { + this.descriptionArea = $descriptionArea // A dom object in which to place text + } + + /** + * @param description A string to display to the user + */ + display(description) { + // Format the description for html + const htmlDescription = `
${description}
` + + // Display the description + this.descriptionArea.children().remove() + this.descriptionArea.append(htmlDescription) + } +} \ No newline at end of file diff --git a/JavaScript/js/gameDefinition.js b/JavaScript/js/gameDefinition.js index 726e6aa..610bbf8 100644 --- a/JavaScript/js/gameDefinition.js +++ b/JavaScript/js/gameDefinition.js @@ -1,13 +1,23 @@ -// Jacob's working on this... - +/** + * Main game object that controls game flow. + */ class Game { + + /** + * @param setupData An object specifcally formatted to provide info to the game. + * See config.js for example structure. + */ constructor(setupData) { - //setup the DOM with jquery + // Link the DOM command input area using jQuery const $userInput = $("#command") - const $messageArea = $("#message") - //create a messenger with access to the dom output box + // Link the DOM output areas using jQuery + const $messageArea = $("#message") const messenger = new Messenger($messageArea) + const $nameArea = $("#name") + const roomNamer = new Descriptor($nameArea) + const $descriptionArea = $("#description") + const descriptor = new Descriptor($descriptionArea) //create a new interpreter/parser with availible commands and synonyms const parser = new Parser({ @@ -19,10 +29,15 @@ class Game { drop: ['drop', 'd', 'leave', 'throw', 'abandon'] }) - //init the game state + // Initialize the game state let {_player, _rooms, _doors, _currentRoom} = loadGame(setupData) - // Sets up the game data with gameData (or loads previous game) + /** + * Loads a game from a saved game state (or initializes from a default state). + * + * @param gameData Specifically formatted object that represents the game state. + * See config.js for example structure. + */ function loadGame(gameData) { const player = gameData.entities.player const gameState = { @@ -68,16 +83,15 @@ class Game { return gameState } - //debug function that shows info about room in UI - function displayRoomStats(room){ - $('#room').text(room.name()) - $('#description').text(room.description()) - $('#items').text(room.listOfItems()) + // Function to display initial info about the current room + function displayRoomInfo(room) { + roomNamer.display(room.name()) + descriptor.display(room.description()) } //run function starts the game accepting input this.run = () => { - displayRoomStats(_currentRoom) + displayRoomInfo(_currentRoom) $userInput.on('keydown', (event) => { //user presses enter @@ -107,7 +121,7 @@ class Game { //clear the input field $userInput.val('') - displayRoomStats(_currentRoom) + displayRoomInfo(_currentRoom) } else if(event.which === 38){//Up arror pushed $userInput.val(parser.getLastCommandHistory()) @@ -125,7 +139,7 @@ class Game { checkWinningConditions() } else{ - messenger.addOutput(`You can't go ${direction}.`) + messenger.addMessage(`You can't go ${direction}.`) } } @@ -136,12 +150,12 @@ class Game { $('#items').text(_currentRoom.listOfItems()) } else{ - messenger.addOutput(`There's no ${itemName} here.`) + messenger.addMessage(`There's no ${itemName} here.`) } } function inventory() { - messenger.addOutput(_player.inventory()) + messenger.addMessage(_player.inventory()) } function drop(itemName) { @@ -150,7 +164,7 @@ class Game { _currentRoom.addItem(item) } else{ - messenger.addOutput(`You don't have a ${itemName}.`) + messenger.addMessage(`You don't have a ${itemName}.`) } checkWinningConditions() From f5350d8c02516985100b01a80b77a3c07f0c3726 Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 13:58:28 -0700 Subject: [PATCH 3/7] Fixed pathway locations - both east This is an important thing to have for testing - even if it's not the final room layout. It's common in adventure games for room connections to not be linear. --- JavaScript/js/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/JavaScript/js/config.js b/JavaScript/js/config.js index f48e102..44ee6a9 100644 --- a/JavaScript/js/config.js +++ b/JavaScript/js/config.js @@ -148,9 +148,9 @@ const setupData = { }, { name: "pathway", - descriptions: ["A long, twisting corridor."], + descriptions: ["A long, twisting path."], connectingRooms: [{ - located: "west", + located: "east", inRoom: "Backyard" },{ located: "east", From 4e659b53d50525817c9e9a9bdfc230124c56b473 Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 14:11:45 -0700 Subject: [PATCH 4/7] Refactor messenger to ES6 class format --- JavaScript/js/messengerDefinition.js | 66 +++++++++++++--------------- 1 file changed, 31 insertions(+), 35 deletions(-) diff --git a/JavaScript/js/messengerDefinition.js b/JavaScript/js/messengerDefinition.js index 943c8a8..7d0d14f 100644 --- a/JavaScript/js/messengerDefinition.js +++ b/JavaScript/js/messengerDefinition.js @@ -1,5 +1,3 @@ -// JD's working on this... - /** * For displaying messages to the player */ @@ -9,40 +7,38 @@ class Messenger { * @param messageArea A dom object in which to place message text */ constructor($messageArea) { - this.messageArea = $messageArea // A dom object in which to place messages - this.messageHistory = [] // A list of all previous messages, newest first - } - - /** + const _messageArea = $messageArea // A dom object in which to place messages + let _messageHistory = [] // A list of all previous messages, newest first + + /** * @param message A string to display to the user */ - addMessage(message) { - // Add the new message to the beginning of the history list (FILO) - this.messageHistory.unshift(message) - - // And display all messages - this.render() - } - - clearHistory() { - this.messageHistory = [] - } - - // Display the list of messages - render() { - // Trim off all but the last ten messages in the history (first ten in array) - const MAX_MESSAGES_TO_DISPLAY = 10 - let lastTenMessages = this.messageHistory.slice(0, MAX_MESSAGES_TO_DISPLAY) - - // Create an html message list (using BEM css class structure) - let htmlMessages = lastTenMessages.reduce( - (acc, message) => acc + `
${message}
`, - '' - ) - let htmlMessagesGroup = `
${htmlMessages}
` - - // Replace current messages with the updated list - this.messageArea.children().remove() - this.messageArea.append(htmlMessagesGroup) + this.addMessage = message => { + // Add the new message to the beginning of the history list (FILO) + _messageHistory.unshift(message) + + // And display all messages + this.render() + } + + this.clearHistory = () => _messageHistory = [] + + // Display the list of messages + this.render = () => { + // Trim off all but the last ten messages in the history (first ten in array) + const MAX_MESSAGES_TO_DISPLAY = 10 + let lastTenMessages = _messageHistory.slice(0, MAX_MESSAGES_TO_DISPLAY) + + // Create an html message list (using BEM css class structure) + let htmlMessages = lastTenMessages.reduce( + (acc, message) => acc + `
${message}
`, + '' + ) + let htmlMessagesGroup = `
${htmlMessages}
` + + // Replace current messages with the updated list + _messageArea.children().remove() + _messageArea.append(htmlMessagesGroup) + } } } \ No newline at end of file From ca976849fc8c9aeafe89cef4cdf2896d840622f2 Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 14:13:53 -0700 Subject: [PATCH 5/7] Fix clearHistory to not return messageHistory --- JavaScript/js/messengerDefinition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/JavaScript/js/messengerDefinition.js b/JavaScript/js/messengerDefinition.js index 7d0d14f..4b6c4b5 100644 --- a/JavaScript/js/messengerDefinition.js +++ b/JavaScript/js/messengerDefinition.js @@ -21,7 +21,7 @@ class Messenger { this.render() } - this.clearHistory = () => _messageHistory = [] + this.clearHistory = () => { _messageHistory = [] } // Display the list of messages this.render = () => { From b7ac2601570a293fdba337832eb487379ba60f0b Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 14:16:18 -0700 Subject: [PATCH 6/7] Refactor descriptor to ES6 class format --- JavaScript/js/descriptorDefinition.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/JavaScript/js/descriptorDefinition.js b/JavaScript/js/descriptorDefinition.js index 1710ee5..ecfab60 100644 --- a/JavaScript/js/descriptorDefinition.js +++ b/JavaScript/js/descriptorDefinition.js @@ -1,5 +1,3 @@ -// JD's working on this... - /** * For displaying descriptions to the player (text about game that replaces itself) */ @@ -10,17 +8,17 @@ class Descriptor { */ constructor($descriptionArea) { this.descriptionArea = $descriptionArea // A dom object in which to place text - } - /** + /** * @param description A string to display to the user */ - display(description) { - // Format the description for html - const htmlDescription = `
${description}
` + this.display = description => { + // Format the description for html + const htmlDescription = `
${description}
` - // Display the description - this.descriptionArea.children().remove() - this.descriptionArea.append(htmlDescription) + // Display the description + this.descriptionArea.children().remove() + this.descriptionArea.append(htmlDescription) + } } } \ No newline at end of file From 82883f6905418d33aecbd9d69ced90c92b6de00c Mon Sep 17 00:00:00 2001 From: jdsandifer Date: Sat, 8 Jul 2017 14:16:49 -0700 Subject: [PATCH 7/7] Refactor descriptor to ES6 class format --- JavaScript/js/descriptorDefinition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/JavaScript/js/descriptorDefinition.js b/JavaScript/js/descriptorDefinition.js index ecfab60..6c080ed 100644 --- a/JavaScript/js/descriptorDefinition.js +++ b/JavaScript/js/descriptorDefinition.js @@ -10,7 +10,7 @@ class Descriptor { this.descriptionArea = $descriptionArea // A dom object in which to place text /** - * @param description A string to display to the user + * @param description An info string to display to the user */ this.display = description => { // Format the description for html