From 65966bd5f39066a62ead3dd55485a7fb2983e0d1 Mon Sep 17 00:00:00 2001 From: chasmiccoder Date: Fri, 11 Feb 2022 05:12:21 +0530 Subject: [PATCH] Added interact popup --- index.html | 2 +- js/Overworld.js | 26 ++++++++++++++++++++++++++ js/OverworldEvent.js | 4 ---- js/OverworldMap.js | 4 ++-- js/Person.js | 2 +- js/gameStatistics.js | 13 +++++++++++-- styles/gameStatistics.css | 15 --------------- styles/global.css | 34 ++++++++++++++++++++++++++++++++++ 8 files changed, 75 insertions(+), 25 deletions(-) delete mode 100644 styles/gameStatistics.css diff --git a/index.html b/index.html index acda3d2..5ca0e7d 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,11 @@ -
+
diff --git a/js/Overworld.js b/js/Overworld.js index 93b2427..6840836 100644 --- a/js/Overworld.js +++ b/js/Overworld.js @@ -59,6 +59,28 @@ class Overworld { this.map.mountObjects(); } + // function that checks whether the space around an object can be interacted with + // renders "Press Enter to interact" message if so + checkInteraction() { + let hero = this.map.gameObjects.hero; + const nextCoords = utils.nextPosition(hero.x, hero.y, hero.direction); + const match = Object.values(this.map.gameObjects).find(object => { + return `${object.x},${object.y}` === `${nextCoords.x},${nextCoords.y}` + }); + console.log({match}); + + let interact_p = document.querySelector(".game-interact"); + + if(match) { + // console.log("MATCHED"); + interact_p.style.visibility = "visible" + } else { + // make it hidden again + // console.log("NOT"); + interact_p.style.visibility = "hidden" + } + } + startGameLoop() { const step = () => { @@ -88,6 +110,10 @@ class Overworld { object.sprite.draw(this.context, cameraPerson); }) + this.checkInteraction(); + + + // this.map.drawUpperImage(this.context, cameraPerson); // call step when a new frame starts diff --git a/js/OverworldEvent.js b/js/OverworldEvent.js index 9c44527..7128a76 100644 --- a/js/OverworldEvent.js +++ b/js/OverworldEvent.js @@ -27,10 +27,6 @@ class OverworldEvent { } } document.addEventListener("PersonStandComplete", completeHandler); - - - - } walk(resolve) { diff --git a/js/OverworldMap.js b/js/OverworldMap.js index f93cdf1..352173f 100644 --- a/js/OverworldMap.js +++ b/js/OverworldMap.js @@ -197,14 +197,14 @@ class OverworldMap { checkForActionCutscene() { const hero = this.gameObjects['hero']; // can be any of the player controlled objects - // using "" to check whether there is anyone to talk to + // using "Enter" to check whether there is anyone to talk to const nextCoords = utils.nextPosition(hero.x, hero.y, hero.direction); const match = Object.values(this.gameObjects).find(object => { return `${object.x},${object.y}` === `${nextCoords.x},${nextCoords.y}` }); // if you press Enter, you'll get the match object depending on your position and direction! - // console.log({match}); + console.log({match}); if(!this.isCutscenePlaying && match && match.talking.length) { this.startCutscene(match.talking[0].events) diff --git a/js/Person.js b/js/Person.js index 7413dd3..4ec7347 100644 --- a/js/Person.js +++ b/js/Person.js @@ -54,7 +54,7 @@ class Person extends GameObject { // ready to walk state.map.moveWall(this.x, this.y, this.direction); - this.movingProgressRemaining = 16; // (*) Was 16 before, changed to 8 for speed + this.movingProgressRemaining = 16; // change this variable to change animation speed this.updateSprite(state); } diff --git a/js/gameStatistics.js b/js/gameStatistics.js index 070ed1e..a3860bb 100644 --- a/js/gameStatistics.js +++ b/js/gameStatistics.js @@ -1,11 +1,20 @@ +// Initializes the treasure statistics AND the "press 'Enter' to interact" feature + const renderStats = () => { let div = document.querySelector(".game-statistics"); - let name = document.createElement("p"); name.setAttribute("id", "player_stats_p") name.innerHTML = `Collected ${applicantData.treasuresObtained.size || 0}/9 treasures`; - div.appendChild(name); + + div = document.querySelector(".game-interact"); + let interact = document.createElement("p"); + interact.setAttribute("id", "game_interact_p"); + interact.innerHTML = `Press 'Enter' to interact!`; + div.appendChild(interact); + + + } // update when the player unlocks a chest diff --git a/styles/gameStatistics.css b/styles/gameStatistics.css deleted file mode 100644 index b6fa9c2..0000000 --- a/styles/gameStatistics.css +++ /dev/null @@ -1,15 +0,0 @@ -.game-statistics { - position: absolute; - padding: 5px; - width: 180px; - top: 20px; - left: 10px; - z-index: 2; - background-color: #dbd0c6; - border-radius: 5px; - text-align: center; -} - -#player_stats_p { - color: #5D5C61; -} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index a9dab42..bdca59b 100644 --- a/styles/global.css +++ b/styles/global.css @@ -19,6 +19,38 @@ body { overflow: hidden; } +.game-statistics { + position: absolute; + padding: 5px; + width: 180px; + top: 20px; + left: 10px; + z-index: 2; + background-color: #dbd0c6; + border-radius: 5px; + text-align: center; +} + +#player_stats_p { + color: #15131b; +} + +/* for the "Press 'Enter' to interact!" message */ +.game-interact { + visibility: hidden; + position: absolute; + padding: 5px; + width: 180px; + top: 85px; + left: 10px; + z-index: 2; + background-color: #4ec29f; + border-radius: 5px; + text-align: center; +} + + + .game-container{ position: relative; margin: 0; @@ -32,3 +64,5 @@ body { /* Removes the blur, which occurs due to scaling */ image-rendering: pixelated; } + +