feat(diamond): lots of layout improvements, add weather, series, game…

… over text
RangerRick · Oct 15, 2020 · 1451f8e · 1451f8e
1 parent fecdca6
commit 1451f8e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 18 deletions.
diff --git a/src/app/diamond/diamond.component.html b/src/app/diamond/diamond.component.html
@@ -1,21 +1,5 @@
 <ion-card class="green-card ion-no-padding ion-no-margin" [id]="prefix + '-' + game.id">
   <ion-card-content class="ion-no-padding">
-    <div class="team-header">
-      <ion-grid>
-        <ion-row>
-          <ion-col class="ion-justify-content-end ion-no-padding ion-no-margin">
-            <app-team style="float: right" team="away" [teamColor]="game.awayTeamColor" [emoji]="game.awayTeamEmoji" [name]="game.awayTeamNickname" (click)="openTeam(game.awayTeam, $event)"></app-team>
-          </ion-col>
-          <ion-col size="1" class="ion-align-items-end ion-no-padding ion-no-margin" style="margin-top: 0.4em">
-            at
-          </ion-col>
-          <ion-col class="ion-justify-content-start ion-no-padding ion-no-margin">
-            <app-team style="float: left" team="home" [teamColor]="game.homeTeamColor" [emoji]="game.homeTeamEmoji" [name]="game.homeTeamNickname" (click)="openTeam(game.homeTeam, $event)"></app-team>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </div>
-
     <ion-grid>
       <ion-row>
         <ion-col size="12" size-md="6" size-lg="6" size-xl="6">
@@ -27,6 +11,22 @@
               </ion-button>
             </ion-fab>
 
+            <div class="team-header">
+              <ion-grid>
+                <ion-row>
+                  <ion-col class="ion-justify-content-end ion-no-padding ion-no-margin">
+                    <app-team style="float: right" team="away" [teamColor]="game.awayTeamColor" [emoji]="game.awayTeamEmoji" [name]="game.awayTeamNickname" (click)="openTeam(game.awayTeam, $event)"></app-team>
+                  </ion-col>
+                  <ion-col size="1" class="ion-align-items-end ion-no-padding ion-no-margin" style="margin-top: 0.4em">
+                    at
+                  </ion-col>
+                  <ion-col class="ion-justify-content-start ion-no-padding ion-no-margin">
+                    <app-team style="float: left" team="home" [teamColor]="game.homeTeamColor" [emoji]="game.homeTeamEmoji" [name]="game.homeTeamNickname" (click)="openTeam(game.homeTeam, $event)"></app-team>
+                  </ion-col>
+                </ion-row>
+              </ion-grid>
+            </div>
+
             <!-- viewbox="0 0 650 500" -->
             <svg *ngIf="inProgress()" xmlns="http://www.w3.org/2000/svg" version="1.0" preserveAspectRatio="xMinYMin meet" viewBox="10 120 635 400">
               <filter id="dropShadow">
@@ -199,9 +199,35 @@
                 </text>
               </g>
             </svg>
+            <div *ngIf="!inProgress()">
+              <div class="game-over">
+                Game Over.
+              </div>
+              <div class="game-summary">
+                <p>The {{game.winner}} beat the {{game.loser}} {{game.winningScore}} to {{game.losingScore}}.</p>
+                <p *ngIf="game.shame">The {{game.loser}} have been SHAMED.</p>
+              </div>
+            </div>
           </div>
         </ion-col>
         <ion-col size="12" size-md="6" size-lg="6" size-xl="6">
+          <ion-grid class="series-record">
+            <ion-row>
+              <ion-col size="4">
+                Game {{game.seriesIndex}} / {{game.seriesLength}}
+              </ion-col>
+              <ion-col size="8" class="ion-text-end">
+                Weather: {{game.weatherString}}
+              </ion-col>
+              <!-- TGB is not doing this anymore -->
+              <!--
+              <ion-col *ngIf="game && record" size="8" class="ion-text-end">
+                Series record: {{game.awayTeamNickname}} {{record[1]}} / {{game.homeTeamNickname}} {{record[0]}}
+              </ion-col>
+              -->
+            </ion-row>
+          </ion-grid>
+          <div class="series"></div>
           <app-score-box [hideLog]="hideLog" [game]="game" [teams]="teams" [openTeam]="openTeam"></app-score-box>
         </ion-col>
       </ion-row>

diff --git a/src/app/diamond/diamond.component.scss b/src/app/diamond/diamond.component.scss
@@ -13,18 +13,42 @@
 
 .team-header {
   color: white;
-  font-size: 3.5vw;
+  font-size: 1em;
   font-weight: bold;
   text-align: center;
   padding-top: 0.75em;
-  padding-bottom: 0.25em;
+  padding-bottom: 0;
+}
+
+ion-grid {
+  padding-top: 0;
 }
 
 ion-fab {
   bottom: 4px;
   right: 0;
 }
 
+.game-over {
+  text-align: center;
+  font-size: 200%;
+  font-weight: bold;
+  padding: 0.5em;
+}
+
+.game-summary {
+  text-align: center;
+  padding: 0.5em;
+  p {
+    font-size: 140%;
+    font-weight: bold;
+  }
+}
+
+.series-record {
+  font-weight: bold;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;