fix ingress

.gitignore

@@ -1,3 +1,4 @@
 venv/
 __pycache__/
-db/
+db/
+staticfiles/

.gitlab-ci.yml

@@ -1,7 +1,6 @@
 variables:
   CI_PROJECT_DIR: "."
   CI_REGISTRY_IMAGE: hub.ducoterra.net/ducoterra/mysite
-  DEPLOY: test
 
 stages:
   - build
@@ -17,34 +16,61 @@ 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:latest
+    name: debian:10
     entrypoint: [""]
   script:
-    - echo $CI_REGISTRY_IMAGE
     - 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
-    - envsubst < k8s/deploy.yaml > out.yaml
-    - mv out.yaml k8s/deploy.yaml
-    - ./kubectl apply -f k8s
+    - 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
-    - ./kubectl exec $(./kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}') -- python manage.py migrate
+    - 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}')
+    - ./kubectl exec $POD -- python manage.py migrate

.vscode/launch.json

@@ -5,14 +5,27 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Python: Django",
+            "name": "Test",
             "type": "python",
             "request": "launch",
             "program": "${workspaceFolder}/manage.py",
             "args": [
                 "test",
             ],
-            "django": true
+            "django": true,
+            "preLaunchTask": "Migrate"
+        },
+        {
+            "name": "Run Server",
+            "type": "python",
+            "request": "launch",
+            "program": "${workspaceFolder}/manage.py",
+            "args": [
+                "runserver",
+                "--noreload"
+            ],
+            "django": true,
+            "preLaunchTask": "Migrate"
         }
     ]
 }

.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Collect Static",
+            "command": "venv/bin/python manage.py collectstatic --no-input",
+            "type": "shell",
+            "presentation": {
+                "reveal": "always"
+            },
+            "group": "build"
+        },
+        {
+            "dependsOn": "Collect Static",
+            "label": "Migrate",
+            "command": "venv/bin/python manage.py migrate",
+            "type": "shell",
+            "presentation": {
+                "reveal": "always"
+            },
+            "group": "build"
+        }
+    ]
+}

Dockerfile

@@ -8,4 +8,10 @@ COPY manage.py manage.py
 COPY requirements.txt requirements.txt
 RUN pip install -r requirements.txt
 
+RUN useradd -ms /bin/bash django
+RUN chown -R django .
+
+USER django
+RUN python manage.py collectstatic
+
 CMD ["gunicorn","-b",":8000", "-w", "4", "config.wsgi"]

README.md

@@ -0,0 +1,24 @@
+# CI Builder
+
+My CI testing pipeline for a django project.
+
+[![pipeline status](http://gitlab.ducoterra.net/ducoterra/ci_builder/badges/master/pipeline.svg)](http://gitlab.ducoterra.net/ducoterra/ci_builder/-/commits/master)
+
+## Django Environment Variables
+
+### Django Secret
+
+```bash
+kubectl create secret generic django-secrets --from-literal=SECRET_KEY=$(python -c "import secrets ; print(secrets.token_urlsafe(32))")
+```
+
+### Django Allowed Hosts
+
+```yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: test
+data:
+  ALLOWED_HOSTS: localhost,test.ducoterra.net
+```

config/settings.py

@@ -20,13 +20,13 @@ BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 # See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = 'b8fi9=f-qj=@-#1iru34-f@a6pzfysgrf(1n_&d=ur%!1w$q*w'
+SECRET_KEY = os.getenv("SECRET_KEY")
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
-
-ALLOWED_HOSTS = ["localhost", "test.ducoterra.net"]
+DEBUG = True if os.getenv("DEBUG") == "True" else False
+LOGGING_CONFIG = None
 
+ALLOWED_HOSTS = os.getenv("ALLOWED_HOSTS", "localhost").split(",")
 
 # Application definition
 
@@ -122,3 +122,4 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/3.0/howto/static-files/
 
 STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

config/urls.py

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

k8s/configmap.yaml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: $DEPLOY
+data:
+  ALLOWED_HOSTS: localhost,$DEPLOY.ducoterra.net

k8s/deploy.yaml

@@ -1,22 +1,27 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: test
+  name: $DEPLOY
 spec:
   selector:
     matchLabels:
-      app: test
+      app: $DEPLOY
   template:
     metadata:
       labels:
-        app: test
+        app: $DEPLOY
     spec:
       containers:
-      - name: test
+      - name: $DEPLOY
         image: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
+        envFrom:
+        - configMapRef:
+            name: $DEPLOY
+        - secretRef:
+            name: django-secrets
         volumeMounts:
           - mountPath: /app/db
-            name: test
+            name: $DEPLOY
         resources:
           limits:
             memory: "256Mi"
@@ -27,6 +32,6 @@ spec:
         ports:
         - containerPort: 8000
       volumes:
-        - name: test
+        - name: $DEPLOY
           persistentVolumeClaim:
-            claimName: test
+            claimName: $DEPLOY

k8s/ingress.yaml

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

k8s/prod/ingress.yaml

@@ -0,0 +1,79 @@
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: $DEPLOY-internal-tls
+  annotations:
+    kubernetes.io/ingress.class: traefik-internal
+spec:
+  entryPoints:
+    - websecure
+  tls:
+    certResolver: myresolver
+    domains:
+    - main: "*.ducoterra.net"
+  routes:
+  - match: Host(`$DEPLOY.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: $DEPLOY
+      port: 8000
+
+---
+
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: $DEPLOY-internal-web
+  annotations:
+    kubernetes.io/ingress.class: traefik-internal
+spec:
+  entryPoints:
+    - web
+  routes:
+  - match: Host(`$DEPLOY.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: $DEPLOY
+      port: 8000
+    middlewares:
+      - name: httpsredirect
+
+---
+
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: $DEPLOY-external-tls
+  annotations:
+    kubernetes.io/ingress.class: traefik-external
+spec:
+  entryPoints:
+    - websecure
+  tls:
+    certResolver: myresolver
+  routes:
+  - match: Host(`$DEPLOY.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: $DEPLOY
+      port: 8000
+
+---
+
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: $DEPLOY-external-web
+  annotations:
+    kubernetes.io/ingress.class: traefik-external
+spec:
+  entryPoints:
+    - web
+  routes:
+  - match: Host(`$DEPLOY.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: $DEPLOY
+      port: 8000
+    middlewares:
+      - name: httpsredirect

k8s/pvc.yaml

@@ -1,7 +1,7 @@
 apiVersion: v1
 kind: PersistentVolumeClaim
 metadata:
-  name: test
+  name: $DEPLOY
 spec:
   storageClassName: nfs-encrypted
   accessModes:

k8s/service.yaml

@@ -1,10 +1,10 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: test
+  name: $DEPLOY
 spec:
   selector:
-    app: test
+    app: $DEPLOY
   ports:
   - port: 8000
     targetPort: 8000

k8s/test/ingress.yaml

@@ -0,0 +1,39 @@
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: $DEPLOY-internal-tls
+  annotations:
+    kubernetes.io/ingress.class: traefik-internal
+spec:
+  entryPoints:
+    - websecure
+  tls:
+    certResolver: myresolver
+    domains:
+    - main: "*.ducoterra.net"
+  routes:
+  - match: Host(`$DEPLOY.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: $DEPLOY
+      port: 8000
+
+---
+
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: $DEPLOY-internal-web
+  annotations:
+    kubernetes.io/ingress.class: traefik-internal
+spec:
+  entryPoints:
+    - web
+  routes:
+  - match: Host(`$DEPLOY.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: $DEPLOY
+      port: 8000
+    middlewares:
+      - name: httpsredirect

manage.py

@@ -5,6 +5,8 @@ import sys
 
 
 def main():
+    os.environ.setdefault('DEBUG', 'True')
+    os.environ.setdefault('SECRET_KEY', 'SeVOOxOHISQZv82RfCPds0B2l8M6jGju4G8F-GcuSrc')
     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
     try:
         from django.core.management import execute_from_command_line

ui/static/ui/achievement.css

@@ -0,0 +1,41 @@
+.achievement {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+}
+
+.achievement-animate {
+    animation-name: moveup;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.achievment-column {
+    height: 100%;
+    overflow: auto;
+    text-align: center;
+}
+
+.achievement-text {
+    font-size: 4rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .achievment-column {
+        height: 50%;
+    }
+}
+
+@keyframes moveup {
+    from {bottom: 0px;}
+    to {bottom: 200px; color: white;}
+}
+
+@keyframes fadeout {
+    from {}
+    to {color: transparent;}
+}

ui/static/ui/button.css

@@ -0,0 +1,32 @@
+html, body { 
+    height: 100%;
+    width: 100%;
+}
+
+.section, .container {
+    height: 100%;
+}
+
+.columns {
+    height: 100%;
+}
+
+.button-column {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    height: 100%;
+}
+
+@media only screen and (max-width: 768px) {
+    .button-column {
+        height: 50%;
+    }
+}
+
+
+.button-container {
+    position: absolute;
+}

ui/static/ui/button.js

@@ -1,25 +1,31 @@
-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;
-            }
-        }
+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 achievement_list = document.getElementById("achievement-list");
+const achievement_column = document.getElementById("achievement-column");
+
+function add_achievement(text) {
+    if (text != undefined) {
+        achievement.querySelector(".achievement-text").innerText = text;
+        achievement.classList.remove("achievement-animate");
+        void achievement.offsetWidth;
+        achievement.classList.add("achievement-animate");
+
+        var elem = document.createElement("div");
+        elem.innerText = text;
+        achievement_list.appendChild(elem);
+
+        achievement_column.scrollTo(0, achievement_list.scrollHeight);
     }
-    return cookieValue;
 }
 
-var csrftoken = getCookie('csrftoken');
-var button = document.getElementById("BUTTON");
-var count = document.getElementById("COUNT");
-
+// when button is clicked submit an empty post request
 button.addEventListener("click", event => {
-    fetch('/button', {
+    button.disabled = true;
+    button.classList.add("is-loading");
+    fetch('/button/', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -31,7 +37,12 @@ button.addEventListener("click", event => {
         })
         .then((data) => {
             count.innerText = data.pressed;
+            add_achievement(data.achievement);
+        }).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/static/ui/smooth.css

@@ -0,0 +1,23 @@
+html, body, .section, .container {
+    height: 100%;
+}
+
+.container {
+    overflow-y: hidden;
+}
+
+.element::-webkit-scrollbar { width: 0 !important }
+.element { overflow: -moz-scrollbars-none; }
+.element { -ms-overflow-style: none; }
+
+.hide-overflow {
+    overflow: hidden;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.w-100 {
+    width: 100%;
+}

ui/static/ui/smooth.js

@@ -0,0 +1,39 @@
+// temp0.scrollIntoView({behavior: "smooth"});
+const scroll0 = document.getElementById("scroll-0");
+const scroll1 = document.getElementById("scroll-1");
+const scroll2 = document.getElementById("scroll-2");
+const scroll3 = document.getElementById("scroll-3");
+
+window.addEventListener("scroll", function(event) {
+    window.addEventListener("mouseup", event => {
+        console.log("hello");
+    });
+    event.preventDefault();
+    document.querySelector("html").classList.add("hide-overflow");
+    if (scroll0.dataset.isScrolling != "true") {
+        scroll0.dataset.isScrolling = 'true';
+        
+        if (scroll1.dataset.seen != "true") {
+            scroll1.dataset.seen = "true";
+            scroll1.scrollIntoView({behavior: "smooth"});
+        }
+        else if (scroll2.dataset.seen != "true") {
+            scroll2.dataset.seen = "true";
+            scroll2.scrollIntoView({behavior: "smooth"});
+        }
+        else if (scroll3.dataset.seen != "true") {
+            scroll3.dataset.seen = "true";
+            scroll3.scrollIntoView({behavior: "smooth"});
+        }
+        else {
+            scroll1.dataset.seen =  "false";
+            scroll2.dataset.seen =  "false";
+            scroll3.dataset.seen =  "false";
+            scroll0.scrollIntoView({behavior: "smooth"});
+        }
+        setTimeout(() => {
+            scroll0.dataset.isScrolling = false;
+            document.querySelector("html").classList.remove("hide-overflow");
+        }, 1000)
+    }
+});

ui/templates/ui/base.html

@@ -0,0 +1,24 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <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>
+    {% block css %}
+    {% endblock %}
+</head>
+
+<body>
+    {% csrf_token %}
+
+    {% block body %}
+    {% endblock %}
+
+    {% block js %}
+    {% endblock %}
+</body>

ui/templates/ui/button.html

@@ -1,33 +1,47 @@
+{% extends 'ui/base.html' %}
+
 {% load static %}
 
-<!DOCTYPE html>
-<html>
+{% block css %}
+<link rel="stylesheet" href="{% static 'ui/button.css' %}">
+<link rel="stylesheet" href="{% static 'ui/achievement.css' %}">
+{% endblock %}
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello Bulma!</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>
-</head>
+{% block js %}
+<script src="{% static 'ui/helper.js' %}"></script>
+<script src="{% static 'ui/button.js' %}"></script>
+{% endblock %}
 
-<body>
-    {% csrf_token %}
-    <section class="section">
-        <div class="container">
+{% block body %}
+<section class="section">
+    <div class="columns">
+        <div class="column">
+        </div>
+        <div class="button-column column">
             <div>
                 <h1 class="title">
                     The Button
                 </h1>
-                <button class="button" id="BUTTON">Press</button>
+                <button class="button is-danger" id="BUTTON">Press</button>
             </div>
             <div><br></div>
             <div>
                 <h1 class="title" id="COUNT">{{ pressed }}</h1>
             </div>
+            <div id="achievement" class="achievement">
+                <div>
+                    <div class="achievement-text"></div>
+                </div>
+            </div>
         </div>
-    </section>
-    <script src="{% static 'ui/button.js' %}"></script>
-</body>
-
-</html>
+        <div class="column achievment-column" id = "achievement-column">
+            <div class="achievements-list" id="achievement-list">
+                <h1 class="title">Achievements</h1>
+                {% for key,value in achievement.items %}
+                <div>{{ value }}</div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}

ui/templates/ui/smooth.html

@@ -0,0 +1,31 @@
+{% extends 'ui/base.html' %}
+
+{% load static %}
+
+{% block css %}
+<link rel="stylesheet" href="{% static 'ui/smooth.css' %}">
+{% endblock %}
+
+{% block js %}
+<script src="{% static 'ui/smooth.js' %}"></script>
+{% endblock %}
+
+{% block body %}
+<div class="container">
+    <div id="scroll-0" class="h-100 w-100">
+        <h1 class="title">Hello There</h1>
+    </div>
+
+    <div id="scroll-1" class="h-100 w-100">
+        <h1 class="title">I'm an Apple Ad</h1>
+    </div>
+
+    <div id="scroll-2" class="h-100 w-100">
+        <h1 class="title">See me scroll</h1>
+    </div>
+
+    <div id="scroll-3" class="h-100 w-100">
+        <h1 class="title">You owe me $3,000 dollars for this</h1>
+    </div>
+</div>
+{% endblock %}

ui/tests.py

@@ -1,5 +1,5 @@
 from django.contrib.auth.models import AnonymousUser, User
-from django.test import RequestFactory, TestCase
+from django.test import RequestFactory, TestCase, Client
 
 from .views import button
 
@@ -11,23 +11,31 @@ class SimpleTest(TestCase):
             username='testuser', email='test@test.test', password='testpass')
 
     def test_button(self):
-        # Create an instance of a GET request.
-        request = self.factory.get('/snippets')
-        request.user = self.user
-        request.session = self.client.session
-        response = button(request)
+        # Test initial load
+        c = Client()
+        response = c.get('/button')
+        self.assertEqual(response.status_code, 301)
+        response = c.get('/button/')
         self.assertEqual(response.status_code, 200)
-        
-        request = self.factory.post(
-            '/button',
-            data={},
-            content_type='application/json'
-        )
-        request.session = self.client.session
-        response = button(request)
-        self.assertEqual(response.status_code, 200)
-        self.assertEqual(request.session.get('pressed'), 1)
+        self.assertEqual(response.context.get("achievement"), {})
 
-        response = button(request)
+        # Test first achievement
+        response = c.post('/button/', {})
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(request.session.get('pressed'), 2)
+        self.assertEqual(response.json().get("pressed"), 1)
+        self.assertEqual(response.json().get("achievement"), "Clicked!")
+        self.assertEqual(c.session.get('pressed'), 1)
+
+        # Test second achievement
+        response = c.post('/button/', {})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json().get("pressed"), 2)
+        self.assertEqual(response.json().get("achievement"), "Clicked Twice!")
+        self.assertEqual(c.session.get('pressed'), 2)
+
+        # Test no achievement
+        response = c.post('/button/', {})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json().get("pressed"), 3)
+        self.assertEqual(response.json().get("achievement"), None)
+        self.assertEqual(c.session.get('pressed'), 3)

ui/urls.py

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

ui/views.py

@@ -1,8 +1,61 @@
 from django.shortcuts import render
 from django.http import JsonResponse
 
+achievements = {
+    1: "Clicked!",
+    2: "Clicked Twice!",
+    4: "2^2",
+    8: "2^3",
+    16: "2^4",
+    24: "I'm that old",
+    32: "2^5",
+    64: "2^6",
+    69: "Nice",
+    100: "one hundred",
+    128: "2^7",
+    200: "two hundred",
+    250: "quarter thousand",
+    256: "2^8",
+    300: "three hundred",
+    400: "four hundred",
+    420: "Blaze it",
+    500: "half thousand",
+    512: "2^9",
+    600: "six hundred",
+    700: "seven hundred",
+    800: "eight hundred",
+    900: "nine hundred",
+    1000: "full thousand",
+    1024: "2^10",
+    1776: "America",
+    1914: "Some War here",
+    1938: "Some more war here",
+    1950: "Lots of war in here",
+    2000: "Computers die",
+    2008: "Houses die",
+    2019: "People die",
+    2048: "2048!",
+    2500: "Keep going!",
+    3000: "three thousand",
+    4000: "four thousand",
+    4096: "2^11",
+    5000: "halfway to ten thousand",
+    10001: "ten thousand one",
+    100000: "one hundred thousand",
+    1000000: "one million?",
+    10000000: "ten millions???",
+    100000000: "one hundo billion",
+    1000000000: "JK this is actually a billion though",
+    10000000000: "I'm not going to create another achievement",
+    100000000000: "one hundred billion",
+    1000000000000: "It's physically impossible to click this high"
+}
+
+
 def button(request):
     PRESSED = 'pressed'
+    ACHIEVE = 'achievement'
+
     try:
         request.session[PRESSED]
     except KeyError:
@@ -10,5 +63,17 @@ def button(request):
 
     if request.method == "POST":
         request.session[PRESSED] += 1
-        return JsonResponse({PRESSED: request.session[PRESSED]})
-    return render(request, "ui/button.html", {PRESSED: request.session[PRESSED]})
+        response = {
+            PRESSED: request.session[PRESSED],
+            ACHIEVE: achievements.get(request.session[PRESSED])
+        }
+        return JsonResponse(response)
+
+    pressed = request.session[PRESSED]
+    response = {PRESSED: pressed}
+    achieved = {k:v for k,v in achievements.items() if k <= pressed}
+    response.update({ACHIEVE: achieved})
+    return render(request, "ui/button.html", response)
+
+def smooth(request):
+    return render(request, "ui/smooth.html")