From 06be5d3299f91a1925b46781880df8b7ba5d36c4 Mon Sep 17 00:00:00 2001
From: Ben Wilson <ben@registrationmax.com>
Date: Fri, 16 Feb 2024 17:22:15 -0500
Subject: [PATCH] highscores

---
 .../components/splash/splash.component.html   | 55 +++++++++++++++++++
 src/app/components/splash/splash.component.ts |  2 +
 2 files changed, 57 insertions(+)

diff --git a/src/app/components/splash/splash.component.html b/src/app/components/splash/splash.component.html
index cee89b9..a19a1f7 100644
--- a/src/app/components/splash/splash.component.html
+++ b/src/app/components/splash/splash.component.html
@@ -130,6 +130,61 @@
             </div>
         </div>
 
+
+        <div class="col-12" *ngIf="highScores$ | async as highScores">
+            <div class="card">
+                <h4 style="text-align: center;">High Scores</h4>
+                <ng-container>
+                    <p-table [value]="highScores">
+                        <ng-template pTemplate="header">
+                            <tr>
+                                <th>Difficulty</th>
+                                <th>Device</th>
+                                <th>When</th>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-highScore>
+                            <tr></tr>
+                            <tr>
+                                <td>{{ highScore.bestDifficulty | numberSuffix }}</td>
+                                <td>{{ highScore.bestDifficultyUserAgent }}</td>
+                                <td>{{ highScore.updatedAt | dateAgo}}</td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                    <div class="text-right mt-2">
+                        <i class="pi pi-star-fill"></i> = Open Source Software & Hardware
+                    </div>
+                </ng-container>
+                <ng-template #loadingTable>
+                    <p-table [value]="[{},{},{}]">
+                        <ng-template pTemplate="header">
+                            <tr>
+                                <th>Device</th>
+                                <th>Currently Working</th>
+                                <th>Total Hash Rate</th>
+                                <th>Best Difficulty <i class="pi pi-question-circle ml-2"
+                                        pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
+                                </th>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-row>
+                            <tr></tr>
+                            <tr>
+                                <td><p-skeleton></p-skeleton></td>
+                                <td><p-skeleton></p-skeleton></td>
+                                <td><p-skeleton></p-skeleton></td>
+                                <td><p-skeleton></p-skeleton></td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </ng-template>
+            </div>
+        </div>
+
+
+
+
         <div class="col-12" *ngIf="blockData$ | async as blockData">
             <div class="card">
                 <h4 style="text-align: center;"> Found Blocks</h4>
diff --git a/src/app/components/splash/splash.component.ts b/src/app/components/splash/splash.component.ts
index fbbc06d..f3712d5 100644
--- a/src/app/components/splash/splash.component.ts
+++ b/src/app/components/splash/splash.component.ts
@@ -19,6 +19,7 @@ export class SplashComponent {
   public chartData$: Observable<any>;
   public blockData$: Observable<any>;
   public userAgents$: Observable<any>;
+  public highScores$: Observable<any>;
   public uptime$: Observable<string>;
 
   public chartOptions: any;
@@ -38,6 +39,7 @@ export class SplashComponent {
 
     this.blockData$ = info$.pipe(map(info => info.blockData));
     this.userAgents$ = info$.pipe(map(info => info.userAgents));
+    this.highScores$ = info$.pipe(map(info => info.highScores));
     this.uptime$ = info$.pipe(map(info => info.uptime))
 
     this.chartData$ = this.appService.getInfoChart().pipe(