From ba4bd93f03c48aa0f273ddae787c219e89bba74a Mon Sep 17 00:00:00 2001
From: klikev <kevinkliewer04@gmail.com>
Date: Sun, 1 Sep 2024 19:58:05 +0200
Subject: [PATCH] Kevin hat gecooked

---
 css/layout.css   | 20 +++++++++++++++++---
 index.html       |  2 ++
 js/rechnungen.js | 30 ++++++++++++++++++++++++++++--
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/css/layout.css b/css/layout.css
index b277227..9a9be4d 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -36,9 +36,10 @@ body{
     width: 220px;
 }
 #enemy{
-    position: fixed;
-    top: 20px;
-    right: 30px;
+    position: relative;
+    width: 20%;
+    float: right;
+    z-index: 50;
 }
 #enemyZahl{
     text-align: center;
@@ -90,4 +91,17 @@ body{
     position: fixed;
     left: 45%; 
     display:none;
+    background-color: orange;
+    border-radius: 15px;
+    outline: 8px solid black;
+}
+#winText, #loseText{
+    display: none;
+    position: fixed;
+    text-align: center;
+    top: 20%;
+    left: 35%;
+    background-color: white;
+    border-radius: 15px;
+    outline: 8px solid black;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index e475163..9175f2b 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,8 @@
             <img src="pics/enemy_1.png" alt="Gegner">
         </div>
 		
+        <div id="winText">Hurra du hast das Müllmonster besiegt</div>
+        <div id="loseText">Oh nein, das Müllmonster war zu stark</div>
 		<button id="restartButton">Neustart</button>
 
 
diff --git a/js/rechnungen.js b/js/rechnungen.js
index 3adee70..ec6b9dd 100644
--- a/js/rechnungen.js
+++ b/js/rechnungen.js
@@ -43,13 +43,19 @@ const enemy = document.querySelector("#enemy");
 const enemyZahl = document.querySelector("#enemyZahl");
 let voreisntellungenFertig = false;
 //auf welcher höhe startet der Enemy?
-const enemyTopStart = -300;
+const enemyTopStart = -700;
 let enemyTop = enemyTopStart;
 enemy.style.top = enemyTop + "px";
 //speed des Enemys, wie schnell er fallen soll
 const speedEnemy = 0.2;
 //maximale pixel Tiefe bis der Enemy aufhört zu fallen
 const maxTiefeEnemy = 100;
+//Button
+const restartButton = document.querySelector("#restartButton");
+const winText = document.querySelector("#winText");
+const loseText = document.querySelector("#loseText");
+const tom = document.querySelector("#tom");
+const tomImg = document.querySelector("#tom img");
 
 //returned den int in der Rechnung, nur die zahl ohne rechenzeichen
 function rechnung1Int(){
@@ -177,6 +183,23 @@ function ergebnis(zahl1,zahl2,rechenzeichen){
     }
     return 0;
 }
+function battle(){
+    if(parseInt(enemyZahl.innerText) > 0 && parseInt(fuchsZahl.innerText) > 0){
+        enemyZahl.innerText = "" + (parseInt(enemyZahl.innerText) - 1);
+        fuchsZahl.innerText = "" + (parseInt(fuchsZahl.innerText) - 1);
+    }else{
+        restartButton.style.display = "block";
+        if(gameWon){
+            winText.style.display = "block";
+            tom.style.display = "block";
+            tomImg.src = "pics/tom_3.png";
+        }else{
+            loseText.style.display = "block";
+            tom.style.display = "block";
+            tomImg.src = "pics/tom_1.png";
+        }
+    }
+}
 function playWinAnimation(){
     if(gameWon){
         if(!voreisntellungenFertig){
@@ -201,7 +224,7 @@ function enemyMoven(speed,maxtiefe){
     let nextTop = enemyTop + 10 * speed;
     
     if(nextTop > maxtiefe){
-        
+        battle();
     }else{
         enemy.style.top = nextTop + "px";
         enemyTop = nextTop;
@@ -225,4 +248,7 @@ function gameloopRechnungen(){
         }
     }
 }
+restartButton.addEventListener("click",()=>{
+    location.reload();
+});
 setInterval(gameloopRechnungen, 10);
\ No newline at end of file