<commit_before><link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-document.html">
<link rel="import" href="../player/player-avatar.html">
<link rel="import" href="../styles/app-styles.html">

<dom-module id="match-details">
  <template>
    <style include="app-styles"></style>
    <style>
    .player-1, .player-2 {
      @apply --layout-flex;
      @apply --layout-horizontal;
      @apply --layout-center-center;
    }
    .player-2 {
      @apply --layout-horizontal-reverse;
    }
    .match-score {
      font-size: 3rem;
      margin:0 2rem;
    }
    .danger {
      color: var(--primary-background-color);
      background-color: var(--error-color);
    }
    .score {
      font-size: 2.5rem;
    }
    .divider {
      margin: 0 2rem;
    }
    @media (max-width: 599px) {
      .player-1, .player-2 {
        @apply --layout-vertical;
      }
    }
    </style>

    <firebase-document
      data="{{details}}"
      path="/matches/[[matchUid]]">
    </firebase-document>
    <firebase-document
      data="{{player1}}"
      path="/players/[[details.player1Uid]]">
    </firebase-document>
    <firebase-document
      data="{{player2}}"
      path="/players/[[details.player2Uid]]">
    </firebase-document>

    <section class="paper-material" elevation="1">
      <div class="layout horizontal center-center">
        <div class="player-1">
          <div class="info">
            <a href="/players/[[details.player1Uid]]">
              <player-avatar src="[[player1.photoURL]]" big></player-avatar>
              <h1>[[player1.displayName]]</h1>
            </a>
          </div>
        </div>
        <span>VS</span>
        <div class="player-2">
          <div class="info">
            <a href="/players/[[details.player2Uid]]">
              <player-avatar src="[[player2.photoURL]]" big></player-avatar>
              <h1>[[player2.displayName]]</h1>
            </a>
          </div>
        </div>
      </div>
      <div class="scores layout vertical">
        <template is="dom-repeat" items="{{details.scores}}">
          <div class="layout horizontal center-center">
            <span class="score">[[item.player1]]</span>
            <div class="divider layout vertical center-center">
              <h2>-</h2>
            </div>
            <span class="score">[[item.player2]]</span>
          </div>
        </template>
      </div>
    </section>
  </template>
  <script>
    class MatchDetails extends Polymer.Element {
      static get is () { return 'match-details' }
      static get properties () {
        return {
          matchUid: String
        }
      }
    }

    window.customElements.define(MatchDetails.is, MatchDetails)
  </script><commit_msg>Added some nice winner indicator<commit_after><link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-document.html">
<link rel="import" href="../player/player-avatar.html">
<link rel="import" href="../styles/app-styles.html">

<dom-module id="match-details">
  <template>
    <style include="app-styles"></style>
    <style>
    .player-1, .player-2 {
      @apply --layout-flex;
      @apply --layout-horizontal;
      @apply --layout-center-center;
    }
    .player-2 {
      @apply --layout-horizontal-reverse;
    }
    .match-score {
      font-size: 3rem;
      margin:0 2rem;
    }
    .score {
      font-size: 2.5rem;
    }
    .divider {
      margin: 0 2rem;
    }
    .avatar {
      position: relative;
    }
    .avatar > iron-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      color: var(--accent-color);
      background-color: var(--primary-background-color);
      border-radius: 50%;
      @apply --shadow-elevation-2dp;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 599px) {
      .player-1, .player-2 {
        @apply --layout-vertical;
      }
    }
    </style>

    <firebase-document
      data="{{details}}"
      path="/matches/[[matchUid]]">
    </firebase-document>
    <firebase-document
      data="{{player1}}"
      path="/players/[[details.player1Uid]]">
    </firebase-document>
    <firebase-document
      data="{{player2}}"
      path="/players/[[details.player2Uid]]">
    </firebase-document>

    <section class="paper-material" elevation="1">
      <div class="layout horizontal center-center">
        <div class="player-1">
          <div class="info">
            <a href="/players/[[details.player1Uid]]">
              <div class="avatar">
                <player-avatar src="[[player1.photoURL]]" big></player-avatar>
                <iron-icon hidden="[[!player1Won]]" icon="star"></iron-icon>
              </div>
              <h1>[[player1.displayName]]</h1>
            </a>
          </div>
        </div>
        <span>VS</span>
        <div class="player-2">
          <div class="info">
            <a href="/players/[[details.player2Uid]]">
              <div class="avatar">
                <player-avatar src="[[player2.photoURL]]" big></player-avatar>
                <iron-icon hidden="[[player1Won]]" icon="star"></iron-icon>
              </div>
              <h1>[[player2.displayName]]</h1>
            </a>
          </div>
        </div>
      </div>
      <div class="scores layout vertical">
        <template is="dom-repeat" items="{{details.scores}}">
          <div class="layout horizontal center-center">
            <span class="score">[[item.player1]]</span>
            <div class="divider layout vertical center-center">
              <h2>-</h2>
            </div>
            <span class="score">[[item.player2]]</span>
          </div>
        </template>
      </div>
    </section>
  </template>
  <script>
    class MatchDetails extends Polymer.Element {
      static get is () { return 'match-details' }
      static get properties () {
        return {
          matchUid: String,
          player1Won: {
            type: Boolean,
            computed: '_computePlayer1Won(details.player1Games, details.player2Games)'
          }
        }
      }
      _computePlayer1Won (player1Games, player2Games) {
        return player1Games > player2Games
      }
    }

    window.customElements.define(MatchDetails.is, MatchDetails)
  </script>
{'fraction_non_alphanumeric': 0.1724354940213971, 'fraction_numerical': 0.0144745122718691, 'mean_word_length': 2.0156546489563567, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 131, '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': '2985986', 'n_tokens_mistral': 2021, 'n_tokens_neox': 1969, 'n_words': 339}