Minor improvements to player profile page (#825)

* Fix offsets in player profile stats by mode * PlayerLeague - center image * Rework RecentPerformance display to use fancy icons!
w3champions · Aug 26, 2024 · 4e88264 · 4e88264
1 parent bcb25e3
commit 4e88264
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 139 deletions.
diff --git a/src/components/player/ModeStatsGrid.vue b/src/components/player/ModeStatsGrid.vue
@@ -1,10 +1,5 @@
 <template>
-  <v-data-table
-    hide-default-footer
-    :headers="headers"
-    :items="gameModeStatsCombined"
-    mobile-breakpoint="400"
-  >
+  <v-data-table hide-default-footer :headers="headers" :items="gameModeStatsCombined" mobile-breakpoint="400">
     <template v-for="h in headers" v-slot:[`header.${h.text}`]="{ header }">
       <v-tooltip top v-bind:key="h.text">
         <template v-slot:activator="{ on }">
@@ -16,30 +11,27 @@
     <template v-slot:body="{ items }">
       <tbody>
         <tr v-for="item in items" :key="item.id">
-          <td>
+          <td class="cell d-flex justify-center align-center">
             <span>{{ $t("gameModes." + EGameMode[item.gameMode]) }}</span>
-            <race-icon
-              style="display: inline; padding-left: 10px"
-              :race="item.race"
-            />
+            <race-icon style="display: inline; padding-left: 10px" :race="item.race" />
           </td>
-          <td class="number-text text-start">
+          <td class="number-text text-start cell">
             <div class="text-center">
               <span class="won">{{ item.wins }}</span>
               -
               <span class="lost">{{ item.losses }}</span>
             </div>
             <div class="sub-value">{{ (item.winrate * 100).toFixed(1) }}%</div>
           </td>
-          <td class="number-text text-end">
+          <td class="number-text text-end cell">
             <div class="text-center">
               {{ item.rank !== 0 ? item.mmr : "-" }}
             </div>
             <div v-if="item.rank !== 0" class="sub-value">
               {{ getTopPercent(item) }}
             </div>
           </td>
-          <td class="number-text text-center" style="min-width: 100px">
+          <td class="number-text text-center cell" style="min-width: 100px">
             <level-progress v-if="item.rank !== 0" :rp="item.rankingPoints"></level-progress>
             <div v-else>-</div>
           </td>
@@ -93,8 +85,7 @@ export default defineComponent({
       const AT_arranged = AT_modes().map((AT_mode) => AT_stats.filter((modeStat) => AT_mode == modeStat.gameMode));
 
       // Filter out AT modes that haven't been played, sort by ranking points and get the stat with the highest rank.
-      const topAtStats = AT_arranged
-        .filter((modeStats) => !isEmpty(modeStats))
+      const topAtStats = AT_arranged.filter((modeStats) => !isEmpty(modeStats))
         .map((modeStats) => modeStats.sort((modeStat) => modeStat.rankingPoints))
         .map((modeStats) => modeStats.filter((modeStat, index) => index === 0))
         .flat();
@@ -111,7 +102,7 @@ export default defineComponent({
     });
 
     function sortByName(mode: ModeStat[]): ModeStat[] {
-      return mode.sort((a, b) => EGameMode[a.gameMode] < EGameMode[b.gameMode] ? -1 : 1);
+      return mode.sort((a, b) => (EGameMode[a.gameMode] < EGameMode[b.gameMode] ? -1 : 1));
     }
 
     function getTopPercent(modeStat: ModeStat): string {
@@ -181,4 +172,8 @@ export default defineComponent({
 .tooltip-inner {
   white-space: pre-line;
 }
+
+.cell {
+  white-space: nowrap;
+}
 </style>
diff --git a/src/components/player/PlayerLeague.vue b/src/components/player/PlayerLeague.vue
@@ -313,17 +313,16 @@ export default defineComponent({
 // common
 
 .LadderSummaryShowcase-card:after {
-  width: 250px;
-  height: 100px;
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
+  width: 250px;
   height: 105px;
   content: "";
   position: absolute;
-  // left: 50%;
-  transform: translateX(-50%);
   top: -50px;
-  margin-left: 163px;
+  margin-left: 49%;
+  left: 75px;
+  transform: translateX(-50%);
 }
 
 .LadderSummaryShowcase-card {

diff --git a/src/components/player/RecentPerformance.vue b/src/components/player/RecentPerformance.vue
@@ -5,15 +5,19 @@
     </h5>
     <ul class="recent-performance__results">
       <li v-for="(resultSymbol, index) in lastTenMatchesPerformance" :key="resultSymbol + index">
-        <span :class="resultSymbol === 'W' ? 'won' : 'lost'">{{ resultSymbol }}</span>
-        <span v-if="index < lastTenMatchesPerformance.length - 1">-</span>
+        <v-chip color="transparent" :title="resultSymbol === 'W' ? 'Win' : 'Loss'" label style="padding: 0">
+          <v-icon class="sword-icon" :color="resultSymbol === 'W' ? 'green' : 'red'">
+            {{ mdiShieldSwordOutline }}
+          </v-icon>
+        </v-chip>
       </li>
     </ul>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { mdiShieldSwordOutline } from "@mdi/js";
 
 export default defineComponent({
   name: "RecentPerformance",
@@ -25,13 +29,19 @@ export default defineComponent({
     },
   },
   setup() {
-     // example: ['W', 'W', 'W', 'L', 'L', 'W', 'L', 'W', 'L', 'L']
-    return {};
+    // example: ['W', 'W', 'W', 'L', 'L', 'W', 'L', 'W', 'L', 'L']
+    return { mdiShieldSwordOutline };
   },
 });
 </script>
 
 <style lang="scss" scoped>
+.sword-icon {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+}
+
 .recent-performance {
   margin-top: 0.4em;
 

diff --git a/src/components/player/tabs/PlayerProfileTab.vue b/src/components/player/tabs/PlayerProfileTab.vue
@@ -9,12 +9,7 @@
         </v-col>
         <v-col md="12" lg="9">
           <v-row v-if="!isBetaSeason">
-            <v-col
-              cols="12"
-              md="4"
-              v-for="gameModeStat in topGameModeStats"
-              :key="gameModeStat.gameMode"
-            >
+            <v-col cols="12" md="4" v-for="gameModeStat in topGameModeStats" :key="gameModeStat.gameMode">
               <player-league :modeStat="gameModeStat"></player-league>
             </v-col>
           </v-row>
@@ -30,11 +25,7 @@
               <h4 style="position: relative">
                 {{ $t("components_player_tabs_playerprofiletab.statsByRace") }}
               </h4>
-              <v-data-table
-                hide-default-footer
-                :headers="raceHeaders"
-                :items="selectedRaceStats"
-              >
+              <v-data-table hide-default-footer :headers="raceHeaders" :items="selectedRaceStats">
                 <template v-slot:item.race="{ item }">
                   <span><race-icon v-bind:race="item.race" /></span>
                 </template>
@@ -43,14 +34,12 @@
                     <span class="won">{{ item.wins }}</span>
                     -
                     <span class="lost">{{ item.losses }}</span>
-                    <span style="float: right">
-                      ({{ (item.winrate * 100).toFixed(1) }}%)
-                    </span>
+                    <span style="float: right">({{ (item.winrate * 100).toFixed(1) }}%)</span>
                   </span>
                 </template>
               </v-data-table>
             </v-col>
-            <v-col cols="12" md="6">
+            <v-col cols="12" md="8">
               <h4 style="position: relative">
                 {{ $t("components_player_tabs_playerprofiletab.statsByMode") }}
               </h4>
@@ -60,17 +49,8 @@
         </v-col>
       </v-row>
     </v-card-text>
-    <v-card-text
-      v-if="loadingProfile"
-      style="min-height: 500px"
-      class="text-center"
-    >
-      <v-progress-circular
-        style="margin-top: 180px"
-        :size="50"
-        color="primary"
-        indeterminate
-      ></v-progress-circular>
+    <v-card-text v-if="loadingProfile" style="min-height: 500px" class="text-center">
+      <v-progress-circular style="margin-top: 180px" :size="50" color="primary" indeterminate></v-progress-circular>
     </v-card-text>
   </div>
 </template>
@@ -134,26 +114,19 @@ export default defineComponent({
     const selectedRaceStats: ComputedRef<RaceStat[]> = computed((): RaceStat[] => {
       if (!raceStats.value) return [];
 
-      return raceStats.value.filter((r) =>
-        r.gateWay === rootStateStore.gateway &&
-        r.season === selectedSeason.value?.id
+      return raceStats.value.filter(
+        (r) => r.gateWay === rootStateStore.gateway && r.season === selectedSeason.value?.id
       );
     });
 
     const topGameModeStats: ComputedRef<ModeStat[]> = computed((): ModeStat[] => {
       if (!gameModeStats.value) return [];
 
-      const oneVOnes = gameModeStats.value.filter(
-        (g) => g.gameMode === EGameMode.GM_1ON1
-      );
+      const oneVOnes = gameModeStats.value.filter((g) => g.gameMode === EGameMode.GM_1ON1);
 
       const rankedOneVOnes = oneVOnes.filter((x) => x.rank != 0);
 
-      let bestOneVOne = sortBy(rankedOneVOnes, [
-        "leagueOrder",
-        "division",
-        "rank",
-      ])[0];
+      let bestOneVOne = sortBy(rankedOneVOnes, ["leagueOrder", "division", "rank"])[0];
 
       if (!bestOneVOne) {
         bestOneVOne = oneVOnes[0];
@@ -162,37 +135,25 @@ export default defineComponent({
       const twoV2s = gameModeStats.value.filter((g) => g.gameMode === EGameMode.GM_2ON2_AT);
       const rankedtwoV2s = twoV2s.filter((x) => x.rank != 0);
 
-      let besttwoV2s = sortBy(rankedtwoV2s, [
-        "leagueOrder",
-        "division",
-        "rank",
-      ])[0];
+      let besttwoV2s = sortBy(rankedtwoV2s, ["leagueOrder", "division", "rank"])[0];
 
       if (!besttwoV2s) {
         besttwoV2s = twoV2s[0];
       }
 
-      const otherModes = gameModeStats.value.filter((g) =>
-        g.gameMode !== EGameMode.GM_1ON1 && g.gameMode !== EGameMode.GM_2ON2_AT
+      const otherModes = gameModeStats.value.filter(
+        (g) => g.gameMode !== EGameMode.GM_1ON1 && g.gameMode !== EGameMode.GM_2ON2_AT
       );
 
       const otherModesRanked = otherModes.filter((g) => g.rank != 0);
-      const bestOtherModes = sortBy(otherModesRanked, [
-        "leagueOrder",
-        "division",
-        "rank",
-      ]);
+      const bestOtherModes = sortBy(otherModesRanked, ["leagueOrder", "division", "rank"]);
 
       const allModes = [];
       if (bestOneVOne) allModes.push(bestOneVOne);
       if (besttwoV2s) allModes.push(besttwoV2s);
       allModes.push(...bestOtherModes);
 
-      const bestAllModesSorted = sortBy(allModes, [
-        "leagueOrder",
-        "division",
-        "rank",
-      ]);
+      const bestAllModesSorted = sortBy(allModes, ["leagueOrder", "division", "rank"]);
 
       return take(
         bestAllModesSorted.filter((x) => x.rank != 0),

diff --git a/src/scss/shared/base.scss b/src/scss/shared/base.scss
@@ -65,13 +65,6 @@ header.v-app-bar--is-scrolled + main {
   opacity: 0.25;
 }
 
-.red {
-  background-color: red;
-  position: absolute;
-  top: 5px;
-  left: 28px;
-}
-
 .blinker {
   -webkit-animation: up-right 1s infinite;
   -moz-animation: up-right 1s infinite;