From a3088da5031e78d391f3c3643dc1f882d205c901 Mon Sep 17 00:00:00 2001
From: Sarimoko <travis@sarimoko.com>
Date: Thu, 24 Feb 2022 07:36:43 +0000
Subject: [PATCH] Update 'www/index.html'

---
 www/index.html | 144 +++++++++++++++++++++++++++++++------------------
 1 file changed, 93 insertions(+), 51 deletions(-)
diff --git a/www/index.html b/www/index.html
index 3833c49..df523a2 100644
--- a/www/index.html
+++ b/www/index.html
@@ -9,62 +9,104 @@
 <link rel="icon" 
       type="image/png" 
       href="https://en.gravatar.com/userimage/208570096/d7e3f1a8a1358a94a6a45ada4e2d7d51.png">
-<meta http-equiv="Refresh" content="3; url=https://www.streamraiders.com/game/" />
+<meta http-equiv="Refresh" content="7; url=https://www.streamraiders.com/game/" />
 <style type="text/css">
-	body, html
-	{
-		background: #5865f2; margin: 0; padding: 0; height: 100%; overflow: hidden;
-	}
-	
-	h1 {
-		color: white; top-margin: 50px; font-family: Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
-	}
-	h2, h3, h4, h5, h6, p, a {
-		color: white; font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
-	}
-	div
-	{
-		background: #36393f; border-radius: 12px; margin-left: 20%; margin-right: 20%; margin-botton: 20px; margin-top: 20px; position: relative; text-align: center; font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
-	}
-	button {
-		background: #5865f2; width: 70%; height: 80px; color: white; margin: 15px; font-size: 22px; border-radius: 6px; font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
-	}
-	@keyframes spinning {
-    from { transform: rotate(0deg) }
-    to { transform: rotate(360deg) }
-  }
-  .spin {
-    animation-name: spinning;
-    animation-duration: 3s;
-    animation-iteration-count: infinite;
-    /* linear | ease | ease-in | ease-out | ease-in-out */
-    animation-timing-function: linear;
-  }
+.ant {
+  position:absolute;
+  background-image:url("https://ianparberry.files.wordpress.com/2013/02/antwalk.gif");
+  background-size: cover;
+}
+
+.raid-logo {
+  display:block;
+  margin:auto;
+  margin-top:50px;
+}
+
+html,body {
+  width:100%;
+  height:100%;
+}
+
+html {
+  overflow:hidden;
+}
 </style>
 </head>
 
-<body><br>
-<br><br><br>
-<center><img src="https://en.gravatar.com/userimage/208570096/d7e3f1a8a1358a94a6a45ada4e2d7d51.png" class="spin"></center><br>
-	<div id="box" class="box">
-		<br>
-		<h1>The Raid</h1>
-		<h3>by Sarimoko</h3>
-		<progress value="0" max="5" id="progressBar"></progress>
-		<p>You will be re-directed in 5 seconds...</p>
-		<button id="gonow" class="gonow"><a href="https://www.streamraiders.com/game/">Continue to StreamRaiders</a></button>
-		<br><br>
-	</div>
-	
+<body>
+	<span class="ant"></span>
+<span class="ant"></span>
+<span class="ant"></span>
+<span class="ant"></span>
+<span class="ant"></span>
+<img src="https://seeklogo.com/images/R/raid-logo-AAA5EC6038-seeklogo.com.png" class="raid-logo"/>
 <script>
-	var timeleft = 10;
-	var downloadTimer = setInterval(function(){
-  	if(timeleft <= 0){
-    	clearInterval(downloadTimer);
-  	}
-  	document.getElementById("progressBar").value = 10 - timeleft;
-	timeleft -= 1;
-	}, 1000);
+var mouseCoords = {x:1,y:1}; // current mouse position
+var antSpeed = 100; // ant speed in pixels per second
+var antSize = 30; // ant size in pixels
+var lastUpdate = 0; // time of last animation update
+
+var body = document.getElementsByTagName('body')[0];
+var ants = document.getElementsByClassName('ant'); // get ant elements
+
+// random position each ant and set size
+for (var i = 0; i < ants.length; i++) {
+  randomPositionAnt(ants[i]);
+  ants[i].style.height = antSize + "px";
+  ants[i].style.width = antSize + "px";
+}
+
+// randomly position ant at edge of screen
+function randomPositionAnt(ant) {
+  if (Math.random() < 0.5) {
+    ant.xLoc = 0;
+  } else {
+    ant.xLoc = body.clientWidth;
+  }
+  ant.yLoc = Math.random() * body.clientHeight;
+};
+// return true if distance between ant and cursor is less than 10 pixels
+function isAntTouchingCursor(ant) {
+  return Math.sqrt((ant.xLoc - mouseCoords.x) * (ant.xLoc - mouseCoords.x) + (ant.yLoc - mouseCoords.y) * (ant.yLoc - mouseCoords.y)) < 10;
+}
+// set up mouse cursor listening
+window.addEventListener('mousemove', function(data){
+  mouseCoords.x = data.clientX;
+  mouseCoords.y = data.clientY;
+});
+// function to call each animation cycle
+function update() {  
+	requestAnimationFrame(update);
+  var updateTime = new Date().getTime();
+	var timeDiff = (Math.min(100, Math.max(updateTime - lastUpdate, 0))) / 1000;
+  lastUpdate = updateTime;
+  
+  for (var i = 0; i < ants.length; i++) {
+    var ant = ants[i];
+    
+    var xDiff = mouseCoords.x - ant.xLoc;
+    var yDiff = mouseCoords.y - ant.yLoc;
+    var multi = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));
+    var xSpeed = xDiff / multi * antSpeed;
+    var ySpeed = yDiff / multi * antSpeed;
+    var rotation = (180 * Math.atan2(yDiff, xDiff) / Math.PI) - 180;
+    
+    ant.xLoc += xSpeed * timeDiff;
+    ant.yLoc += ySpeed * timeDiff;
+    
+    if (isAntTouchingCursor(ant)) {
+      randomPositionAnt(ant);
+    }
+
+    ant.style.left = (ant.xLoc - (antSize / 2)) + "px";
+    ant.style.top = (ant.yLoc - (antSize / 2)) + "px";
+    ant.style.transform = "rotate(" + rotation +  "deg)";
+  };
+  
+}
+
+update();
 </script>
 </body>
 </html>
\ No newline at end of file
