Initiated

src/app/app.module.ts

@@ -14,6 +14,8 @@ import { DoomPage } from '../pages/doom/doom';
 import { NormalPage } from '../pages/normal/normal';
 import { EasyPage } from '../pages/easy/easy';
 import { NavPage } from '../pages/nav/nav';
+import { RecordPage } from '../pages/record/record';
+import { InitiatedPage } from '../pages/initiated/initiated';
 
 import { TrophyComponent } from '../components/trophy/trophy';
 
@@ -25,6 +27,8 @@ import { TrophyComponent } from '../components/trophy/trophy';
     HardPage,
     DoomPage,
     NavPage,
+    RecordPage,
+    InitiatedPage,
     TrophyComponent
   ],
   imports: [
@@ -39,7 +43,9 @@ import { TrophyComponent } from '../components/trophy/trophy';
     NormalPage,
     HardPage,
     DoomPage,
-    NavPage
+    NavPage,
+    RecordPage,
+    InitiatedPage
   ],
   providers: [
     StatusBar,

src/assets/stylesheets/pages/game.scss

@@ -1,4 +1,4 @@
-page-easy, page-normal, page-hard, page-doom {
+page-easy, page-normal, page-hard, page-doom, page-initiated {
   .header-md::after{
     background-image: none !important;
   }

src/pages/doom/doom.ts

@@ -78,6 +78,7 @@ export class DoomPage {
   }
   shareScore(): void {
     this.shareService.shareScreenshot();
+    this.storage.set('sharing_score', 1);
   }
   ngOnInit(): void {
     if(this.fail === 1) this.reset();

src/pages/easy/easy.ts

@@ -73,6 +73,7 @@ export class EasyPage {
   }
   shareScore(): void {
     this.shareService.shareScreenshot();
+    this.storage.set('sharing_score', 1);
   }
   ngOnInit(): void {
     if(this.fail === 1) this.reset();

src/pages/hard/hard.ts

@@ -117,6 +117,7 @@ export class HardPage {
   }
   shareScore(): void {
     this.shareService.shareScreenshot();
+    this.storage.set('sharing_score', 1);
   }
   ngOnInit(): void {
     if(this.fail === 1) this.reset();

src/pages/initiated/initiated.html

@@ -0,0 +1,43 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>
+        <span class='question'></span><span class='point'>{{point}}</span>
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <div *ngFor='let color of colors; trackBy: index;  let i = index;' [ngStyle]="{'background':color}" class="color" (click)="checkResponse(color)" >
+    <span class="colorsName" [ngClass]="{'colorsNameFailure': (fail)}">{{colorsName[i]}}</span>
+    <img src="assets/img/response.svg" class="check-response" *ngIf='fail && color == goodColor'>
+  </div>
+  <div class="start-block" [hidden]="!fail">
+    <div class='score-container' [hidden]="bestPoint">
+      <div class="show-point">
+          <div class="circle">
+            <h1>{{point}}</h1>
+            <h2>Best : {{record}}</h2>
+          </div>
+      </div>
+    </div>
+    <div class='best-score-container' [hidden]="!bestPoint">
+      <trophy class="trophy"></trophy>
+      <div class="score-trophy">
+        {{point}}
+      </div>
+    </div>
+    <div class="content-restart">
+      <button ion-button block (click)="goToNavPage()">
+        <ion-icon ios="ios-home" md="md-home"></ion-icon>
+      </button>
+      <button ion-button block (click)="ngOnInit()">
+        <ion-icon ios="ios-refresh" md="md-refresh"></ion-icon>
+      </button>
+      <button ion-button block (click)='shareScore();'>
+        <ion-icon ios="ios-share" md="md-share"></ion-icon>
+      </button>
+    </div>
+
+  </div>
+
+</ion-content>

src/pages/initiated/initiated.scss

@@ -0,0 +1,21 @@
+page-initiated {
+  @include border-difficulty($initiated-color-primary);
+  @include toolbar-border($initiated-color-secondary);
+
+  .color {
+    display: flex;
+    justify-content:center !important;
+    align-content:center !important;
+    align-items: center !important;
+  }
+  .colorsName {
+    color: $secondary-color;
+    font-size:20px;
+    background-color: $primary-color;
+    padding: 8px;
+    border-radius: 5px;
+  }
+  .colorsNameFailure {
+    opacity: 0.4;
+  }
+}

src/pages/initiated/initiated.ts

@@ -0,0 +1,156 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from 'ionic-angular';
+import { ShareService} from '../../providers/share-service';
+import { Storage } from '@ionic/storage';
+
+
+@Component({
+  selector: 'page-initiated',
+  templateUrl: 'initiated.html'
+})
+export class InitiatedPage {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private shareService: ShareService, private storage: Storage) {
+  }
+
+  readonly possible: Array<string> = [
+  "red","yellow","green","blue","brown","grey","purple"
+  ];
+  readonly red: Array<string> = [
+  "LightSalmon","DarkSalmon","LightCoral","IndianRed","Crimson","Red","FireBrick","DarkRed"
+  ];
+  readonly yellow: Array<string> = [
+  "Gold","Yellow","LightYellow","LemonChiffon","PapayaWhip","Moccasin","PaleGoldenRod","Khaki","DarkKhaki"
+  ];
+  readonly green: Array<string> = [
+  "GreenYellow","Chartreuse","LimeGreen","Lime","PaleGreen","SpringGreen","SeaGreen","Green","ForestGreen","YellowGreen","Olive"
+  ];
+  readonly blue: Array<string> = [
+  "Cyan","Aquamarine","Turquoise","SteelBlue","CadetBlue","SkyBlue","RoyalBlue","Blue","Navy"
+  ];
+  readonly brown: Array<string> = [
+  "BurlyWood","GoldenRod","Chocolate","SaddleBrown","Brown","Maroon","Sienna","SandyBrown","DarkGoldenRod"
+  ];
+  readonly grey: Array<string> = [
+  "Gainsboro","Silver","DarkGray","DimGray","Gray","SlateGray","DarkSlateGray","Black"
+  ];
+  readonly purple: Array<string> = [
+  "Orchid","Fuchsia","DarkOrchid","BlueViolet","Purple","MediumPurple","MediumSlateBlue","DarkSlateBlue","Indigo"
+  ];
+
+  colorType: string = "";
+  point: number = 0;
+  bestPoint: boolean;
+  readonly nbColors: number[] = [2, 4, 6, 8, 10];
+  difficulty: number = 0;
+  goodColor: string = "";
+  colors: Array<string> = [];
+  colorsName: Array<string> = [];
+  fail: number = 0;
+  record: number;
+  random:number;
+
+  getRandomInt(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  generateColorCode(type): string {
+    switch(type) {
+      case "red": {
+        return this.red[this.getRandomInt(0, this.red.length - 1)];
+      }
+      case "blue": {
+        return this.blue[this.getRandomInt(0, this.blue.length - 1)];
+      }
+      case "yellow": {
+        return this.yellow[this.getRandomInt(0, this.yellow.length - 1)];
+      }
+      case "brown": {
+        return this.brown[this.getRandomInt(0, this.brown.length - 1)];
+      }
+      case "green": {
+        return this.green[this.getRandomInt(0, this.green.length - 1)];
+      }
+      case "grey": {
+        return this.grey[this.getRandomInt(0, this.grey.length - 1)];
+      }
+      case "purple": {
+        return this.purple[this.getRandomInt(0, this.purple.length - 1)];
+      }
+    }
+  }
+
+  setDifficulty(): number {
+    if (this.point === 0 && this.point < 5)   return this.difficulty = 0;
+    if (this.point >= 5 && this.point < 10)   return this.difficulty = 1;
+    if (this.point >= 10)                     return this.difficulty = 2;
+  }
+  checkResponse(userChoice: string): void {
+    if(userChoice != this.goodColor){
+      this.wrongResponse();
+      return;
+    }
+    this.point++;
+    this.ngOnInit();
+  }
+  wrongResponse(): void {
+    this.fail = 1;
+    this.defineBestScore();
+  }
+  isColorAlreadyChoose(obj: string, colorname: string): boolean {
+    if (colorname == obj)
+    {
+      return true;
+    }
+    return false;
+  }
+  defineBestScore(): void {
+    this.storage.get('bestScoreInitiated').then((val) => {
+      if (val == null || this.point > val) {
+        this.storage.set('bestScoreInitiated', this.point);
+        this.bestPoint = true;
+      }
+      this.record = val;
+    });
+  }
+  reset(): void {
+    this.point = 0;
+    this.fail = 0;
+    this.bestPoint = false;
+  }
+  shareScore(): void {
+    this.shareService.shareScreenshot();
+  }
+  ngOnInit(): void {
+    if(this.fail === 1) this.reset();
+
+    this.colors = [];
+    this.colorsName = [];
+    this.setDifficulty();
+
+    let nb_color: number = this.nbColors[this.difficulty];
+    let color: string = "";
+    let colorname: string = "";
+
+    this.colorType = this.possible[this.getRandomInt(0, this.possible.length - 1)];
+    for(let k:number = 1 ; k <= nb_color; k++){
+      do
+      {
+        color = this.generateColorCode(this.colorType);
+        colorname = this.generateColorCode(this.colorType);
+      } while(this.isColorAlreadyChoose(color, colorname) === true)
+      this.colors.push(color);
+      this.colorsName.push(colorname);
+    }
+
+    this.random = Math.floor(Math.random() * this.colors.length)
+    this.goodColor = this.colors[this.random];
+    this.colorsName[this.random] = this.goodColor;
+
+  }
+  goToNavPage(): void {
+    this.navCtrl.pop()
+  }
+  ionViewWillLeave(): void {
+    this.navParams.get("parentPage").ngOnInit();
+  }
+}

src/pages/nav/nav.html

@@ -1,5 +1,6 @@
 <ion-content>
-  <ion-slides loop="false" autoplay="false" zoom="false" pager='true'>
+<img class="record" src="assets/img/reward-circle.svg" (click)="goToRecordPage()">
+<ion-slides loop="false" autoplay="false" zoom="false" pager='true'>
     <ion-slide class='nav1 nav'>
       <div class="header-page">
         <h1>Easy mode</h1>
@@ -67,11 +68,34 @@ <h1>Hard mode</h1>
         </div>
       </div>
       <div class="helper" *ngIf="helpHard">
-        <span>Trouvez la bonne couleur à partir de son nom en haut de l'écran en moins de 3 secondes !</span>
+        <span>Trouvez la bonne couleur à partir de son nom en haut de l'écran !</span>
+      </div>
+    </ion-slide>
+
+    <ion-slide class='nav4 nav'>
+      <div class='page-lock' *ngIf="!sharingScore && sharingScore != 1">Nécessite d'avoir partagé un score</div>
+      <div class="header-page">
+        <h1>Initiated mode</h1>
+        <div class="img-level">
+          <img src="assets/img/initiated.svg">
+        </div>
+      </div>
+      <div class="sub-button">
+        <div class="ico-block">
+          <div class="btn-play" (click)="goToInitiatedPage()">
+            <ion-icon ios="md-play" md="md-play"></ion-icon>
+          </div>
+          <div class="btn-help" (click)="toggleHelp('initiated')" [ngClass]="{'active': initiated}">
+            <ion-icon ios="md-help" md="md-help"></ion-icon>
+          </div>
+        </div>
+      </div>
+      <div class="helper" *ngIf="helpInitiated">
+        <span>Trouvez la bonne combinaison nom / couleur parmis les choix proposé.</span>
       </div>
     </ion-slide>
 
-    <ion-slide class='nav4 nav' *ngIf="recordHard >= 15">
+    <ion-slide class='nav5 nav' *ngIf="recordHard >= 15">
       <div class="header-page">
         <h1>Doom mode</h1>
         <div class="img-level">