Added game state to all components, renamed timeout to timeoutMilliseconds, removed score from savegame.

src/components/Buffer.vue

@@ -2,31 +2,30 @@
     <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 class="buffer-slots-slot buffer-slots-border" v-for="(slot, i) in maxBufferLength" :key="i">
+                <span v-if="buffer.length > i">{{buffer[i]}}</span>
             </div>
         </div>
+        <Sequences />
     </div>
 </template>
 
 <script lang="ts">
-    import {defineComponent} from "vue";
+    import {defineComponent, inject} from "vue";
+    import Sequences from "./Sequences.vue";
     
     export default defineComponent({
-        props: {
-            slots: {type: Array, required: true},
-            codes: {type: Array, required: true}
+        components: {
+            Sequences
+        },
+        setup() {
+            const maxBufferLength = inject("maxBufferLength");
+            const buffer = inject("buffer");
+
+            return {
+                maxBufferLength,
+                buffer
+            }
         }
     });
 </script>

src/components/Matrix.vue

@@ -3,19 +3,24 @@
         <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)*size + (j - 1)]}}
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-    import {defineComponent} from "vue";
+    import {defineComponent, inject} from "vue";
     
     export default defineComponent({
-        props: {
-            size: {type: Number, required: true},
-            matrix: {type: Array, required: true},
+        setup() {
+            const size = inject("size");
+            const matrix = inject("matrix");
+
+            return {
+                size,
+                matrix
+            }
         }
     });
 </script>

src/components/Sequences.vue

@@ -0,0 +1,24 @@
+<template>
+    <h2>Sequences</h2>
+    <div class="buffer-codes" v-for="(sequence, i) in sequences" :key="i">
+        <div class="buffer-slots">
+            <div class="buffer-slots-slot" v-for="(digit, j) in sequence" :key="j">
+                {{digit}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent, inject} from "vue";
+    
+    export default defineComponent({
+        setup() {
+            const sequences = inject("sequences");
+
+            return {
+                sequences
+            }
+        }
+    });
+</script>

src/components/Timer.vue

@@ -6,18 +6,16 @@
 </template>
 
 <script lang="ts">
-    import {defineComponent, ref, computed} from "vue";
+    import {defineComponent, computed, inject, Ref} from "vue";
     
     export default defineComponent({
-        props: {
-            time: {type: Object, required: true}
-        },
-        setup(props) {
-            const remainingTime = ref(60)
-            const progress = computed(() => remainingTime.value/60*100);
-            const countdown = computed(() => remainingTime.value.toFixed(2));
+        setup() {
+            const remainingTime = 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 = () => {
+            /*const updateTime = () => {
                 remainingTime.value = Math.max(0, (props.time.getTime() - new Date().getTime()) / 1000);
                 if (remainingTime.value > 0) {
                     requestAnimationFrame(() => {
@@ -28,7 +26,7 @@
 
             requestAnimationFrame(() => {
                 updateTime();
-            });
+            });*/
 
             return {
                 countdown,