nice

achievements!
position fixed, overflow auto
2020-04-26 14:49:03 -04:00 · 2020-04-26 14:27:33 -04:00 · 2020-04-25 19:41:55 -04:00 · 2020-04-25 19:35:09 -04:00 · 2020-04-25 19:28:56 -04:00
5 changed files with 81 additions and 3 deletions
--- a/ui/static/ui/achievement.css
+++ 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;}
+}
--- a/ui/static/ui/button.css
+++ b/ui/static/ui/button.css
@@ -1,7 +1,8 @@
 html, body { 
    height: 100%;
    width: 100%;
-    touch-action: manipulation;
+    position: fixed;
+    overflow: hidden;
 }

 .section, .container {
--- 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: "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"
+}
+
+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");
--- a/ui/templates/ui/base.html
+++ b/ui/templates/ui/base.html
@@ -5,7 +5,7 @@

 <head>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Button</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
--- 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
Author	SHA1	Message	Date
ducoterra	0cb3896e4b	nice	2020-04-26 14:49:03 -04:00
ducoterra	e102db9f38	achievements!	2020-04-26 14:27:33 -04:00
ducoterra	15c5f5293a	position fixed, overflow auto	2020-04-25 19:41:55 -04:00
ducoterra	f11f9a0d97	attempt fix with overflow	2020-04-25 19:35:09 -04:00
ducoterra	c80ef7441d	change user-scalable	2020-04-25 19:28:56 -04:00