diff --git a/AuthentesApp/src/app/home/home.page.ts b/AuthentesApp/src/app/home/home.page.ts
index 1285583..737c089 100644
--- a/AuthentesApp/src/app/home/home.page.ts
+++ b/AuthentesApp/src/app/home/home.page.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { ModalsGamePage } from '../modalsGame/modalsGame.page';
@Component({
selector: 'app-home',
@@ -8,28 +8,31 @@ import { Router } from '@angular/router';
})
export class HomePage {
- constructor(private router: Router) {}
+ constructor(private modalsGamePage: ModalsGamePage) {}
- wellnesswheel() {
- console.log("komt wellnesswheel game");
+ async wellnesswheel() {
// On click open modal page
// all modal pages have the same style.
- // Just de steps differ
+ // Just the steps differ
// On clicking "start" check if cookie exists
// if it exists ask if the user wants to restart or continue
// otherwise a cookie will be created with the game information
// Than start the game
+ await this.modalsGamePage.presentModal("Wellnesswheel");
}
- lifeline() {
- console.log("komt lifeline game");
+ async lifeline() {
+ await this.modalsGamePage.presentModal("Lifeline");
}
- beliefs() {
- console.log("komt beliefs game");
+ async beliefs() {
+ await this.modalsGamePage.presentModal("Beliefs");
+ }
+
+ async values() {
+ await this.modalsGamePage.presentModal("Values");
}
- values() {
- this.router.navigateByUrl(`/values`);
- }
+
+
}
diff --git a/AuthentesApp/src/app/modalsGame/modalsGame-routing.module.ts b/AuthentesApp/src/app/modalsGame/modalsGame-routing.module.ts
new file mode 100644
index 0000000..e6d94a8
--- /dev/null
+++ b/AuthentesApp/src/app/modalsGame/modalsGame-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ModalsGamePage } from './modalsGame.page';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ModalsGamePage,
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class ModalsGamePageRoutingModule {}
diff --git a/AuthentesApp/src/app/modalsGame/modalsGame.module.ts b/AuthentesApp/src/app/modalsGame/modalsGame.module.ts
new file mode 100644
index 0000000..898aac7
--- /dev/null
+++ b/AuthentesApp/src/app/modalsGame/modalsGame.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { ModalsGamePage } from './modalsGame.page';
+
+import { ModalsGamePageRoutingModule } from './modalsGame-routing.module';
+
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ ModalsGamePageRoutingModule
+ ],
+ declarations: [ModalsGamePage]
+})
+export class ModalsGamePageModule {}
diff --git a/AuthentesApp/src/app/modalsGame/modalsGame.page.html b/AuthentesApp/src/app/modalsGame/modalsGame.page.html
new file mode 100644
index 0000000..5b51fb9
--- /dev/null
+++ b/AuthentesApp/src/app/modalsGame/modalsGame.page.html
@@ -0,0 +1,27 @@
+
+
+ {{ gameTitle }}
+
+
+ Close
+
+
+
+
+
+
+
+
+ - TODO
+ - ADD
+ - ITEMS
+
+
+
+
+
+
+ Play
+
+
+
diff --git a/AuthentesApp/src/app/modalsGame/modalsGame.page.scss b/AuthentesApp/src/app/modalsGame/modalsGame.page.scss
new file mode 100644
index 0000000..1803a1b
--- /dev/null
+++ b/AuthentesApp/src/app/modalsGame/modalsGame.page.scss
@@ -0,0 +1,8 @@
+#container {
+ text-align: center;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
diff --git a/AuthentesApp/src/app/modalsGame/modalsGame.page.spec.ts b/AuthentesApp/src/app/modalsGame/modalsGame.page.spec.ts
new file mode 100644
index 0000000..eea643a
--- /dev/null
+++ b/AuthentesApp/src/app/modalsGame/modalsGame.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ModalsGamePage } from './modalsGame.page';
+
+describe('HomePage', () => {
+ let component: ModalsGamePage;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ModalsGamePage ],
+ imports: [IonicModule.forRoot()]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ModalsGamePage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ }));
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/AuthentesApp/src/app/modalsGame/modalsGame.page.ts b/AuthentesApp/src/app/modalsGame/modalsGame.page.ts
new file mode 100644
index 0000000..81867be
--- /dev/null
+++ b/AuthentesApp/src/app/modalsGame/modalsGame.page.ts
@@ -0,0 +1,47 @@
+import { Component, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { ModalController } from '@ionic/angular';
+
+@Injectable({
+ providedIn: 'root'
+ })
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'modalsGame.page.html',
+ styleUrls: ['modalsGame.page.scss'],
+})
+export class ModalsGamePage {
+
+ constructor(private router: Router, public modalController: ModalController) {}
+
+ async presentModal(game: string) {
+ const modal = await this.modalController.create({
+ component: ModalsGamePage,
+ cssClass: 'my-custom-class',
+ componentProps: {
+ 'gameTitle': game,
+ }
+ });
+ return await modal.present();
+ }
+
+ dismiss() {
+ // using the injected ModalController this page
+ // can "dismiss" itself and optionally pass back data
+ this.modalController.dismiss({
+ 'dismissed': true
+ });
+ }
+
+ play(game: string) {
+ // check if game cookie exists
+ // create cookie with data if non existing
+ // continue or restart with cookie
+
+ // when all the steps are done and clicked on play, dismiss modal and open page
+ this.dismiss();
+ // routing is in lowercase, set text to lower
+ this.router.navigateByUrl(`/${game.toLowerCase()}`);
+ }
+}