<commit_before><template>
  <div>
    <HomeCard v-if="game" title="Last Game Recap">
      <div class="header">
        <div class="team">
          <div class="team-logo blue" />
        </div>
        <div class="score">
          <div class="gamemode">
            {{ game.mode }}
          </div>
          <div v-for="team in game.teams" :key="team.id" class="points">
            {{ getScoreByGameTeam(game, team) }}
          </div>
        </div>
        <div class="team">
          <div class="team-logo red" />
        </div>
      </div>

      <div class="matchup">
        <ul
          v-for="team in game.teams"
          :key="team.id"
          class="players"
          :class="{ blue: team.name === 'blue', red: team.name === 'red' }"
        >
          <li
            v-for="player in getPlayersByGameTeam(game, team)"
            :key="player.id"
          >
            {{ player.username }}
          </li>
        </ul>
        <ul class="pos">
          <li class="html">
            HTML
          </li>
          <li class="css">
            CSS
          </li>
          <li class="js">
            JS
          </li>
        </ul>
      </div>

      <ButtonGroup>
        <Button to="/games" class="outline primary">
          View Full Game
        </Button>
      </ButtonGroup>
    </HomeCard>
    <HomeCard v-else title="Last Game Recap">
      <p>Please check back at a later time</p>
    </HomeCard>
  </div>
</template>

<script>
import { getScoreByGameTeam, getPlayersByGameTeam } from '@/utils'
import HomeCard from '@/components/HomeCard'

export default {
  name: 'Recap',
  components: { HomeCard },
  props: {
    game: {
      type: Object,
      required: true
    }
  },
  methods: {
    getScoreByGameTeam,
    getPlayersByGameTeam
  }
}
</script>

<style lang="scss" scoped>
@import 'utils.scss';

.header {
  display: flex;
}

.team {
  flex: 1 1 100%;

  @include breakpoint(md) {
    width: 60px;
    height: 60px;
  }

  @include breakpoint(xs) {
    display: none;
  }
}

.team-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-color: $bg-color-2;

  &.blue {
    background-image: url('~assets/img/team-blue.png');
  }

  &.red {
    margin-left: auto;
    background-image: url('~assets/img/team-red.png');
  }
}

.score {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: center;
  text-transform: uppercase;
  line-height: 1.37;
}

.gamemode {
  width: 100%;
}

.points {
  font-size: 48px;
  letter-spacing: 1px;

  &:last-child:before {
    content: '-';
    padding: 0 0 0 10px;
  }

  @include breakpoint(md) {<commit_msg>fix: game recap now shows scores inline without stacking<commit_after><template>
  <div>
    <HomeCard v-if="game" title="Last Game Recap">
      <div class="header">
        <div class="team">
          <div class="team-logo blue" />
        </div>
        <div class="score">
          <div class="gamemode">
            {{ game.mode }}
          </div>
          <div v-for="team in game.teams" :key="team.id" class="points">
            {{ getScoreByGameTeam(game, team) }}
          </div>
        </div>
        <div class="team">
          <div class="team-logo red" />
        </div>
      </div>

      <div class="matchup">
        <ul
          v-for="team in game.teams"
          :key="team.id"
          class="players"
          :class="{ blue: team.name === 'blue', red: team.name === 'red' }"
        >
          <li
            v-for="player in getPlayersByGameTeam(game, team)"
            :key="player.id"
          >
            {{ player.username }}
          </li>
        </ul>
        <ul class="pos">
          <li class="html">
            HTML
          </li>
          <li class="css">
            CSS
          </li>
          <li class="js">
            JS
          </li>
        </ul>
      </div>

      <ButtonGroup>
        <Button to="/games" class="outline primary">
          View Full Game
        </Button>
      </ButtonGroup>
    </HomeCard>
    <HomeCard v-else title="Last Game Recap">
      <p>Please check back at a later time</p>
    </HomeCard>
  </div>
</template>

<script>
import { getScoreByGameTeam, getPlayersByGameTeam } from '@/utils'
import HomeCard from '@/components/HomeCard'

export default {
  name: 'Recap',
  components: { HomeCard },
  props: {
    game: {
      type: Object,
      required: true
    }
  },
  methods: {
    getScoreByGameTeam,
    getPlayersByGameTeam
  }
}
</script>

<style lang="scss" scoped>
@import 'utils.scss';

.header {
  display: flex;
}

.team {
  flex: 1 1 100%;

  @include breakpoint(md) {
    width: 60px;
    height: 60px;
  }

  @include breakpoint(xs) {
    display: none;
  }
}

.team-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-color: $bg-color-2;

  &.blue {
    background-image: url('~assets/img/team-blue.png');
  }

  &.red {
    margin-left: auto;
    background-image: url('~assets/img/team-red.png');
  }
}

.score {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: center;
  text-transform: uppercase;
  line-height: 1.37;
}

.gamemode {
  width: 100%;
}

.points {
  font-size: 38px;
  letter-spacing: 1px;

  &:last-child:before {
    content: '-';
    padding: 0 0 0 10px;
  }

  @include breakpoint(md) {
{'fraction_non_alphanumeric': 0.15954469117372644, 'fraction_numerical': 0.013062138458667662, 'mean_word_length': 1.8556206712839638, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5492129', 'n_tokens_mistral': 1926, 'n_tokens_neox': 1831, 'n_words': 416}