added game over screen

src/App.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
 import Vue from "vue";
 import Canvas from "./components/canvas.vue";
+
 export default Vue.extend({
   components: {
     CanvasApp: Canvas,

src/components/canvas.vue

@@ -2,14 +2,19 @@
   <div>
     <canvas id="mainCanv" width="500" height="500"></canvas>
     <div>Wynik: {{ snakeWidth - 1 }}</div>
-    <div v-if="gameover">Game over</div>
+
+    <game-over-app :gameover="gameover" :score="snakeWidth - 1" />
   </div>
 </template>
 
 <script lang="ts">
+import GameOver from "./gameover.vue";
 import Vue from "vue";
 export default Vue.extend({
   name: "CanvasApp",
+  components: {
+    GameOverApp: GameOver,
+  },
   data() {
     return {
       kierunek: 2,

src/components/gameover.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="gameover" id="gameover">
+    <div>Game Over</div>
+    <div>Wynik: {{ score }}</div>
+    <button @click="refresh">Zagraj ponownie</button>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  props: ["gameover", "score"],
+  name: "CanvasApp",
+  methods: {
+    refresh() {
+      window.location.reload();
+    },
+  },
+});
+</script>
+<style scoped lang="scss">
+#gameover {
+  background: rgba(54, 54, 54, 0.8);
+  display: block;
+  width: 20vw;
+  height: 20vh;
+  left: 40vw;
+  top: 30vh;
+  line-height: 5vh;
+  font-size: 3vh;
+  position: absolute;
+  border-radius: 20px;
+  color: RED;
+  button {
+    height: 8vh;
+    width: 10vw;
+    font-size: 3vh;
+    border-radius: 20px;
+    background: rgba(42, 197, 28, 0.8);
+    border: 1px solid black;
+  }
+}
+</style>