added values align page

AuthentesApp/src/app/values/values.page.ts

@@ -180,8 +180,9 @@ export class ValuesPage {
 
       // go to rearrange page
       if(this.game.cardset.length <= 5){
-        await this.game.saveGameStorage("Values", "Alligning", "cards", this.game.cardset);
+        await this.game.saveGameStorage("Values", "Align", "cards", this.game.cardset);
         await this.alertService.presentAlert("Cards selected","INSTRUCTIONS WILL COME HERE");
+        this.router.navigateByUrl(`/valuesAlign`);
         console.log("SYNC TO NEXT PAGE");
       }
     };

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

@@ -12,4 +12,36 @@
     <img class="logo_light" src="assets/logo-authentes-white.png" />
   </div>
   
+  <ion-list>
+    <ion-list-header> Aligned with your vision? </ion-list-header>
+
+    <ion-item *ngFor="let card of this.game.cardset;">
+      <ion-avatar slot="start">
+        <img src="./avatar-finn.png" />
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ card.title }}</h2>
+      </ion-label>
+
+      <div class="values-buttons">
+
+        <button (click)="userClickedButton($event, false)">
+          <svg width="30px" 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"
+              fill="#CDD6DD" />
+          </svg>
+        </button>
+
+        <button (click)="userClickedButton($event, true)">
+          <svg width="30px" 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"
+              fill="var(--ion-color-primary)" />
+          </svg>
+        </button>
+
+      </div>
+    </ion-item>
+  </ion-list>
 </ion-content>

AuthentesApp/src/app/valuesAlign/valuesAlign.page.scss

@@ -6,3 +6,15 @@
   top: 50%;
   transform: translateY(-50%);
 }
+
+.values-buttons button {
+  border-radius: 50%;
+  // line-height: 50px;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: var(--ion-color-item-background);
+  display: inline-block;
+  padding-top: 5px;
+  margin: 10px 12px;
+}

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 { GameService } from '../services/game.service';
 
 @Component({
   selector: 'app-home',
@@ -9,5 +10,5 @@ import { GestureController } from '@ionic/angular';
 })
 export class ValuesAlignPage {
 
-  constructor(private router: Router, private renderer: Renderer2, private gestureCtrl: GestureController) {}
+  constructor(private game: GameService) {}
 }