<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <button  id="beth" class="butto buttonn" onclick="beth()" >Bet on Heroes</button>
    <div id="results">
      <span id="res1"></span>
      <span id="res2"></span>

      </div>
  </body>
</html>
/* Add your styles here */

// Add your code here

var hero = 500;
var villains = 500;

function beth() {

	he();

  	}


    function betv() {
    	

      }
      function he() {
      	setTimeout(function() { 
        	var x = Math.floor((Math.random() * 300) + 1);
          	var vhp = villains - x;
            	villains=vhp;
              	if (villains< 0 ) {
                		document.getElementById("res1").innerHTML = "Heroes have won";
                    		
                        		document.getElementById("res2").innerHTML = "<br/>Villains have lost to heroes";
                            		
                                	} else {

                                  		document.getElementById("res1").innerHTML += "<br/>Heroes have dealt "  + x
                                      				+  " damage on villains.<br/>Villains have "  + vhp
                                              				+ " hp left.";

                                                      		
                                                          				
                                                                  		
                                                                      		vok();
                                                                          	}
                                                                            	},3000);
                                                                              }
                                                                              function vok() {
                                                                              	setTimeout(function() { 
                                                                                	var y = Math.floor((Math.random() * 300) + 1);
                                                                                  	var hhp = hero - y;
                                                                                    	hero=hhp;
                                                                                      	if (hero<0) {
                                                                                        		document.getElementById("res2").innerHTML = "<br/>Heroes have " + 0 +" Hp left";
                                                                                            		
                                                                                                		document.getElementById("res1").innerHTML = "<br/>Heroes have lost to villains";
                                                                                                    	} else {
                                                                                                      		document.getElementById("res2").innerHTML += "<br/>Villains have dealt "
                                                                                                          				+ y + " damage on Heroes.<br/>Heroes have "  + hhp
                                                                                                                  				+ " hp left.";

                                                                                                                          		
                                                                                                                              				
                                                                                                                                      		
                                                                                                                                          he();
                                                                                                                                          	}
                                                                                                                                            	},3000);
                                                                                                                                              }