From b85baa0658caa472fe995082d418f79126c3fdae Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Fri, 9 Mar 2018 11:27:03 -0500 Subject: [PATCH] Dialog works, and you can interact with things --- dialog.js | 19 ++++++++++++- feast.css | 32 ++++++++------------- feast.html | 36 ++++++++++++++++++------ feast.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 130 insertions(+), 39 deletions(-) diff --git a/dialog.js b/dialog.js index 12850e9..eefc2e2 100644 --- a/dialog.js +++ b/dialog.js @@ -1,6 +1,6 @@ "use strict"; -function DialogNode { +function DialogNode() { this.text = "Foo bar baz."; this.hooks = []; @@ -16,3 +16,20 @@ function DialogNode { this.choices.push({"text": text, "node": node}); } } + +function EatDude() { + DialogNode.call(this); + + this.text = "You approach the nerd."; + + let eatHim = new DialogNode(); + + eatHim.text = "You eat the nerd. Burp."; + eatHim.hooks.push(function() { player.health += 100 } ); + + let dontEatHim = new DialogNode(); + dontEatHim.text = "You don't eat the nerd."; + + this.addChoice("Eat him lol",eatHim); + this.addChoice("Actually don't",dontEatHim); +} diff --git a/feast.css b/feast.css index 839ddf5..78b5b94 100644 --- a/feast.css +++ b/feast.css @@ -15,32 +15,24 @@ button { display: none; } -.compass-button { - width: 100px; - height: 100px; - font-size: 18px; -} - -.active-compass-button { +.active-button { } -.inactive-compass-button { +.inactive-button { background: #111; } -.action-button { +.compass-button { width: 100px; height: 100px; font-size: 18px; } -.active-action-button { - -} - -.inactive-action-button { - background: #111; +.action-button { + width: 100px; + height: 100px; + font-size: 18px; } .combat-button { @@ -49,12 +41,10 @@ button { font-size: 18px; } -.active-combat-button { - -} - -.inactive-combat-button { - background: #111; +.dialog-button { + width: 100px; + height: 100px; + font-size: 18px;s } #log { diff --git a/feast.html b/feast.html index 66af074..37f712c 100644 --- a/feast.html +++ b/feast.html @@ -5,6 +5,7 @@ Feast + @@ -49,7 +50,7 @@ - + @@ -75,32 +76,32 @@ - + - + - + - + - + - + - + - + @@ -123,6 +124,23 @@ +
+
+ + + + + + +
+ + + + + +
+
+
diff --git a/feast.js b/feast.js index 03f72ca..7311b17 100644 --- a/feast.js +++ b/feast.js @@ -1,6 +1,10 @@ let currentRoom = null; +let currentDialog = null; + let dirButtons = []; let actionButtons = []; +let dialogButtons = []; + let mode = "explore"; let actions = []; let time = 9*60; @@ -24,17 +28,33 @@ function Burger() { }); } +function Nerd() { + Object.call(this, "Nerd"); + this.actions.push({ + "name": "Eat Nerd", + "action": function() { + startDialog(new EatDude()); + } + }); +} + +function startDialog(dialog) { + mode = "dialog"; + currentDialog = dialog; + updateDisplay(); +} + function updateExploreCompass() { for (let i = 0; i < dirButtons.length; i++) { let button = dirButtons[i]; if (currentRoom.exits[i] == null) { button.disabled = true; button.classList.remove("active-compass-button"); - button.classList.add("inactive-compass-button"); + button.classList.add("inactive-button"); button.innerHTML = ""; } else { button.disabled = false; - button.classList.remove("inactive-compass-button"); + button.classList.remove("inactive-button"); button.classList.add("active-compass-button"); button.innerHTML = currentRoom.exits[i].name; } @@ -42,36 +62,64 @@ function updateExploreCompass() { } function updateExploreActions() { for (let i = 0; i < actionButtons.length; i++) { - if (i < actions.length) + if (i < actions.length) { + actionButtons[i].disabled = false; actionButtons[i].innerHTML = actions[i].name; - else + actionButtons[i].classList.remove("inactive-button"); + actionButtons[i].classList.add("active-button"); + } + else { + actionButtons[i].disabled = true; actionButtons[i].innerHTML = ""; + actionButtons[i].classList.remove("active-button"); + actionButtons[i].classList.add("inactive-button"); + } } } -function updateExplore() { +function updateExplore() { updateExploreCompass(); - updateExploreActions(); - - } function updateCombat() { } +function updateDialog() { + for (let i = 0; i < dialogButtons.length; i++) { + if (i < currentDialog.choices.length) { + dialogButtons[i].disabled = false; + dialogButtons[i].innerHTML = currentDialog.choices[i].text; + dialogButtons[i].classList.remove("inactive-button"); + dialogButtons[i].classList.add("active-button"); + } else { + dialogButtons[i].disabled = true; + dialogButtons[i].innerHTML = ""; + dialogButtons[i].classList.remove("active-button"); + dialogButtons[i].classList.add("inactive-button"); + } + } +} + function updateDisplay() { switch(mode) { case "explore": document.getElementById("selector-explore").style.display = "flex"; document.getElementById("selector-combat").style.display = "none"; + document.getElementById("selector-dialog").style.display = "none"; updateExplore(); break; case "combat": document.getElementById("selector-explore").style.display = "none"; document.getElementById("selector-combat").style.display = "flex"; + document.getElementById("selector-dialog").style.display = "none"; updateCombat(); + case "dialog": + document.getElementById("selector-explore").style.display = "none"; + document.getElementById("selector-combat").style.display = "none"; + document.getElementById("selector-dialog").style.display = "flex"; + updateDialog(); break; } @@ -123,8 +171,10 @@ function moveTo(room) { window.addEventListener('load', function(event) { loadActions(); loadCompass(); + loadDialog(); currentRoom = createWorld(); currentRoom.objects.push(new Burger()); + currentRoom.objects.push(new Nerd()); moveTo(currentRoom); updateDisplay(); }); @@ -139,6 +189,22 @@ function update(lines=[]) { updateDisplay(); } +function dialogClicked(index) { + currentDialog = currentDialog.choices[index].node; + update([currentDialog.visit()]); + if (currentDialog.choices.length == 0) { + mode = "explore"; + updateDisplay(); + } +} + +function loadDialog() { + dialogButtons = Array.from( document.querySelectorAll(".dialog-button")); + for (let i = 0; i < dialogButtons.length; i++) { + dialogButtons[i].addEventListener("click", function() { dialogClicked(i); }); + } +} + function actionClicked(index) { actions[index].action(); }