Added start screen with countdown and advancing level.

src/App.vue

@@ -3,7 +3,8 @@
         <Level :level="level" />
         <Timer />
         <Buffer />
-        <Matrix />
+        <Matrix v-on:won="level++" v-on:lost="lost = true" />
+        <Start :level="level" v-on:start="nextLevel" />
     </main>
 </template>
 
@@ -13,6 +14,7 @@
     import Timer from "./components/Timer.vue";
     import Buffer from "./components/Buffer.vue";
     import Matrix from "./components/Matrix.vue";
+    import Start from "./components/Start.vue";
     import { Game } from "./game/Game";
 
     export default defineComponent({
@@ -20,7 +22,8 @@
             Level,
             Timer,
             Buffer,
-            Matrix
+            Matrix,
+            Start
         },
         setup() {
             const game = ref(new Game({
@@ -36,10 +39,28 @@
                 timeoutMilliseconds: 60_000,
             }));
             provide("game", game);
-            const level = ref(1);
+            const level = ref(0);
+            const lost = ref(false);
+
+            function nextLevel() {
+                game.value = new Game({
+                    matrix: [
+                        "AA", "BB", "CC",
+                        "DD", "AA", "BB",
+                        "CC", "DD", "DD",
+                    ],
+                    sequences: [
+                        ["DD", "CC", "AA"],
+                    ],
+                    maxBufferLength: 3,
+                    timeoutMilliseconds: 60_000,
+                });
+            }
 
             return {
-                level
+                level,
+                lost,
+                nextLevel
             }
         }
     });

src/components/Matrix.vue

@@ -16,7 +16,7 @@
     import {defineComponent, inject, computed, Ref, ref} from "vue";
     
     export default defineComponent({
-        setup() {
+        setup(props, {emit}) {
             const game = inject("game") as Ref<Game>;
             const size = computed(() => game.value.size);
             const matrix = computed(() => game.value.matrix);
@@ -31,10 +31,12 @@
                     
                     matchState({
                         Won: () => {
-                            console.log("Won!");
+                            reset();
+                            emit("won");
                         },
                         Lost: () => {
-                            console.log("Lost!");
+                            reset();
+                            emit("lost");
                         },
                         InProgress: state => {
                             matchSelectionState({
@@ -73,6 +75,15 @@
                 }
             }
 
+            function reset() {
+                active.value ={row: -1, column: -1};
+                error.value = {row: -1, column: -1};
+                
+                if(errorTimeout) {
+                    clearTimeout(errorTimeout);
+                }
+            }
+
             return {
                 game,
                 size,

src/components/Start.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="overlay" v-if="countdown > 0">
+        <div>
+            <div class="countdown">{{countdown}}</div>
+            <button v-on:click="start" v-if="interval === 0">Start</button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent, ref, watch} from "vue";
+    
+    export default defineComponent({
+        props: {
+            level: {type: Number, required: true}
+        },
+        setup(props, {emit}) {
+            const countdown = ref(3);
+            const interval = ref(0);
+
+            watch(() => props.level, () => {
+                countdown.value = 3;
+                interval.value = 0;
+            });
+
+            watch(countdown, value => {
+                if(value <= 0) {
+                    clearInterval(interval.value);
+                    emit("start");
+                }
+            });
+
+            function start() {
+                interval.value = setInterval(() => {
+                    countdown.value--;
+                }, 1000) as unknown as number;
+            }
+
+            return {
+                countdown,
+                interval,
+                start
+            }
+        }
+    });
+</script>

src/sass/main.scss

@@ -136,6 +136,22 @@ main {
     }
 }
 
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: $background;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .countdown {
+        font-size: 32px;
+    }
+}
+
 h1, h2 {
     display: flex;
     align-items: center;
@@ -146,3 +162,12 @@ h1, h2 {
     padding: 5px 0;
     height: 32px;
 }
+
+button {
+    border-width: 0;
+    background: $yellow;
+    color: $background;
+    padding: 10px 20px;
+    outline: none;
+    cursor: pointer;
+}