achievements!

ui/static/ui/achievement.css

@@ -0,0 +1,29 @@
+.achievement {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+}
+
+.achievement-animate {
+    animation-name: moveup;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.achievement-text {
+    font-size: 4rem;
+}
+
+@keyframes moveup {
+    from {bottom: 0px;}
+    to {bottom: 200px; color: white;}
+}
+
+@keyframes fadeout {
+    from {}
+    to {color: transparent;}
+}

ui/static/ui/button.css

@@ -1,7 +1,8 @@
 html, body { 
     height: 100%;
     width: 100%;
-    overflow: auto;
+    position: fixed;
+    overflow: hidden;
 }
 
 .section, .container {

ui/static/ui/button.js

@@ -1,6 +1,47 @@
 const csrftoken = getCookie('csrftoken');
 const button = document.getElementById("BUTTON");
 const count = document.getElementById("COUNT");
+const button_container = document.getElementById("button-container");
+const achievement = document.getElementById("achievement");
+
+const achievements = {
+    1: "Clicked!",
+    2: "Clicked Twice!",
+    4: "2^2",
+    8: "2^3",
+    16: "2^4",
+    32: "2^5",
+    64: "2^6",
+    69: "Sixty-Nine",
+    100: "one hundred",
+    128: "2^7",
+    200: "two hundred",
+    250: "quarter thousand",
+    256: "2^8",
+    420: "Blaze it",
+    500: "half thousand",
+    512: "2^9",
+    1000: "one thousand",
+    1024: "2^10",
+    2048: "2048!",
+    2500: "Keep going!",
+    4096: "2^11",
+    5000: "halfway to ten thousand"
+}
+
+function add_achievement(text) {
+    achievement.querySelector(".achievement-text").innerText = text;
+    achievement.classList.remove("achievement-animate");
+    void achievement.offsetWidth;
+    achievement.classList.add("achievement-animate");
+}
+
+function check_achievement(count) {
+    current_achievement = achievements[Number(count)]
+    if (current_achievement != undefined) {
+        add_achievement(current_achievement)
+    }
+}
 
 // when button is clicked submit an empty post request
 button.addEventListener("click", event => {
@@ -18,6 +59,7 @@ button.addEventListener("click", event => {
         })
         .then((data) => {
             count.innerText = data.pressed;
+            check_achievement(data.pressed);
         }).finally(() => {
             button.disabled = false;
             button.classList.remove("is-loading");

ui/templates/ui/button.html

@@ -4,6 +4,7 @@
 
 {% block css %}
 <link rel="stylesheet" href="{% static 'ui/button.css' %}">
+<link rel="stylesheet" href="{% static 'ui/achievement.css' %}">
 {% endblock %}
 
 {% block js %}
@@ -13,7 +14,12 @@
 
 {% block body %}
 <section class="section">
-    <div class="container">
+    <div id = "button-container" class="container">
+        <div id = "achievement" class="achievement">
+            <div>
+                <div class="achievement-text"></div>
+            </div>
+        </div>
         <div>
             <h1 class="title">
                 The Button