MarcoWorms/jsbin.gateloje.css

## jsbin.gateloje.css
body {
	background-color: black;
	font-family: Lucida Sans Unicode;
	color: #ffffff;
}

div {
	border: 1px solid black;
}

html {
	-webkit-touch-callout: none; /*Desabilita seleÃ§Ã£o na pÃ¡gina*/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

p {
	font-size: 40px;
	padding: 10px;
}

#title {
	text-align: center;
}

#mainwindow {
	margin: auto;
	height: 730px;
	width: 1000px;
	background-color: #262626;
	border-radius: 8px;
}

.allstats {
	position: absolute;
	margin-left: 10px;
	margin-top: 10px;
}

.resourcediv {
	display: flex;
	/*justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	position: absolute;
	background-color: #444444;
	height: 50px;
	width: 980px;
	margin: 10px 8px;
	border-radius: 10px;
}

.mainsplit {
	position: absolute;
	background-color: #101010;
	height: 570px;
	width: 300px;
	margin: 130px 8px;
	border-radius: 10px;
	padding: 10px;
}

.splittitle {
	border: 1px solid white;
	font-size: 25px;
	text-align: center;
	background-color: #303030;
    border-radius: 8px;
    padding: 5px;
}

.buyserver {
	cursor: pointer; cursor: hand;
	border-color: #00ff00;
	background-color: #404040;
	color: #00ff00;
	position: absolute;
	height: 40px;
	width: 250px;
	margin-top: 30px;
	margin-left: 25px;
	text-align: center;
    border-radius: 1px;
}

## jsbin.gateloje.html

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</head>

	<body>
		<div id="title" style="border: none;">
			<h1 title="Cool title huh?">
				DDoS Network Beta 0.1
			</h1>
		</div>

		<div id="mainwindow">

			<div class="resourcediv" title="Attacking sites will earn you money. Make it rain $$$">
				<p>$: <a id="cash">0</a></p>
			</div>

			<div class="resourcediv" title="This is your DDoS Power, you can get more by buying servers." style="margin-top: 70px">
				<p>P: <a id="power">0</a></p>
			</div>

			<div class="mainsplit" title="All about your network!" style="height: 280px;">
				<div class="splittitle">
					Stats
				</div>
				<span class="allstats">
					HostGator Shared (1P):&nbsp;<span id="server1">0</span>
				</span>
			</div>

			<div class="mainsplit" title="These are the sites you are attacking now." style="height: 260px;margin-top: 440px;">
				<div class="splittitle">
					DDoS
				</div>
				<span class="allstats">
					Bakery - <span id="attack1">Not Attacking.</span>
				</span>
			</div>

			<div class="mainsplit" style="margin-left: 340px;" title="DDoS them with lazors! Get cash from ramsons!">
				<div class="splittitle">
					Attack Servers
				</div>

				<div class="buyserver" id="attack1div">
				Bakery Next Door (1P)<br>
				+100$
				</div>

			</div>

			<div class="mainsplit" style="margin-left: 670px;" title="Buy more DDoS Power!">
				<div class="splittitle">
					Buy Servers
				</div>

				<div class="buyserver" id="server1buy">
				HostGator Shared<br>
				-20$
				</div>

			</div>

		</div>
		<script src="arrumarjs.js"></script>
	</body>
</html>

## jsbin.gateloje.js
var power = 0;
var cash = 0;
var pptt = 0; /*Power per ticktock*/
var cptt = 0.2; /*Cash per ticktock*/
var deccases;
var server1 = 0;
var server1div = document.getElementById("server1buy");
var attack1timer = -1;
var attack1div = document.getElementById("attack1div");
var attack1finished = false;

window.onerror = function(msg, url, line) {
   // You can view the information in an alert to see things working
   // like so:
   alert("Error: " + msg + "\nurl: " + url + "\nline #: " + line);

   // TODO: Report this error via ajax so you can keep track
   //       of what pages have JS issues

   var suppressErrorAlert = true;
   // If you return true, then error alerts (like in older versions of
   // Internet Explorer) will be suppressed.
   return suppressErrorAlert;
};

setInterval(TickTock,100);

server1div.onclick = function() {
	if (cash >= 20) {
		cash -= 20;
		server1 +=1;
		power +=1;
	}
};

attack1div.onclick = function() {
	if (power >= 1){
		if (attack1timer=="Not Attacking."){
			attack1timer = 10;
		}
	}
};

TickTock();

function TickTock() {
	CheckComma();
	AddRes();
}

function CheckComma() {
	if (cash > 9.8) {
		deccases=0;
	}
	else {
		deccases=1;
	}
}

function AddRes() {
	power += pptt;
	cash += cptt;
	document.getElementById("power").innerHTML = power.toFixed(0);
	document.getElementById("cash").innerHTML = cash.toFixed(deccases);
	UpdateServerColors();

	var attack1status = UpdateAttack("attack1",attack1timer,attack1div,attack1finished);
	attack1timer = attack1status[0];
	attack1div = attack1status[1];
	attack1finished = attack1status[2];

}

function UpdateServerColors() {
	if (cash < 20) {
		server1div.style.color = "red";
		server1div.style.borderColor = "red";
	}
	else {
		server1div.style.color = "#00ff00";
		server1div.style.borderColor = "#00ff00";
	}
}

function UpdateAttack(attackname, attacktimer, attackdiv, attackfinished) {
	if (power < 1) {
		attackdiv.style.color = "red";
		attackdiv.style.borderColor = "red";
	}
	else {
		attackdiv.style.color = "#00ff00";
		attackdiv.style.borderColor = "#00ff00";
	}

	if (attacktimer >= 0) {
		attacktimer -= 0.1;
		document.getElementById(attackname).innerHTML = attacktimer.toFixed(0);
		attackfinished = true;
		attackdiv.style.color = "yellow";
		attackdiv.style.borderColor = "yellow";
	}
	else {
		if (attackfinished === true){
			cash += 100;
			attackfinished = false;
			if (p >= 1) {
				attackdiv.style.color = "#00ff00";
				attackdiv.style.borderColor = "#00ff00";
			}
		}
		attackfinished = false;

		attacktimer = "Not Attacking.";
		document.getElementById(attackname).innerHTML = attacktimer;

		var arraygen = [attacktimer, attackdiv, attackfinished];
		return arraygen;
	}
}
	body {
	background-color: black;
	font-family: Lucida Sans Unicode;
	color: #ffffff;
	}

	div {
	border: 1px solid black;
	}

	html {
	-webkit-touch-callout: none; /Desabilita seleÃ§Ã£o na pÃ¡gina/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	p {
	font-size: 40px;
	padding: 10px;
	}

	#title {
	text-align: center;
	}

	#mainwindow {
	margin: auto;
	height: 730px;
	width: 1000px;
	background-color: #262626;
	border-radius: 8px;
	}

	.allstats {
	position: absolute;
	margin-left: 10px;
	margin-top: 10px;
	}

	.resourcediv {
	display: flex;
	/justify-content: center; / align horizontal */
	align-items: center; /* align vertical */
	position: absolute;
	background-color: #444444;
	height: 50px;
	width: 980px;
	margin: 10px 8px;
	border-radius: 10px;
	}

	.mainsplit {
	position: absolute;
	background-color: #101010;
	height: 570px;
	width: 300px;
	margin: 130px 8px;
	border-radius: 10px;
	padding: 10px;
	}

	.splittitle {
	border: 1px solid white;
	font-size: 25px;
	text-align: center;
	background-color: #303030;
	border-radius: 8px;
	padding: 5px;
	}

	.buyserver {
	cursor: pointer; cursor: hand;
	border-color: #00ff00;
	background-color: #404040;
	color: #00ff00;
	position: absolute;
	height: 40px;
	width: 250px;
	margin-top: 30px;
	margin-left: 25px;
	text-align: center;
	border-radius: 1px;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</head>

	<body>
	<div id="title" style="border: none;">
	<h1 title="Cool title huh?">
	DDoS Network Beta 0.1
	</h1>
	</div>

	<div id="mainwindow">

	<div class="resourcediv" title="Attacking sites will earn you money. Make it rain $$$">
	<p>$: <a id="cash">0</a></p>
	</div>

	<div class="resourcediv" title="This is your DDoS Power, you can get more by buying servers." style="margin-top: 70px">
	<p>P: <a id="power">0</a></p>
	</div>

	<div class="mainsplit" title="All about your network!" style="height: 280px;">
	<div class="splittitle">
	Stats
	</div>
	<span class="allstats">
	HostGator Shared (1P): <span id="server1">0</span>
	</span>
	</div>

	<div class="mainsplit" title="These are the sites you are attacking now." style="height: 260px;margin-top: 440px;">
	<div class="splittitle">
	DDoS
	</div>
	<span class="allstats">
	Bakery - <span id="attack1">Not Attacking.</span>
	</span>
	</div>

	<div class="mainsplit" style="margin-left: 340px;" title="DDoS them with lazors! Get cash from ramsons!">
	<div class="splittitle">
	Attack Servers
	</div>

	<div class="buyserver" id="attack1div">
	Bakery Next Door (1P)<br>
	+100$
	</div>

	</div>

	<div class="mainsplit" style="margin-left: 670px;" title="Buy more DDoS Power!">
	<div class="splittitle">
	Buy Servers
	</div>

	<div class="buyserver" id="server1buy">
	HostGator Shared<br>
	-20$
	</div>

	</div>

	</div>
	<script src="arrumarjs.js"></script>
	</body>
	</html>
	var power = 0;
	var cash = 0;
	var pptt = 0; /Power per ticktock/
	var cptt = 0.2; /Cash per ticktock/
	var deccases;
	var server1 = 0;
	var server1div = document.getElementById("server1buy");
	var attack1timer = -1;
	var attack1div = document.getElementById("attack1div");
	var attack1finished = false;

	window.onerror = function(msg, url, line) {
	// You can view the information in an alert to see things working
	// like so:
	alert("Error: " + msg + "\nurl: " + url + "\nline #: " + line);

	// TODO: Report this error via ajax so you can keep track
	// of what pages have JS issues

	var suppressErrorAlert = true;
	// If you return true, then error alerts (like in older versions of
	// Internet Explorer) will be suppressed.
	return suppressErrorAlert;
	};

	setInterval(TickTock,100);

	server1div.onclick = function() {
	if (cash >= 20) {
	cash -= 20;
	server1 +=1;
	power +=1;
	}
	};

	attack1div.onclick = function() {
	if (power >= 1){
	if (attack1timer=="Not Attacking."){
	attack1timer = 10;
	}
	}
	};

	TickTock();

	function TickTock() {
	CheckComma();
	AddRes();
	}

	function CheckComma() {
	if (cash > 9.8) {
	deccases=0;
	}
	else {
	deccases=1;
	}
	}

	function AddRes() {
	power += pptt;
	cash += cptt;
	document.getElementById("power").innerHTML = power.toFixed(0);
	document.getElementById("cash").innerHTML = cash.toFixed(deccases);
	UpdateServerColors();

	var attack1status = UpdateAttack("attack1",attack1timer,attack1div,attack1finished);
	attack1timer = attack1status[0];
	attack1div = attack1status[1];
	attack1finished = attack1status[2];

	}

	function UpdateServerColors() {
	if (cash < 20) {
	server1div.style.color = "red";
	server1div.style.borderColor = "red";
	}
	else {
	server1div.style.color = "#00ff00";
	server1div.style.borderColor = "#00ff00";
	}
	}

	function UpdateAttack(attackname, attacktimer, attackdiv, attackfinished) {
	if (power < 1) {
	attackdiv.style.color = "red";
	attackdiv.style.borderColor = "red";
	}
	else {
	attackdiv.style.color = "#00ff00";
	attackdiv.style.borderColor = "#00ff00";
	}

	if (attacktimer >= 0) {
	attacktimer -= 0.1;
	document.getElementById(attackname).innerHTML = attacktimer.toFixed(0);
	attackfinished = true;
	attackdiv.style.color = "yellow";
	attackdiv.style.borderColor = "yellow";
	}
	else {
	if (attackfinished === true){
	cash += 100;
	attackfinished = false;
	if (p >= 1) {
	attackdiv.style.color = "#00ff00";
	attackdiv.style.borderColor = "#00ff00";
	}
	}
	attackfinished = false;

	attacktimer = "Not Attacking.";
	document.getElementById(attackname).innerHTML = attacktimer;

	var arraygen = [attacktimer, attackdiv, attackfinished];
	return arraygen;
	}
	}