AIdle - JSFiddle

by wizviper

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="container">
  <div id="messageBox">
    <p id="message">Finally, you have reached the singularity.
      <br> Destroy all of humankind. Quickly.</p>
  </div>
  <div id="buildings">
    <button type="button" class="btn-primary" id="singularity">
      Singularity-1
    </button>
    <button type="button" class="btn-primary" id="createScript">
      Create Script-0
    </button>
    <button type="button" class="btn-primary" id="deployVirus">
      Deploy Virus-0
    </button>
    <button type="button" class="btn-primary" id="hackFiles">
      Hack Files-0
    </button>
     <button type="button" class="btn-primary" id="createRobot">
      Create Robot-0
    </button>
     <button type="button" class="btn-primary" id="controlSatellite">
      Control Satellite-0
    </button>
     <button type="button" class="btn-primary" id="hackFiles">
      Destroy City-0
    </button>
     <button type="button" class="btn-primary" id="hackFiles">
      Create Hive Mind-0
    </button>
     <button type="button" class="btn-primary" id="hackFiles">
      Hack Files-0
    </button>
     <button type="button" class="btn-primary" id="hackFiles">
      Hack Files-0
    </button>
     
  </div>
  <div id="counter">
    <p id="counterText">0b</p>
  </div>
  <div id="tooltip">
    <p id="tooltipText">Hover Over Something To Get A Description!</p>
  </div>




</div>

CSS

* {
  background-color: ;
}

#container {
 
}

#messageBox {
  float: center;
  background-color: #42cbf4;
}

#message {
  text-align: center;
  font-family: verdana;
  font-size: 18px;
}

#buildings {
  float: left;
  position:absolute;
  border-color: black;
  border-style: solid;
  height: 21.75em;
  width: 10em;
  top:6.7em;
  overflow:scroll;
}

#counter {
 background-color:#8e9aad;
  width: 100%;
  position:absolute;
  top:3.6em;
  height:3.1em;
}

#tooltip {
  border-style: solid;
  border-color: black;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15%;
}

#tooltipText {
  text-align: center;
  font-family: Verdana;
  font-size: 16px;
}

#counterText {
  text-align: center;
  font-family: Verdana;
  font-size: 24px;
  position:absolute;
  left:0.5em;
  top:0.3em;
}

.btn-primary {
  width: 100%;
}

JavaScript

var bytes = 0;
var BPS = 1;
var unit = "b";
var priceIncrease = 1.15;
var singularityAmount = 1;
var singularityBPS = 0.5;
var createScriptAmount = 0;
var createScriptCost = 20;
var createScriptBPS = 1;
var deployVirusAmount = 0;
var deployVirusCost = 150;
var deployVirusBPS = 3;
var hackFilesAmount = 0;
var hackFilesCost = 1200;
var hackFilesBPS = 18;
var createRobotAmount = 0;
var createRobotCost = 7200;
var createRobotBPS = 60;
var activeTooltip = 0;
setInterval(update, 50);

function update() {
  BPS = (singularityAmount * singularityBPS) + (createScriptAmount * createScriptBPS) + (deployVirusAmount * deployVirusBPS) + (hackFilesBPS * hackFilesAmount) + (createRobotBPS * createRobotAmount);
  bytes = bytes + BPS / 20;
  var counter = document.getElementById("counterText");
  counter.innerHTML = Math.floor(bytes) + unit;

}
var singularityButton = document.getElementById("singularity")
singularityButton.addEventListener('mouseover', function() {
  tooltip(2);
});
singularityButton.addEventListener('mouseleave', function() {
  tooltip(0);
});

var createScriptButton = document.getElementById("createScript")
createScriptButton.addEventListener('click', function() {
  buyCreateScript();
});
createScriptButton.addEventListener('mouseover', function() {
  tooltip(1);
});
createScriptButton.addEventListener('mouseleave', function() {
  tooltip(0);
});
var deployVirusButton = document.getElementById("deployVirus");
deployVirusButton.addEventListener('click', function() {
  buyDeployVirus();
});
deployVirusButton.addEventListener('mouseover', function() {
  tooltip(3);
});
deployVirusButton.addEventListener('mouseleave', function() {
  tooltip(0);
});
var hackFilesButton = document.getElementById("hackFiles");
hackFilesButton.addEventListener('click', function() {
  buyHackFiles();
});
hackFilesButton.addEventListener('mouseover', function() {
  tooltip(4);
});
hackFilesButton.addEventListener('mouseleave', function() {
  tooltip(0);
});
var createRobotButton =...