twelve-heroes/src/App.vue

<template>
  <div id="app">
    <div class="container-fluid">
      <div class="row">
        <div
          class="col-4"
          style="background-color:lightgreen;"
          v-if="!hideTest"
        >
          <span class="test-germania">For tests :</span>
          <br />
          <button
            class="btn btn-primary custom-button"
            @click="display = 'app-menu'"
          >
            Enter Menu
          </button>
          <br />
          <br />
          <button
            class="btn btn-primary custom-button custom-button2"
            @click="display = 'app-game'"
          >
            Enter Game
          </button>
          <br />
          <br />

          <input
            type="text"
            placeholder="Username"
            autocomplete="off"
            class="form-control custom-input"
          />
          <br />
          <input
            type="text"
            placeholder="Username"
            autocomplete="off"
            class="form-control custom-input2"
          />
          <br />
          <input
            type="text"
            placeholder="Username"
            autocomplete="off"
            class="form-control custom-input3"
          />
          <p class="custom-text">
            Test 1 font for some long text, like a description of something or
            some indication
          </p>
          <p class="custom-text2">
            Test 2 font for some long text, like a description of something or
            some indication
          </p>
        </div>
        <div class="col">
          <!-- <div class="bg"> -->
          <button style="font-size:8px" @click="hideTest = !hideTest">
            Hide test
          </button>
          <keep-alive>
            <transition
              enter-active-class="animated bounceInUp"
              leave-active-class="animated bounceOutDown"
              mode="out-in"
              appear
            >
              <component
                :is="display"
                @join-game-id="launchOnlineGame($event)"
                :username="username"
                :game-id="onlineGameId"
              ></component>
            </transition>
          </keep-alive>
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppMenu from './menu/AppMenu';
import AppGame from './game/AppGame';
import { globalEventsBus } from './main';
export default {
  name: 'App',
  data() {
    return {
      display: 'app-menu',
      username: '',
      onlineGameId: -1,
      hideTest: false
    };
  },
  components: {
    AppMenu,
    AppGame
  },
  methods: {
    launchOnlineGame(game) {
      console.log('received game to launch : ', game);
      this.username = game.username;
      this.onlineGameId = game.id;
      this.display = 'app-game';
    }
  },
  created() {
    globalEventsBus.$on('game-stopped', () => {
      this.username = '';
      this.onlineGameId = -1;
      this.display = 'app-menu';
    });
  }
};
</script>

<style scoped>
@font-face {
  font-family: 'GermaniaOne';
  src: url('./assets/fonts/GermaniaOne-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'AutourOne';
  src: url('./assets/fonts/AutourOne-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'BeyondWonderland';
  src: url('./assets/fonts/BeyondWonderland.ttf') format('truetype');
}
@font-face {
  font-family: 'MedievalSharp';
  src: url('./assets/fonts/MedievalSharp.ttf') format('truetype');
}
@font-face {
  font-family: 'OncialePh';
  src: url('./assets/fonts/OncialePhF01.ttf') format('truetype');
}
@font-face {
  font-family: 'CupAndTalon';
  src: url('./assets/fonts/CupAndTalon.ttf') format('truetype');
}
.test-germania {
  font-family: GermaniaOne, cursive;
  font-size: 80px;
}
.custom-button {
  font-family: GermaniaOne, cursive;
  font-size: 60px;
  background-color: transparent;
  color: red;
  border: none;
}
.custom-button2 {
  font-family: CupAndTalon, cursive;
  font-size: 60px;
  font-weight: bold;
}
.custom-input {
  font-family: BeyondWonderland, cursive;
  font-size: 45px;
  text-transform: capitalize;
}
.custom-input2 {
  font-family: MedievalSharp, cursive;
  font-size: 40px;
  text-transform: capitalize;
}
.custom-input3 {
  font-family: OncialePh, cursive;
  font-size: 40px;
  text-transform: capitalize;
}
.custom-text {
  font-family: GermaniaOne, cursive;
  font-size: 30px;
}
.custom-text2 {
  font-family: AutourOne, cursive;
  font-size: 30px;
}
.bg {
  height: 100%;
  width: auto;
  position: relative;
}
.bg::after {
  content: '';
  background: url('./assets/twelveHeroes_cover.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
</style>