adding point counters

src/app/1. features/game/game.component.html

@@ -1,7 +1,12 @@
+<div class="container">
+  <div>Points: {{ earnedPoints$ | async }}</div>
+  <div>Total Points: {{ potentialPoints$ | async }}</div>
+</div>
+
 <div class="container answer-container">
   <div class="word" *ngFor="let answer of answers$ | async" [id]="answer.word">
     <span class="letter" *ngFor="let letter of answer.letters">
-      {{ answer.isRevealed ? letter : "_" }}
+      {{ answer.isFound ? letter : "_" }}
     </span>
   </div>
 </div>

src/app/1. features/game/game.component.ts

@@ -10,7 +10,9 @@ import {
   selectAnswers,
   selectClickableLetters,
   selectClickedLetters,
+  selectEarnedPoints,
   selectMostRecentAnswer,
+  selectPotentialPoints,
 } from 'src/app/2. store/game/game.selectors';
 import { Answer, Letter } from 'src/app/2. store/game/game.state';
 
@@ -23,11 +25,15 @@ export class GameComponent implements OnInit {
   public answers$: Observable<Answer[]>;
   public clickableLetters$: Observable<Letter[]>;
   public clickedLetters$: Observable<Letter[]>;
+  public earnedPoints$: Observable<number>;
+  public potentialPoints$: Observable<number>;
 
   constructor(private readonly store: Store) {
     this.answers$ = this.store.select(selectAnswers);
     this.clickableLetters$ = this.store.select(selectClickableLetters);
     this.clickedLetters$ = this.store.select(selectClickedLetters);
+    this.earnedPoints$ = this.store.select(selectEarnedPoints);
+    this.potentialPoints$ = this.store.select(selectPotentialPoints);
   }
 
   public ngOnInit(): void {

src/app/2. store/game/game.reducer.ts

@@ -17,7 +17,7 @@ export const gameReducer = createReducer(
         // TODO a bit of redundancy here
         word: answer,
         letters: Array.from(answer),
-        isRevealed: false,
+        isFound: false,
       }));
 
       draft.scrambedLetters = Array.from(word).map((letter, index) => ({
@@ -62,7 +62,7 @@ export const gameReducer = createReducer(
       );
 
       if (matchingAnswer) {
-        matchingAnswer.isRevealed = true;
+        matchingAnswer.isFound = true;
         draft.mostRecentAnswer = submittedWord;
       }
 

src/app/2. store/game/game.selectors.ts

@@ -1,6 +1,8 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 import { GameState } from './game.state';
 
+const PointsPerLetter = 10;
+
 export const selectFeature = createFeatureSelector<GameState>('game');
 
 export const selectAnswers = createSelector(
@@ -13,10 +15,25 @@ export const selectClickableLetters = createSelector(selectFeature, (state) =>
 );
 
 export const selectClickedLetters = createSelector(selectFeature, (state) =>
-  state.scrambedLetters.filter((letter) => letter.typedIndex !== undefined)
+  state.scrambedLetters
+    .filter((letter) => letter.typedIndex !== undefined)
+    .sort((a, b) => a.typedIndex! - b.typedIndex!)
 );
 
 export const selectMostRecentAnswer = createSelector(
   selectFeature,
   (state) => state.mostRecentAnswer
 );
+
+export const selectEarnedPoints = createSelector(selectAnswers, (answers) =>
+  answers
+    .filter((answer) => answer.isFound)
+    .reduce((acc, answer) => acc + answer.letters.length * PointsPerLetter, 0)
+);
+
+export const selectPotentialPoints = createSelector(selectAnswers, (answers) =>
+  answers.reduce(
+    (acc, answer) => acc + answer.letters.length * PointsPerLetter,
+    0
+  )
+);

src/app/2. store/game/game.state.ts

@@ -1,7 +1,7 @@
 export interface Answer {
   word: string;
   letters: string[];
-  isRevealed: boolean;
+  isFound: boolean;
 }
 
 export interface Letter {