From 7df25e8a881c42c5e0ffcefb11f0d1ab30509e0c Mon Sep 17 00:00:00 2001
From: Marvin Blum <marvin.blum@emvi.com>
Date: Wed, 16 Dec 2020 00:12:22 +0100
Subject: [PATCH 1/2] Added basic components for UI.

---
 src/App.vue                       |  57 ++++++++++---
 src/components/Buffer.vue         |  32 ++++++++
 src/components/HelloWorld.test.ts |  16 ----
 src/components/HelloWorld.vue     |  61 --------------
 src/components/Level.vue          |  16 ++++
 src/components/Matrix.vue         |  21 +++++
 src/components/Timer.vue          |  37 +++++++++
 src/sass/main.scss                | 129 +++++++++++++++++++++++++++++-
 8 files changed, 280 insertions(+), 89 deletions(-)
 create mode 100644 src/components/Buffer.vue
 delete mode 100644 src/components/HelloWorld.test.ts
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/Level.vue
 create mode 100644 src/components/Matrix.vue
 create mode 100644 src/components/Timer.vue

diff --git a/src/App.vue b/src/App.vue
index 9183500..24e9a96 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,55 @@
 <template>
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <main>
+        <Level :level="level" />
+        <Timer :time="time" />
+        <Buffer :slots="slots" :codes="codes" />
+        <Matrix :size="size" :matrix="matrix" />
+    </main>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+    import {defineComponent} from "vue";
+    import Level from "./components/Level.vue";
+    import Timer from "./components/Timer.vue";
+    import Buffer from "./components/Buffer.vue";
+    import Matrix from "./components/Matrix.vue";
 
-export default defineComponent({
-    name: 'App',
-    components: {
-        HelloWorld
-    }
-});
+    export default defineComponent({
+        components: {
+            Level,
+            Timer,
+            Buffer,
+            Matrix
+        },
+        setup() {
+            const time = new Date();
+            time.setSeconds(time.getSeconds()+60);
+
+            return {
+                level: 5,
+                time,
+                slots: ["99", "E7", "AD", ""],
+                codes: [
+                    {
+                        code: ["", "E7", "AD", "BD"],
+                        points: 100
+                    },
+                    {
+                        code: ["99", "E7", "AD"],
+                        points: 50
+                    }
+                ],
+                size: 5,
+                matrix: [
+                    "99", "E7", "AD", "99", "BD",
+                    "99", "BD", "99", "E7", "AD",
+                    "AD", "E7", "BD", "AD", "99",
+                    "99", "99", "BD", "E7", "AD",
+                    "E7", "AD", "99", "BD", "99"
+                ]
+            }
+        }
+    });
 </script>
 
 <style lang="scss">
diff --git a/src/components/Buffer.vue b/src/components/Buffer.vue
new file mode 100644
index 0000000..86b60cb
--- /dev/null
+++ b/src/components/Buffer.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="buffer">
+        <h2>Buffer</h2>
+        <div class="buffer-slots">
+            <div class="buffer-slots-slot buffer-slots-border" v-for="(slot, i) in slots" :key="i">
+                {{slot}}
+            </div>
+        </div>
+        <h2>Sequences</h2>
+        <div class="buffer-codes" v-for="(code, i) in codes" :key="i">
+            <div class="buffer-slots">
+                <div class="buffer-slots-slot" v-for="(digit, j) in code.code" :key="j">
+                    {{digit}}
+                </div>
+            </div>
+            <div class="buffer-points">
+                {{code.points}} Pts
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent} from "vue";
+    
+    export default defineComponent({
+        props: {
+            slots: {type: Array, required: true},
+            codes: {type: Array, required: true}
+        }
+    });
+</script>
diff --git a/src/components/HelloWorld.test.ts b/src/components/HelloWorld.test.ts
deleted file mode 100644
index 3f7bdc1..0000000
--- a/src/components/HelloWorld.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import "jest";
-import {shallowMount} from "@vue/test-utils";
-import HelloWorld from "../components/HelloWorld.vue";
-
-describe("HelloWorld.vue", () => {
-    test("renders props.msg when passed", () => {
-        const msg = "new message"
-            const wrapper = shallowMount(HelloWorld, {
-            propsData: {
-                msg
-            }
-        });
-
-        expect(wrapper.text()).toMatch(msg)
-    });
-});
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 58f31cc..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <div class="hello">
-        <h1>{{ msg }}</h1>
-        <p>
-            For a guide and recipes on how to configure / customize this project,<br>
-            check out the
-            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-        </p>
-        <h3>Installed CLI Plugins</h3>
-        <ul>
-            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-        </ul>
-        <h3>Essential Links!</h3>
-        <ul>
-            <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-        </ul>
-        <h3>Ecosystem</h3>
-        <ul>
-            <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-        </ul>
-    </div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from 'vue';
-
-export default defineComponent({
-    props: {
-        msg: String
-    }
-});
-</script>
-
-<style lang="scss">
-    h3 {
-        margin: 40px 0 0;
-    }
-
-    ul {
-        list-style-type: none;
-        padding: 0;
-    }
-
-    li {
-        display: inline-block;
-        margin: 0 10px;
-    }
-
-    a {
-        color: #42b983;
-    }
-</style>
diff --git a/src/components/Level.vue b/src/components/Level.vue
new file mode 100644
index 0000000..2073fb4
--- /dev/null
+++ b/src/components/Level.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="level">
+        <h1>Breach</h1>
+        <div class="level-display">Level <span>{{level}}</span></div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent} from "vue";
+    
+    export default defineComponent({
+        props: {
+            level: {type: Number, required: true}
+        }
+    });
+</script>
diff --git a/src/components/Matrix.vue b/src/components/Matrix.vue
new file mode 100644
index 0000000..03a5508
--- /dev/null
+++ b/src/components/Matrix.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="matrix">
+        <h2>Code-Matrix</h2>
+        <div class="matrix-row" v-for="i in size" :key="i">
+            <div class="matrix-column" v-for="j in size" :key="j">
+                {{matrix[(i-1)*5+(j-1)]}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent} from "vue";
+    
+    export default defineComponent({
+        props: {
+            size: {type: Number, required: true},
+            matrix: {type: Array, required: true}
+        }
+    });
+</script>
diff --git a/src/components/Timer.vue b/src/components/Timer.vue
new file mode 100644
index 0000000..0cac15d
--- /dev/null
+++ b/src/components/Timer.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="timer">
+        <div class="timer-countdown">{{countdown}}</div>
+        <div class="timer-progress" :style="{width: `${progress}%`}"></div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent, ref} from "vue";
+    
+    export default defineComponent({
+        props: {
+            time: {type: Object, required: true}
+        },
+        setup(props) {
+            const countdown = ref("60.00");
+            const progress = ref(100);
+
+            setInterval(() => {
+                const remaining = (props.time.getTime()-new Date().getTime())/1000;
+
+                if(remaining > 0) {
+                    countdown.value = remaining.toFixed(2);
+                    progress.value = remaining/60*100;
+                } else {
+                    countdown.value = "0.00";
+                    progress.value = 0;
+                }
+            }, 100);
+
+            return {
+                countdown,
+                progress
+            };
+        }
+    });
+</script>
diff --git a/src/sass/main.scss b/src/sass/main.scss
index bbfa4b2..f6272f3 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,3 +1,128 @@
-body {
-    background: rgb(238, 238, 238);
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
+
+$background: #121018;
+$yellow: #d0ee58;
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    background: $background;
+    color: $yellow;
+    font-family: "Inconsolata", monospace;
+    font-size: 18px;
+    height: 100%;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+main {
+    min-width: 400px;
+    border: 1px solid $yellow;
+    padding: 20px;
+}
+
+.level {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 10px 0;
+
+    &-display {
+        span {
+            background: $yellow;
+            color: $background;
+            padding: 5px;
+            font-weight: bold;
+        }
+    }
+}
+
+.timer {
+    border: 1px solid $yellow;
+    margin: 0 0 10px 0;
+
+    &-countdown {
+        padding: 10px;
+    }
+
+    &-progress {
+        width: 100%;
+        height: 3px;
+        background: $yellow;
+    }
+}
+
+.buffer {
+    border: 1px solid $yellow;
+    margin: 0 0 10px 0;
+    padding: 10px;
+
+    &-codes {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &-slots {
+        display: flex;
+        margin: 5px 0;
+
+        &-slot {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            margin: 0 5px 0 0;
+        }
+
+        &-points {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 64px;
+            height: 32px;
+        }
+
+        &-border {
+            border: 1px solid $yellow;
+        }
+    }
+}
+
+.matrix {
+    border: 1px solid $yellow;
+    padding: 10px;
+
+    &-row {
+        display: flex;
+    }
+
+    &-column {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        margin: 0 5px 5px 0;
+    }
+}
+
+h1, h2 {
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+    font-size: 18px;
+    font-weight: normal;
+    margin: 0;
+    padding: 5px 0;
+    height: 32px;
 }

From 782fc5e6333ec2e887836d42c1e747c29d39f4f5 Mon Sep 17 00:00:00 2001
From: Marvin Blum <marvin.blum@emvi.com>
Date: Wed, 16 Dec 2020 18:38:05 +0100
Subject: [PATCH 2/2] Review comments.

---
 src/components/Matrix.vue |  4 ++--
 src/components/Timer.vue  | 28 +++++++++++++++-------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/Matrix.vue b/src/components/Matrix.vue
index 03a5508..531e2a5 100644
--- a/src/components/Matrix.vue
+++ b/src/components/Matrix.vue
@@ -3,7 +3,7 @@
         <h2>Code-Matrix</h2>
         <div class="matrix-row" v-for="i in size" :key="i">
             <div class="matrix-column" v-for="j in size" :key="j">
-                {{matrix[(i-1)*5+(j-1)]}}
+                {{matrix[(i - 1)*5 + (j - 1)]}}
             </div>
         </div>
     </div>
@@ -15,7 +15,7 @@
     export default defineComponent({
         props: {
             size: {type: Number, required: true},
-            matrix: {type: Array, required: true}
+            matrix: {type: Array, required: true},
         }
     });
 </script>
diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index 0cac15d..498154b 100644
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -6,27 +6,29 @@
 </template>
 
 <script lang="ts">
-    import {defineComponent, ref} from "vue";
+    import {defineComponent, ref, computed} from "vue";
     
     export default defineComponent({
         props: {
             time: {type: Object, required: true}
         },
         setup(props) {
-            const countdown = ref("60.00");
-            const progress = ref(100);
+            const remainingTime = ref(60)
+            const progress = computed(() => remainingTime.value/60*100);
+            const countdown = computed(() => remainingTime.value.toFixed(2));
 
-            setInterval(() => {
-                const remaining = (props.time.getTime()-new Date().getTime())/1000;
-
-                if(remaining > 0) {
-                    countdown.value = remaining.toFixed(2);
-                    progress.value = remaining/60*100;
-                } else {
-                    countdown.value = "0.00";
-                    progress.value = 0;
+            const updateTime = () => {
+                remainingTime.value = Math.max(0, (props.time.getTime() - new Date().getTime()) / 1000);
+                if (remainingTime.value > 0) {
+                    requestAnimationFrame(() => {
+                        updateTime();
+                    });
                 }
-            }, 100);
+            }
+
+            requestAnimationFrame(() => {
+                updateTime();
+            });
 
             return {
                 countdown,