Improve Game design by displaying leaderboard on menu page, and after…

src/app/home.component.html

@@ -8,12 +8,12 @@
     class="hide-split-gutter"
   >
     <as-split-area [size]="100" class="split-area-1">
-      <div class="brawl-instructions">
+      <div class="brawl-instructions" #instructions>
         <div class="brawl-instructions-guide" style="max-height: 70vh">
           <img src="/assets/bashbrawl/bashbrawl_text.png" />
           <div class="brawl-instructions-text" [@shrinkAnimation]="shrinkState">
             <div class="text centered">
-              Test your command line skills<br />
+              Test your command line skills.<br />
               You have 60 seconds to enter commands from
             </div>
             <div class="text centered">
@@ -52,16 +52,24 @@
               }}</i>
               for another try!
             </div>
-            <div class="centered leaderboard" *ngIf="!gameStarted">
-              <app-leaderboard-embdedded
-                [onlyTop]="5"
-                [embedded]="true"
-                [advanced]="advancedLeaderboard"
-              ></app-leaderboard-embdedded>
-            </div>
-            <div class="centered leaderboard-space" *ngIf="!gameStarted">
+          </div>
+          <div [@shrinkAnimation]="leaderboardState">
+            <app-leaderboard-embdedded
+              [onlyTop]="5"
+              [embedded]="true"
+              [advanced]="advancedLeaderboard"
+              [score]="score"
+              [leaderboardWithLocalPlacementInput]="
+                leaderboardWithLocalPlacement
+              "
+              [showLocalScores]="winningScreen"
+            ></app-leaderboard-embdedded>
+            <div class="centered leaderboard-space">
               Hold <i class="brawl-language brawl-color">SPACE</i> for stats.
             </div>
+            <div class="text centered cta" *ngIf="winningScreen">
+              Press <i class="brawl-language brawl-color">ENTER</i> to continue.
+            </div>
           </div>
         </div>
         <div
@@ -72,10 +80,9 @@
           *ngIf="gameStarted"
         >
           <app-bashbrawl-terminal
-            (gameEnded)="resetToDefault()"
+            (gameEnded)="gameEnded($event)"
             (gameStarted)="setLargeTerminal()"
             (focusout)="focusTerminal()"
-            [code]="code"
             #terminal
           >
           </app-bashbrawl-terminal>

src/app/home.component.ts

@@ -1,7 +1,9 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import {
   BashbrawlterminalComponent,
-  Leaderboard,
+  GameFinished,
+  LeaderboardWithLocalPlacement,
+  Score,
 } from './terminals/bashbrawl/bashbrawlterminal.component';
 import { LanguageCommandService } from './terminals/bashbrawl/languages/language-command.service';
 import {
@@ -31,6 +33,7 @@ export class Cooldown {
           width: '10vw',
           minWidth: '0',
           height: '10vh',
+          opacity: 0,
         }),
       ),
       state(
@@ -65,13 +68,21 @@ export class Cooldown {
           maxHeight: '0vh',
         }),
       ),
+      state(
+        'hidden',
+        style({
+          opacity: 0,
+          maxHeight: '0vh',
+        }),
+      ),
       transition('normal <=> shrunk', animate('1000ms ease-in-out')),
     ]),
   ],
 })
 export class HomeComponent implements OnInit {
   terminalState = 'hidden';
   shrinkState = 'normal';
+  leaderboardState = 'normal';
 
   badgeScanningMode = false;
   gameStarted = false;
@@ -82,9 +93,16 @@ export class HomeComponent implements OnInit {
   cooldown = false;
   cooldownTime = '';
 
+  winningScreen: boolean;
+  leaderboardWithLocalPlacement: LeaderboardWithLocalPlacement;
+  score: Score;
+
   @ViewChild('terminal', { static: false })
   private terms: BashbrawlterminalComponent;
 
+  @ViewChild('instructions')
+  private instructions: HTMLElement;
+
   constructor(
     private languageCommandService: LanguageCommandService,
     private scoreService: ScoreService,
@@ -113,30 +131,51 @@ export class HomeComponent implements OnInit {
 
   setLargeTerminal() {
     this.shrinkState = 'shrunk';
+    this.leaderboardState = 'hidden';
     this.terminalState = 'large';
     this.terms.resize();
   }
 
   setSmallTerminal() {
     this.shrinkState = 'normal';
     this.terminalState = 'small';
+    this.leaderboardState = 'hidden';
   }
 
   setHiddenTerminal() {
     this.shrinkState = 'normal';
     this.terminalState = 'hidden';
+    this.leaderboardState = 'normal';
   }
 
   resetToDefault() {
     this.code = '';
     this.gameStarted = false;
+    this.winningScreen = false;
 
     if (this.terms) {
       this.terms.clearTerminal();
     }
     this.setHiddenTerminal();
   }
 
+  gameEnded(gameFinished: GameFinished) {
+    this.unfocusTerminal();
+
+    if (gameFinished && gameFinished.success) {
+      this.gameStarted = false;
+      this.winningScreen = true;
+      this.leaderboardState = 'normal';
+      this.shrinkState = 'shrunk';
+      this.terminalState = 'hidden';
+      this.leaderboardWithLocalPlacement =
+        gameFinished.leaderboardWithLocalPlacement;
+      this.score = gameFinished.score;
+    } else {
+      this.resetToDefault();
+    }
+  }
+
   onScan(code: string) {
     this.code = code;
     this.cooldown = false;
@@ -179,15 +218,28 @@ export class HomeComponent implements OnInit {
   }
 
   focusTerminal() {
-    setTimeout(() => this.terms.focusTerminal(), 0);
+    if (this.terminalState != 'hidden') {
+      setTimeout(() => this.terms?.focusTerminal(), 0);
+    }
+  }
+
+  unfocusTerminal() {
+    this.terms?.blurTerminal();
   }
 
   @HostListener('window:keypress', ['$event'])
   protected keyEvent(event: KeyboardEvent): void {
+    console.log(event.key);
     window.clearTimeout(this.scannerTimeoutId);
 
     if (event.code === 'Space') {
       this.advancedLeaderboard = true;
+      return;
+    }
+
+    if (event.key === 'Enter' && this.winningScreen) {
+      this.resetToDefault();
+      return;
     }
 
     if (event.key === 'Enter' && !this.badgeScanningMode) {

src/app/leaderboard/embedded/leaderboard-embedded.component.html

@@ -13,7 +13,11 @@
     </tr>
 
     <ng-container *ngFor="let score of getScores(); let i = index">
-      <tr class="entry-row" *ngIf="i < onlyTop">
+      <tr
+        [class.entry-row]="true"
+        *ngIf="i < onlyTop"
+        [class.self]="i === getScoreIndex()"
+      >
         <td *ngIf="i >= 3">{{ i + 1 }}.</td>
         <td *ngIf="i === 0">🥇</td>
         <td *ngIf="i === 1">🥈</td>
@@ -45,5 +49,52 @@
         </ng-container>
       </tr>
     </ng-container>
+
+    <ng-container *ngIf="hasLocalScores()">
+      <tr class="entry-row divider">
+        <td>...</td>
+        <td>...</td>
+        <td class="score">...</td>
+        <ng-container *ngIf="advanced">
+          <td class="score">...</td>
+          <td class="score">...</td>
+          <td class="score">...</td>
+          <td class="score">...</td>
+        </ng-container>
+      </tr>
+
+      <ng-container *ngFor="let score of getLocalScores(); let i = index">
+        <tr [class.entry-row]="true" [class.self]="i === getLocalScoreIndex()">
+          <td>
+            {{
+              leaderboardWithLocalPlacement.placement +
+                i -
+                getLocalScoreIndex() +
+                1
+            }}.
+          </td>
+          <td>
+            {{ score.name }}
+          </td>
+          <td class="score">
+            {{ score.score }}
+          </td>
+          <ng-container *ngIf="advanced">
+            <td class="score">
+              {{ score.x.count }}
+            </td>
+            <td class="score">
+              {{ score.x.maxStreak }}
+            </td>
+            <td class="score">
+              <!-- prettier-ignore -->
+              {{ score.x.avgLength | number:'1.2-2' }}
+            </td>
+            <!-- prettier-ignore -->
+            <td class="score">{{ score.x.speed | number:'1.2-2' }}/s</td>
+          </ng-container>
+        </tr>
+      </ng-container>
+    </ng-container>
   </table>
 </div>

src/app/leaderboard/embedded/leaderboard-embedded.component.scss

@@ -5,6 +5,7 @@
 .leaderboard {
   color: white;
   font-family: monospace;
+  padding-top: 20px;
 
   .score {
     text-align: right;
@@ -27,13 +28,22 @@
   }
 
   .entry-row {
-    font-size: 24px;
+    font-size: 2.5vh;
+    line-height: 2vh;
+    &.divider {
+      line-height: 1.5vh;
+    }
     td {
       padding: 10px;
       a {
         color: #74e2cd;
         font-weight: bold;
       }
     }
+    &.self {
+      background-color: #74e2cd;
+      font-weight: bold;
+      color: #01162a;
+    }
   }
 }