diff --git a/index.html b/index.html index b59056a..acda3d2 100644 --- a/index.html +++ b/index.html @@ -9,14 +9,15 @@ + +
+ - -
@@ -33,6 +34,7 @@ + \ No newline at end of file diff --git a/js/OverworldEvent.js b/js/OverworldEvent.js index f212f85..9c44527 100644 --- a/js/OverworldEvent.js +++ b/js/OverworldEvent.js @@ -79,12 +79,10 @@ class OverworldEvent { }); } - redirectPerson(resolve) { let link = this.event.link; let newTab = this.event.newTab || false; // NOT WORKING. Always opening new tab if(newTab) { - // console.log("AGAIN"); window.open(link, '_blank'); } else { window.open(link, '_self'); @@ -94,9 +92,10 @@ class OverworldEvent { unlockTreasure(resolve) { let box_id = this.event.box_id; - // console.log("BID: ", box_id); - applicantData['treasuresObtained'].push(box_id); + // applicantData['treasuresObtained'].push(box_id); + applicantData['treasuresObtained'].add(box_id); console.log(applicantData); + updateStats(); // updates the top left statistics card resolve(); } } diff --git a/js/OverworldMap.js b/js/OverworldMap.js index fee7640..f93cdf1 100644 --- a/js/OverworldMap.js +++ b/js/OverworldMap.js @@ -518,6 +518,7 @@ window.OverworldMaps = { treasureBox6: getTreasureBox(43,18,6), treasureBox7: getTreasureBox(15,68,7), treasureBox8: getTreasureBox(37,50,8), + treasureBox9: getTreasureBox(12,2,9), }, walls: WALLS, diff --git a/js/gameStatistics.js b/js/gameStatistics.js new file mode 100644 index 0000000..070ed1e --- /dev/null +++ b/js/gameStatistics.js @@ -0,0 +1,15 @@ +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); +} + +// update when the player unlocks a chest +const updateStats = () => { + let name = document.getElementById("player_stats_p"); + name.innerHTML = `Collected ${applicantData.treasuresObtained.size}/9 treasures`; +} \ No newline at end of file diff --git a/js/init.js b/js/init.js index fcea5b5..825d40b 100644 --- a/js/init.js +++ b/js/init.js @@ -1,6 +1,6 @@ // contains the applicant's data (used to keep track of the treasure unlocked) var applicantData = { - treasuresObtained: [] + treasuresObtained: new Set(), }; (function() { @@ -9,6 +9,7 @@ var applicantData = { element: document.querySelector(".game-container") }); + renderStats(); // render player statistics overworld.init(); }) (); \ No newline at end of file diff --git a/styles/gameStatistics.css b/styles/gameStatistics.css new file mode 100644 index 0000000..b6fa9c2 --- /dev/null +++ b/styles/gameStatistics.css @@ -0,0 +1,15 @@ +.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 475b617..a9dab42 100644 --- a/styles/global.css +++ b/styles/global.css @@ -21,26 +21,14 @@ body { .game-container{ position: relative; - /* width: 352px; */ - /* height: 198px; */ - /* height: 550px; */ - /* height: 100vh; */ - /* width: 100vw; */ - /* margin: 0 auto; */ margin: 0; outline: 1px solid white; /* transform: scale(3) translateY(-50%); */ - /* transform: scale(1.5) translateY(50%) translateX(30%); */ - transform: translate(0,0); - /* transform: scale(1.5); */ - /* transform: scale(1) translateY(30%) translateX(50%); */ - /* transform:translateY(20%); */ + z-index: 1; } .game-container canvas{ /* Removes the blur, which occurs due to scaling */ image-rendering: pixelated; } - -