Added stats card

prakharjain3 · Feb 10, 2022 · e8e90c7 · e8e90c7
1 parent 697bad2
commit e8e90c7
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -9,14 +9,15 @@
     <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-container">
+
         <!-- going with 16/9 aspect ratio -->
         <!-- <canvas class="game-canvas" width="352" height="198"></canvas> -->
-        <!-- <canvas class="game-canvas" width="704" height="296"></canvas> -->
-        <!-- <canvas class="game-canvas" width="1120" height="296"></canvas> -->
         <canvas class="game-canvas"></canvas>
     </div>
 
@@ -33,6 +34,7 @@
     <script src="./js/KeyPressListener.js"></script>
     <script src="./js/RevealingText.js"></script>
     <script src="./js/SceneTransition.js"></script>
+    <script src="./js/gameStatistics.js"></script>
     <script src="./js/init.js"></script>
 </body>
 </html>
diff --git 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
@@ -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
@@ -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`;
+}
diff --git 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();
 
 }) ();
diff --git a/styles/gameStatistics.css 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;
+}
diff --git 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;
 }
-
-