Add and display stats

Wordle.Api/Wordle.Api/Services/GameService.cs

@@ -54,4 +54,25 @@ public async Task<GameStatsDto> GetGameStats(Game game)
 
         return stats;
     }
+
+    public IQueryable<AllWordStats> StatsForAllWords()
+    {
+        IQueryable<AllWordStats> result = Db.Games
+            .Include(g => g.Word)
+            .GroupBy(g => g.Word!.Text)
+            .Select(g => new AllWordStats()
+            {
+                Word = g.Key,
+                AverageGuesses = g.Average(x => x.Attempts)
+            });
+
+        return result;
+    }
+}
+
+public class AllWordStats()
+{
+    public required string Word { get; set; }
+
+    public double AverageGuesses { get; set; }
 }

wordle-web/pages/index.vue

@@ -1,10 +1,6 @@
 <template>
   <v-container>
-    <v-progress-linear
-      v-if="game.isBusy"
-      color="primary"
-      indeterminate
-    />
+    <v-progress-linear v-if="game.isBusy" color="primary" indeterminate />
     <v-card v-else class="text-center">
       <v-alert
         v-if="game.gameState != GameState.Playing"
@@ -19,6 +15,34 @@
         <v-card-text>
           The word was: <strong>{{ game.secretWord }}</strong>
         </v-card-text>
+        <v-row v-if="game.stats" class="mb-1" justify="center">
+          <v-col cols="auto">
+            <v-progress-circular
+              size="75"
+              width="10"
+              v-model="game.stats.winPercentage"
+            >
+              {{ game.stats.winPercentage }} %
+            </v-progress-circular>
+            <br />
+            <i class="text-caption">
+              Success Rate
+            </i>
+          </v-col>
+          <v-col cols="auto">
+            <v-progress-circular
+              size="75"
+              width="10"
+              :value="game.stats.averageGuessesPercent(game.maxAttempts)"
+            >
+              {{ game.stats.averageGuessesPercent(game.maxAttempts).toFixed(0) }} %
+            </v-progress-circular>
+            <br />
+            <i class="text-caption">
+              Average Guesses
+            </i>
+          </v-col>
+        </v-row>
         <v-btn variant="outlined" @click="game.startNewGame()">
           <v-icon size="large" class="mr-2"> mdi-restart </v-icon> Restart Game
         </v-btn>

wordle-web/scripts/game.ts

@@ -2,6 +2,7 @@ import axios from "~/plugins/axios";
 import { LetterState, type Letter } from "./letter";
 import { Word } from "./word";
 import Axios from "axios";
+import { GameStats } from "./gameStats";
 
 export class Game {
   public maxAttempts: number;
@@ -10,6 +11,7 @@ export class Game {
   public gameState: GameState = GameState.Playing;
   public guessedLetters: Letter[] = [];
   public isBusy: boolean = false;
+  public stats: GameStats | null = null;
 
   private _secretWord: string = "";
   private set secretWord(value: string) {
@@ -32,6 +34,7 @@ export class Game {
     // Reset default values
     this.guessIndex = 0;
     this.guessedLetters = [];
+    this.stats = null;
 
     // Get a word
     if (!word) {
@@ -49,6 +52,7 @@ export class Game {
     }
 
     // Start the game
+    this.gameState = GameState.Playing;
     this.isBusy = false;
   }
 
@@ -125,7 +129,9 @@ export class Game {
         isWin: this.gameState === GameState.Won,
         word: this.secretWord,
       })
-      console.log("Result posted to API: ", result);
+      this.stats = new GameStats();
+      Object.assign(this.stats, result.data);
+      console.log(this.stats);
       this.isBusy = false;
     }
   }

wordle-web/scripts/gameStats.ts

@@ -0,0 +1,15 @@
+export class GameStats {
+  word: string = "";
+  averageGuesses: number = 0;
+  totalTimesPlayed: number = 0;
+  totalWins: number = 0;
+  totalLosses: number = 0;
+
+  get winPercentage() {
+    return ((this.totalWins / this.totalTimesPlayed) * 100).toFixed(0);
+  }
+
+  public averageGuessesPercent(maxAttempts: number) {
+    return this.averageGuesses / maxAttempts * 100
+  }
+}