add easter eggs

src/_includes/layouts/main.njk

@@ -89,12 +89,9 @@
           <p>{{ section.name }}:</p>
           {% for entry in section.entries %}
           {% if entry.href %}<a href="{{ entry.href }}"
-            >{% endif %}<img
-            {% if site.is_lazy %}
-              src="{% if entry.src.startsWith('http') %}{{ 'https://buttonproxy.tauon.dev/fetch' if env.environment.isProd else 'http://localhost:6969/' }}?url={{ entry.src }}&redirect_if_blocked=true{% else %}{{ entry.src }}{% endif %}"
-            {% else %}
-              src="{{ entry.src }}"
-            {% endif %}
+            >{% endif %}<img{% if site.is_lazy %}
+              src="{% if entry.src.startsWith('http') %}{{ 'https://buttonproxy.tauon.dev/fetch' if env.environment.isProd else 'http://localhost:6969/' }}?url={{ entry.src }}&redirect_if_blocked=true{% else %}{{ entry.src }}{% endif %}"{% else %}
+              src="{{ entry.src }}"{% endif %}
               alt="{{ entry.alt }}"
               width="88"
               height="31"
@@ -173,11 +170,17 @@
           </noscript>
           <p>please invite me to more webrings please please please</p>
         </center>
+        <style class="edit_css" contenteditable="true">
+          .edit_css {
+            font-family: monospace;
+          }
+        </style>
       </div>
     </div>
     <div class="browser_warning"><img src="/images/nochrome.png" height="48" /><span>it seems that your browser is based on <strong>chromium technologies!</strong> you should install a free browser such as <a href="https://www.mozilla.org/en-US/firefox/new/">firefox</a> to stop google taking over the web! (they have <a href="https://en.m.wikipedia.org/wiki/Web_Environment_Integrity">tried already</a>...)</span></div>
     <script src="/js/nochrome.js"></script>
     <script src="/js/abbr.js"></script>
     {% if active != "1984" %}<script src="/js/adblockblockblock.js"></script>{% endif %}
+    <script src="/js/easteregg.js"></script>
   </body>
 </html>

src/index.njk

@@ -109,7 +109,7 @@ document.currentScript.parentElement.innerHTML = `<abbr title="${age} to be exac
 <h2>embed my 88x31 on your page! :3</h2>
 <p>please <b>do</b> hotlink the button btw!!</p>
 <center>
-  <textarea style="width: 300px; height: 145px; resize: none">
+  <textarea style="width: 300px; height: 145px; resize: none" readonly>
 <a href="https://tauon.dev/" target="_blank">
   <img
     src="/images/88x31/lily.png"

src/static/js/easteregg.js

@@ -0,0 +1,92 @@
+const KONAMI = [
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+  "b",
+  "a",
+  "Enter",
+];
+const AWESOME = ["a", "w", "e", "s", "o", "m", "e"];
+const CD = ["i", "d", "s", "u", "k", "a", "b", "l", "y", "a", "t"];
+
+let codes = [KONAMI, AWESOME, CD];
+let keys = [];
+let codes_that_can_be_at_this_point = codes;
+
+let eggs = { classic: false, awesome: false, cd: false };
+
+var canvas = document.createElement("canvas");
+var context = canvas.getContext("2d");
+
+const DIM = 720;
+
+canvas.width = DIM;
+canvas.height = DIM;
+
+var icon = new Image();
+
+var x_pos = 0;
+var colour = 0;
+
+var render = () => {
+  context.clearRect(0, 0, DIM, DIM);
+  context.drawImage(icon, x_pos - DIM, 0);
+  context.drawImage(icon, x_pos, 0);
+
+  // i can't think of an actual way to hue rotate the canvas
+  if (eggs.awesome) {
+    context.globalCompositeOperation = "hue";
+    context.fillStyle = `hsl(${colour}deg, 100%, 50%)`;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    // looks better but doesn't show the second one
+    //context.globalCompositeOperation = "destination-atop";
+    //context.drawImage(icon, x_pos - DIM, 0);
+    //context.drawImage(icon, x_pos, 0);
+  }
+
+  if (eggs.classic) x_pos += Math.ceil(DIM / 256);
+  if (eggs.awesome) colour += 1;
+  if (x_pos > DIM) x_pos = 0;
+  if (colour > 360) colour = 0;
+
+  requestAnimationFrame(render);
+};
+
+icon.src = "/images/icon.png";
+icon.onload = () => {
+  render();
+  setInterval(() => {
+    document
+      .querySelector("link[rel=icon]")
+      .setAttribute("href", canvas.toDataURL("image/x-icon"));
+  }, 1000 / 60);
+};
+
+window.addEventListener("keydown", (event) => {
+  keys.push(event.key);
+  codes_that_can_be_at_this_point = [];
+  for (let code of codes) {
+    let is_real = true;
+    for (let key in keys) {
+      is_real = keys[key] == code[key]
+    }
+    if (is_real) codes_that_can_be_at_this_point.push(code);
+    if (is_real && code.length == keys.length) {
+      keys = [];
+      if (code == KONAMI) {
+        eggs.classic = true;
+      } else if (code == AWESOME) {
+        eggs.awesome = true;
+      } else if (code == CD) {
+        eggs.cd = true;
+        document.querySelector(".edit_css").style.display = "block";
+      }
+    }
+  }
+  if (codes_that_can_be_at_this_point.length == 0) keys = [];
+});