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

almost finished align page

Browse Source
This commit is contained in:
Ryan Bakkes
2022-01-07 17:00:10 +01:00
parent 6f469a1869
commit aab4593f56
2 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
AuthentesApp/src/app/valuesAlign/valuesAlign.page.html
View File

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

29
AuthentesApp/src/app/valuesAlign/valuesAlign.page.ts
View File

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