66 lines
1.0 KiB
Vue
66 lines
1.0 KiB
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>
|