Manage game state through object injection everywhere, fixed filling buffer and stopping clock in Game.

src/components/Buffer.vue

@@ -3,7 +3,7 @@
         <h2>Buffer</h2>
         <div class="buffer-slots">
             <div class="buffer-slots-slot buffer-slots-border" v-for="(slot, i) in maxBufferLength" :key="i">
-                <span v-if="buffer.length > i">{{buffer[i]}}</span>
+                <span v-if="buffer.length > i">{{buffer[i].value}}</span>
             </div>
         </div>
         <Sequences />
@@ -11,7 +11,8 @@
 </template>
 
 <script lang="ts">
-    import {defineComponent, inject} from "vue";
+    import { Game } from "@/game/Game";
+    import {defineComponent, inject, Ref, computed} from "vue";
     import Sequences from "./Sequences.vue";
     
     export default defineComponent({
@@ -19,8 +20,9 @@
             Sequences
         },
         setup() {
-            const maxBufferLength = inject("maxBufferLength");
-            const buffer = inject("buffer");
+            const game = inject("game") as Ref<Game>;
+            const maxBufferLength = computed(() => game.value.maxBufferLength);
+            const buffer = computed(() => game.value.buffer);
 
             return {
                 maxBufferLength,

src/components/Matrix.vue

@@ -2,24 +2,35 @@
     <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)*size + (j - 1)]}}
+            <div class="matrix-column" v-for="j in size" :key="j" v-on:click="select(i, j)">
+                {{matrix[(j - 1)*size + (i - 1)]}}
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-    import {defineComponent, inject} from "vue";
+    import { Game } from "@/game/Game";
+    import {defineComponent, inject, computed, Ref} from "vue";
     
     export default defineComponent({
         setup() {
-            const size = inject("size");
-            const matrix = inject("matrix");
+            const game = inject("game") as Ref<Game>;
+            const size = computed(() => game.value.size);
+            const matrix = computed(() => game.value.matrix);
+
+            function select(row: number, column: number) {
+                try {
+                    game.value.pick(row-1, column-1);
+                } catch (e) {
+                    console.log("nö!");
+                }
+            }
 
             return {
                 size,
-                matrix
+                matrix,
+                select
             }
         }
     });

src/components/Sequences.vue

@@ -10,11 +10,13 @@
 </template>
 
 <script lang="ts">
-    import {defineComponent, inject} from "vue";
+    import { Game } from "@/game/Game";
+    import {computed, defineComponent, inject, Ref} from "vue";
     
     export default defineComponent({
         setup() {
-            const sequences = inject("sequences");
+            const game = inject("game") as Ref<Game>;
+            const sequences = computed(() => game.value.sequences);
 
             return {
                 sequences

src/components/Timer.vue

@@ -6,15 +6,31 @@
 </template>
 
 <script lang="ts">
-    import {defineComponent, computed, inject, Ref} from "vue";
+    import { Game } from "@/game/Game";
+    import {defineComponent, computed, inject, Ref, ref} from "vue";
     
     export default defineComponent({
         setup() {
-            const remainingMilliseconds = inject("remainingMilliseconds") as Ref<number>;
-            const timeoutMilliseconds = inject("timeoutMilliseconds") as Ref<number>;
+            const game = inject("game") as Ref<Game>;
+            const remainingMilliseconds = ref(game.value.remainingMilliseconds);
+            const timeoutMilliseconds = computed(() => game.value.timeoutMilliseconds);
             const progress = computed(() => remainingMilliseconds.value/timeoutMilliseconds.value*100);
             const countdown = computed(() => (remainingMilliseconds.value/1000).toFixed(2));
 
+            const updateTime = () => {
+                remainingMilliseconds.value = game.value.remainingMilliseconds;
+                
+                if (remainingMilliseconds.value > 0) {
+                    requestAnimationFrame(() => {
+                        updateTime();
+                    });
+                }
+            }
+
+            requestAnimationFrame(() => {
+                updateTime();
+            });
+
             return {
                 countdown,
                 progress

src/components/timer.ts

@@ -1,28 +0,0 @@
-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
-    }
-}