From 425f30a8eb0fddcda2523c20f8183ab2e33a2c3b Mon Sep 17 00:00:00 2001 From: spekulaas Date: Sat, 25 Dec 2021 17:10:40 +0100 Subject: [PATCH] created modal pages --- AuthentesApp/src/app/home/home.page.ts | 27 ++++++----- .../modalsGame/modalsGame-routing.module.ts | 16 +++++++ .../src/app/modalsGame/modalsGame.module.ts | 19 ++++++++ .../src/app/modalsGame/modalsGame.page.html | 27 +++++++++++ .../src/app/modalsGame/modalsGame.page.scss | 8 ++++ .../app/modalsGame/modalsGame.page.spec.ts | 24 ++++++++++ .../src/app/modalsGame/modalsGame.page.ts | 47 +++++++++++++++++++ 7 files changed, 156 insertions(+), 12 deletions(-) create mode 100644 AuthentesApp/src/app/modalsGame/modalsGame-routing.module.ts create mode 100644 AuthentesApp/src/app/modalsGame/modalsGame.module.ts create mode 100644 AuthentesApp/src/app/modalsGame/modalsGame.page.html create mode 100644 AuthentesApp/src/app/modalsGame/modalsGame.page.scss create mode 100644 AuthentesApp/src/app/modalsGame/modalsGame.page.spec.ts create mode 100644 AuthentesApp/src/app/modalsGame/modalsGame.page.ts 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 + + + + + + + +
    +
  1. TODO
    2. +
  2. ADD
    3. +
  3. ITEMS
    4. +
+ + + + + + 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()}`); + } +}