Added all the visuals to the functions

Dorstener · May 1, 2024 · 79892ad · 79892ad
1 parent 504ac14
commit 79892ad
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 5 deletions.
diff --git a/images/Dragon Repeller.webp b/images/Dragon Repeller.webp
diff --git a/images/cave.webp b/images/cave.webp
diff --git a/images/fight.webp b/images/fight.webp
diff --git a/images/lose.webp b/images/lose.webp
diff --git a/images/monster.webp b/images/monster.webp
diff --git a/images/square.webp b/images/square.webp
diff --git a/images/store.webp b/images/store.webp
diff --git a/images/win.webp b/images/win.webp
diff --git a/images/witch.webp b/images/witch.webp
diff --git a/index.html b/index.html
@@ -8,7 +8,11 @@
 </head>
 
 <body>
+    <div class="imageTwo">
+        <img src="/images/Dragon Repeller.webp" alt="cover picture of Dragon Repeller" class="image">
+    </div>
     <div id="game">
+
         <div id="stats">
             <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
             <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>

diff --git a/script.js b/script.js
@@ -62,43 +62,51 @@ const locations = [
         "button text": ["Go to store", "Go to cave", "Fight dragon"],
         "button functions": [goStore, goCave, fightDragon],
         text: "You are in the town square. You see a sign that says \"Store\".",
+        imagePath: "/images/square.webp",
     },
     {
         name: "store",
         "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
         "button functions": [buyHealth, buyWeapon, goTown],
         text: "You enter the store.",
+        imagePath: "/images/store.webp",
     },
     {
         name: "cave",
         "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
         "button functions": [fightSlime, fightBeast, goTown],
         text: "You enter the cave. You see some monsters.",
+        imagePath: "/images/cave.webp",
     }, {
         name: "fight",
         "button text": ["Attack", "Dodge", "Run"],
         "button functions": [attack, dodge, goTown],
         text: "You are fighting a monster.",
+        imagePath: "/images/fight.webp",
     }, {
         name: "kill monster",
         "button text": ["Go to town square", "Go to town square", "Go to town square"],
         "button functions": [goTown, goTown, easterEgg],
         text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.',
+        imagePath: "/images/monster.webp",
     }, {
         name: "lose",
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
         "button functions": [restart, restart, restart],
         text: "You die. &#x2620;",
+        imagePath: "/images/lose.webp",
     }, {
         name: "win",
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
         "button functions": [restart, restart, restart],
         text: "You defeat the dragon! YOU WIN THE GAME! &#x1F389;",
+        imagePath: "/images/win.webp",
     }, {
         name: "easter egg",
         "button text": ["2", "8", "Go to town square?"],
         "button functions": [pickTwo, pickEight, goTown],
         text: "You find a secret game. Pick a number above. Two numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!",
+        imagePath: "/images/witch.webp",
     }
 ];
 
@@ -128,8 +136,17 @@ function update(location) {
     button2.onclick = location["button functions"][1];
     button3.onclick = location["button functions"][2];
     text.innerHTML = location.text;
+
+    const imageElement = document.querySelector('.image');
+    if (imageElement) {
+        imageElement.src = location.imagePath;
+    } else {
+        console.error("Image not found");
+    }
 }
 
+
+
 function goTown() {
     update(locations[0]);
 }
@@ -243,7 +260,7 @@ function attack() {
     } else {
         text.innerText += " You miss.";
     };
-    
+
     healthText.innerText = actualHealth;
     monsterHealthText.innerText = monsterHealth;
     if (actualHealth <= 0) {
@@ -262,8 +279,8 @@ function attack() {
         actualWeapon--;
     }
 
-    localStorage.setItem ("Current Weapon", actualWeapon);
-    localStorage.setItem ("Health", actualHealth.toString());
+    localStorage.setItem("Current Weapon", actualWeapon);
+    localStorage.setItem("Health", actualHealth.toString());
     localStorage.setItem("Inventory", JSON.stringify(actualInventory));
 }
 
@@ -284,7 +301,7 @@ function dodge() {
 function defeatMonster() {
     let actualGold = parseInt(localStorage.getItem("Gold"));
     actualGold += Math.floor(monsters[fighting].level * 6.7);
-    let actualXp = parseInt(localStorage.getItem ("XP"));
+    let actualXp = parseInt(localStorage.getItem("XP"));
     actualXp += monsters[fighting].level;
     goldText.innerText = actualGold;
     xpText.innerText = actualXp;

diff --git a/styles.css b/styles.css
@@ -13,7 +13,7 @@ body {
     max-height: 400px;
     background-color: #ffffff ;
     color:#ffffff;
-    margin-top: 30px;
+    /*margin-top: 30px;*/
     margin-bottom: 0px;
     margin-left: auto;
     margin-right: auto;
@@ -44,4 +44,18 @@ button {
     background-color: #feac32 ;
     background-image: linear-gradient(#fecc4c, #ffac33);
     border: 3px solid #feac32;
+}
+
+.image {
+    width: 520px;
+    height: 400px;
+    margin-top: 30px;
+    margin-bottom: 0px;
+}
+
+.imageTwo {
+    max-width: 520px;
+    max-height: 434px;
+    margin-left: auto;
+    margin-right: auto;
 }