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;
}
+
+