Update hra

hra.html

@@ -28,8 +28,22 @@
         </ul>
     </div>
 </div>
-    <div id="battlelog">Historie boje: <br> </div>
+
+    <div id="battlelog">
+        <h2>
+            <span class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Veškeré události které se stali počas boje"> 
+                Historie boje:
+            </span>
+        </h2>  
+    </div>
 </div>
     <script src="hra.js"></script>
+    <script src="js/bootstrap.bundle.js"></script>
+    <script>
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+    </script>
 </body>
 </html>

hra.js

@@ -19,7 +19,8 @@ function init() {
 //FUNKCE
 function heal() {
     heroHp = parseInt(heroHp) + parseInt(hodkostkou(10));
-    battlelog("Výlečil ses <br>");
+    battlelog(`<div class="alert alert-success">
+        	    Vyléčil ses </div>`);
     document.getElementById("heroHp").innerText = heroHp;
 
     enemyAttack();
@@ -28,7 +29,7 @@ function heal() {
 
 function attack() {
     enemyHp = parseInt(enemyHp) - parseInt(heroDamage);
-    battlelog("Zautočil jsi<br>");
+    battlelog('<div class="alert alert-danger">Zaútočil jsi </div>');
     document.getElementById("enemyHp").innerText = enemyHp;
 
     enemyAttack();
@@ -37,7 +38,7 @@ function attack() {
 
 function defend() {
     heroDefend = true;
-    battlelog("Použil jsi obranu <br>");
+    battlelog('<div class="alert alert-warning">Použil jsi obranu! </div>');
     gameover();
 }
 
@@ -53,12 +54,12 @@ function luck() {
 
 function enemyAttack() {
     if (!heroDefend) {
-        battlelog("nepřítel zaútočil <br>");
+        battlelog('<div class="alert alert-secondary">Nepřítel zaútočil </div>');
         heroHp = parseInt(heroHp) - parseInt(enemyDamage);
         document.getElementById("heroHp").innerText = heroHp;
         heroDefend = false;
     } else {
-        battlelog("vykryl jsi protiútok <br>");
+        battlelog('<div class="alert alert-primary">Vykril jsi útok </div>');
         heroDefend = false;
     }
 

index.html

@@ -27,7 +27,7 @@
                 </ul>
             </div>
             <div class="col-8"> 
-                <h1>OBJEKT 2</h1>
+                <h1>OBJEKT 2 - Formuláře</h1>
                 <form action="">
                     <div class="form-group">
                         <label for="feedback">FEEDBACK:</label>