twelve-heroes/src/App.vue

<template>
  <div id="app" class="appBackground">
    <div class="container-fluid">
      <div class="row">
        <div
          class="col-2"
          v-if="!hideTest"
          style="background-color:lightgreen;"
        >
          <span class="title-medieval">For tests</span>
          <br />
          <button
            class="btn btn-primary custom-button"
            @click="test = 'app-menu'"
          >
            Enter Menu
          </button>
          <br />
          <br />
          <button
            class="btn btn-primary custom-button"
            @click="test = 'app-game'"
          >
            Enter Game
          </button>
        </div>
        <div class="col">
          <button
            style="font-size:8px"
            @click="
              hideTest = !hideTest;
              if (hideTest) test = '';
            "
          >
            Test
          </button>
          <keep-alive>
            <component :is="choseDisplay"></component>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppMenu from './menu/AppMenu';
import AppGame from './game/AppGame';
import { mapGetters } from 'vuex';

export default {
  name: 'App',
  data() {
    return {
      hideTest: true,
      test: ''
    };
  },
  components: {
    AppMenu,
    AppGame
  },
  computed: {
    ...mapGetters({
      isGameRunning: 'isGameRunning'
    }),
    choseDisplay() {
      if (this.test !== '') {
        return this.test;
      }
      if (!this.isGameRunning) {
        return 'app-menu';
      } else {
        return 'app-game';
      }
    }
  },
  beforeMount() {
    let user = localStorage.getItem('username');
    if (user) {
      console.log('user in storage, try to connect ! : ', user);
      this.$store
        .dispatch('menu/connect', user)
        .then(() => {
          let gameId = localStorage.getItem('gameId');
          if (gameId && gameId > -1) {
            console.log('gameId in storage, try to join ! : ', gameId);
            this.$store.dispatch('menu/joinOnlineGame', {
              id: gameId,
              isNew: false
            });
          }
        })
        .catch(() => {});
    }
  },
  created() {
    this.$store.watch(
      () => this.$store.getters['messages'],
      messages => {
        if (messages.length > 0) {
          let message = messages.pop();
          this.$bvToast.toast(message.text, {
            title: message.from,
            toaster: 'b-toaster-top-right',
            solid: true,
            variant: 'info',
            autoHideDelay: 10000,
            appendToast: true
          });
        }
      }
    );
  }
};
</script>

<style scoped lang="scss">
@import './styles/fonts/fonts.scss';
.appBackground {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(./assets/Background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}
</style>