From 72711d56f1597f00050149bf3a6ae12a08cc6278 Mon Sep 17 00:00:00 2001
From: Quildra <Quildra@gmail.com>
Date: Thu, 23 Nov 2023 21:58:57 +0000
Subject: [PATCH] Better header

---
 .../race-details/race-details.component.html  | 22 +++++++++++-----
 .../race-details/race-details.component.scss  | 26 +++++++++++++++++--
 .../bridge-ui/src/app/models/race.model.ts    |  4 +++
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/bridge-ui/src/app/components/race-details/race-details.component.html b/packages/bridge-ui/src/app/components/race-details/race-details.component.html
index 40c0837..f8bac15 100644
--- a/packages/bridge-ui/src/app/components/race-details/race-details.component.html
+++ b/packages/bridge-ui/src/app/components/race-details/race-details.component.html
@@ -1,12 +1,22 @@
 @if( race != undefined ) {
-    <mat-grid-list cols="4" rowHeight="100px">
-        <mat-grid-tile [colspan]="3" [rowspan]="1"><h1>{{race.mapName}}</h1></mat-grid-tile>
-        <mat-grid-tile [colspan]="1" [rowspan]="2"><img
+    <div class="race-details">
+        <div class="details-container">
+            <div class="map-title">
+                <h1>{{race.mapName}}</h1>
+            </div>
+            <div class="map-times">
+                <p>Author Time: {{race.authorTime}}</p>
+                <p>Gold Time: {{race.goldTime}}</p>
+                <p>Silver Time: {{race.silverTime}}</p>
+                <p>Bronze Time: {{race.bronzeTime}}</p>
+            </div>
+        </div>
+        <img
             src={{race.mapImgUrl}}
             class="img-thumbnail shadow-2-strong"
-        /></mat-grid-tile>
-        <mat-grid-tile [colspan]="3" [rowspan]="1">Three</mat-grid-tile>
-    </mat-grid-list>
+        />
+    </div>
+
     <br/>
     <div>
         <table mat-table [dataSource]="sortedResults" class="mat-elevation-z8">
diff --git a/packages/bridge-ui/src/app/components/race-details/race-details.component.scss b/packages/bridge-ui/src/app/components/race-details/race-details.component.scss
index a522ac3..3c7abe0 100644
--- a/packages/bridge-ui/src/app/components/race-details/race-details.component.scss
+++ b/packages/bridge-ui/src/app/components/race-details/race-details.component.scss
@@ -1,3 +1,25 @@
-.img-thumbnail{
-    width: 300px;
+.img-thumbnail {
+    width: 200px;
+    //float: right;
+}
+
+.race-details {
+    display: flex;
+    justify-content: space-between;
+}
+
+.details-container{
+    flex: 3 0px;
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+    justify-content: center;
+}
+
+.map-title {
+    text-align: center;
+}
+
+.map-times {
+    margin-left: 15px;
 }
\ No newline at end of file
diff --git a/packages/bridge-ui/src/app/models/race.model.ts b/packages/bridge-ui/src/app/models/race.model.ts
index 762e244..ef2b200 100644
--- a/packages/bridge-ui/src/app/models/race.model.ts
+++ b/packages/bridge-ui/src/app/models/race.model.ts
@@ -4,6 +4,10 @@ export class Race{
     mapUrl: string  = "";
     mapUID: string = "";
     mapImgUrl: string = "";
+    authorTime: number = 0;
+    goldTime: number = 0;
+    silverTime: number = 0;
+    bronzeTime: number = 0;
     startDate: Date = new Date(0);
     endDate: Date = new Date(0);
     racers: string[] = [];