feat: Display scores next to player names and add filters in Game Arc…

…hives page

README.md

@@ -37,6 +37,16 @@ Welcome to the source code repository for the new LCC website! Here you'll find
 | 🐛  | Bug fixes                         |
 | 🔧  | Behind-the-scenes changes         |
 
+<details>
+<summary style="cursor: pointer">
+v4.0.6 - August 4th, 2024
+</summary>
+
+- 🚀 Display scores next to players' names in the PGN viewer component
+- 🚀 Add the ability to filter games in the Game Archives page by first/last name, whether the player was White or Black, and the number of moves 
+
+</details>
+
 <details>
 <summary style="cursor: pointer">
 v4.0.5 - July 5th, 2024

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lcc-angular",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Frontend for the London Chess Club website, built with Angular",
   "author": "Michal Wiraszka (https://wiraszka.com)",
   "repository": {

src/app/components/pgn-viewer/pgn-viewer.component.html

@@ -1 +1 @@
-<div [id]="'pgn-viewer-' + index"></div>
+<div [id]="viewerId"></div>

src/app/components/pgn-viewer/pgn-viewer.component.ts

@@ -1,26 +1,87 @@
 import LichessPgnViewer from 'lichess-pgn-viewer';
 
 import { DOCUMENT } from '@angular/common';
-import { AfterViewInit, Component, Inject, Input } from '@angular/core';
+import { AfterViewInit, Component, Inject, Input, OnInit } from '@angular/core';
+
+import { getPlayerName, getScore } from '@app/utils/pgn-utils';
 
 @Component({
   selector: 'lcc-pgn-viewer',
   templateUrl: './pgn-viewer.component.html',
-  styleUrls: ['./pgn-viewer.component.scss'],
 })
-export class PgnViewerComponent implements AfterViewInit {
-  @Input() pgn?: string;
-  @Input() index!: number;
+export class PgnViewerComponent implements OnInit, AfterViewInit {
+  viewerId!: string;
 
-  container: HTMLElement | null = null;
+  @Input() index!: number;
+  @Input() label!: string;
+  @Input() pgn!: string;
 
   constructor(@Inject(DOCUMENT) private _document: Document) {}
 
+  ngOnInit(): void {
+    this.viewerId = `pgn-viewer--${this.label}--${this.index}`;
+  }
+
   ngAfterViewInit(): void {
-    this.container = this._document.getElementById(`pgn-viewer-${this.index}`);
-    if (this.container) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const _ = LichessPgnViewer(this.container, { pgn: this.pgn });
+    const container = this._document.getElementById(this.viewerId);
+
+    if (container) {
+      const _ = LichessPgnViewer(container, {
+        classes: this.viewerId, // Required for query selectors below
+        initialPly: 'last',
+        orientation: 'white',
+        pgn: this.pgn,
+        showClocks: false,
+      });
+
+      const whiteName = getPlayerName(this.pgn, 'White');
+      if (!whiteName) {
+        console.error(
+          '[LCC] A game with no defined White player was found: \n',
+          this.pgn,
+        );
+        return;
+      }
+
+      const blackName = getPlayerName(this.pgn, 'Black');
+      if (!blackName) {
+        console.error(
+          '[LCC] A game with no defined Black player was found: \n',
+          this.pgn,
+        );
+        return;
+      }
+
+      const whiteScore = getScore(this.pgn, 'White');
+      if (!whiteScore) {
+        console.error(
+          '[LCC] A game with no valid score for White was found: \n',
+          this.pgn,
+        );
+        return;
+      }
+
+      const blackScore = getScore(this.pgn, 'Black');
+      if (!blackScore) {
+        console.error(
+          '[LCC] A game with no valid score for Black was found: \n',
+          this.pgn,
+        );
+        return;
+      }
+
+      const whitePlayerElement = this._document.querySelector(
+        `.${this.viewerId} .lpv__player--bottom > .lpv__player__person`,
+      );
+      const blackPlayerElement = this._document.querySelector(
+        `.${this.viewerId} .lpv__player--top > .lpv__player__person`,
+      );
+
+      whitePlayerElement?.setAttribute('data-name', whiteName);
+      whitePlayerElement?.setAttribute('data-score', whiteScore);
+
+      blackPlayerElement?.setAttribute('data-name', blackName);
+      blackPlayerElement?.setAttribute('data-score', blackScore);
     }
   }
 }

src/app/screens/game-archives/game-archives-screen.component.html

@@ -13,8 +13,7 @@ <h3>A little piece of history...</h3>
       <p>
         Here you will find a collection of games played by London Chess Club members from
         a variety of events dating as far back as 1974. All game PGNs meticulously
-        transcribed and compiled over the years by our very own Gerry Litchfield &mdash;
-        thank you, Gerry!
+        transcribed and compiled over the years by Gerry Litchfield.
       </p>
       <p>
         Want to submit a game or make a correction? Email us at
@@ -28,49 +27,139 @@ <h3>A little piece of history...</h3>
     </div>
   </section>
 
-  <div class="panels-container">
-    @for (panel of expansionPanels; track panel.label) {
-      <div class="panel-content">
-        <lcc-expansion-panel
-          [headerTemplate]="headerTemplateRef"
-          [contentTemplate]="contentTemplateRef"
-          [isOpen]="panel.label === '2023'">
-        </lcc-expansion-panel>
+  <form
+    class="lcc-form game-filter-form"
+    [formGroup]="form">
+    <div class="lcc-form-fields">
+      <label for="name-input">Name</label>
+      <input
+        id="name-input"
+        type="text"
+        name="name"
+        formControlName="name"
+        maxlength="50" />
+
+      <label for="as-white-input">as White</label>
+      <input
+        id="as-white-input"
+        type="checkbox"
+        name="as-white"
+        formControlName="asWhite" />
 
-        <ng-template #headerTemplateRef>
-          <div class="header-content">
-            <span>{{ panel.label }}</span>
-            <span>
-              {{ panel.pgns.length }}
-              {{ panel.pgns.length > 1 ? 'games' : 'game' }}
-            </span>
-          </div>
-        </ng-template>
+      <label for="as-black-input">as Black</label>
+      <input
+        id="as-black-input"
+        type="checkbox"
+        name="as-black"
+        formControlName="asBlack" />
+
+      <label for="name-input">Moves (min)</label>
+      <input
+        id="moves-min-input"
+        type="text"
+        name="moves-min"
+        formControlName="movesMin"
+        maxlength="2" />
+      <div class="lcc-form-error-container">
+        @if (hasError(form.controls['movesMin'])) {
+          <i-feather
+            name="alert-triangle"
+            class="lcc-form-error-icon validation-alert-icon"
+            [tooltip]="getErrorMessage()">
+          </i-feather>
+        }
+      </div>
 
-        <ng-template #contentTemplateRef>
-          <div class="games-container">
-            @defer {
-              <cdk-virtual-scroll-viewport
-                [itemSize]="436"
-                [minBufferPx]="1000"
-                [maxBufferPx]="2000"
-                orientation="horizontal">
-                <lcc-pgn-viewer
-                  *cdkVirtualFor="
-                    let pgn of panel.pgns;
-                    let index = index;
-                    templateCacheSize: 0
-                  "
-                  [index]="index"
-                  [pgn]="pgn">
-                </lcc-pgn-viewer>
-              </cdk-virtual-scroll-viewport>
-            } @placeholder {
-              <span class="loading-text">Loading...</span>
-            }
-          </div>
-        </ng-template>
+      <label for="name-input">Moves (max)</label>
+      <input
+        id="moves-max-input"
+        type="text"
+        name="moves-max"
+        formControlName="movesMax"
+        maxlength="3" />
+      <div class="lcc-form-error-container">
+        @if (hasError(form.controls['movesMax'])) {
+          <i-feather
+            name="alert-triangle"
+            class="lcc-form-error-icon validation-alert-icon"
+            [tooltip]="getErrorMessage()">
+          </i-feather>
+        }
       </div>
+
+      <label for="result-white-won-input">White won</label>
+      <input
+        id="result-white-won-input"
+        type="checkbox"
+        name="result-white-won"
+        formControlName="resultWhiteWon" />
+
+      <label for="result-draw-input">Draw</label>
+      <input
+        id="result-draw-input"
+        type="checkbox"
+        name="result-draw"
+        formControlName="resultDraw" />
+
+      <label for="result-black-won-input">Black won</label>
+      <input
+        id="result-black-won-input"
+        type="checkbox"
+        name="result-black-won-input"
+        formControlName="resultBlackWon" />
+    </div>
+  </form>
+
+  <div class="result-summary-container">
+    {{ searchResultSummaryMessage }}
+  </div>
+
+  <div class="panels-container">
+    @for (group of filteredGames | keyvalue: originalOrder; track group.key) {
+      @if (group.value.length) {
+        <div class="panel-content">
+          <lcc-expansion-panel
+            [headerTemplate]="headerTemplateRef"
+            [contentTemplate]="contentTemplateRef"
+            [isOpen]="group.key === '2023'">
+          </lcc-expansion-panel>
+
+          <ng-template #headerTemplateRef>
+            <div class="header-content">
+              <span>{{ group.key }}</span>
+              <span>
+                {{ group.value.length }}
+                {{ group.value.length > 1 ? 'games' : 'game' }}
+              </span>
+            </div>
+          </ng-template>
+
+          <ng-template #contentTemplateRef>
+            <div class="games-container">
+              @defer {
+                <cdk-virtual-scroll-viewport
+                  [itemSize]="436"
+                  [minBufferPx]="1000"
+                  [maxBufferPx]="2000"
+                  orientation="horizontal">
+                  <lcc-pgn-viewer
+                    *cdkVirtualFor="
+                      let gameDetails of group.value;
+                      let index = index;
+                      templateCacheSize: 0
+                    "
+                    [index]="index"
+                    [label]="group.key"
+                    [pgn]="gameDetails.pgn">
+                  </lcc-pgn-viewer>
+                </cdk-virtual-scroll-viewport>
+              } @placeholder {
+                <span class="loading-text">Loading...</span>
+              }
+            </div>
+          </ng-template>
+        </div>
+      }
     }
   </div>
 </div>

src/app/screens/game-archives/game-archives-screen.component.scss

@@ -59,6 +59,10 @@ $container-max-width: calc($pgn-viewer-width * 3 + 4px * 6);
     }
   }
 
+  .game-filter-form {
+    width: 300px !important;
+  }
+
   .panels-container {
     display: flex;
     flex-direction: column;