Spekulaas/PortfolioApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finished initializing cards from storage

Browse Source
This commit is contained in:
Ryan Bakkes 2022-01-03 02:03:00 +01:00
parent 0c38be47b9
commit 0610c8b76f
5 changed files with 101 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
AuthentesApp/src/app/app.component.ts
View File

@ -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) {
// platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusbar.hide();
constructor(private statusbar: StatusBar, private platform: Platform, private storage: StorageService) {}
async ngOnInit() {
await this.platform.ready();
console.log("[App] Initializing Authentes app...");
this.statusbar.hide();
await this.storage.init();
}
}

41
AuthentesApp/src/app/modalsGame/modalsGame.page.ts
View File

@ -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));
console.log("pardon?");
switch(await this.game.checkGameStorage(game)){
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()}`);
}

43
AuthentesApp/src/app/services/game.service.ts
View File

@ -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 "storage found";
}
return await this.alert.presentAlertConfirm("Game found", "Do u want to continue or restart?", "restart", "continue");
}
// 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"];
}
}

6
AuthentesApp/src/app/values/values.page.html
View File

@ -35,8 +35,8 @@
<div class="values-cards">
<div #card class="values-card" (transitionend)="handleShift()" *ngFor="let card of cardset; let i = index"
[ngStyle]="{ zIndex: cardset.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }">
<div #card class="values-card" (transitionend)="handleShift()" *ngFor="let card of this.game.cardset; let i = index"
[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

87
AuthentesApp/src/app/values/values.page.ts
View File

@ -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");