7th commit

Changing class, when hero is active, added styles, edited some js files
macieqx · Mar 2, 2017 · 32bfc8b · 32bfc8b
1 parent 444f3dc
commit 32bfc8b
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 <audio controls autoplay hidden>
-<source src="sound/Jaga.wav" type="audio/wav">
+<!-- <source src="sound/Jaga.wav" type="audio/wav"> -->
 </audio>
  <div class="container">
  <div class="left-container">
@@ -19,11 +19,13 @@
  <p id="currentMoneyText"> Stan konta : 0 </p>
  </div>
  <div class="heroes">
- <div id="hero1"> Boromir </div>
+ <div id="hero1" class="warrior">
+ <p id="hero1name"> Boromir </p>
  <p id="hero1lvl"> Obecny poziom to 0 </p>
  <p id="currentdps"> Obecny dps to 0 </p>
  <p id="futuredps"> Przyszły dps to 1 </p>
  <p id="levelcost"> Koszt za awans to 150 </p>
+ </div>
  <button id="hero1u" class="upgrade"> Ulepsz </button>
 
  </div>
@@ -47,4 +49,5 @@
 <script src="js/global.js"></script>
 <script src="js/upgrade.js"></script>
 <script src="js/damage.js"></script>
+<script src="js/display.js"></script>
 </html>
diff --git a/js/damage.js b/js/damage.js
@@ -32,20 +32,6 @@ function Clicking() { //main function
  money += Math.round(Math.random() * bosses[currentLevel].money * actualHit); //add money equal to monster money * click damage
 }
 
-function Displayer() {
-
- widthForBar = currentHP / bosses[currentLevel].hp * 100; //bar for displaying hp of boss
- document.getElementById('currentLevelText').innerHTML = "Obecny poziom to " + currentLevel; //change display of level
- document.getElementById('currentMoneyText').innerHTML = "Stan konta : " + money; //change display of money
- document.getElementById('monsterText').innerHTML = bosses[currentLevel].name + " | type: " + bosses[currentLevel].type; //Change display of boss
- document.getElementById('healthText').innerHTML = currentHP + "/" + bosses[currentLevel].hp; //change display of currentHP
- document.getElementById('clickDamageText').innerHTML = "Pojedyncze udrzenie zabiera " + clickDamage + " HP";
- document.getElementById('criticalHitChanceText').innerHTML = "Masz " + criticalHitChance + "% szans na udrzenie krytyczne";
- document.getElementById('criticalHitMultiplierText').innerHTML = "Uderzenie krytyczne zabiera " + valueOfCriticalHit + "x więcej obrażeń";
- document.getElementById('idleDamageText').innerHTML = "Twoi wojowie zabierają " + idleDamage + " HP na sekundę";
- document.getElementById('healthText').style.width = widthForBar + '%'; //change bar width
-}
-
 //function to check current level
 
 function Levelcheck() {
@@ -143,10 +129,3 @@ function IdleClick() {
  }
  money += Math.round(Math.random() * bosses[currentLevel].money * idleDamage);
 }
-
-function Idle() {
- setInterval(IdleClick, 1000);
- setInterval(Displayer, 100);
-}
-
-Idle();
diff --git a/js/display.js b/js/display.js
@@ -0,0 +1,22 @@
+function Displayer() {
+
+ widthForBar = currentHP / bosses[currentLevel].hp * 100; //bar for displaying hp of boss
+ document.getElementById('currentLevelText').innerHTML = "Obecny poziom to " + currentLevel; //change display of level
+ document.getElementById('currentMoneyText').innerHTML = "Stan konta : " + money; //change display of money
+ document.getElementById('monsterText').innerHTML = bosses[currentLevel].name + " | type: " + bosses[currentLevel].type; //Change display of boss
+ document.getElementById('healthText').innerHTML = currentHP + "/" + bosses[currentLevel].hp; //change display of currentHP
+ document.getElementById('clickDamageText').innerHTML = "Pojedyncze udrzenie zabiera " + clickDamage + " HP";
+ document.getElementById('criticalHitChanceText').innerHTML = "Masz " + criticalHitChance + "% szans na udrzenie krytyczne";
+ document.getElementById('criticalHitMultiplierText').innerHTML = "Uderzenie krytyczne zabiera " + valueOfCriticalHit + "x więcej obrażeń";
+ document.getElementById('idleDamageText').innerHTML = "Twoi wojowie zabierają " + idleDamage + " HP na sekundę";
+ document.getElementById('healthText').style.width = widthForBar + '%'; //change bar width
+}
+
+
+
+function Idle() {
+ setInterval(IdleClick, 1000);
+ setInterval(Displayer, 100);
+}
+
+Idle();
diff --git a/js/upgrade.js b/js/upgrade.js
@@ -1,5 +1,15 @@
 document.querySelector('.upgrade').addEventListener("click", Heroupone);
 
+function Activator() {
+
+if (currentHero.level > 0) {
+ document.getElementById("hero1").className = "activewarrior";
+}
+else {
+ document.getElementById("hero1").className = "warrior";
+}
+}
+
 function Heroupone() {
  currentHero = heroes[0];
 
@@ -8,13 +18,16 @@ function Heroupone() {
  idleDamage -= currentHero.dps[currentHero.level];
  idleDamage += currentHero.dps[currentHero.level+1];
  currentHero.level++;
+ Activator();
  }
  else {
  alert("Brak środków!");
  }
 
+ document.getElementById('hero1name').innerHTML = currentHero.name;
  document.getElementById('hero1lvl').innerHTML = "Obecny poziom to " + currentHero.level;
  document.getElementById('currentdps').innerHTML = "Obecny dps to " + currentHero.dps[currentHero.level];
  document.getElementById('futuredps').innerHTML = "Przyszły dps to " + currentHero.dps[currentHero.level+1];
- document.getElementById('levelcost').innerHTML = "Koszt za awans to " + currentHero.cost[currentHero.level+1]
-}
+ document.getElementById('levelcost').innerHTML = "Koszt za awans to " + currentHero.cost[currentHero.level+1];
+ Activator();
+}
diff --git a/style/style.css b/style/style.css
@@ -124,4 +124,23 @@ html, body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.warrior {
+ background-color: #cccccc;
+ border: 1px black solid;
+}
+
+.warrior p, .activewarrior p {
+ color : black;
+ font-size: 12px;
+ text-align: center;
+ font-family: 'Franklin Gothic';
+ text-transform: uppercase;
+ font-weight: 300;
+}
+
+.activewarrior {
+ background-color: orange;
+ border: 1px white solid;
 }