- changed home-screen image

- added background image to matches - added icon for short games
2021-10-07 04:10:04 +02:00
parent 412005ece9
commit 0619989748
6 changed files with 96 additions and 38 deletions
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -1,17 +1,17 @@
 <template>
  <div class="scoreboard" :class="'team-' + props.team_id">
    <table>
-      <caption :class="props.score === 16 ? 'text-success' : 'text-danger'">{{props.score}}</caption>
+      <caption :class="props.score === 16 ? 'text-success' : props.score === 15 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
      <thead>
      <tr>
        <th class="player__avatar"></th>
        <th class="player__name"></th>
        <th class="player__rank"></th>
-        <th class="player__kills cursor__help">K</th>
-        <th class="player__assist cursor__help">A</th>
-        <th class="player__deaths cursor__help">D</th>
+        <th class="player__kills">K</th>
+        <th class="player__assist">A</th>
+        <th class="player__deaths">D</th>
        <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
-        <th class="player__kd cursor__help">K/D</th>
+        <th class="player__kd">K/D</th>
        <th class="player__adr cursor__help" title="Average damage per round">ADR</th>
        <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
        <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
@@ -22,6 +22,7 @@
      <tbody v-for="player in props.stats" :key="player.player.steamid64">
      <tr v-if="player.team_id === props.team_id" class="player">
        <ScoreTeamPlayer
+            :steamid64="player.player.steamid64"
            :assists="player.assists"
            :avatar="player.player.avatar"
            :deaths="player.deaths"
--- a/src/components/ScoreTeamPlayer.vue
+++ b/src/components/ScoreTeamPlayer.vue
@@ -2,8 +2,15 @@
  <td>
    <img :src="props.avatar" alt="Player avatar" class="player__avatar">
  </td>
-  <td class="player__name">
+  <td class="player__name" @click="GoToPlayer(props.steamid64)">
    {{ props.name }}
+    <svg class="bi bi-link-45deg" fill="currentColor" height="12" viewBox="0 0 16 16"
+         width="12" xmlns="http://www.w3.org/2000/svg">
+      <path
+          d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+      <path
+          d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+    </svg>
  </td>
  <td>
    <img :src="props.rank ? require('@/images/rank_icons/skillgroup' + props.rank + '.svg') : require('@/images/rank_icons/skillgroup0.svg')"
@@ -45,11 +52,16 @@
 </template>

 <script>
-import {GetHLTV_1} from "../utils";
+import {GetHLTV_1, GoToPlayer} from "../utils";

 export default {
  name: 'ScoreTeamPlayer',
  props: {
+    steamid64: {
+      type: String,
+      required: true,
+      default: ''
+    },
    avatar: {
      type: String,
      required: true,
@@ -132,7 +144,7 @@ export default {
    }
  },
  setup(props) {
-    return {props, GetHLTV_1}
+    return {props, GetHLTV_1, GoToPlayer}
  }
 }
 </script>
@@ -151,6 +163,7 @@ export default {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
+  cursor: pointer;
 }

 .player__rank {
--- a/src/images/icons/circle-half.svg
+++ b/src/images/icons/circle-half.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+</svg>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,13 +4,7 @@
      <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
      <h3 class="mb-lg-5">Open source CSGO data platform</h3>
    </div>
-    <div class="mt-n4 img-sub">
-      <span class="text-muted">Image by <a class="text-decoration-none text-warning"
-                                           href="https://unsplash.com/photos/6ou8gWpS9ns"
-                                           target="_blank">Fredrick Tendong</a></span>
-    </div>
    <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
-      <h4 class="mb-3s">Recently visited players</h4>
      <div v-for="player in recentVisited" :key="player.steamid64" class="player-card"
           @click="GoToPlayer(player.steamid64)">
        <div class="p-2">
@@ -76,7 +70,7 @@ export default {
 <style lang="scss" scoped>
 .main-content {
  .head {
-    background-image: url("https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80");
+    background-image: url("../images/map_screenshots/default.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
@@ -103,12 +97,6 @@ export default {
    }
  }

-  .img-sub {
-    font-size: .8rem;
-    text-align: left;
-    margin-left: 10px;
-  }
-
  .recent-search {
    max-width: 1100px;
    margin: 0 auto;
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,15 +1,19 @@
 <template>
-  <div class="pt-3">
-    <div v-if="data.matchDetails.map" class="head row m-auto mb-3 text-center">
-      <div class="m-auto">
+  <img :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')"
+       class="bg-img">
+  <div class="bg-img"></div>
+  <div class="">
+    <div v-if="data.matchDetails.map" class="head row m-auto text-center">
+      <div class="m-auto map">
        <img :alt="data.matchDetails.map"
             :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
             :title="data.matchDetails.map" class="map-icon">
      </div>
+      <p class="text-center fs-6">Average Rank: <img
+          :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
+          alt="Rank icon"
+          class="rank-icon"/></p>
    </div>
-    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
-                                                   alt="Rank icon"
-                                                   class="rank-icon mx-2"/></p>
  </div>
  <div class="nav">
    <ul class="list-unstyled d-flex m-auto">
@@ -20,10 +24,12 @@
      <li class="list-item">Heatmaps</li>
    </ul>
  </div>
-  <div class="container row m-auto">
-    <div v-if="data.score.length === 2 && data.stats" class="col-8 m-auto d-flex flex-column">
-      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1" :score="data.score[0]"/>
-      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2" :score="data.score[1]"/>
+  <div class="scoreboard">
+    <div v-if="data.score.length === 2 && data.stats">
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]" :stats="data.stats"
+                 :team_id="1"/>
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]" :stats="data.stats"
+                 :team_id="2"/>
    </div>
  </div>
 </template>
@@ -99,18 +105,54 @@ export default {
 </script>

 <style lang="scss" scoped>
+.bg-img {
+  z-index: -1;
+  top: 0;
+  left: 0;
+  position: fixed;
+  width: 100%;
+  max-height: 95%;
+}
+
 .head {
-  img {
+  background: linear-gradient(90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(15, 15, 15, 0.8) 30%,
+      rgba(15, 15, 15, 0.8) 70%,
+      rgba(0, 0, 0, 0) 100%
+  );
+
+  .map img {
    width: auto;
    height: 100px;
+    margin: 10px 0;
+  }
+
+  .rank-icon {
+    width: 60px;
  }
 }
-.rank-icon {
-  width: 60px;
+
+.scoreboard {
+  z-index: 1;
+  max-width: 100vw;
+  background: linear-gradient(90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(15, 15, 15, 0.8) 30%,
+      rgba(15, 15, 15, 0.8) 70%,
+      rgba(0, 0, 0, 0) 100%
+  );
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
+
 .nav {
-  width: 100vw;
-  background: rgba(0, 0, 0, 0.6);
+  max-width: 100vw;
+  background: rgba(0, 0, 0, 0.9);

  .list-item {
    padding: 10px 10px;
@@ -119,7 +161,6 @@ export default {
      background: var(--bs-info);
      cursor: pointer;
    }
-
  }

  .active {
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -32,7 +32,7 @@
              <tr>
                <td>{{ wl.win }}</td>
                <td>{{ wl.loss }}</td>
-                <td>{{ (wl.win / wl.loss * 100).toFixed(2) }}%</td>
+                <td>{{ (wl.win / (wl.win + wl.loss) * 100).toFixed(2) }}%</td>
              </tr>
            </table>
            <small v-if="data.playerDetails.tracked" class="card-text text-muted">
@@ -163,8 +163,13 @@
          </td>
          <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
            {{ FormatDuration(match.duration) }}
+
          </td>
          <td :title="FormatFullDate(match.date)" class="td-date">
+            <svg v-if="match.rounds === 16" class="bi bi-circle-half" fill="currentColor" height="16" viewBox="0 0 16 16" width="16"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+            </svg>
            {{ FormatDate(match.date) }}
          </td>
        </tr>
@@ -242,6 +247,8 @@ export default {
            data.matches = response.data.matches
            store.state.id64 = response.data.steamid64

+            console.log(response.data)
+
            let player = {
              'steamid64': response.data.steamid64,
              'name': response.data.name,
@@ -369,6 +376,11 @@ table {
      font-size: 1.2rem;
      width: 120px;
    }
+
+    .td-date svg {
+      margin-left: -5px;
+      margin-right: 5px;
+    }
  }

  .match {