achievements!

.gitlab-ci.yml

@@ -1,7 +1,6 @@
 variables:
   CI_PROJECT_DIR: "."
   CI_REGISTRY_IMAGE: hub.ducoterra.net/ducoterra/mysite
-  DEPLOY: test
 
 stages:
   - build
@@ -17,24 +16,27 @@ build:
     name: gcr.io/kaniko-project/executor:debug
     entrypoint: [""]
   script:
+    - echo $DEPLOY
     - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --destination $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
 
 test:
+  stage: test
   only:
     variables:
     - $CI_COMMIT_TAG
-  stage: test
   image:
     name: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
     entrypoint: [""]
   script:
     - python manage.py test
 
-deploy:
+deploy_to_test:
+  variables:
+    DEPLOY: test
+  stage: deploy
   only:
     variables:
     - $CI_COMMIT_TAG
-  stage: deploy
   image:
     name: debian:10
     entrypoint: [""]
@@ -44,6 +46,30 @@ deploy:
     - chmod +x ./kubectl
     - mkdir /deploy
     - for f in $(find k8s -regex '.*\.ya*ml'); do envsubst < $f > "/deploy/$(basename $f)"; done
+    - for f in $(find k8s/test -regex '.*\.ya*ml'); do envsubst < $f > "/deploy/$(basename $f)"; done
+    - ./kubectl apply -f /deploy
+    - ./kubectl rollout status deploy $DEPLOY
+    - POD=$(./kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}')
+    - ./kubectl exec $POD -- python manage.py migrate
+
+deploy_to_prod:
+  variables:
+    DEPLOY: prod
+  stage: deploy
+  only:
+    variables:
+    - $CI_COMMIT_TAG
+  when: manual
+  image:
+    name: debian:10
+    entrypoint: [""]
+  script:
+    - apt -qq update >> /dev/null && apt -qq install -y curl gettext >> /dev/null
+    - curl -LO https://storage.googleapis.com/kubernetes-release/release/`curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt`/bin/linux/amd64/kubectl
+    - chmod +x ./kubectl
+    - mkdir /deploy
+    - for f in $(find k8s -regex '.*\.ya*ml'); do envsubst < $f > "/deploy/$(basename $f)"; done
+    - for f in $(find k8s/prod -regex '.*\.ya*ml'); do envsubst < $f > "/deploy/$(basename $f)"; done
     - ./kubectl apply -f /deploy
     - ./kubectl rollout status deploy $DEPLOY
     - POD=$(./kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}')

config/urls.py

@@ -20,5 +20,5 @@ from django.http import JsonResponse
 urlpatterns = [
     # path('api/', include('api.urls')),
     path('', include('ui.urls')),
-    path('admin/', admin.site.urls),
+    # path('admin/', admin.site.urls),
 ]

k8s/configmap.yaml

@@ -3,4 +3,4 @@ kind: ConfigMap
 metadata:
   name: $DEPLOY
 data:
-  ALLOWED_HOSTS: localhost,test.ducoterra.net
+  ALLOWED_HOSTS: localhost,$DEPLOY.ducoterra.net

k8s/prod/ingress.yaml

@@ -7,10 +7,10 @@ metadata:
 spec:
   tls:
   - hosts:
-    - test.ducoterra.net
+    - $DEPLOY.ducoterra.net
     secretName: letsencrypt
   rules:
-  - host: test.ducoterra.net
+  - host: $DEPLOY.ducoterra.net
     http:
       paths:
       - backend:
@@ -29,7 +29,7 @@ spec:
   tls:
     secretName: letsencrypt
   routes:
-  - match: Host(`test.ducoterra.net`)
+  - match: Host(`$DEPLOY.ducoterra.net`)
     kind: Rule
     services:
     - name: $DEPLOY
@@ -45,7 +45,7 @@ spec:
   entryPoints:
     - web
   routes:
-  - match: Host(`test.ducoterra.net`)
+  - match: Host(`$DEPLOY.ducoterra.net`)
     kind: Rule
     services:
     - name: $DEPLOY

k8s/test/ingress.yaml

@@ -0,0 +1,18 @@
+apiVersion: networking.k8s.io/v1beta1
+kind: Ingress
+metadata:
+  annotations:
+    ingress.kubernetes.io/ssl-redirect: "true"
+  name: $DEPLOY
+spec:
+  tls:
+  - hosts:
+    - $DEPLOY.ducoterra.net
+    secretName: letsencrypt
+  rules:
+  - host: $DEPLOY.ducoterra.net
+    http:
+      paths:
+      - backend:
+          serviceName: $DEPLOY
+          servicePort: 8000

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,6 +1,8 @@
 html, body { 
     height: 100%;
     width: 100%;
+    position: fixed;
+    overflow: hidden;
 }
 
 .section, .container {

ui/static/ui/button.js

@@ -1,27 +1,53 @@
-function getCookie(name) {
+const csrftoken = getCookie('csrftoken');
-    var cookieValue = null;
+const button = document.getElementById("BUTTON");
-    if (document.cookie && document.cookie !== '') {
+const count = document.getElementById("COUNT");
-        var cookies = document.cookie.split(';');
+const button_container = document.getElementById("button-container");
-        for (var i = 0; i < cookies.length; i++) {
+const achievement = document.getElementById("achievement");
-            var cookie = cookies[i].trim();
+
-            // Does this cookie string begin with the name we want?
+const achievements = {
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+    1: "Clicked!",
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+    2: "Clicked Twice!",
-                break;
+    4: "2^2",
-            }
+    8: "2^3",
-        }
+    16: "2^4",
-    }
+    32: "2^5",
-    return cookieValue;
+    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"
 }
 
-var csrftoken = getCookie('csrftoken');
+function add_achievement(text) {
-var button = document.getElementById("BUTTON");
+    achievement.querySelector(".achievement-text").innerText = text;
-var count = document.getElementById("COUNT");
+    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 => {
     button.disabled = true;
     button.classList.add("is-loading");
-    fetch('/button', {
+    fetch('/button/', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -33,10 +59,12 @@ button.addEventListener("click", event => {
         })
         .then((data) => {
             count.innerText = data.pressed;
+            check_achievement(data.pressed);
         }).finally(() => {
             button.disabled = false;
             button.classList.remove("is-loading");
         });
 });
 
+// when the page is loaded automatically select the button
 button.focus();

ui/static/ui/helper.js

@@ -0,0 +1,16 @@
+// get cookies when fetching with django
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}

ui/templates/ui/button.html

@@ -4,16 +4,22 @@
 
 {% block css %}
 <link rel="stylesheet" href="{% static 'ui/button.css' %}">
+<link rel="stylesheet" href="{% static 'ui/achievement.css' %}">
 {% endblock %}
 
 {% block js %}
+<script src="{% static 'ui/helper.js' %}"></script>
 <script src="{% static 'ui/button.js' %}"></script>
 {% endblock %}
 
-
 {% 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

ui/urls.py

@@ -2,5 +2,5 @@ from django.urls import path
 from . import views
 
 urlpatterns = [
-    path('button', views.button, name = 'button'),
+    path('button/', views.button, name = 'button'),
 ]