Merge pull request #125 from realModusOperandi/leaderboard-tweak

Leaderboard tweaks

frontend/prebuild/src/app/game/leaderboard/leaderboard.component.html

@@ -9,7 +9,13 @@
       <span class="player">Player</span>
       <span class="value">Wins</span>
     </div>
-    <div *ngFor="let r of winsRankings, let i = index" [ngClass]="'row body'">
+    <div *ngFor="let r of winsRankings, let i = index" [ngClass]="{
+      row: true,
+      body: true,
+      first: i === 0,
+      second: i === 1,
+      third: i === 2
+    }">
       <span class="rank">{{i + 1}}</span>
       <span class="player">{{r.name}}</span>
       <span class="value">{{r.numWins}}</span>
@@ -22,7 +28,13 @@
       <span class="player">Player</span>
       <span class="value">Games</span>
     </div>
-    <div *ngFor="let r of gamesRankings, let i = index" [ngClass]="'row body'">
+    <div *ngFor="let r of gamesRankings, let i = index" [ngClass]="{
+      row: true,
+      body: true,
+      first: i === 0,
+      second: i === 1,
+      third: i === 2
+    }">
       <span class="rank">{{i + 1}}</span>
       <span class="player">{{r.name}}</span>
       <span class="value">{{r.totalGames}}</span>
@@ -33,13 +45,19 @@
     <div class="row header">
       <span class="rank">Rank</span>
       <span class="player">Player</span>
-      <span class="value">Ratio</span>
+      <span class="value">Win Rate</span>
     </div>
-    <div *ngFor="let r of ratioRankings, let i = index" [ngClass]="'row body'">
+    <div *ngFor="let r of ratioRankings, let i = index" [ngClass]="{
+      row: true,
+      body: true,
+      first: i === 0,
+      second: i === 1,
+      third: i === 2
+    }">
       <span class="rank">{{i + 1}}</span>
       <span class="player">{{r.name}}</span>
       <!-- Format is minimum one place before decimal, min and max 2 places after decimal. -->
-      <span class="value">{{r.winLossRatio | number: '1.2-2'}}</span>
+      <span class="value">{{r.winLossRatio | number: '1.2-2'}}%</span>
     </div>
   </div>
 
@@ -49,7 +67,13 @@
       <span class="player">Player</span>
       <span class="value">Rating</span>
     </div>
-    <div *ngFor="let r of ratingRankings, let i = index" [ngClass]="'row body'">
+    <div *ngFor="let r of ratingRankings, let i = index" [ngClass]="{
+      row: true,
+      body: true,
+      first: i === 0,
+      second: i === 1,
+      third: i === 2
+    }">
       <span class="rank">{{i + 1}}</span>
       <span class="player">{{r.name}}</span>
       <span class="value">{{r.rating}}</span>

frontend/prebuild/src/app/game/leaderboard/leaderboard.component.scss

@@ -1,3 +1,10 @@
+$first-color:  #f7df69;
+$second-color: #e7e7e7;
+$third-color: #d68432;
+
+// Use RGBA to make elements invisible; Edge doesn't like alpha in hex
+$invisible: rgba(0, 0, 0, 0);
+
 :host {
   display: grid;
   grid-template-rows: 100%;
@@ -49,7 +56,6 @@
   align-items: center;
 
   margin-bottom: 5px;
-  padding-left: 15px;
 
   font-size: 1.5em;
   color: #fff;
@@ -60,8 +66,12 @@
   padding: 0;
 }
 
+.row .rank {
+  padding-left: 15px;
+}
+
 .header {
-  margin-left: -10px;
+  border-left: 5px solid $invisible;
 }
 
 .body {
@@ -70,10 +80,57 @@
   flex: 1;
 }
 
+%leader {
+  border: 1px solid;
+  border-left: 5px solid;
+}
+
+.first {
+  @extend %leader;
+  border-color: $first-color;
+  color: $first-color;
+}
+
+.second {
+  @extend %leader;
+  border-color: $second-color;
+  color: $second-color;
+}
+
+.third {
+  @extend %leader;
+  border-color: $third-color;
+  color: $third-color;
+}
+
 .rank {
   flex: 1;
 }
 
+%leader-rank {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: -10px 0%;
+  background-origin: content-box;
+
+  color: $invisible;
+}
+
+.first .rank {
+  @extend %leader-rank;
+  background-image: url("../../../assets/images/first.png");
+}
+
+.second .rank {
+  @extend %leader-rank;
+  background-image: url("../../../assets/images/second.png");
+}
+
+.third .rank {
+  @extend %leader-rank;
+  background-image: url("../../../assets/images/third.png");
+}
+
 .player {
   flex: 4;
 }
@@ -86,5 +143,17 @@
   .row {
     font-size: 1em;
   }
+
+  .first .rank {
+    background-position: -5px 0%;
+  }
+
+  .second .rank {
+    background-position: -5px 0%;
+  }
+
+  .third .rank {
+    background-position: -5px 0%;
+  }
 }
 

frontend/prebuild/src/app/game/leaderboard/leaderboard.component.ts

@@ -12,12 +12,12 @@ import { trigger, transition, style, animate } from '@angular/animations';
   animations: [
     trigger('swap', [
       transition(':enter', [
-        style({transform: 'translateY(100%)', opacity: 0}),
-        animate('1000ms', style({transform: 'translateY(0)', opacity: 1}))
+        style({transform: 'translateX(100%)', opacity: 0}),
+        animate('1000ms', style({transform: 'translateX(0)', opacity: 1}))
       ]),
       transition(':leave', [
-        style({transform: 'translateY(0)', opacity: 1}),
-        animate('1000ms', style({transform: 'translateY(-100%)', opacity: 0}))
+        style({transform: 'translateX(0)', opacity: 1}),
+        animate('1000ms', style({transform: 'translateX(-100%)', opacity: 0}))
       ])
     ])
   ]