added path for saper and added sapergame page

luckydiamond/src/pages/HomePage.vue

@@ -32,7 +32,7 @@
                 <div class="line__footer">
                   <img src="../assets/icons-gamemodes/bomb-icon.svg">
                   <div class="line__btn--main">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <a href="#" @click="$router.push({ name: 'saper' })" class="line__btn">play <span class="line__btn--elm">></span></a>
                   </div>
                 </div>
               </div>

luckydiamond/src/pages/games-pages/SapergamePage.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="content-grid--saper">
+    <aside-bar-element></aside-bar-element>
+
+    <header-element-page></header-element-page>
+
+    <chat-component></chat-component>
+
+    <div class="saper">
+      <h1>123</h1>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatComponent from "@/components/ChatComponent.vue";
+import AsideBarElement from "@/components/AsidebarComponent.vue";
+import HeaderElementPage from "@/components/HeaderComponent.vue";
+
+export default {
+  components: {ChatComponent, HeaderElementPage, AsideBarElement }
+
+}
+</script>
+
+<style scoped>
+
+</style>

luckydiamond/src/router/router.js

@@ -2,11 +2,13 @@ import { createRouter, createWebHistory } from "vue-router";
 
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
+import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
 
 export default createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', component: HomePage, name: 'home' },
-        { path: '/profile', component: ProfilePage, name: 'profile' }
+        { path: '/profile', component: ProfilePage, name: 'profile' },
+        { path: '/game/saper', component: SapergamePage, name: 'saper' }
     ]
 })