Skip to content

Commit

Permalink
init new mode
Browse files Browse the repository at this point in the history
  • Loading branch information
Qboussard committed Jan 17, 2018
1 parent cbd919c commit 22dcab3
Show file tree
Hide file tree
Showing 10 changed files with 8,164 additions and 2 deletions.
7,922 changes: 7,922 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';
import { ShareService } from '../providers/share-service';
import { HardPage } from '../pages/hard/hard';
import { InitiatedPage } from '../pages/initiated/initiated';
import { NormalPage } from '../pages/normal/normal';
import { EasyPage } from '../pages/easy/easy';
import { NavPage } from '../pages/nav/nav';
Expand All @@ -20,6 +21,7 @@ import { TrophyComponent } from '../components/trophy/trophy';
declarations: [
MyApp,
HardPage,
InitiatedPage,
NormalPage,
EasyPage,
NavPage,
Expand All @@ -34,6 +36,7 @@ import { TrophyComponent } from '../components/trophy/trophy';
entryComponents: [
MyApp,
HardPage,
InitiatedPage,
NormalPage,
EasyPage,
NavPage
Expand Down
2 changes: 1 addition & 1 deletion src/assets/stylesheets/pages/game.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
page-easy, page-normal, page-hard{
page-easy, page-normal, page-hard, page-initiated{
.header-md::after{
background-image: none !important;
}
Expand Down
3 changes: 3 additions & 0 deletions src/assets/stylesheets/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,8 @@ $normal-color-other: #0CC6FF;
$hard-color-primary: #F85465;
$hard-color-secondary: #D61834;

$initiated-color-primary:#9b59b6;
$initiated-color-secondary:#8e44ad;

$doom-color-primary: #ffd970;
$doom-color-secondary: #FCC015;
42 changes: 42 additions & 0 deletions src/pages/initiated/initiated.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<ion-header>
<ion-navbar>
<ion-title>
<span class='question'>{{goodColor}}</span><span class='point'>{{point}}</span>
</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<div *ngFor='let color of colors; trackBy: index;' [ngStyle]="{'background':color}" class="color" (click)="checkResponse(color)" >
<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>
4 changes: 4 additions & 0 deletions src/pages/initiated/initiated.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
page-initiated {
@include border-difficulty($initiated-color-secondary);
@include toolbar-border($initiated-color-secondary);
}
143 changes: 143 additions & 0 deletions src/pages/initiated/initiated.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
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"
];
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];
difficulty: number = 0;
goodColor: string = "";
colors: Array<string> = [];
fail: number = 0;
record: 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)];
}
}
}

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): boolean {
if (this.colors.indexOf(obj) !== -1)
{
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.setDifficulty();

let nb_color: number = this.nbColors[this.difficulty];
let color: 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);
} while(this.isColorAlreadyChoose(color) === true)
this.colors.push(color);
}
this.goodColor = this.colors[Math.floor(Math.random() * this.colors.length)];
}
goToNavPage(): void {
this.navCtrl.pop()
}
ionViewWillLeave(): void {
this.navParams.get("parentPage").ngOnInit();
}
}
29 changes: 28 additions & 1 deletion src/pages/nav/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ <h1>Normal mode</h1>
<span>Trouvez la bonne couleur à partir de son nom en haut de l'écran en moins de 3 secondes !</span>
</div>
</ion-slide>


<ion-slide class='nav3 nav'>
<div class='page-lock' *ngIf="recordNormal < 15">Nécéssite un score de 15 en mode Normal</div>
<div class="header-page">
Expand Down Expand Up @@ -178,7 +180,32 @@ <h1>Hard mode</h1>
<span>Trouvez la bonne couleur à partir de son code Hexadécimal en haut de l'écran</span>
</div>
</ion-slide>
<!-- <ion-slide class='nav4 nav'>


<ion-slide class='nav4 nav'>
<div class='page-lock' *ngIf="recordNormal < 15">Nécéssite un score de 15 en mode Normal</div>
<div class="header-page">
<h1>Initiated mode</h1>
<div class="img-level">
<svg id="girl_ico" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345.4 397.61"><title>girl</title><path d="M238.23,313.7a37,37,0,0,1-52.22,0,7.54,7.54,0,1,0-10.67,10.67,52.07,52.07,0,0,0,73.56,0,7.54,7.54,0,1,0-10.67-10.67Z" transform="translate(-39.42 -13.28)" fill="#9b59b6"/><path d="M382.88,388.55c-17.68-19.57-18.43-69.44-16.33-121a39.52,39.52,0,0,0,2.68-54.95c2.57-52.63,3.93-87.83-12.76-120.33-11.39-22.17-29.82-40.7-54.78-55.07a179.36,179.36,0,0,0-95.95-23.76,103.12,103.12,0,0,0-76.14,38c-24.53,1.46-46.85,14.81-58.85,35.44-1,1.77-2,3.59-3,5.41C51.08,124.74,52.44,159.94,55,212.56a39.53,39.53,0,0,0,2.68,54.94C59.79,319.11,59,369,41.36,388.56a7.54,7.54,0,0,0,2.94,12.11,159.16,159.16,0,0,0,56.55,10.21,180,180,0,0,0,46.69-6.31,182,182,0,0,0,42.57-17.28,135.47,135.47,0,0,0,44,0,182,182,0,0,0,42.57,17.28,177.46,177.46,0,0,0,46.45,6.32,160.64,160.64,0,0,0,56.79-10.22,7.55,7.55,0,0,0,2.94-12.12ZM347,254.22V215.31a24.52,24.52,0,0,1-.23,46.74C346.91,259.46,347,256.85,347,254.22ZM81.21,99.12c.81-1.59,1.68-3.18,2.58-4.72,9.94-17.08,28.95-27.84,49.61-28.07h.1a7.55,7.55,0,0,0,5.83-3,88.27,88.27,0,0,1,66.94-34.9,164.26,164.26,0,0,1,87.89,21.76C316.56,63.12,333,79.57,343,99.12c13.36,26,13.76,54.31,11.57,102.93a39.14,39.14,0,0,0-7.61-2.29v-7.68a7.55,7.55,0,0,0-15.09,0v17.14C228,210.33,171.7,160.27,156.69,144.6A7.55,7.55,0,0,0,144.26,147c-11,26.67-30.12,40.62-60.28,43.91a7.55,7.55,0,0,0-6.73,7.5v1.39a39.23,39.23,0,0,0-7.62,2.29C67.44,153.44,67.84,125.15,81.21,99.12ZM77.48,262.05a24.52,24.52,0,0,1-.23-46.74v38.91Q77.25,258.17,77.48,262.05ZM59.05,389.74c13.45-23,15.79-61.14,14.08-113.24a38.43,38.43,0,0,0,6.2,1.37,135.34,135.34,0,0,0,88.37,103.7C145.87,391,104.55,403.41,59.05,389.74ZM212.12,374A119.91,119.91,0,0,1,92.34,254.22V205c28.3-4.66,48.45-18.59,61.22-42.36A221.83,221.83,0,0,0,206.78,198C244,216,286.09,224.8,331.91,224.31v29.91A119.92,119.92,0,0,1,212.12,374Zm69,16.13a179.13,179.13,0,0,1-24.61-8.55,135.32,135.32,0,0,0,88.4-103.71,38.55,38.55,0,0,0,6.19-1.37c-1.71,52.11.63,90.29,14.09,113.25C338.55,397.8,310.32,397.94,281.13,390.13Z" transform="translate(-39.42 -13.28)" fill="#fff"/><path d="M121.94,231.86a7.54,7.54,0,0,0,10.67,10.67,12.41,12.41,0,0,1,17.54,0,7.54,7.54,0,0,0,10.67-10.67A27.5,27.5,0,0,0,121.94,231.86Z" transform="translate(-39.42 -13.28)" fill="#fff"/><path d="M302.31,242.53a7.54,7.54,0,0,0,0-10.67,27.5,27.5,0,0,0-38.88,0,7.54,7.54,0,1,0,10.67,10.67,12.41,12.41,0,0,1,17.54,0,7.54,7.54,0,0,0,10.67,0Z" transform="translate(-39.42 -13.28)" fill="#fff"/></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" *ngIf="recordNormal > 14"></ion-icon>
<ion-icon ios="ios-lock" md="md-lock" *ngIf="recordNormal < 15"></ion-icon>
</div>
<div class="btn-help" (click)="toggleHelp('initiated')" [ngClass]="{'active': helpHard}">
<ion-icon ios="md-help" md="md-help"></ion-icon>
</div>
</div>
</div>
<div class="helper" *ngIf="helpHard">
<span>Trouvez la bonne couleur</span>
</div>
</ion-slide>
<!-- <ion-slide class='nav5 nav'>
<div class="header-page">
<h1>Doom mode</h1>
<div class="img-level">
Expand Down
9 changes: 9 additions & 0 deletions src/pages/nav/nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ page-nav {
background-color: $hard-color-primary;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(4){
background-color: $initiated-color-secondary;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(5){
background-color: $doom-color-secondary;
}
.swiper-pagination-bullet{
Expand Down Expand Up @@ -127,6 +130,9 @@ page-nav {
.nav2 .slide-zoom .header-page .img-level svg{
width: 75%;
}
.nav4 .slide-zoom .header-page .img-level svg{
width: 70%;
}
.nav1 .slide-zoom .sub-button .ico-block{
@include button-mode($easy-color-primary, $easy-color-secondary);
}
Expand All @@ -137,6 +143,9 @@ page-nav {
@include button-mode($hard-color-primary, $hard-color-secondary);
}
.nav4 .slide-zoom .sub-button .ico-block{
@include button-mode($initiated-color-primary, $initiated-color-secondary);
}
.nav5 .slide-zoom .sub-button .ico-block{
@include button-mode($doom-color-primary, $doom-color-secondary);
}
}
9 changes: 9 additions & 0 deletions src/pages/nav/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
import { Storage } from '@ionic/storage';

import { InitiatedPage } from '../initiated/initiated';
import { HardPage } from '../hard/hard';
import { NormalPage } from '../normal/normal';
import { EasyPage } from '../easy/easy';
Expand All @@ -22,10 +23,12 @@ export class NavPage {
helpNormal: boolean = false;
helpHard: boolean = false;
helpDoom: boolean = false;
helpInitiated: boolean = false;

recordEasy: number;
recordNormal: number;
recordHard: number;
recordinitiated: number;

toggleHelp(difficulty: string){
switch(difficulty) {
Expand Down Expand Up @@ -58,6 +61,9 @@ export class NavPage {
this.storage.get('bestScoreHard').then((val: number) => {
this.recordHard = val;
});
this.storage.get('bestScoreInitiated').then((val: number) => {
this.recordHard = val;
});
}

@ViewChild(Slides) slides: Slides;
Expand All @@ -74,6 +80,9 @@ export class NavPage {
goToHardPage(): void {
this.navCtrl.push(HardPage, { "parentPage": this });
}
goToInitiatedPage(): void {
this.navCtrl.push(InitiatedPage, { "parentPage": this });
}

ngOnInit(): void {
this.getBestScore();
Expand Down

0 comments on commit 22dcab3

Please sign in to comment.