feat: Work on hints, drawing cards until set is available

frontend/src/app/card/card.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, input, Input, OnInit } from '@angular/core';
 import { Card, CardColor, CardCount, CardShade, CardShape } from '../models/card';
 
 @Component({

frontend/src/app/game/game.component.html

@@ -15,6 +15,19 @@
           <button class="red" (click)="deleteGame()">
             Delete Game
           </button>
+          <button class="red" (click)="showHint()">hint</button>
+        <div class="flex flex-row h-[40px] items-center">
+          <p class="font-bold mr-5 flex">Hint</p>
+          @for(card of hint; track card.id) {
+            <game-card 
+              [card]="card" 
+              [selected]="false"
+              [small]="true"
+              (click)="selectCard(card)"
+            />
+          }
+        </div>
+        
         <p>
           <span class="font-bold">Deck Size</span> 
           <span class="float-right">{{ gameService.stats().size }}</span>
@@ -39,6 +52,23 @@
             />
           }
       </div>
+      <div>
+        <h1 class="font-bold">Available Sets</h1>
+        <div class="flex flex-wrap">
+          @for(row of this.gameService.possibleSets; track row) {
+            <div class="w-full flex flex-wrap">
+                <p class="font-bold mr-5 flex items-center">Set {{$index + 1}}</p>
+              @for(card of row; track card.id) {
+                <game-card 
+                [card]="card" 
+                [selected]="false"
+                [small]="true"
+                (click)="selectCard(card)"
+                />
+              }
+            </div>
+          }
+        </div>
       </div>
     </div>
   </div>

frontend/src/app/game/game.component.ts

@@ -14,6 +14,7 @@ import { ActivatedRoute, UrlSegment, Router } from '@angular/router';
 
 export class GameComponent {
   gameId: string = '';
+  hint: Card[] = []
 
   constructor(public gameService: GameService, private route: ActivatedRoute, private router: Router) {
     this.route.params.subscribe(params => {
@@ -39,8 +40,14 @@ export class GameComponent {
     this.returnHome();
   }
 
-  selectCard(card: Card) {
+  async selectCard(card: Card) {
     this.gameService.selectCard(card);
     card.selected = !card.selected;
   }
+
+  async showHint() {
+    if (this.gameService.possibleSets.length < 0) return console.error('No valid sets found');
+
+    this.hint = [this.gameService.possibleSets[0][0], this.gameService.possibleSets[0][1]]
+  }
 }

frontend/src/service/game/game.service.ts

@@ -7,6 +7,7 @@ import axios from 'axios';
 export class GameService {
   public deck: Card[] = [];
   public hand: Card[] = [];
+  public possibleSets: Card[][] = [];
 
   public gameId: number = 0;
   public fails: number = 0;
@@ -39,6 +40,7 @@ export class GameService {
       this.startDate = new Date(req.data.startedAt);
       this.fails = req.data.fails;
       this.gameId = req.data.id;
+      await this.updateSets();
     
       return req.data.id;
 
@@ -57,6 +59,9 @@ export class GameService {
       this.startDate = new Date(res.data.startedAt);
       this.fails = res.data.fails;
       this.gameId = res.data.id;
+
+      await this.updateSets();
+
       return res.data.id;
   }
 
@@ -78,8 +83,18 @@ export class GameService {
     }
   }
 
+  public async updateSets(): Promise<Card[][]> {
+    const req = await axios.get('http://localhost:5224/api/v1/Games/SetsInHand/' + this.gameId);
+    const cards = req.data.map((set: number[]) => set.map((card: number) => this.hand[card]));
+
+    this.possibleSets = cards;
+
+    return cards;
+  }
+
 
   private isSet(cards: number[]): boolean {
+    console.log(this.possibleSets);
     // return (['shape', 'color', 'count', 'shade'] as (keyof Card)[]).every(attr => {
     //   const values = new Set([card1[attr], card2[attr], card3[attr]]);
     //   return values.size === 1 || values.size === 3;
@@ -89,6 +104,7 @@ export class GameService {
       this.hand = response.data.newState.hand.map((card: number) => toCard(card));
       this.deck = response.data.newState.deck.map((card: number) => toCard(card));
       this.fails = response.data.newState.fails;
+      this.updateSets();
       return response.data.isSet;
     });