From e102db9f38444a26664648ce25858e4ba7cd3b66 Mon Sep 17 00:00:00 2001
From: ducoterra <ducoterra@gmail.com>
Date: Sun, 26 Apr 2020 14:27:33 -0400
Subject: [PATCH] achievements!

---
 ui/static/ui/achievement.css | 29 +++++++++++++++++++++++++
 ui/static/ui/button.js       | 42 ++++++++++++++++++++++++++++++++++++
 ui/templates/ui/button.html  |  8 ++++++-
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 ui/static/ui/achievement.css

diff --git a/ui/static/ui/achievement.css b/ui/static/ui/achievement.css
new file mode 100644
index 0000000..5536e9a
--- /dev/null
+++ b/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;}
+}
\ No newline at end of file
diff --git a/ui/static/ui/button.js b/ui/static/ui/button.js
index bbfc0e9..4a6dbe3 100644
--- a/ui/static/ui/button.js
+++ b/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");
diff --git a/ui/templates/ui/button.html b/ui/templates/ui/button.html
index 82056d7..5254704 100644
--- a/ui/templates/ui/button.html
+++ b/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