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] 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,