CombustibleToast/Box.html

## Box.html
<!DOCTYPE HTML>

<head>
	<title> DVD Screensaver </title>

	<style id='else'>
		.box{
			position:fixed;
			background-color:blue;
			padding:10px;
			color:black;
			width:100px;
			height:100px;
			font:Arial;
			text-align:center;
			font-size:30px;
		}
	</style>

	<style id='style'>
		.box{
			top:0px;
			left:0px;
		}
	</style>

	<style id='sliders'>
		.sliderdiv{
			width: 20%;
			height: 100px;
			position: fixed;
			bottom: -50px;
			left: 40%;
		}
		.slider{
			-webkit-appearance: none;  /* Override default CSS styles */
			appearance: none;
			width: 100%; /* Full-width */
			height: 20%; /* Specified height */
			background: #ffffff; /* color */
			outline: none; /* Remove outline */
			opacity: 0.1; /* Set transparency (for mouse-over effects on hover) */
			-webkit-transition: 1s; /* 0.2 seconds transition on hover */
			transition: opacity 1s;
			border-radius: 5px;
		}
		.slider:hover{
			opacity: .5;
		}
		.slider::-webkit-slider-thumb {
			-webkit-appearance: none; /* Override default look */
			appearance: none;
			width: 10%; /* Set a specific slider handle width */
			height: 30px; /* Slider handle height */
			background: #000000; /* color */
			border-radius: 5px;
			cursor: pointer; /* Cursor on hover */
		}
	</style>

	<style id='textStyle'>
		.tallies{
			color: white;
			font-size: 1.5em;
		}
		.selflessPromotion{
			color: rgb(99, 99, 99);
			font-size: .7em;
			font-family: Tahoma, Geneva, sans-serif;
			position: fixed;
			bottom: 0%;
			right: 1%;
		}
	</style>

</head>

<body style="background-color:black">

<div class='box'>
	<br>
	<b>CVC</b>
</div>

<div class='tallies'>
	<p id='cornerTally'>
		Number of Corner Hits: 0
	</p>

	<p id='hitTally'>
		Number of Normal Hits: 0
	</p>

</div>

<p class='selflessPromotion'>
		u/CombustibleToast
</p>


<div class='sliderdiv'>
	<input type='range' min='-50' max='50' value='0' class='slider' id='slider'>
</div>


</body>

<script>

	///*
	function Box(number, sizex, sizey){
		this.controller = document.createElement("style");
		controller.setAttribute("id", "controller" + number);
		controller.innerHTML = ".box" + number + "{top:0px;left:0px;position:fixed;background-color:blue;padding:10px;color:black;width:100px;height:100px;font:Arial;text-align:center;font-size:30px;}"
		this.controllerText = controller.innerHTML;
		this.slider = document.getElementByClass(sliderdiv);

		this.box = document.createElement("div");
		box.setAttribute("class", "box" + number);
		box.innerHTML = "<br><b>CVC</b>";

		this.x = Math.floor(Math.random()*(w-20)+10);
		this.y = Math.floor(Math.random()*(h-20)+1);
		this.w = updateWidth();
		this.h = updateHeight();

		this.dx = Math.floor(Math.random()*2) == 1;
		this.dy = Math.floor(Math.random()*2) == 1;

		this.sizex = sizex;
		this.sizey = sizey;

		this.hits = 0;
		this.cornerHits = 0;
		this.speed = 0;
		this.speedBoost = 0.0;
		this.cornerLeniency = 10;

		function updateHeight(){
			this.h = window.innerHeight + 100;
			return window.innerHeight + 100;
		}

		function updateWidth(){
			this.w = window.innerWidth + 100;
			return window.innerWidth + 100;
		}

		function updateText(){
			controllerText = controller.innerHTML;
		}

		function checkFixOutOfBounds(){
			if(x < 0 || x > w)
				x = w - 1;
			if(y < 0 || y > h)
				y = h - 1;
		}

		/*
			this function should only be called after x and/or y are updated
			this just updates the position of the box
		*/
		function relocate(){
			var top = controllerText.indexOf("top") + 4;
			var left = controllerText.indexOf("left") + 5;

			controller.innerHTML = controllerText.substring(0,top) + newY + "px" + controllerText.substring(s.indexOf(";"),left) + newX + controllerText.substring(left+1);
			updateText();
		}

		/*
			Requires a hexadecimal for color starting with a #
			#FFFFFF
		*/
		function colorChange(hex){
			controller.innerHTML = controllerText.substring(0,controllerText.indexOf("background-color")+17) + hex + controllerText.substring(controllerText.indexOf(hex)+8);
			updateText();
			console.log(hex);
		}

		function generateHex(){
			var a = ["#"];
			for(var i = 0; i < 6; i++){
				var arg = Math.floor(Math.random()*16);
				switch(arg){
					case 10: a.push("A"); break;
					case 11: a.push("B"); break;
					case 12: a.push("C"); break;
					case 13: a.push("D"); break;
					case 14: a.push("E"); break;
					case 15: a.push("F"); break;
					default: a.push(arg); break;
				}
			}

			function toString(a){
				var re = new String();
				for(var i = 0; i < a.length; i++)
					re += a[i];
				return re;
			}

			return toString(a);
		}

		function checkCorner(){
			if((y < cornerLeniency || Math.abs(y-h) < cornerLeniency) && (x < cornerLeniency || Math.abs(x-w) < cornerLeniency))
				return true;
			return false;
		}

		function getSpeed(){
			var re = slider.value;
			if(re < 0)
				speed = Math.pow(Math.abs(re),-1);
			else
				speed = re;
		}

		function diminishBoost(boost){
			if(boost >= 30)
				boost = 30;
			if(boost == 0)
				return boost;
			return boost-0.1;
		}


	}
	//*/

	main();

	async function main(){
		var box = document.getElementById("box"), style = document.getElementById("style").innerHTML;
		var h = window.innerHeight-100, w = window.innerWidth-100;
		var x = Math.floor(Math.random()*(w-20)+10), y = Math.floor(Math.random()*(h-20)+1);
		var dx = Math.floor(Math.random()*2) == 1, dy = Math.floor(Math.random()*2) == 1;
		var hits = 0, cornerHits = 0, speed = 0; speedBoost = 0.0;
		colorChange();

		for(var i = 0; ; i++){
			h = window.innerHeight-120, w = window.innerWidth-120;
			if(x < 0 || x > w)
				x = w - 1;
			if(y < 0 || y > h)
				y = h - 1;

			var loc = relocate(style,dx,dy,x,y);
			x = loc[0], y = loc[1];
			speed = getSpeed() + parseInt(speedBoost);
			//console.log({speed});

			if(x <= 0 || x >= w){
				dx = !dx;
				colorChange();
				hits = hitTally(hits);
				console.log("HIT: " + [x,y]);
				if(checkCorner(y,h)){
					cornerHits = cornerTally(cornerHits);
					//speedBoost = 30;
				}
			}
			if(y <= 0 || y >= h){
				dy = !dy;
				colorChange();
				hits = hitTally(hits);
				console.log("HIT: " + [x,y]);
			}
			speedBoost = diminishBoost(speedBoost);
			await wait(speed, i);
		}
	}

	function relocate(s,dx,dy,x,y){
		var top = s.indexOf("top") + 4;
		var left = s.indexOf("left") + 5;

		var newX = generateNewPos(x,dx), newY = generateNewPos(y,dy);

		s = s.substring(0,top) + newY + "px" + s.substring(s.indexOf(";"),left)
		+ newX + "px;\n\t\t}\n";
		style.innerHTML = s;


		return [newX, newY];
	}

	function generateNewPos(arg, dir){
		if(dir)
			return arg+1;
		return arg-1;
	}

	function colorChange(){
		var color = document.getElementById("else");
		var c = color.innerHTML;
		color.innerHTML = c.substring(0,c.indexOf("background-color")+17) + generateHex() + c.substring(c.indexOf(";",c.indexOf("background-color")));
		i = 0;
	}

	function generateHex(){
		var a = ["#"];
		for(var i = 0; i < 6; i++){
			var arg = Math.floor(Math.random()*16);
			switch(arg){
				case 10: a.push("A"); break;
				case 11: a.push("B"); break;
				case 12: a.push("C"); break;
				case 13: a.push("D"); break;
				case 14: a.push("E"); break;
				case 15: a.push("F"); break;
				default: a.push(arg); break;
			}
		}
		console.log(toString(a));
		return toString(a);
	}

	function checkCorner(y,h){
		var leniency = 10;
		if(y < leniency || Math.abs(y-h) < leniency)
			return true;
		return false;
	}

	function cornerTally(cornerHits){
		var p = document.getElementById("cornerTally"), pt = p.innerHTML;
		p.innerHTML = pt.substring(0,pt.indexOf(":")+2) + (cornerHits+1);
		console.log("CORNER");
		return cornerHits+1;
	}

	function hitTally(hits){
		var p = document.getElementById("hitTally"), pt = p.innerHTML;
		p.innerHTML = pt.substring(0,pt.indexOf(":")+2) + (hits+1);
		return hits+1;
	}

	function toString(a){
		var re = new String();
		for(var i = 0; i < a.length; i++)
			re += a[i];
		return re;
	}

	function getSpeed(){
		var re = document.getElementById("slider").value;
		if(re < 0)
			return Math.pow(Math.abs(re),-1);
		return re;
	}
	function diminishBoost(boost){
		if(boost >= 30)
			boost = 30;
		if(boost == 0)
			return boost;
		return boost-0.1;
	}

	async function wait(speed, i){
		if(speed<1){
			await sleep(Math.pow(speed,-1));
			return;
		}
		if(i%speed == 0){
			await sleep(1);
			return;
		}
	}

	function sleep(ms){
		return new Promise(resolve => setTimeout(resolve,ms));
	}
</script>
	<!DOCTYPE HTML>

	<head>
	<title> DVD Screensaver </title>

	<style id='else'>
	.box{
	position:fixed;
	background-color:blue;
	padding:10px;
	color:black;
	width:100px;
	height:100px;
	font:Arial;
	text-align:center;
	font-size:30px;
	}
	</style>

	<style id='style'>
	.box{
	top:0px;
	left:0px;
	}
	</style>

	<style id='sliders'>
	.sliderdiv{
	width: 20%;
	height: 100px;
	position: fixed;
	bottom: -50px;
	left: 40%;
	}
	.slider{
	-webkit-appearance: none; /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 20%; /* Specified height */
	background: #ffffff; /* color */
	outline: none; /* Remove outline */
	opacity: 0.1; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: 1s; /* 0.2 seconds transition on hover */
	transition: opacity 1s;
	border-radius: 5px;
	}
	.slider:hover{
	opacity: .5;
	}
	.slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 10%; /* Set a specific slider handle width */
	height: 30px; /* Slider handle height */
	background: #000000; /* color */
	border-radius: 5px;
	cursor: pointer; /* Cursor on hover */
	}
	</style>

	<style id='textStyle'>
	.tallies{
	color: white;
	font-size: 1.5em;
	}
	.selflessPromotion{
	color: rgb(99, 99, 99);
	font-size: .7em;
	font-family: Tahoma, Geneva, sans-serif;
	position: fixed;
	bottom: 0%;
	right: 1%;
	}
	</style>

	</head>

	<body style="background-color:black">

	<div class='box'>
	<br>
	<b>CVC</b>
	</div>

	<div class='tallies'>
	<p id='cornerTally'>
	Number of Corner Hits: 0
	</p>

	<p id='hitTally'>
	Number of Normal Hits: 0
	</p>

	</div>

	<p class='selflessPromotion'>
	u/CombustibleToast
	</p>


	<div class='sliderdiv'>
	<input type='range' min='-50' max='50' value='0' class='slider' id='slider'>
	</div>


	</body>

	<script>

	///*
	function Box(number, sizex, sizey){
	this.controller = document.createElement("style");
	controller.setAttribute("id", "controller" + number);
	controller.innerHTML = ".box" + number + "{top:0px;left:0px;position:fixed;background-color:blue;padding:10px;color:black;width:100px;height:100px;font:Arial;text-align:center;font-size:30px;}"
	this.controllerText = controller.innerHTML;
	this.slider = document.getElementByClass(sliderdiv);

	this.box = document.createElement("div");
	box.setAttribute("class", "box" + number);
	box.innerHTML = "<br><b>CVC</b>";

	this.x = Math.floor(Math.random()*(w-20)+10);
	this.y = Math.floor(Math.random()*(h-20)+1);
	this.w = updateWidth();
	this.h = updateHeight();

	this.dx = Math.floor(Math.random()*2) == 1;
	this.dy = Math.floor(Math.random()*2) == 1;

	this.sizex = sizex;
	this.sizey = sizey;

	this.hits = 0;
	this.cornerHits = 0;
	this.speed = 0;
	this.speedBoost = 0.0;
	this.cornerLeniency = 10;

	function updateHeight(){
	this.h = window.innerHeight + 100;
	return window.innerHeight + 100;
	}

	function updateWidth(){
	this.w = window.innerWidth + 100;
	return window.innerWidth + 100;
	}

	function updateText(){
	controllerText = controller.innerHTML;
	}

	function checkFixOutOfBounds(){
	if(x < 0 \|\| x > w)
	x = w - 1;
	if(y < 0 \|\| y > h)
	y = h - 1;
	}

	/*
	this function should only be called after x and/or y are updated
	this just updates the position of the box
	*/
	function relocate(){
	var top = controllerText.indexOf("top") + 4;
	var left = controllerText.indexOf("left") + 5;

	controller.innerHTML = controllerText.substring(0,top) + newY + "px" + controllerText.substring(s.indexOf(";"),left) + newX + controllerText.substring(left+1);
	updateText();
	}

	/*
	Requires a hexadecimal for color starting with a #
	#FFFFFF
	*/
	function colorChange(hex){
	controller.innerHTML = controllerText.substring(0,controllerText.indexOf("background-color")+17) + hex + controllerText.substring(controllerText.indexOf(hex)+8);
	updateText();
	console.log(hex);
	}

	function generateHex(){
	var a = ["#"];
	for(var i = 0; i < 6; i++){
	var arg = Math.floor(Math.random()*16);
	switch(arg){
	case 10: a.push("A"); break;
	case 11: a.push("B"); break;
	case 12: a.push("C"); break;
	case 13: a.push("D"); break;
	case 14: a.push("E"); break;
	case 15: a.push("F"); break;
	default: a.push(arg); break;
	}
	}

	function toString(a){
	var re = new String();
	for(var i = 0; i < a.length; i++)
	re += a[i];
	return re;
	}

	return toString(a);
	}

	function checkCorner(){
	if((y < cornerLeniency \|\| Math.abs(y-h) < cornerLeniency) && (x < cornerLeniency \|\| Math.abs(x-w) < cornerLeniency))
	return true;
	return false;
	}

	function getSpeed(){
	var re = slider.value;
	if(re < 0)
	speed = Math.pow(Math.abs(re),-1);
	else
	speed = re;
	}

	function diminishBoost(boost){
	if(boost >= 30)
	boost = 30;
	if(boost == 0)
	return boost;
	return boost-0.1;
	}




	}
	//*/

	main();

	async function main(){
	var box = document.getElementById("box"), style = document.getElementById("style").innerHTML;
	var h = window.innerHeight-100, w = window.innerWidth-100;
	var x = Math.floor(Math.random()(w-20)+10), y = Math.floor(Math.random()(h-20)+1);
	var dx = Math.floor(Math.random()2) == 1, dy = Math.floor(Math.random()2) == 1;
	var hits = 0, cornerHits = 0, speed = 0; speedBoost = 0.0;
	colorChange();

	for(var i = 0; ; i++){
	h = window.innerHeight-120, w = window.innerWidth-120;
	if(x < 0 \|\| x > w)
	x = w - 1;
	if(y < 0 \|\| y > h)
	y = h - 1;

	var loc = relocate(style,dx,dy,x,y);
	x = loc[0], y = loc[1];
	speed = getSpeed() + parseInt(speedBoost);
	//console.log({speed});

	if(x <= 0 \|\| x >= w){
	dx = !dx;
	colorChange();
	hits = hitTally(hits);
	console.log("HIT: " + [x,y]);
	if(checkCorner(y,h)){
	cornerHits = cornerTally(cornerHits);
	//speedBoost = 30;
	}
	}
	if(y <= 0 \|\| y >= h){
	dy = !dy;
	colorChange();
	hits = hitTally(hits);
	console.log("HIT: " + [x,y]);
	}
	speedBoost = diminishBoost(speedBoost);
	await wait(speed, i);
	}
	}

	function relocate(s,dx,dy,x,y){
	var top = s.indexOf("top") + 4;
	var left = s.indexOf("left") + 5;

	var newX = generateNewPos(x,dx), newY = generateNewPos(y,dy);

	s = s.substring(0,top) + newY + "px" + s.substring(s.indexOf(";"),left)
	+ newX + "px;\n\t\t}\n";
	style.innerHTML = s;


	return [newX, newY];
	}

	function generateNewPos(arg, dir){
	if(dir)
	return arg+1;
	return arg-1;
	}

	function colorChange(){
	var color = document.getElementById("else");
	var c = color.innerHTML;
	color.innerHTML = c.substring(0,c.indexOf("background-color")+17) + generateHex() + c.substring(c.indexOf(";",c.indexOf("background-color")));
	i = 0;
	}

	function generateHex(){
	var a = ["#"];
	for(var i = 0; i < 6; i++){
	var arg = Math.floor(Math.random()*16);
	switch(arg){
	case 10: a.push("A"); break;
	case 11: a.push("B"); break;
	case 12: a.push("C"); break;
	case 13: a.push("D"); break;
	case 14: a.push("E"); break;
	case 15: a.push("F"); break;
	default: a.push(arg); break;
	}
	}
	console.log(toString(a));
	return toString(a);
	}

	function checkCorner(y,h){
	var leniency = 10;
	if(y < leniency \|\| Math.abs(y-h) < leniency)
	return true;
	return false;
	}

	function cornerTally(cornerHits){
	var p = document.getElementById("cornerTally"), pt = p.innerHTML;
	p.innerHTML = pt.substring(0,pt.indexOf(":")+2) + (cornerHits+1);
	console.log("CORNER");
	return cornerHits+1;
	}

	function hitTally(hits){
	var p = document.getElementById("hitTally"), pt = p.innerHTML;
	p.innerHTML = pt.substring(0,pt.indexOf(":")+2) + (hits+1);
	return hits+1;
	}

	function toString(a){
	var re = new String();
	for(var i = 0; i < a.length; i++)
	re += a[i];
	return re;
	}

	function getSpeed(){
	var re = document.getElementById("slider").value;
	if(re < 0)
	return Math.pow(Math.abs(re),-1);
	return re;
	}
	function diminishBoost(boost){
	if(boost >= 30)
	boost = 30;
	if(boost == 0)
	return boost;
	return boost-0.1;
	}

	async function wait(speed, i){
	if(speed<1){
	await sleep(Math.pow(speed,-1));
	return;
	}
	if(i%speed == 0){
	await sleep(1);
	return;
	}
	}

	function sleep(ms){
	return new Promise(resolve => setTimeout(resolve,ms));
	}
	</script>