Merge pull request #7 from UndefinedOnGitHub/add-puzzle-option

Add puzzle option

angular.json

@@ -27,7 +27,10 @@
             "styles": [
               "src/theme.scss",
               // "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/chessground/assets/chessground.base.css",
+              "node_modules/chessground/assets/chessground.brown.css",
+              "node_modules/chessground/assets/chessground.cburnett.css"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": ["lodash"]

package.json

@@ -28,6 +28,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "chess.js": "^1.0.0-beta.7",
+    "chessground": "^9.0.2",
     "lodash": "^4.17.21",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app.component.html

@@ -3,7 +3,9 @@
     <button mat-icon-button disabled class="" aria-label="">
       <fa-icon [icon]="faBars"></fa-icon>
     </button>
-    <span id="chesspad-pp-title" class="chesspad-pp-title">Chesspad ++</span>
+    <span routerLink="/" id="chesspad-pp-title" class="chesspad-pp-title"
+      >Chesspad ++</span
+    >
     <span class="header-spacer"></span>
     <a
       mat-icon-button
@@ -27,6 +29,6 @@
   </mat-toolbar>
 
   <div class="keyboard-notepad-container">
-    <app-game></app-game>
+    <router-outlet></router-outlet>
   </div>
 </div>

src/app/app.component.spec.ts

@@ -11,6 +11,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDialogModule } from '@angular/material/dialog';
+import { RouterModule } from '@angular/router';
+import { RouterTestingModule } from "@angular/router/testing";
 
 describe('AppComponent', () => {
   beforeEach(() =>
@@ -30,6 +32,8 @@ describe('AppComponent', () => {
         MatButtonModule,
         MatSnackBarModule,
         MatDialogModule,
+        RouterModule,
+        RouterTestingModule
       ],
     }),
   );

src/app/app.module.ts

@@ -2,6 +2,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 
 // Font Awesome
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -26,6 +27,13 @@ import { MoveDisplayComponent } from './move-display/move-display.component';
 import { GameComponent } from './game/game.component';
 import { FinishGameDialogComponent } from './finish-game-dialog/finish-game-dialog.component';
 import { KeyboardSettingsDialogComponent } from './keyboard-settings-dialog/keyboard-settings-dialog.component';
+import { PuzzlesComponent } from './puzzles/puzzles.component';
+// Routing
+import { RouterModule, Routes } from '@angular/router';
+const routes: Routes = [
+  { path: '', component: GameComponent },
+  { path: 'puzzles', component: PuzzlesComponent },
+];
 
 @NgModule({
   declarations: [
@@ -37,10 +45,12 @@ import { KeyboardSettingsDialogComponent } from './keyboard-settings-dialog/keyb
     MoveDisplayComponent,
     NotepadComponent,
     KeyboardSettingsDialogComponent,
+    PuzzlesComponent,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    HttpClientModule,
     // Fonts / Icons
     FontAwesomeModule,
     // Angular Material Modules
@@ -55,7 +65,9 @@ import { KeyboardSettingsDialogComponent } from './keyboard-settings-dialog/keyb
     MatFormFieldModule,
     MatInputModule,
     MatSlideToggleModule,
+    RouterModule.forRoot(routes),
   ],
+  exports: [RouterModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/chess-website-api.service.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChessWebsiteApiService } from './chess-website-api.service';
+import { HttpClientModule } from '@angular/common/http';
+
+describe('ChessWebsiteApiService', () => {
+  let service: ChessWebsiteApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+    });
+    service = TestBed.inject(ChessWebsiteApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/chess-website-api.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs';
+import { Chess } from 'chess.js';
+import { HttpClient } from '@angular/common/http';
+
+export interface PuzzleResponse {
+  gamePgn: string;
+  puzzleSolution: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChessWebsiteApiService {
+  constructor(public http: HttpClient) {}
+
+  loadLichessPuzzle() {
+    return this.http.get('https://lichess.org/api/puzzle/daily').pipe(
+      map((response: any) => {
+        console.log(response);
+        return {
+          gamePgn: response.game.pgn,
+          puzzleSolution: response.puzzle.solution,
+        };
+      }),
+    );
+  }
+
+  loadChessComPuzzle() {
+    return this.http.get('https://api.chess.com/pub/puzzle/random').pipe(
+      map((response: any) => {
+        console.log(response);
+        const chess = new Chess();
+        chess.loadPgn(response.pgn);
+
+        return {
+          gamePgn: new Chess(response.fen).pgn(),
+          puzzleSolution: chess.history(),
+        };
+      }),
+    );
+  }
+
+  fetchChessPuzzle() {
+    return this.loadChessComPuzzle();
+  }
+}

src/app/game.service.ts

@@ -152,7 +152,7 @@ export class GameService {
     try {
       const pgn = localStorage.getItem('local_game') || '';
       this.game.loadPgn(pgn);
-      this.#logGame();
+      this.#logGame('Game Loaded');
       this.moves = this.game.history().map((h) => new Move(h));
       this.#scrollToLastMove();
     } catch (err) {
@@ -165,17 +165,23 @@ export class GameService {
   clearGame(): void {
     this.game.reset();
     this.moves = [];
+
+    this.#logGame('Game Cleared!');
     this.activeMoveIdx = -1;
     localStorage.removeItem('local_game');
   }
 
-  isGameStored(): boolean {
+  #isGameStored(): boolean {
     return (localStorage.getItem('local_game') || '').length > 0;
   }
 
   // Log Game for Debugging
 
-  #logGame(): void {
-    console.log(this.game.ascii());
+  #logGame(logLabel: string | undefined = undefined): void {
+    let printString = this.game.ascii();
+    if (logLabel) {
+      printString = `${logLabel}\n\n${printString}`;
+    }
+    console.log(printString);
   }
 }

src/app/game/game.component.html

@@ -17,6 +17,6 @@
     </mat-card>
   </div>
   <div class="d-flex p-1 justify-content-center">
-    <app-keyboard> </app-keyboard>
+    <app-keyboard [game]="game"> </app-keyboard>
   </div>
 </div>

src/app/game/game.component.ts

@@ -34,9 +34,7 @@ export class GameComponent {
   ) {
     this.notify = notify;
     this.game = game;
-    if (this.game.isGameStored()) {
-      this.game.fetchGame();
-    }
+    this.game.fetchGame();
   }
 
   onFinish() {

src/app/keyboard/keyboard.component.ts

@@ -5,6 +5,7 @@ import { Move } from '../move';
 import { Keyboard } from '../keyboard';
 import { faGear } from '@fortawesome/free-solid-svg-icons';
 import { GameService } from '../game.service';
+import { PuzzleService } from '../puzzle.service';
 import { MatDialog } from '@angular/material/dialog';
 import { KeyboardSettingsDialogComponent } from '../keyboard-settings-dialog/keyboard-settings-dialog.component';
 
@@ -26,12 +27,10 @@ export class KeyboardComponent implements OnInit {
   moveManager: Move = new Move();
   // Keyboard Settings
   keyboardSettings: KeyboardSettings = { allowSuggestions: false };
+  @Input() game: GameService | PuzzleService | undefined;
 
-  constructor(
-    public game: GameService,
-    public dialog: MatDialog,
-  ) {
-    this.game.setMoveClickCallback((m: Move) => {
+  constructor(public dialog: MatDialog) {
+    this.game?.setMoveClickCallback((m: Move) => {
       this.moveManager.fromString(String(m));
       this.keyboard.extractFromMove(m);
     });
@@ -76,7 +75,7 @@ export class KeyboardComponent implements OnInit {
   }
 
   possibleMoves(): Move[] {
-    if (!this.keyboardSettings.allowSuggestions) {
+    if (!this.keyboardSettings.allowSuggestions || !this.game) {
       return [];
     }
     const possibleMoves = this.game.game
@@ -111,8 +110,8 @@ export class KeyboardComponent implements OnInit {
   }
 
   submit(event: any): void {
-    const result = this.game.makeMove(this.moveManager.clone());
-    if (result.sucess) {
+    const result = this.game?.makeMove(this.moveManager.clone());
+    if (result?.sucess) {
       this.onSubmit.emit(this.moveManager.clone());
       this.keyboard.clearKeyboard();
     } else {

src/app/puzzle.service.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PuzzleService } from './puzzle.service';
+import { HttpClientModule } from '@angular/common/http';
+
+describe('PuzzleService', () => {
+  let service: PuzzleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+    });
+    service = TestBed.inject(PuzzleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});