Count down timer and some styling.

src/App.vue

@@ -14,6 +14,7 @@
     import Buffer from "./components/Buffer.vue";
     import Matrix from "./components/Matrix.vue";
     import { Game } from "./game/Game";
+    import {useTimer} from "./components/timer";
 
     export default defineComponent({
         components: {
@@ -23,6 +24,7 @@
             Matrix
         },
         setup() {
+            const {updateCountdown} = useTimer();
             const game = new Game({
                 matrix: [
                     "AA", "BB", "CC",
@@ -50,6 +52,7 @@
             provide("sequences", readonly(sequences));
             provide("size", readonly(size));
             provide("matrix", readonly(matrix));
+            updateCountdown(game, remainingMilliseconds);
 
             return {
                 level

src/components/Timer.vue

@@ -10,23 +10,10 @@
     
     export default defineComponent({
         setup() {
-            const remainingTime = inject("remainingMilliseconds") as Ref<number>;
+            const remainingMilliseconds = inject("remainingMilliseconds") as Ref<number>;
             const timeoutMilliseconds = inject("timeoutMilliseconds") as Ref<number>;
-            const progress = computed(() => remainingTime.value/timeoutMilliseconds.value*100);
-            const countdown = computed(() => (remainingTime.value/1000).toFixed(2));
-
-            /*const updateTime = () => {
-                remainingTime.value = Math.max(0, (props.time.getTime() - new Date().getTime()) / 1000);
-                if (remainingTime.value > 0) {
-                    requestAnimationFrame(() => {
-                        updateTime();
-                    });
-                }
-            }
-
-            requestAnimationFrame(() => {
-                updateTime();
-            });*/
+            const progress = computed(() => remainingMilliseconds.value/timeoutMilliseconds.value*100);
+            const countdown = computed(() => (remainingMilliseconds.value/1000).toFixed(2));
 
             return {
                 countdown,

src/components/timer.ts

@@ -0,0 +1,28 @@
+import { Game } from '@/game/Game';
+import { Ref } from 'vue';
+
+interface Timer {
+    updateCountdown(game: Game, remainingMilliseconds: Ref<number>): void
+}
+
+export function useTimer(): Timer {
+    function updateCountdown(game: Game, remainingMilliseconds: Ref<number>) {
+        const updateTime = () => {
+            remainingMilliseconds.value = game.remainingMilliseconds;
+            
+            if (remainingMilliseconds.value > 0) {
+                requestAnimationFrame(() => {
+                    updateTime();
+                });
+            }
+        }
+
+        requestAnimationFrame(() => {
+            updateTime();
+        });
+    }
+
+    return {
+        updateCountdown
+    }
+}

src/sass/main.scss

@@ -5,6 +5,7 @@ $yellow: #d0ee58;
 
 * {
     box-sizing: border-box;
+    user-select: none;
 }
 
 html, body {
@@ -105,6 +106,7 @@ main {
         width: 32px;
         height: 32px;
         margin: 0 5px 5px 0;
+        cursor: pointer;
     }
 }