almost finished align page

AuthentesApp/src/app/valuesAlign/valuesAlign.page.html

@@ -20,7 +20,7 @@
         <div class="card-value">
           <!-- add and remove class in ts for the svg images -->
           
-          <div #heart >
+          <div *ngIf="card.value == 1" >
             <svg class="draw-value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
               <svg:path
                 d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
@@ -28,7 +28,7 @@
             </svg>
           </div>
 
-          <div #cross >
+          <div *ngIf="card.value == 2" >
             <svg class="draw-value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
               <svg:path
                 d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
@@ -45,7 +45,7 @@
 
       <div class="values-buttons">
 
-        <button (click)="userClickedButton($event, card.id, false)">
+        <button (click)="userClickedButton(card, 2)">
           <svg width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <svg:path
               d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
@@ -53,7 +53,7 @@
           </svg>
         </button>
 
-        <button (click)='userClickedButton($event, card, true)'>
+        <button (click)='userClickedButton(card, 1)'>
           <svg width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <svg:path
               d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"

AuthentesApp/src/app/valuesAlign/valuesAlign.page.ts

@@ -1,6 +1,7 @@
 import { Component, Input, ViewChildren, QueryList, ElementRef, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { GestureController } from '@ionic/angular';
+import { retry } from 'rxjs/operators';
 import { GameService } from '../services/game.service';
 
 @Component({
@@ -10,5 +11,31 @@ import { GameService } from '../services/game.service';
 })
 export class ValuesAlignPage {
 
-  constructor(private game: GameService) {}
+  constructor(private router: Router, private game: GameService, private renderer: Renderer2) {}
+
+  async checkValues(){
+
+    // check if all cards have a value
+    for(const card of this.game.cardset){
+      if(card.value == 0){
+        return false;
+      }
+    }
+    return true;
+  }
+
+  async userClickedButton(card, value) {
+    // card.value 0 = nothing chosen, 1 = hearts, 2 = cross
+    // get card index from array and change the value
+    const cardIndex = this.game.cardset.findIndex((obj => obj.id == card.id));
+    this.game.cardset[cardIndex].value = value;
+    // check if all cards have a value
+    if(!(await this.checkValues())){
+      return;
+    }
+
+    // User may continue
+    console.log("hihi go go");
+  };
+
 }