<template>
  <div class="final">
    <div class="final__container">
      <div class="final__table-outer-border">
        <div class="final__table-head">
          <div class="final__title">{{ title }}</div>
        </div>
        <div class="final__table-body">
          <table>
            <tr v-for="player in players" :key="player.id">
              <td>{{ player.name }}</td>
              <td>{{ player.score }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    title() {
      return 'Team Banana Mania'
    },
    players() {
      return [
        { name: 'Hans-Hugo', score: 170 },
        { name: 'Ferdinand', score: 140 },
        { name: 'Ann-Marie', score: 137 },
        { name: 'Jocelyn', score: 80 },
        { name: 'Klaus-Bernd', score: 61 },
        { name: 'Annegret', score: 11 },
        { name: 'Jens-Jörg Hinterhammer-Füllschmied', score: 9 },
        { name: 'Brunhilde', score: 7 },
        { name: 'Margarete Bausenkopf', score: 7 },
        { name: 'Edwin', score: 1 },
        { name: 'Bastoph', score: 0 },
        { name: 'Henndirk', score: -12 },
      ]
    },
  },
}
</script>

<style lang="scss">
.final {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;

  &__container {
    margin: 64px 0;
    width: 600px;
    min-height: 600px;
  }

  &__table-outer-border {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #8060c0;
    padding: 4px;
    border-radius: 32px;
  }

  &__table-head {
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center;
    justify-content: center;
    background-color: #402080;
    border-radius: 32px 32px 0 0;
    margin-bottom: 4px;
  }

  &__title {
    color: #ffffff;
    font-family: "Wendy One";
    font-size: 48px;
  }

  &__table-body {
    width: 100%;
    height: 100%;
    background-color: #402080;
    border-radius: 0 0 32px 32px;
    color: #ffffff;
    font-family: Dosis;
    font-size: 32px;

    table {
      width: 100%;
      padding: 64px;
    }
    td {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
    }
    td ~ td {
      text-align: right;
    }
  }
}
</style>
