twelve-heroes/src/menu/AppMenu.vue

<template>
  <b-container>
    <b-row class="justify-content-center mb-4 pt-3">
      <b-col lg="8" md="7" sm="8" xl="8">
        <a href="#">
          <b-img class="titleImg" :src="require('../assets/Title.png')"></b-img>
        </a>
      </b-col>
    </b-row>
    <b-row class="justify-content-center mt-3 mb-5">
      <b-col lg="8" md="7" sm="8" xl="8">
        <div class="backgroundMenu">
          <keep-alive include="menu-login">
            <component
              :is="menuPage"
              @enter-online="enterOnline"
              @enter-game-creation="enterGameCreation"
              @enter-local="enterLocal"
              @back="menuPage = previousPage.pop()"
              @home="
                menuPage = 'menu-login';
                previousPage = [];
              "
              :username="username"
              v-on="$listeners"
            ></component>
          </keep-alive>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import MenuLogin from './login/MenuLogin';
import MenuOnlineRoom from './online-room/MenuOnlineRoom';
import MenuGameCreation from './game-creation/MenuGameCreation';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      previousPage: [],
      menuPage: 'menu-login',
      username: ''
    };
  },
  components: {
    MenuLogin,
    MenuOnlineRoom,
    MenuGameCreation
  },
  methods: {
    enterLocal() {
      alert('Not implemented yet, give us time ! :)');
    },
    enterOnline(username) {
      this.previousPage.push(this.menuPage);
      this.username = username;
      this.menuPage = 'menu-online-room';
    },
    enterGameCreation() {
      this.previousPage.push(this.menuPage);
      this.menuPage = 'menu-game-creation';
    }
  },
  computed: {
    ...mapGetters({ isGameRunning: 'isGameRunning' })
  },
  watch: {
    isGameRunning(value) {
      if (value === true) {
        this.menuPage = 'menu-login';
        this.previousPage = [];
      }
    }
  }
};
</script>

<style scoped>
.titleImg {
  max-width: 100%;
}
.backgroundMenu {
  /* The image used */
  background-image: url('../assets/parchemin.png');
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>