Add in medals

packages/bridge-ui/src/app/components/race-details/race-details.component.html

@@ -34,65 +34,26 @@
                 <h2>Closed for new entries</h2>
             }
         </div>
-        <div style="text-align: center;">
+        <div class="race-times">
-            <p>Author: {{formatMilliseconds(race.authorTime)}} Gold: {{formatMilliseconds(race.goldTime)}} Silver: {{formatMilliseconds(race.silverTime)}} Bronze: {{formatMilliseconds(race.bronzeTime)}}</p>
+            <div><img class="inline-medal" src="/assets/medal_author.png"/><p>Author: {{formatMilliseconds(race.authorTime)}}</p></div>
+            <div><img class="inline-medal" src="/assets/medal_gold.png"/><p>Gold: {{formatMilliseconds(race.goldTime)}}</p></div>
+            <div><img class="inline-medal" src="/assets/medal_silver.png"/><p>Silver: {{formatMilliseconds(race.silverTime)}}</p></div>
+            <div><img class="inline-medal" src="/assets/medal_bronze.png"/><p>Bronze: {{formatMilliseconds(race.bronzeTime)}}</p></div>
         </div>
     </div>
     <mat-divider></mat-divider>
-    <!--
-    <div class="race-details">
-        <div class="details-container">
-            <div class="map-title">
-                <h1>{{race.mapName}}</h1>
-                <a mat-fab extended href="{{race.mapURL}}" class="button is-fullwidth is-danger" title="{{race.mapName}}.Map.Gbx" color="primary">
-                    <mat-icon>download</mat-icon>
-                    Download map
-                </a>
-            </div>
-            <div class="map-times">
-                <p>Author Time: {{formatMilliseconds(race.authorTime)}}</p>
-                <p>Gold Time: {{formatMilliseconds(race.goldTime)}}</p>
-                <p>Silver Time: {{formatMilliseconds(race.silverTime)}}</p>
-                <p>Bronze Time: {{formatMilliseconds(race.bronzeTime)}}</p>
-            </div>
-        </div>
-        <img
-            src={{race.mapImgUrl}}
-            class="img-thumbnail shadow-2-strong"
-        />
-    </div>
-    <br>
-    <div class="count-down-timer">
-        @if(openToUploads) {
-            <h2>Entries Close on: {{currentTime}} </h2>
-            <div class="wrapper">
-                <div class="description">
-                <p>Days</p>
-                <p>Hours</p>
-                <p>Minutes</p>
-                <p>Seconds</p>
-                </div>
-                <div class="times">
-                <p #days></p>
-                <p #hours></p>
-                <p #minutes></p>
-                <p #seconds></p>
-                </div>
-            </div>
-        } 
-        @else {
-            <h2>Closed for new entries</h2>
-        }
-        
-    </div>
-    -->
     <br/>
     <div>
-        <table mat-table [dataSource]="sortedResults" class="mat-elevation-z8">
+        <table mat-table [dataSource]="sortedResults" class="mat-elevation-z8 results-table">
             <ng-container matColumnDef="position">
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
             </ng-container>
+
+            <ng-container matColumnDef="medal">
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let element; let i = index"><img class="inline-medal" src="{{timeToMedal(element.time)}}"/></td>
+            </ng-container>
             
             <!-- Name Column -->
             <ng-container matColumnDef="name">

packages/bridge-ui/src/app/components/race-details/race-details.component.scss

@@ -10,6 +10,16 @@
   width: 80%;
 }
 
+.inline-medal {
+  height: 1rem;
+}
+
+.race-times{
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+}
+
 .img-thumbnail {
     
     //float: right;
@@ -89,4 +99,21 @@
         }
       }
     }
-  }
+  }
+
+.mat-column-position {
+  width: 32px;
+  border-right: 1px solid currentColor;
+  padding-right: 24px;
+  text-align: center;
+}
+
+.mat-column-medal {
+  width: 32px;
+  padding-right: 24px;
+  text-align: center;
+}
+
+.mat-column-ghost {
+  text-align: center;
+}

packages/bridge-ui/src/app/components/race-details/race-details.component.ts

@@ -34,7 +34,7 @@ export class RaceDetailsComponent implements AfterViewInit {
   raceResults: any;
   blob: Blob = new Blob();
 
-  displayedColumns: string[] = ['position', 'name', 'runTime', 'ghost'];
+  displayedColumns: string[] = ['position', 'medal', 'name', 'runTime', 'ghost'];
   sortedResults: RaceEntry[] = [];
 
   openToUploads: boolean = true;
@@ -155,6 +155,15 @@ export class RaceDetailsComponent implements AfterViewInit {
     return ""
   }
 
+  timeToMedal(time: number) {
+    if( this.race == undefined) { return "" }
+    if( time < this.race.authorTime ) { return "assets/medal_author.png"; }
+    if( time < this.race.goldTime ) { return "assets/medal_gold.png"; }
+    if( time < this.race.silverTime ) { return "assets/medal_silver.png"; }
+    if( time < this.race.bronzeTime ) { return "assets/medal_bronze.png"; }
+    return ""
+  }
+
   onClickDownloadGhost(raceResult: any) {
     console.log(raceResult)
     this.raceResultService.getGhost(raceResult.id).subscribe(data => {