Added end screen and improved start screen.

src/App.vue

@@ -4,7 +4,8 @@
         <Timer />
         <Buffer />
         <Matrix v-on:won="level++" v-on:lost="lost = true" />
-        <Start :level="level" v-on:start="nextLevel" />
+        <Start :level="level" :lost="lost" v-on:start="nextLevel" />
+        <End :level="level" v-on:restart="restart" v-if="lost" />
     </main>
 </template>
 
@@ -15,6 +16,7 @@
     import Buffer from "./components/Buffer.vue";
     import Matrix from "./components/Matrix.vue";
     import Start from "./components/Start.vue";
+    import End from "./components/End.vue";
     import { Game } from "./game/Game";
 
     export default defineComponent({
@@ -23,7 +25,8 @@
             Timer,
             Buffer,
             Matrix,
-            Start
+            Start,
+            End
         },
         setup() {
             const game = ref(new Game({
@@ -39,7 +42,7 @@
                 timeoutMilliseconds: 60_000,
             }));
             provide("game", game);
-            const level = ref(0);
+            const level = ref(1);
             const lost = ref(false);
 
             function nextLevel() {
@@ -57,10 +60,17 @@
                 });
             }
 
+            function restart() {
+                level.value = 1;
+                lost.value = false;
+                nextLevel();
+            }
+
             return {
                 level,
                 lost,
-                nextLevel
+                nextLevel,
+                restart
             }
         }
     });

src/components/End.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="overlay">
+        <div>
+            <div>You lost!</div>
+            <div class="countdown">Level: {{level}}</div>
+            <button v-on:click="$emit('restart')">Play again</button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent} from "vue";
+    
+    export default defineComponent({
+        props: {
+            level: {type: Number, required: true}
+        }
+    });
+</script>

src/components/Start.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="overlay" v-if="countdown > 0">
         <div>
-            <div class="countdown">{{countdown}}</div>
+            <div>Level: {{level}}</div>
+            <div class="countdown" v-if="interval !== 0">{{countdown}}</div>
             <button v-on:click="start" v-if="interval === 0">Start</button>
         </div>
     </div>
@@ -12,13 +13,14 @@
     
     export default defineComponent({
         props: {
-            level: {type: Number, required: true}
+            level: {type: Number, required: true},
+            lost: {type: Boolean, required: true}
         },
         setup(props, {emit}) {
             const countdown = ref(3);
             const interval = ref(0);
 
-            watch(() => props.level, () => {
+            watch([() => props.level, () => props.lost], () => {
                 countdown.value = 3;
                 interval.value = 0;
             });

src/sass/main.scss

@@ -146,6 +146,7 @@ main {
     display: flex;
     justify-content: center;
     align-items: center;
+    text-align: center;
 
     .countdown {
         font-size: 32px;