finish MenuBoard, add about menu item, separate home and play pages

src/components/Board.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="board-w mx-auto my-3">
+    <div class="toolbar d-flex">
+      <a class="menu-toggle d-block mx-3 mb-3" href="#" @click.prevent="menuToggle()"></a>
+    </div>
     <div class="mx-3">
       <div class="aspect-ratio-box mb-3">
         <div class="aspect-ratio-box-inside">
@@ -8,11 +11,15 @@
               <Road class="road"/>
               <Marbles v-on:clickmarble="onClickMarble" class="marbles"/>
               <Dice v-show="shouldShowDice()" :dice-result="diceResult" :side="activePlayer.side"/>
+              <MenuBoard
+                v-show="shouldShowMenu"
+                @start_game="startGame()"
+                @resume_game="resumeGame()"
+              />
             </div>
           </section>
         </div>
       </div>
-      <MenuBoard @start_game="startGame()" />
     </div>
   </div>
 </template>
@@ -59,6 +66,7 @@ import { debounce } from "lodash-es";
 })
 export default class BoardComponent extends Vue {
   boardWidthUpdaterDebounced = debounce(this.boardWidthUpdater, 150);
+  shouldShowMenu = true;
 
   mounted() {
     this.init();
@@ -104,13 +112,26 @@ export default class BoardComponent extends Vue {
     this.resetGame();
     this.addPlayers();
     await store.dispatch("updateGameStatus", GameStatus.PLAYING);
+    this.shouldShowMenu = false;
     this.playTurn();
   }
-  async pauseGame() {
-    await store.dispatch("updateGameStatus", GameStatus.PAUSED);
+  async menuToggle() {
+    this.shouldShowMenu = !this.shouldShowMenu;
   }
   async resumeGame() {
-    await store.dispatch("updateGameStatus", GameStatus.PLAYING);
+    this.shouldShowMenu = false;
+    this.$emit("__game_resume");
+  }
+  resumePromise() {
+    return new Promise((resolve, reject) => {
+      if (this.gameStatus === GameStatus.PLAYING) {
+        resolve();
+      } else if (this.gameStatus === GameStatus.PAUSED) {
+        this.$once("__game_resume", () => {
+          resolve();
+        });
+      }
+    });
   }
   resetGame() {
     store.dispatch("marbles/reset");
@@ -178,6 +199,7 @@ export default class BoardComponent extends Vue {
       await store.dispatch("updateGameStatus", GameStatus.GAME_OVER);
       return;
     }
+    await this.resumePromise();
     if (this.shouldChangeTurn()) {
       this.changeTurn();
     }
@@ -334,4 +356,10 @@ export default class BoardComponent extends Vue {
   width: 100%;
   height: 100%;
 }
+.menu-toggle {
+  background: url("../assets/img/menu.svg") no-repeat center;
+  background-size: rem(32px);
+  width: rem(32px);
+  height: rem(32px);
+}
 </style>

src/components/MenuBoard.vue

@@ -1,37 +1,36 @@
 <template>
-  <nav>
-    <ul class="nav">
+  <nav class="wrapper h-100">
+    <ul class="nav d-flex flex-column justify-content-center align-items-center h-100">
       <button
         v-if="gameStatus === GameStatus.NOT_STARTED"
         @click="onClickStart()"
-        class="btn btn-primary mr-2"
+        class="btn w-75 btn-primary mb-3"
         type="button"
       >Start Game</button>
       <button
         v-if="gameStatus === GameStatus.PLAYING"
         @click="onClickPause()"
-        class="btn btn-primary mr-2"
+        class="btn w-75 btn-primary mb-3"
         type="button"
       >Pause</button>
       <button
         v-if="gameStatus === GameStatus.PAUSED"
         @click="onClickResume()"
-        class="btn btn-primary mr-2"
+        class="btn w-75 btn-primary mb-3"
         type="button"
       >Resume</button>
-      <router-link class="btn btn-secondary" to="/">Quit</router-link>
+      <router-link class="btn w-75 btn-secondary" to="/">Quit</router-link>
     </ul>
   </nav>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import store from '@/store/index.ts';
-import { GameStatus, BoardStatus } from '@/types/types.ts';
+import store from "@/store/index.ts";
+import { GameStatus, BoardStatus } from "@/types/types.ts";
 
 @Component
 export default class BoardComponent extends Vue {
-
   data() {
     return {
       BoardStatus,
@@ -46,8 +45,8 @@ export default class BoardComponent extends Vue {
     return store.getters["gameStatus"];
   }
 
-  onClickStart() {    
-    this.$emit('start_game');
+  onClickStart() {
+    this.$emit("start_game");
   }
   onClickPause() {
     this.pauseGame();
@@ -61,9 +60,16 @@ export default class BoardComponent extends Vue {
   }
   async resumeGame() {
     await store.dispatch("updateGameStatus", GameStatus.PLAYING);
+    this.$emit("resume_game");
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.wrapper {
+  z-index: 1;
+  position: relative;
+  background: rgba($dark, 0.6);
+  border-radius: $border-radius;
+}
 </style>

src/router.ts

@@ -1,23 +1,29 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import Home from './views/Home.vue';
+import Vue from "vue";
+import Router from "vue-router";
+import Home from "./views/Home.vue";
+import Play from "./views/Play.vue";
 
 Vue.use(Router);
 
 export default new Router({
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: Home,
+      path: "/",
+      name: "home",
+      component: Home
     },
     {
-      path: '/about',
-      name: 'about',
+      path: "/play",
+      name: "play",
+      component: Play
+    },
+    {
+      path: "/about",
+      name: "about",
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
-    },
-  ],
+      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
+    }
+  ]
 });

src/styles/global.scss

@@ -1,2 +1,6 @@
 @import './global-ghost.scss';
 @import './bootstrap.scss';
+
+.text-rtl {
+  direction: rtl;
+}

src/styles/settings.scss

@@ -20,9 +20,12 @@ $brand-4: hsl(52, 100%, 65%);
 
 $brand-5: hsl(47, 100%, 50%);
 $brand-6: hsl(135, 100%, 50%);
+$brand-7: hsl(270, 100%, 50%);
 
 $body-bg: hsl(35, 100%, 98%);
 $body-color: hsl(207, 95%, 8%);
+$link-color: $brand-7;
+$link-hover-color: darken($link-color, 15%);
 
 // spacings
 $grid-gutter-width: rem(16px);

src/views/About.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div class="about container py-3">
+    <h1 class="h1">Ludo Game</h1>
+    <p>This is a free and open source software. The source code is available at <a href="https://github.com/mort3za/ludo">Github</a>. Please feel free to send pull requests or create an issue.</p>
+    <p>Made with ♥ by <a href="https://github.com/mort3za">Morteza Ziyae</a> in Tehran, Iran.</p>
+
+    <router-link class="btn btn-primary" to="/">Back</router-link>
   </div>
 </template>

src/views/Home.vue

@@ -1,13 +1,25 @@
 <template>
-  <div class="page-home">
-    <Board/>
+  <div class="page-home d-flex flex-column justify-content-center align-items-center p-3">
+    <h1 class="h1">Ludo Game</h1>
+    <div class="main-menu w-100 mt-3">
+      <router-link class="btn btn-primary w-100 mb-3" to="/play">Play</router-link>
+      <router-link class="btn btn-secondary w-100 mb-3" to="/about">About</router-link>
+      <!-- TODO: <router-link class="btn btn-secondary w-100 mb-3" to="/software-licenses">Software Licenses</router-link> -->
+    </div>
   </div>
 </template>
 
 <script>
 import Board from "@/components/Board.vue";
 export default {
-  name: "page-home",
-  components: { Board }
+  name: "page-home"
 };
 </script>
+
+<style lang="scss" scoped>
+.main-menu {
+  max-width: rem(480px);
+  margin: auto;
+}
+</style>
+

src/views/Play.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page-home">
+    <Board/>
+  </div>
+</template>
+
+<script>
+import Board from "@/components/Board.vue";
+export default {
+  name: "page-home",
+  components: { Board }
+};
+</script>