created modal pages

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`);
-  }
+
+
 }

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 {}

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 {}

AuthentesApp/src/app/modalsGame/modalsGame.page.html

@@ -0,0 +1,27 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title> {{ gameTitle }} </ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">
+        Close
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <!-- add the rules of the game, step by step -->
+  <ol>
+    <li>TODO</li>
+    <li>ADD</li>
+    <li>ITEMS</li>
+  </ol>
+
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-button (click)="play(gameTitle)" color="primary" size="large" shape="round" expand="block">Play</ion-button>
+  </ion-toolbar>
+</ion-footer>
+

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%);
+}

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<ModalsGamePage>;
+
+  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();
+  });
+});

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()}`);
+  }
+}