<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>
