meticulous/src/App.vue

<template>
  <div id="app">
    <PlayerArea
      v-for="(player, id) of players"
      :key="id"
      :player="player"
      :id="id"
      :class="{ flipped: id == 0 }"
    />
  </div>
</template>

<style lang="scss">
@import url("assets/fonts/fonts.css");

html,
body {
  margin: 0;
  height: 100vh;
}

#app {
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: row;
  flex-direction: column;

  background: linear-gradient(to bottom, #222, #333) #222;
  color: white;

  font-family: "Londrina Solid", sans-serif;
}

.flipped {
  transform: rotate(180deg);
}

@media (orientation: landscape) {
  #app {
    flex-direction: row;
  }

  .flipped {
    transform: rotate(0);
  }
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Getter } from "vuex-class";
import PlayerArea from "./components/PlayerArea.vue";
import { Player } from "./types";

@Component({
  components: {
    PlayerArea
  }
})
export default class App extends Vue {
  @Getter("players") private players!: Player[];
}
</script>