Nuclear minigame

templates/index.html

@@ -3,6 +3,43 @@
 {% block title %}Ferenc Schulcz{% endblock %}
 {% block head_extensions %}
 <link rel="stylesheet" href="{{ url_for('static', filename='index_style.css') }}">
+<script>
+    let complaintVisible = false;
+    let complaints = ["Hey, don't touch my molecules!", "Careful, you will split an atom!"];
+    let nextComplaintIndex = 0;
+
+    let fissionProducts = [
+        'Caesium, Rubidium',
+        'Iodine, Yttrium',
+        'Zirkonium, Tellurium',
+        'Molybdenum, Tin',
+        'Technetium, Indium'
+    ]
+
+    function complain() {
+        if (complaintVisible) return;
+        complaintVisible = true;
+
+        let bottomholder = document.getElementById('bottom-expander');
+        let timeout = 1000
+
+        if (nextComplaintIndex == complaints.length) {
+            const fissionProduct = fissionProducts[Math.floor(Math.random() * fissionProducts.length)];
+            bottomholder.innerHTML = '<p class="centered">You have split a Uranium-235.<br/>You got ' + fissionProduct + ' and some neutrons.<br/>Luckily, no chain reaction started.</p>'
+            bottomholder.style.color = 'inherit';
+            timeout = 5000;
+            nextComplaintIndex = 0;
+        } else {
+            bottomholder.innerHTML = '<p class="centered">' + complaints[nextComplaintIndex++] + '</p>';
+            bottomholder.style.color = 'inherit';
+        }
+
+        window.setTimeout(() => {
+            bottomholder.style.color = 'transparent';
+            complaintVisible = false;
+        }, timeout);
+    }
+</script>
 {% endblock %}
 
 {% block content %}
@@ -10,7 +47,8 @@
 <div class="h-expander-3"></div>
 
 <div class="index_content_holder">
-    <img class="profile_pic" id="profile_pic" src="{{ url_for('static', filename='profile_pic.jpg') }}">
+    <img class="profile_pic" id="profile_pic" src="{{ url_for('static', filename='profile_pic.jpg') }}"
+        onclick="complain();">
     <h1>Ferenc Schulcz</h1>
     <h2>Go <a href="{{ url_for('service', servicename='about') }}">read my introduction</a></h2>
     <h2>Or check these out</h2>
@@ -29,7 +67,8 @@
         </a>
     </div>
     <h2>Or stay here and hunt for easter eggs.</h2>
-    <div style="min-height: 32px"></div> <!-- margin -->
+    <div id="bottom-expander" class="h-expander-3"
+        style="margin-top: 1rem; transition: color 400ms; color: transparent;"></div> <!-- margin -->
 </div>
 
 <script src="/static/neko/neko.js"></script>