ability

by black strings

HTML

<div>
click on abilities to equip and unequip.<br><br>
</div>

<div id="manaContainer">
  <div id="manaDisplay">Mana: 300</div>
  <div id="manaBar"> . </div>
</div>


<div id="abilityContainer">
  Available:
</div>

<div id="equippedContainer">
  Equipped:
</div>

<button id="useAbility">
UseRandomEquippedAbility
</button>

<div id="fakeConsole">

</div>

CSS

#abilityContainer, #equippedContainer { 
border: thin solid black; padding: 5px;
margin-bottom:3px;
}
.abilityClass {
  display:inline-block;
  /* border: thin solid black; */
  /* padding: 5px; */
  background-color:grey;
  color:white;
  margin-right:3px;
  
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select:none; 
  user-select:none;
  -o-user-select:none;
}
#manaContainer {border: thin solid black;
  margin-bottom: 5px;
}
#manaBar {
  background-color:#00f0ff;
  color:#00f0ff;
  text-align:center;
}

JavaScript

// ability
var Ability = function(type,damage,mana){
	this.type = type;
	this.damage = damage;
	this.mana = mana;
	this.stun = 0;
	if(this.type == "status"){
		this.stun = Math.floor((Math.random() * 2) + 1);
	}
}

Ability.prototype.useAbility = function(){
	if(this.type === 'fire'){
  	console.log('blowing fire breath ' + this.damage);
  }else if(this.type === 'water'){
  	console.log('spitting water spray ' + this.damage);
  }
}

var Hero = function(race, name, hp, def, damage, mana){
	this.race = race;
	this.name = name;
	this.hp = hp;
	this.def = def;
	this.damage = damage;
	this.mana = mana;
	this.ability = [];
}

// pushes ability into ability array
Hero.prototype.setAbility = function(ability){
	this.ability.push(ability);
}

// gets a ability by index from the ability array
Hero.prototype.getAbility = function(index) {
	var foundAbility = this.ability[index];	// returns the ability in array
	if(foundAbility != null){
		return foundAbility;
  }
};

Hero.prototype.useAbility = function(index){
	 this.getAbility(index).useAbility();
}

// create
var hero = new Hero('orge', 'tim', 100, 10, 20, 300);
var ability1 = new Ability('fire', 30, 100);
var ability2 = new Ability('water', 10, 100);

// store ability in hero ability array
hero.setAbility(ability1);
hero.setAbility(ability2);

// using ability now by index
hero.useAbility(0);
hero.useAbility(1);

// puts ability into another display slot
var maxMana = 300;
var mana = 300;

function addAbilityToEquip(abilityButton){
	var equippedContainer = document.getElementById("equippedContainer");
  equippedContainer.appendChild(abilityButton);
  equippedAbility.push(removeAvailableAbility(abilityButton.ability));
}
function addAbilityToOpen(abilityButton){
	var abilityContainer = document.getElementById("abilityContainer");
  abilityContainer.appendChild(abilityButton);
  availableAbility.push(removeEquipAbility(abilityButton.ability));
}
function removeAvailableAbility(ability){
	var indexAt =...