Added interact popup

prakharjain3 · Feb 10, 2022 · 65966bd · 65966bd
1 parent e8e90c7
commit 65966bd
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -9,11 +9,11 @@
     <link rel="stylesheet" href="./styles/global.css" type="text/css">
     <link rel="stylesheet" href="./styles/TextMessage.css" type="text/css">
     <link rel="stylesheet" href="./styles/SceneTransition.css">
-    <link rel="stylesheet" href="./styles/gameStatistics.css">
 
 </head>
 <body>
     <div class="game-statistics"></div>
+    <div class="game-interact"></div>
     <div class="game-container">
 
         <!-- going with 16/9 aspect ratio -->

diff --git 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
@@ -27,10 +27,6 @@ class OverworldEvent {
             }
         }
         document.addEventListener("PersonStandComplete", completeHandler);
-
-
-
-
     }
 
     walk(resolve) {

diff --git 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
@@ -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
@@ -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
diff --git 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;
 }
+
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,10 +27,6 @@ class OverworldEvent { @@
                 }
             }
             document.addEventListener("PersonStandComplete", completeHandler);
         }
         walk(resolve) {
@@ Expand Down @@