100 lines
1.6 KiB
Vue
100 lines
1.6 KiB
Vue
<template>
|
|
<div class="player">
|
|
<div class="header">{{ player.name }}</div>
|
|
<div class="counter">{{ player.points }}</div>
|
|
<div class="tokens">
|
|
<span class="number">{{ player.at }}</span> AT
|
|
</div>
|
|
<div class="atactions"></div>
|
|
<TouchArea class="left" name="left" @touch="areaTouched" />
|
|
<TouchArea class="right" name="right" @touch="areaTouched" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin visible {
|
|
z-index: 10;
|
|
}
|
|
|
|
@mixin data {
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header {
|
|
@include visible;
|
|
@include data;
|
|
font-size: 22pt;
|
|
line-height: 2em;
|
|
}
|
|
|
|
.player {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.counter {
|
|
@include visible;
|
|
@include data;
|
|
font-family: "Bungee", sans-serif;
|
|
font-size: 80pt;
|
|
height: 120px;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.tokens {
|
|
@include visible;
|
|
@include data;
|
|
font-size: 40pt;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.left {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 50%;
|
|
bottom: 10vh;
|
|
background: red;
|
|
z-index: 2;
|
|
}
|
|
.right {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
right: 0;
|
|
bottom: 10vh;
|
|
background: green;
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
import { Player } from "@/types";
|
|
import TouchArea from "./TouchArea.vue";
|
|
|
|
type AreaType = "left" | "right";
|
|
|
|
@Component({
|
|
components: {
|
|
TouchArea
|
|
}
|
|
})
|
|
export default class PlayerArea extends Vue {
|
|
@Prop()
|
|
private id!: number;
|
|
|
|
@Prop()
|
|
private player!: Player;
|
|
|
|
private areaTouched(which: AreaType) {
|
|
console.log(which);
|
|
}
|
|
}
|
|
</script>
|