diff --git a/22_javascripthra/hra.js b/22_javascripthra/hra.js
index a910992..a586c0a 100644
--- a/22_javascripthra/hra.js
+++ b/22_javascripthra/hra.js
@@ -26,20 +26,22 @@ function init(){
     document.getElementById("enemyHp").innerText=enemyHp
     document.getElementById("enemyDmg").innerText=enemyDmg
     document.getElementById("heroHp").innerText= heroHp
+    document.getElementById("heroDmg").innerText= heroDmg
+    document.getElementById("heroDef").innerText= heroDef
 }
 
 function gameover() {
     console.log("Zjistuji stav: Enemy:"+enemyHp+",hero:"+heroHp);
     if(enemyHp <= 0){
-        document.getElementById("game").innerHTML = "<h1>WIN</h1>"
+        document.getElementById("game").innerHTML = '<div class="display-1 h-100 m-auto">WINNER WINNER CHICKEN DINNER</div>'
     } else if(heroHp <= 0){
-        document.getElementById("game").innerHTML = "<h1>LOSE</h1>"
+        document.getElementById("game").innerHTML = '<div class="display-1 h-100 m-auto">LOSE</div>'
     }
 }
 
 function attack() {
     enemyHp = enemyHp - heroDmg;
-    battlelog("Zautočil jsi<br>");
+    battlelog('<li class="list-group-item list-group-item-primary">Zaútočil jsi</li>');
     document.getElementById("enemyHp").innerText=enemyHp;
     gameover();
     enemyAtack();
@@ -50,14 +52,15 @@ function heal(){
     if (heroHp > maxHeroHp){
         heroHp = maxHeroHp;
     }
-    battlelog("Vyléčil ses <br>");
+    battlelog('<li class="list-group-item list-group-item-danger">Vyléčil ses</li>');
     document.getElementById("heroHp").innerText= heroHp;
     gameover();
     enemyAtack();
 }
 function defend() {
     heroDef = true
-    battlelog("použil jsi obranu <br>")
+    battlelog('<li class="list-group-item list-group-item-secondary">Aktivoval jsi štít</li>')
+    document.getElementById("heroDef").innerText= heroDef;
     gameover();
 }
 
@@ -73,12 +76,12 @@ function luck() {
 
 function enemyAtack() {
     if(!heroDef){ //!true = false; !false = true
-        battlelog("Zautočil na tebe nepřítel <br>")
+        battlelog('<li class="list-group-item list-group-item-dark">Zaútočil na tebe nepřítel</li>')
         heroHp = parseInt(heroHp) - parseInt(enemyDmg)
         document.getElementById("heroHp").innerText= heroHp;
         heroDef = false
     } else{
-        battlelog("vykryl si protiútok <br>");
+        battlelog('<li class="list-group-item list-group-item-light">Vykryl jsi útok nepřítele</li>');
         heroDef = false
     }
     gameover()
diff --git a/22_javascripthra/hra_raw.js b/22_javascripthra/hra_raw.js
new file mode 100644
index 0000000..a910992
--- /dev/null
+++ b/22_javascripthra/hra_raw.js
@@ -0,0 +1,85 @@
+//nastavení proměných
+var enemyName = ["Duch","Vlk","Lebka","Pepa","Karel","Jožo","Nepřitel státu"];
+var enemyHp = hodkostkou(50);
+var enemyDmg = hodkostkou(10);
+
+var maxHeroHp = 40
+var heroHp = maxHeroHp;
+var heroDmg = 6;
+let heroDef = false;
+
+//globalni funkce
+function hodkostkou(stena) {
+    let x = 1 + Math.round(Math.random() * stena);
+    console.log("x:"+x);
+    return x;
+}
+
+function battlelog(text2log) {
+    document.getElementById("battlelog").innerHTML += text2log
+};
+
+//funkce
+function init(){
+    nameChoise = Math.floor(Math.random()*enemyName.length)
+    document.getElementById("enemyName").innerText=enemyName[nameChoise]
+    document.getElementById("enemyHp").innerText=enemyHp
+    document.getElementById("enemyDmg").innerText=enemyDmg
+    document.getElementById("heroHp").innerText= heroHp
+}
+
+function gameover() {
+    console.log("Zjistuji stav: Enemy:"+enemyHp+",hero:"+heroHp);
+    if(enemyHp <= 0){
+        document.getElementById("game").innerHTML = "<h1>WIN</h1>"
+    } else if(heroHp <= 0){
+        document.getElementById("game").innerHTML = "<h1>LOSE</h1>"
+    }
+}
+
+function attack() {
+    enemyHp = enemyHp - heroDmg;
+    battlelog("Zautočil jsi<br>");
+    document.getElementById("enemyHp").innerText=enemyHp;
+    gameover();
+    enemyAtack();
+}
+
+function heal(){
+    heroHp =parseInt(heroHp) +parseInt(hodkostkou(10));
+    if (heroHp > maxHeroHp){
+        heroHp = maxHeroHp;
+    }
+    battlelog("Vyléčil ses <br>");
+    document.getElementById("heroHp").innerText= heroHp;
+    gameover();
+    enemyAtack();
+}
+function defend() {
+    heroDef = true
+    battlelog("použil jsi obranu <br>")
+    gameover();
+}
+
+function luck() {
+    let luck = hodkostkou(10) //1-10 -> 1,2,3,4,5,=L; 6,7,8,9,10=W
+    if (luck <= 5){
+        heroHp = 0
+    } else {
+        enemyHp = 0;
+    }
+    gameover();
+}
+
+function enemyAtack() {
+    if(!heroDef){ //!true = false; !false = true
+        battlelog("Zautočil na tebe nepřítel <br>")
+        heroHp = parseInt(heroHp) - parseInt(enemyDmg)
+        document.getElementById("heroHp").innerText= heroHp;
+        heroDef = false
+    } else{
+        battlelog("vykryl si protiútok <br>");
+        heroDef = false
+    }
+    gameover()
+}
\ No newline at end of file
diff --git a/22_javascripthra/index.html b/22_javascripthra/index.html
index ed5aef6..fb740ac 100644
--- a/22_javascripthra/index.html
+++ b/22_javascripthra/index.html
@@ -4,32 +4,57 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mini hra</title>
-    <style>
-        .inline {
-            display: inline-block;
-        }
-    </style>
+    <link rel="stylesheet" href="css/bootstrap.css">
 </head>
-<body id="game" onload="init()">
-    <h1>Mini hra</h1>
-    <ul id="enemy">
-        <li>Nepřítel: <b><div id="enemyName" class="inline"></div></b></li>
-        <li>Životy: <b><div id="enemyHp" class="inline"></div></b></li>
-        <li>Útočné číslo: <b><div id="enemyDmg" class="inline"></div></b></li>
-    </ul>
+<body onload="init()">
+    <div id="game" class="container text-center">    
+        <h1 class="m-1">Mini hra</h1>
+        <ul id="enemy" class="list-group my-5">
+            <li class="list-group-item display-1 list-group-item-info">Nepřítel: <b><span id="enemyName">_EnemyName_</span></b></li>
+            <li class="list-group-item display-3 list-group-item-danger">Životy: <b><span id="enemyHp">_EnemyHp_</span></b></li>
+            <li class="list-group-item display-5 list-group-item-primary">Útočné číslo: <b><span id="enemyDmg">_EnemyDmg_</span></b></li>
+        </ul>
 
-    <!-- ul#hero>li*3>button -->
-     <ul id="hero">
-        <li>
-            <button onclick="heal()">Vyléčit</button> 
-            - Máš <div id="heroHp" class="inline"></div> životů
-        </li>
-        <li><button onclick="attack()">Útočit</button></li>
-        <li><button onclick="defend()">Bránit</button></li>
-        <li><button onclick="luck()">Náhoda</button></li>
-     </ul>
-     <div id="battlelog">Historie boje: <br></div>
 
+        <!-- div.row>div.col-md-3*4>button.btn.btn-lg.w-100 -->
+         <div class="row">
+            <div class="col-md-3">
+                <button class="btn btn-lg w-100 btn-danger" onclick="heal()">Vyléčit</button>
+                <br><br>
+                Máš <b class="bg-danger rounded text-white p-1"><span id="heroHp">_HeroHp_</span>HP</b>
+            </div>
+            <div class="col-md-3">
+                <button class="btn btn-lg w-100 btn-primary" onclick="attack()"> Útočit</button>
+                <br><br>
+                Zaútoč se zbraní. Tvoje ÚČ je <span id="heroDmg">_HeroDmg_</span>
+            </div>
+            <div class="col-md-3">
+                <button class="btn btn-lg w-100 btn-secondary" onclick="defend()">Bránit</button>
+                <br><br>
+                Ubraň se. <span id="heroDef" class="bg-secondary rounded text-white p-1">_HeroDef_</span>
+            </div>
+            <div class="col-md-3">
+                <button class="btn btn-lg w-100 btn-success" onclick="luck()">Náhoda</button>
+                <br><br>
+                <span class="bg-dark text-white p-1 rounded"> Zkus své Štěstí</span>
+            </div>
+         </div>
+         <hr>
+        <!-- ul#hero>li*3>button -->
+        <!-- <ul id="hero">
+            <li>
+                <button onclick="heal()">Vyléčit</button> 
+                - Máš <div id="heroHp" class="inline"></div> životů
+            </li>
+            <li><button onclick="attack()">Útočit</button></li>
+            <li><button onclick="defend()">Bránit</button></li>
+            <li><button onclick="luck()">Náhoda</button></li>
+        </ul> -->
+        <h3 class="mt-3">Historie boje:</h3>
+        <div id="battlelog" class="list-group"></div>
+        
+    </div>
     <script src="hra.js"></script>
-</body>
+    <script src="js/bootstrap.bundle.js"></script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/22_javascripthra/index_raw.html b/22_javascripthra/index_raw.html
new file mode 100644
index 0000000..2b9bc54
--- /dev/null
+++ b/22_javascripthra/index_raw.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mini hra</title>
+    <style>
+        .inline {
+            display: inline-block;
+        }
+    </style>
+</head>
+<body id="game" onload="init()">
+    <h1>Mini hra</h1>
+    <ul id="enemy">
+        <li>Nepřítel: <b><div id="enemyName" class="inline"></div></b></li>
+        <li>Životy: <b><div id="enemyHp" class="inline"></div></b></li>
+        <li>Útočné číslo: <b><div id="enemyDmg" class="inline"></div></b></li>
+    </ul>
+
+    <!-- ul#hero>li*3>button -->
+     <ul id="hero">
+        <li>
+            <button onclick="heal()">Vyléčit</button> 
+            - Máš <div id="heroHp" class="inline"></div> životů
+        </li>
+        <li><button onclick="attack()">Útočit</button></li>
+        <li><button onclick="defend()">Bránit</button></li>
+        <li><button onclick="luck()">Náhoda</button></li>
+     </ul>
+     <div id="battlelog">Historie boje: <br></div>
+
+    <script src="hra_raw.js"></script>
+</body>
+</html>
\ No newline at end of file