achievements tracking

ui/static/ui/achievement.css

@@ -1,11 +1,11 @@
 .achievement {
-    width: 100%;
+    position: absolute;
     height: 100%;
-    text-align: center;
+    width: 100%;
+    display: flex;
     justify-content: center;
     align-items: center;
-    display: flex;
-    position: absolute;
+    z-index: -1;
 }
 
 .achievement-animate {
@@ -14,6 +14,12 @@
     animation-fill-mode: forwards;
 }
 
+.achievements-list {
+    height: 100%;
+    overflow: auto;
+    text-align: center;
+}
+
 .achievement-text {
     font-size: 4rem;
 }

ui/static/ui/button.css

@@ -1,18 +1,26 @@
 html, body { 
     height: 100%;
     width: 100%;
-    position: fixed;
-    overflow: hidden;
 }
 
 .section, .container {
     height: 100%;
 }
 
-.container {
+.columns {
+    width: 100%;
+    height: 100%;
+}
+
+.button-column {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     text-align: center;
+    height: 100%;
+}
+
+.button-container {
+    position: absolute;
 }

ui/static/ui/button.js

@@ -3,43 +3,20 @@ 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: "Nice",
-    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"
-}
+const achievement_list = document.getElementById("achievement-list")
 
 function add_achievement(text) {
-    achievement.querySelector(".achievement-text").innerText = text;
-    achievement.classList.remove("achievement-animate");
-    void achievement.offsetWidth;
-    achievement.classList.add("achievement-animate");
-}
+    if (text != undefined) {
+        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)
+        var elem = document.createElement("div");
+        elem.innerText = text;
+        achievement_list.appendChild(elem);
+
+        achievement_list.scrollTo(0, achievement_list.scrollHeight);
     }
 }
 
@@ -59,7 +36,7 @@ button.addEventListener("click", event => {
         })
         .then((data) => {
             count.innerText = data.pressed;
-            check_achievement(data.pressed);
+            add_achievement(data.achievement);
         }).finally(() => {
             button.disabled = false;
             button.classList.remove("is-loading");