hawk-de · github-classroom · Jun 24, 2022 · Jul 24, 2022 · Jul 24, 2022 · Jul 24, 2022
diff --git a/README.md b/README.md
@@ -1,15 +1,16 @@
 [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-c66648af7eb3fe8bc4f294546bfd86ef473780cde1dea487d3c4ff354943c9ae.svg)](https://classroom.github.com/online_ide?assignment_repo_id=8053768&assignment_repo_type=AssignmentRepo)
 ![](https://img.shields.io/badge/Built%20%40-HAWK-brightgreen?style=flat)
-# {Title}
+# Be a Menace >:}
 
-Describe your project. Tell the visitor **What**, **Why** and **How** you did it. Maybe add a **Who** you are and who else was involved. Get wild here. It is the first thing a visitor of a repo sees.
 
-## What
+## WHAT
+A mildly entertaining website that you'll visit once, maybe twice, and then never return to it again, because why would you. It's a useless website after all, and you probably have some more important stuff to do than annoying a blue hand-animated troll. 
 
-## Why
+## WHY
+I'm asking this myself every single day... But seriously, I just wanted to be on the other side of when-you're-trying-to-mind-your-own-buisness-but-there's-this-fly-that-you're-too-lazy-to-try-killing-so-you-just-keep-doing-what-you're-doing-but-annoyed situation for once. About as brainless as a fly simulator, so if, for some reason, you want to shortly drop you IQ to a single digit - I've got you fam. 
 
-## How
+## HOW
+Y'know. Drew some frames, loaded them in, failed to optimize. Cried a lot. Pulled myself together, created sprites and added animations, lowered the fps to the point where you're not really sure whether your PC is glitching or it's meant to be this way, added some timers and voila! 
 
-## Who
-
-## Related Projects
+## WHO
+ Well, ME. The great and mighty Liarikai and my magical computer gremlins (who usually make sure your programs crash at the most inopportune moments)
diff --git a/assets/bg_spritesheet.png b/assets/bg_spritesheet.png
diff --git a/assets/fly_sprites.png b/assets/fly_sprites.png
diff --git a/assets/idle_1.png b/assets/idle_1.png
diff --git a/assets/idle_2.png b/assets/idle_2.png
diff --git a/assets/idle_3.png b/assets/idle_3.png
diff --git a/assets/idle_4.png b/assets/idle_4.png
diff --git a/assets/itshereforthelolz b/assets/itshereforthelolz
@@ -0,0 +1 @@
+
diff --git a/assets/mid_0000.png b/assets/mid_0000.png
diff --git a/assets/mid_0001.png b/assets/mid_0001.png
diff --git a/assets/mid_0002.png b/assets/mid_0002.png
diff --git a/assets/mid_0003.png b/assets/mid_0003.png
diff --git a/assets/mid_0004.png b/assets/mid_0004.png
diff --git a/assets/mid_0005.png b/assets/mid_0005.png
diff --git a/assets/mid_0006.png b/assets/mid_0006.png
diff --git a/assets/mid_0007.png b/assets/mid_0007.png
diff --git a/assets/mid_0008.png b/assets/mid_0008.png
diff --git a/assets/mid_0009.png b/assets/mid_0009.png
diff --git a/assets/mid_0010.png b/assets/mid_0010.png
diff --git a/assets/mid_0011.png b/assets/mid_0011.png
diff --git a/assets/mid_0012.png b/assets/mid_0012.png
diff --git a/assets/mid_0013.png b/assets/mid_0013.png
diff --git a/assets/twitch_left_0000.png b/assets/twitch_left_0000.png
diff --git a/assets/twitch_left_0001.png b/assets/twitch_left_0001.png
diff --git a/assets/twitch_left_0002.png b/assets/twitch_left_0002.png
diff --git a/assets/twitch_left_0003.png b/assets/twitch_left_0003.png
diff --git a/assets/twitch_left_0004.png b/assets/twitch_left_0004.png
diff --git a/assets/twitch_left_0005.png b/assets/twitch_left_0005.png
diff --git a/assets/twitch_left_0006.png b/assets/twitch_left_0006.png
diff --git a/assets/twitch_left_0007.png b/assets/twitch_left_0007.png
diff --git a/assets/twitch_left_0008.png b/assets/twitch_left_0008.png
diff --git a/assets/twitch_left_0009.png b/assets/twitch_left_0009.png
diff --git a/assets/twitch_left_0010.png b/assets/twitch_left_0010.png
diff --git a/assets/twitch_left_0011.png b/assets/twitch_left_0011.png
diff --git a/assets/twitch_right_0000.png b/assets/twitch_right_0000.png
diff --git a/assets/twitch_right_0001.png b/assets/twitch_right_0001.png
diff --git a/assets/twitch_right_0002.png b/assets/twitch_right_0002.png
diff --git a/assets/twitch_right_0003.png b/assets/twitch_right_0003.png
diff --git a/assets/twitch_right_0004.png b/assets/twitch_right_0004.png
diff --git a/assets/twitch_right_0005.png b/assets/twitch_right_0005.png
diff --git a/assets/twitch_right_0006.png b/assets/twitch_right_0006.png
diff --git a/assets/twitch_right_0007.png b/assets/twitch_right_0007.png
diff --git a/assets/twitch_right_0008.png b/assets/twitch_right_0008.png
diff --git a/assets/twitch_right_0009.png b/assets/twitch_right_0009.png
diff --git a/index.html b/index.html
@@ -1,26 +1,27 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
-    <meta charset="utf-8" />
+     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <title>Starter</title>
-    <meta name="description" content="something" />
-    <meta name="author" content="me" />
-    <link href="style.css" rel="stylesheet"/>
-    <style>
-
-    </style>
+
+    <title>repl.it</title>
+
+
+    <link href="style.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
+    <script src="https://molleindustria.github.io/p5.play/lib/p5.play.js"></script>
+
   </head>
   <body class="container">
     <div id="sketch" class="flex-item"></div>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"
+<script
       integrity="sha512-NxocnqsXP3zm0Xb42zqVMvjQIktKEpTIbCXXyhBPxqGZHqhcOXHs4pXI/GoZ8lE+2NJONRifuBpi9DxC58L0Lw=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script src="index.js"></script>
+    <script src="script.js"></script>
+    <p style="text-align:center;">^ Click to summon a fly from the pits of hell ^
+     <br> <a href="https://github.com/hawk-de/nutzloses-netz-Liarikai/blob/main/README.md" target="_blank">Read for funsies</a> <br> </p>
   </body>
-</html>
+</html>
diff --git a/index.js b/index.js
diff --git a/script.js b/script.js
@@ -0,0 +1,96 @@
+let clicked = false;
+
+let fly;
+let fly_spritesheet;
+let bg, Background;
+let Troll;
+
+
+let bridge = 0;
+
+
+function preload() {
+  bg = loadSpriteSheet("assets/bg_spritesheet.png", 600, 600, 2);
+  fly_spritesheet = loadSpriteSheet('assets/fly_sprites.png', 50, 50, 4);
+  TrollAnimationIdle = loadAnimation("assets/idle_1.png", "assets/idle_4.png");
+  twitchLeft = loadAnimation("assets/twitch_left_0000.png", "assets/twitch_left_0011.png");
+  twitchRight = loadAnimation("assets/twitch_right_0000.png", "assets/twitch_right_0009.png");
+  eyeroll = loadAnimation("assets/mid_0000.png", "assets/mid_0013.png");
+}
+
+function setup() {
+  const canvas = createCanvas(600, 600);
+  canvas.parent("sketch");
+  background(90);
+  frameRate(15);
+
+  Background = createSprite(width / 2, height / 2);
+  Background.addAnimation("flimmer", bg);
+  Troll = createSprite(width / 2, height / 2);
+  Troll.addAnimation("Idle", TrollAnimationIdle);
+
+  Troll.addAnimation("twitchleft", twitchLeft, eyeroll);
+
+  Troll.addAnimation("twitchright", twitchRight);
+
+  Troll.addAnimation("eyeroll", eyeroll);
+
+  fly = createSprite(mouseX, mouseY, 50);
+  fly.addAnimation("buzzing", fly_spritesheet);
+  fly.visible = false;
+}
+
+function draw() {
+  background(90);
+  drawSprites();
+
+  fly.attractionPoint(4, mouseX, mouseY);
+  fly.maxSpeed = 20;
+  if (Troll.animation.getFrame() == Troll.animation.getLastFrame()) {
+    if (clicked == true) {
+      if (bridge == 0) {
+        CheckSquares();
+      } else {
+        bridge = bridge - 1;
+          Troll.changeAnimation("Idle");
+      }
+    } else {
+        Troll.changeAnimation("Idle");
+    }
+  }
+}
+
+
+function mouseClicked() {
+  clicked = !clicked;
+  if (clicked == false) {
+    fly.visible = false;
+  } else {
+    fly.visible = true;
+  }
+}
+
+function squares() {
+  if (mouseX > 0 && mouseX < 200) {
+    return 1;
+  } else if (mouseX > 200 && mouseX < 400) {
+    return 2;
+  } else if (mouseX > 400 && mouseX < 600) {
+    return 3;
+  } else { return 0 }
+}
+
+function CheckSquares() {
+
+  if (squares() == 1) {
+    Troll.changeAnimation("twitchleft");
+  } else if (squares() == 2) {
+    Troll.changeAnimation("eyeroll");
+  } else if (squares() == 3) {
+    Troll.changeAnimation("twitchright");
+  } else {
+    Troll.changeAnimation("Idle");
+  }
+
+  bridge = 5;
+}
diff --git a/style.css b/style.css
@@ -1,23 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Square+Peg&display=swap');
+
 html {
-  font-size: 100%;
-} /*16px*/
+        font-size: 200%;
+      } /*16px*/
+
+      body {
+        background-color: #171740;
+        display: flex;
+        margin: 0 0;
+        font-family: 'Square Peg';
+        color: #ffffff;
+      }
 
-body {
-  background-color: white;
-  display: flex;
-  margin: 0 0;
-  color: #1d2429;
-}
-/*
- see A Complete Guide to Flexbox
-  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- */
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-.flex-item {
-  align-self: center;
-}
+      a {
+        color: #ffffff;
+      }
+      /*
+       see A Complete Guide to Flexbox
+        https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+       */
+      .container {
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        gap: 20px;
+      }
+      .flex-item {
+        align-self: center;
+      }