Merge pull request #20 from UndefinedOnGitHub/add-game-storage

fix test + pretty

src/app/app.component.html

@@ -34,11 +34,11 @@
         <div
           *ngFor="let action of sideBarActions"
           class="d-flex align-content-center"
-          routerLink="{{action.routerLink}}"
+          routerLink="{{ action.routerLink }}"
           (click)="drawer.close()"
         >
           <fa-icon [icon]="action.icon"></fa-icon>
-          <span>{{action.text}}</span>
+          <span>{{ action.text }}</span>
         </div>
       </div>
     </mat-drawer>

src/app/app.component.spec.ts

@@ -48,12 +48,6 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'chesspad.pp'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('chesspad.pp');
-  });
-
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();

src/app/app.component.ts

@@ -26,11 +26,11 @@ export class AppComponent {
 
   githubUrl: string = 'https://github.com/UndefinedOnGitHub/chesspad-pp';
 
-  sideBarActions : SideBarAction[] = [
-    {routerLink: "/", icon: faFilePen, text: "Notepad"},
-    {routerLink: "/puzzles", icon: faPuzzlePiece, text: "Puzzle"},
-    {routerLink: "/games", icon: faChessBoard, text: "Game"},
-  ]
+  sideBarActions: SideBarAction[] = [
+    { routerLink: '/', icon: faFilePen, text: 'Notepad' },
+    { routerLink: '/puzzles', icon: faPuzzlePiece, text: 'Puzzle' },
+    { routerLink: '/games', icon: faChessBoard, text: 'Game' },
+  ];
 
   constructor() {}
 }

src/app/finish-game-dialog/finish-game-dialog.component.ts

@@ -34,7 +34,7 @@ export class FinishGameDialogComponent {
   ) {
     this.gameString = data.pgn || this.game.exportPGN();
     this.gameWinner = this.findGameWinner();
-    this.onGameWinnerChange({value: this.gameWinner});
+    this.onGameWinnerChange({ value: this.gameWinner });
     this.gameDisabled = data.disabled || false;
   }
 

src/app/game-review.service.ts

@@ -43,7 +43,7 @@ export class GameReviewService {
     return this.additionalButton;
   }
 
-  init(element: HTMLElement | null = null) : void {
+  init(element: HTMLElement | null = null): void {
     return this.#loadGame(element);
   }
 
@@ -89,21 +89,27 @@ export class GameReviewService {
       });
       this.game = new Chess();
     }
-    const game = this.storage.fetchGame("local_game_review")
+    const game = this.storage.fetchGame('local_game_review');
     if (game) {
-      const moveNumber = parseInt(this.storage.fetch("local_game_review_move_number") || "0") || 0;
+      const moveNumber =
+        parseInt(this.storage.fetch('local_game_review_move_number') || '0') ||
+        0;
       const history = game.history().slice(moveNumber);
-      game.history().slice(0, moveNumber).forEach(m => this.game.move(m));
-      const orientation = this.storage.fetch("local_game_review_orientation") == "b" ? "b" : "w";
-
-      this.#initiateGame({history, orientation, gamePgn: game.pgn()})
+      game
+        .history()
+        .slice(0, moveNumber)
+        .forEach((m) => this.game.move(m));
+      const orientation =
+        this.storage.fetch('local_game_review_orientation') == 'b' ? 'b' : 'w';
+
+      this.#initiateGame({ history, orientation, gamePgn: game.pgn() });
       this.#scrollToLastMove();
     } else {
       this.#newGamePopup();
     }
   }
 
-  #fetchAndLoadGame(result: DialogCloseResponse) : void {
+  #fetchAndLoadGame(result: DialogCloseResponse): void {
     if (this.element) {
       this.groundboard = Chessground(this.element, {
         coordinates: false,
@@ -133,9 +139,9 @@ export class GameReviewService {
   #storeGame(response: GameResponse) {
     const storageGame = new Chess();
     storageGame.loadPgn(response.gamePgn);
-    this.storage.storeGame("local_game_review", storageGame);
-    this.storage.store("local_game_review_move_number", "0");
-    this.storage.store("local_game_review_orientation", response.orientation);
+    this.storage.storeGame('local_game_review', storageGame);
+    this.storage.store('local_game_review_move_number', '0');
+    this.storage.store('local_game_review_orientation', response.orientation);
   }
 
   #initiateGame(response: GameResponse): void {
@@ -171,7 +177,10 @@ export class GameReviewService {
       setTimeout(() => {
         if (this.currentMove) {
           const gameMove = this.game.move(this.currentMove);
-          this.storage.store("local_game_review_move_number", String(this.game.history().length - 1))
+          this.storage.store(
+            'local_game_review_move_number',
+            String(this.game.history().length - 1),
+          );
           this.groundboard.set({
             fen: this.game.fen(),
             lastMove: [gameMove.from, gameMove.to],
@@ -184,7 +193,7 @@ export class GameReviewService {
     return { sucess: false };
   }
 
-  isCheckmate() : boolean {
+  isCheckmate(): boolean {
     return this.game.isCheckmate();
   }
 

src/app/game-storage-manager.service.ts

@@ -2,49 +2,48 @@ import { Injectable } from '@angular/core';
 import { Chess } from 'chess.js';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class GameStorageManagerService {
-
-  constructor() { }
+  constructor() {}
 
   storeGame(key: string, game: Chess): void {
     try {
       const pgn64 = btoa(game.pgn());
       this.store(key, pgn64);
     } catch {
-      console.error("Failed to store game")
+      console.error('Failed to store game');
     }
   }
 
-  fetchGame(key: string) : Chess | undefined {
+  fetchGame(key: string): Chess | undefined {
     try {
       const pgn64 = this.fetch(key) || '';
       if (pgn64) {
         const pgn = atob(pgn64);
         const game = new Chess();
         game.loadPgn(pgn);
-        return game
+        return game;
       }
     } catch (err) {
-      console.error("Failed to fetch game", err);
+      console.error('Failed to fetch game', err);
     }
     return;
   }
 
   clearGame(key: string): void {
-    localStorage.removeItem(key)
+    localStorage.removeItem(key);
   }
 
   isGameStored(key: string): boolean {
     return (localStorage.getItem(key) || '').length > 0;
   }
 
-  store(key : string, value : string) {
+  store(key: string, value: string) {
     localStorage.setItem(key, value);
   }
 
-  fetch(key : string) {
+  fetch(key: string) {
     return localStorage.getItem(key);
   }
 }

src/app/game.service.ts

@@ -110,13 +110,13 @@ export class GameService {
 
   // Game Storage Functions
   storeGame(): void {
-    this.storage.storeGame("local_game", this.game)
+    this.storage.storeGame('local_game', this.game);
   }
 
   fetchGame(): Move[] {
-    const storedGame = this.storage.fetchGame("local_game")
+    const storedGame = this.storage.fetchGame('local_game');
     if (storedGame) {
-      this.game = storedGame
+      this.game = storedGame;
       this.#logGame('Game Loaded');
       this.moves = this.game.history().map((h) => new Move(h));
       this.#scrollToLastMove();

src/app/game/game.component.ts

@@ -39,7 +39,7 @@ export class GameComponent {
 
   onFinish() {
     const dialogRef = this.dialog.open(FinishGameDialogComponent, {
-      data: {pgn: this.game.game.pgn(), game: this.game.game},
+      data: { pgn: this.game.game.pgn(), game: this.game.game },
     });
     dialogRef.afterClosed().subscribe((result) => {
       console.log('The dialog was closed');

src/app/keyboard/keyboard.component.html

@@ -44,10 +44,12 @@
     <div *ngIf="additionalButton" class="flex-grow-2 additional-button">
       <app-keyboard-button [button]="additionalButton"> </app-keyboard-button>
     </div>
-    <button [disabled]="disableButtons()"
+    <button
+      [disabled]="disableButtons()"
       class="flex-grow-1"
       mat-raised-button
-      (click)="submit($event)">
+      (click)="submit($event)"
+    >
       ||
     </button>
   </div>

src/app/keyboard/keyboard.component.ts

@@ -125,7 +125,7 @@ export class KeyboardComponent implements OnInit {
     }
   }
 
-  disableButtons() : boolean {
+  disableButtons(): boolean {
     // return this?.game?.isCheckmate() || false;
     return false;
   }

src/app/puzzle.service.ts

@@ -18,7 +18,7 @@ import { GameStorageManagerService } from './game-storage-manager.service';
  * The Puzzle Service
  *
  * This service keeps track of the chess puzzle.
- * 
+ *
  * `init` will connect the board, keyboard and initiate the process
  *
  *
@@ -45,7 +45,7 @@ export class PuzzleService {
   constructor(
     public api: ChessWebsiteApiService,
     public dialog: MatDialog,
-    public storage: GameStorageManagerService
+    public storage: GameStorageManagerService,
   ) {}
 
   init(element: HTMLElement | null = null): void {
@@ -56,7 +56,7 @@ export class PuzzleService {
     if (element) {
       this.element = element;
     }
-    if (this.storage.isGameStored("local_puzzle")) {
+    if (this.storage.isGameStored('local_puzzle')) {
       this.#fetchGame();
     } else {
       const promise = this.api.fetchChessPuzzle();
@@ -67,21 +67,21 @@ export class PuzzleService {
   }
 
   #storeGame() {
-    const storageGame = new Chess(this.game.fen())
-    this.solution.forEach((s: string) => storageGame.move(s))
-    this.storage.storeGame('local_puzzle', storageGame)
+    const storageGame = new Chess(this.game.fen());
+    this.solution.forEach((s: string) => storageGame.move(s));
+    this.storage.storeGame('local_puzzle', storageGame);
   }
 
   #fetchGame() {
     const puzzle = this.storage.fetchGame('local_puzzle');
     if (puzzle) {
-      const firstMove = puzzle.history({verbose: true})[0];
+      const firstMove = puzzle.history({ verbose: true })[0];
       this.game = new Chess(firstMove?.before);
       this.boardOrientation = firstMove.color;
       this.solution = [...puzzle.history()];
       this.#constructBoard();
     } else {
-      this.storage.clearGame("local_puzzle");
+      this.storage.clearGame('local_puzzle');
     }
   }
 
@@ -147,7 +147,7 @@ export class PuzzleService {
       .afterClosed()
       .subscribe(() => {
         console.log('FINISHED');
-        this.storage.clearGame("local_puzzle");
+        this.storage.clearGame('local_puzzle');
         this.#loadPuzzle();
       });
   }
@@ -188,7 +188,7 @@ export class PuzzleService {
     return this.additionalButton;
   }
 
-  isCheckmate() : boolean {
-    return this.game.isCheckmate()
+  isCheckmate(): boolean {
+    return this.game.isCheckmate();
   }
 }