finished initializing cards from storage

AuthentesApp/src/app/app.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Platform } from '@ionic/angular';
+import { StorageService } from './services/storage.service';
 
 @Component({
   selector: 'app-root',
@@ -7,11 +9,13 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
-  constructor(statusbar: StatusBar) {
+  constructor(private statusbar: StatusBar, private platform: Platform, private storage: StorageService) {}
-    // platform.ready().then(() => {
+
-    // Okay, so the platform is ready and our plugins are available.
+  async ngOnInit() {
-    // Here you can do any higher level native things you might need.
+    await this.platform.ready();
-    statusbar.hide();
+    console.log("[App] Initializing Authentes app...");
+    this.statusbar.hide();
+    await this.storage.init();
 
   }
 }

AuthentesApp/src/app/modalsGame/modalsGame.page.ts

@@ -39,10 +39,47 @@ export class ModalsGamePage {
     // check if game cookie exists
     // create cookie with data if non existing
     // continue or restart with cookie
-    await console.log(this.game.checkGameStorage(game));
+    switch(await this.game.checkGameStorage(game)){
-    console.log("pardon?");
+      case "continue":{
+        // dont have to do anything cookie already exists
+        break;
+      }
+      case "create":{
+        //create game storage
+        await this.game.createGameStorage(game);
+        break;
+      } 
+      case "restart":{
+        // remove and create a new cookie
+        await this.game.removeGameStorage(game);
+        await this.game.createGameStorage(game);
+        break;
+      }
+      default:{
+        // stay in modal do nothing
+        return;
+      }
+    }
+
     // when all the steps are done and clicked on play, dismiss modal and open page
     this.dismiss();
+
+    // initialize the corrosponding game
+    switch (game) {
+      case "Wellnesswheel":
+        
+        break;
+      case "Lifeline":
+      
+        break;
+      case "Beliefs":
+      
+        break;
+      case "Values":
+        await this.game.initValuesGame();
+        break;
+    }
+
     // routing is in lowercase, set text to lower
     this.router.navigateByUrl(`/${game.toLowerCase()}`);
   }

AuthentesApp/src/app/services/game.service.ts

@@ -1,23 +1,56 @@
 import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
 import { StorageService } from './storage.service';
 import { AlertService } from './alert.service';
 
+interface ValuesCard {
+  title: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class GameService {
   
+  cardset: Array<ValuesCard> = [];
+
   constructor(private storage: StorageService, private alert: AlertService) {}
 
+  // main functions for all the games
   public async checkGameStorage(game: string){
 
     if(await this.storage.get(`${game.toUpperCase()}GAME_TOKEN`)){
       // continue or restart
-      console.log(await this.alert.presentAlertConfirm("Game found", "Do u want to continue or restart?", "restart", "continue"));
+      return await this.alert.presentAlertConfirm("Game found", "Do u want to continue or restart?", "restart", "continue");
-      return "storage found";
     }
     // standard create new 
-    return "no storage";
+    return "create";
+  }
 
+  public async removeGameStorage(game: string){
+    await this.storage.remove(`${game.toUpperCase()}GAME_TOKEN`);
+  }
+
+  // finish when backend is completed 
+  public async createGameStorage(game: string){
+    // return await this.http.post(`${config.endpoint}/...`, data).pipe(
+        
+    //   map((data) => {
+
+    //     if (data["Status"] == "Success") {
+    //       console.log(data["Data"]);
+          await this.storage.set(`${game.toUpperCase()}GAME_TOKEN`, { status: "sorting", cards:[{"title":"Temp_card_1"}, {"title":"Temp_card_2"}, {"title":"Temp_card_3"}, {"title":"Temp_card_4"}, {"title":"Temp_card_5"}, {"title":"Temp_card_6"}, {"title":"Temp_card_7"}, {"title":"Temp_card_8"}]});
+    //     }
+    //     return data;
+    //   }),
+      
+    // ).toPromise();
+  }
+
+  public async initValuesGame(){
+    console.log("[GameService] Initializing Value game...");
+    this.cardset = await this.storage.get("VALUESGAME_TOKEN");
+    console.log(this.cardset["cards"]);
+    this.cardset = this.cardset["cards"];
   }
 }

AuthentesApp/src/app/values/values.page.html

@@ -35,8 +35,8 @@
   
     <div class="values-cards">
   
-        <div #card class="values-card" (transitionend)="handleShift()" *ngFor="let card of cardset; let i = index"
+        <div #card class="values-card" (transitionend)="handleShift()" *ngFor="let card of this.game.cardset; let i = index"
-            [ngStyle]="{ zIndex: cardset.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }">
+            [ngStyle]="{ zIndex: this.game.cardset.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }">
   
             <h3>{{ card.title }}</h3>
             <p>{{ card.description }}</p>
@@ -46,7 +46,7 @@
     </div>
   
     <div class="values-buttons">
-      <p>{{ cardset.length }} / 5</p>
+      <p>{{ this.game.cardset.length }} / 5</p>
       <button (click)="userClickedButton($event, false)">
           <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
               <svg:path

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

@@ -2,6 +2,7 @@ import { Component, Input, ViewChildren, QueryList, ElementRef, EventEmitter, Ou
 import { Router } from '@angular/router';
 import { GestureController } from '@ionic/angular';
 import { AlertService } from '../services/alert.service';
+import { GameService } from '../services/game.service';
 
 @Component({
   selector: 'app-home',
@@ -10,69 +11,6 @@ import { AlertService } from '../services/alert.service';
 })
 export class ValuesPage {
 
-  cardset = [
-    {
-      img: "https://placeimg.com/300/300/people",
-      title: "Demo card 1",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/animals",
-      title: "Demo card 2",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/nature",
-      title: "Demo card 3",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/tech",
-      title: "Demo card 4",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/arch",
-      title: "Demo card 5",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/arch",
-      title: "Demo card 6",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/people",
-      title: "Demo card 1",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/animals",
-      title: "Demo card 2",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/nature",
-      title: "Demo card 3",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/tech",
-      title: "Demo card 4",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/arch",
-      title: "Demo card 5",
-      description: "This is a demo for Tinder like swipe cards"
-    },
-    {
-      img: "https://placeimg.com/300/300/arch",
-      title: "Demo card 6",
-      description: "This is a demo for Tinder like swipe cards"
-    }
-  ]
-
   @ViewChildren('card') cards: QueryList<ElementRef>;
   cardsArray: Array<ElementRef>;
 
@@ -81,7 +19,6 @@ export class ValuesPage {
 
 
   @Output() choiceMade = new EventEmitter();
-
   moveOutWidth: number;
   shiftRequired: boolean;
   transitionInProgress: boolean;
@@ -89,7 +26,7 @@ export class ValuesPage {
   heartVisible: boolean;
   crossVisible: boolean;
 
-  constructor(private router: Router, private renderer: Renderer2, private gestureCtrl: GestureController, public alertService: AlertService) {}
+  constructor(private router: Router, private renderer: Renderer2, private gestureCtrl: GestureController, public alertService: AlertService, public game: GameService, public alert: AlertService) {}
 
   ngAfterViewInit() {
     this.moveOutWidth = document.documentElement.clientWidth * 1.5;
@@ -110,7 +47,7 @@ export class ValuesPage {
         el: card.nativeElement,
         gestureName: 'swiping',
         onMove: event => {
-          if (event.deltaX === 0 || !this.cardset.length) return;
+          if (event.deltaX === 0 || !this.game.cardset.length) return;
       
           // is transitioning stop swiper availability
           if (this.transitionInProgress) {
@@ -141,7 +78,7 @@ export class ValuesPage {
           // remove indicators
           this.toggleChoiceIndicator(false,false);
 
-          if (!this.cardset.length) return;
+          if (!this.game.cardset.length) return;
       
           this.renderer.removeClass(card.nativeElement, 'moving');
 
@@ -167,7 +104,7 @@ export class ValuesPage {
       
             // do actual stuff with the card
             this.shiftRequired = true;
-            this.emitChoice(!!(event.deltaX > 0), this.cardset[0]);
+            this.emitChoice(!!(event.deltaX > 0), this.game.cardset[0]);
             this.isHearts = !!(event.deltaX > 0);
           }
 
@@ -182,7 +119,7 @@ export class ValuesPage {
 
   async userClickedButton(event, heart) {
     event.preventDefault();
-    if (!this.cardset.length) return false;
+    if (!this.game.cardset.length) return false;
     // if value is true than its a heart
     if (heart) {
 
@@ -192,7 +129,7 @@ export class ValuesPage {
       this.toggleChoiceIndicator(false,true);
 
       // set state of the card
-      this.emitChoice(heart, this.cardset[0]);
+      this.emitChoice(heart, this.game.cardset[0]);
       this.isHearts = true;
     } else {
       // fade away the card
@@ -201,7 +138,7 @@ export class ValuesPage {
       this.toggleChoiceIndicator(true,false);
      
       // set state of the card
-      this.emitChoice(heart, this.cardset[0]);
+      this.emitChoice(heart, this.game.cardset[0]);
       this.isHearts = false;
     };
 
@@ -236,14 +173,14 @@ export class ValuesPage {
       this.shiftRequired = false;
       // If the answer is true keep in stack
       if(this.isHearts){
-        this.cardset[this.cardset.push(this.cardset.shift())-1];
+        this.game.cardset[this.game.cardset.push(this.game.cardset.shift())-1];
       }else{
-        this.cardset.shift();
+        this.game.cardset.shift();
       }
 
-      console.log(this.cardset.length);
+      console.log(this.game.cardset.length);
       // go to rearrange page
-      if(this.cardset.length <= 5){
+      if(this.game.cardset.length <= 5){
         console.log("may remove");
         await this.alertService.presentAlert("Cards selected","INSTRUCTIONS WILL COME HERE");
         console.log("SYNC TO NEXT PAGE");