feat: save stats to local storage

Victory lose, player stats, lobby config are stored to local storage
(for later use)

src/client/graphics/layers/PlayerPanel.ts

@@ -8,6 +8,7 @@ import {
   AllPlayers,
   Player,
   PlayerActions,
+  PlayerID,
   UnitType,
 } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
@@ -133,8 +134,8 @@ export class PlayerPanel extends LitElement implements Layer {
     this.requestUpdate();
   }
 
-  getTotalNukesSent(): number {
-    const stats = this.actions.interaction?.stats;
+  getTotalNukesSent(otherId: PlayerID): number {
+    const stats = this.g.player(otherId).stats();
     if (!stats) {
       return 0;
     }
@@ -189,7 +190,7 @@ export class PlayerPanel extends LitElement implements Layer {
           <button
             @click=${this.handleClose}
             class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center
-                   bg-red-500 hover:bg-red-600 text-white rounded-full 
+                   bg-red-500 hover:bg-red-600 text-white rounded-full
                    text-sm font-bold transition-colors"
           >
             ✕
@@ -199,7 +200,7 @@ export class PlayerPanel extends LitElement implements Layer {
             <!-- Name section -->
             <div class="flex items-center gap-1 lg:gap-2">
               <div
-                class="px-4 h-8 lg:h-10 flex items-center justify-center 
+                class="px-4 h-8 lg:h-10 flex items-center justify-center
                        bg-opacity-50 bg-gray-700 text-opacity-90 text-white
                        rounded text-sm lg:text-xl w-full"
               >
@@ -251,7 +252,7 @@ export class PlayerPanel extends LitElement implements Layer {
                 Nukes sent by them to you
               </div>
               <div class="bg-opacity-50 bg-gray-700 rounded p-2 text-white">
-                ${this.getTotalNukesSent()}
+                ${this.getTotalNukesSent(other.id())}
               </div>
             </div>
 
@@ -261,7 +262,7 @@ export class PlayerPanel extends LitElement implements Layer {
                 ? html`<button
                     @click=${(e) => this.handleTargetClick(e, other)}
                     class="w-10 h-10 flex items-center justify-center
-                           bg-opacity-50 bg-gray-700 hover:bg-opacity-70 
+                           bg-opacity-50 bg-gray-700 hover:bg-opacity-70
                            text-white rounded-lg transition-colors"
                   >
                     <img src=${targetIcon} alt="Target" class="w-6 h-6" />

src/client/graphics/layers/WinModal.ts

@@ -9,6 +9,7 @@ import { PseudoRandom } from "../../../core/PseudoRandom";
 import { simpleHash } from "../../../core/Util";
 import { EventBus } from "../../../core/EventBus";
 import { SendWinnerEvent } from "../../Transport";
+import { GameStat, LocalPersistantStats } from "../../LocalPersistantStats";
 
 // Add this at the top of your file
 declare global {
@@ -27,6 +28,7 @@ export class WinModal extends LitElement implements Layer {
   private rand: PseudoRandom;
 
   private hasShownDeathModal = false;
+  private localPersistantsStats = new LocalPersistantStats();
 
   @state()
   isVisible = false;
@@ -220,6 +222,14 @@ export class WinModal extends LitElement implements Layer {
     this.rand = new PseudoRandom(simpleHash(this.game.myClientID()));
   }
 
+  private updateGameStats(outcome: GameStat["outcome"]) {
+    this.localPersistantsStats.endGame(
+      this.game.gameID(),
+      this.game.myPlayer().stats(),
+      outcome,
+    );
+  }
+
   tick() {
     const myPlayer = this.game.myPlayer();
     if (!this.hasShownDeathModal && myPlayer && !myPlayer.isAlive()) {
@@ -235,9 +245,11 @@ export class WinModal extends LitElement implements Layer {
       if (winner == this.game.myPlayer()) {
         this._title = "You Won!";
         this.won = true;
+        this.updateGameStats("victory");
       } else {
         this._title = `${winner.name()} has won!`;
         this.won = false;
+        this.updateGameStats("defeat");
       }
       this.show();
     });