diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 22d0401..947fa07 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,6 +14,7 @@ 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 { TrophyComponent } from '../components/trophy/trophy'; @@ -25,6 +26,7 @@ import { TrophyComponent } from '../components/trophy/trophy'; HardPage, DoomPage, NavPage, + RecordPage, TrophyComponent ], imports: [ @@ -39,7 +41,8 @@ import { TrophyComponent } from '../components/trophy/trophy'; NormalPage, HardPage, DoomPage, - NavPage + NavPage, + RecordPage ], providers: [ StatusBar, diff --git a/src/assets/img/lock.svg b/src/assets/img/lock.svg new file mode 100644 index 0000000..567de37 --- /dev/null +++ b/src/assets/img/lock.svg @@ -0,0 +1 @@ +padlock \ No newline at end of file diff --git a/src/assets/img/reward-circle.svg b/src/assets/img/reward-circle.svg new file mode 100644 index 0000000..865d0cc --- /dev/null +++ b/src/assets/img/reward-circle.svg @@ -0,0 +1 @@ +reward-circle \ No newline at end of file diff --git a/src/assets/img/reward.svg b/src/assets/img/reward.svg new file mode 100644 index 0000000..4985465 --- /dev/null +++ b/src/assets/img/reward.svg @@ -0,0 +1 @@ +trophy \ No newline at end of file diff --git a/src/pages/nav/nav.html b/src/pages/nav/nav.html index 9b819db..27d6955 100644 --- a/src/pages/nav/nav.html +++ b/src/pages/nav/nav.html @@ -1,5 +1,6 @@ - + +

Easy mode

diff --git a/src/pages/nav/nav.scss b/src/pages/nav/nav.scss index db62b36..9c92d00 100644 --- a/src/pages/nav/nav.scss +++ b/src/pages/nav/nav.scss @@ -1,59 +1,83 @@ -.back-button.show-back-button{ +.back-button.show-back-button { display: none; } -.ion-icon{ - color:#fafafa; + +.ion-icon { + color: #fafafa; font-size: 2.2em; } -page-nav { +page-nav { ion-content { background-color: $primary-color; background: url("../assets/img/background.jpg"); background-size: cover; + position: relative; + z-index: 1; } - .slides{ - color:#444444; + .record { + top: 10px; + right: 10px; + color: #fff; + position: absolute; + z-index: 100; + height: 70px; + padding: 10px; + } - .slide-zoom{ - color:#fafafa; + .slides { + color: #444444; + + .slide-zoom { + color: #fafafa; font-size: 2.2em; height: 100%; display: flex; flex-wrap: wrap; } - .ico-block{ + + .ico-block { display: inline-block; height: 80px; line-height: 80px; } - .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:first-child{ + + .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:first-child { background-color: $easy-color-primary; } - .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(2){ + + .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(2) { background-color: $normal-color-other; } - .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(3){ + + .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(3) { background-color: $hard-color-primary; } - .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(4){ + + .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(4) { background-color: $doom-color-secondary; } - .swiper-pagination-bullet{ + + .swiper-pagination-bullet { opacity: 0.5; transition: 0.5s; } - .swiper-pagination-bullet-active{ + + .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.5); } - .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ - top:10px; + + .swiper-container-horizontal > .swiper-pagination-bullets, + .swiper-pagination-custom, + .swiper-pagination-fraction { + top: 10px; } } - .nav{ - .helper{ + + .nav { + .helper { position: absolute; width: 96%; height: 300px; @@ -69,74 +93,87 @@ page-nav { align-items: center; justify-content: center; } - .slide-zoom{ - .header-page{ - height: calc( 100% - 130px); + + .slide-zoom { + .header-page { + height: calc(100% - 130px); width: 100%; display: flex; align-items: center; - justify-content:space-around; - flex-wrap:wrap; + justify-content: space-around; + flex-wrap: wrap; - h1{ - align-self:flex-end; + h1 { + align-self: flex-end; font-family: 'Anton', sans-serif; font-size: 4rem; } - .img-level{ + + .img-level { height: 300px; width: 100%; - img{ + + img { width: 80%; } } } - .sub-button{ + + .sub-button { height: 80px; margin-bottom: 50px; width: 100%; display: flex; align-items: center; - justify-content:space-around; + justify-content: space-around; - .ico-block{ + .ico-block { width: 100%; display: flex; flex-wrap: nowrap; - .btn-play{ + .btn-play { width: 70%; display: flex; align-items: center; justify-content: center; } - .btn-help{ + + .btn-help { width: 30%; border-left: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; } - .btn-play:active, .btn-help:active, .btn-help.active { - background-color:rgba(0,0,0,0.1); + + .btn-help.active, + .btn-help:active, + .btn-play:active { + background-color: rgba(0,0,0,0.1); } } } } } - .nav2 .slide-zoom .header-page .img-level img{ + + .nav2 .slide-zoom .header-page .img-level img { width: 75%; } - .nav1 .slide-zoom .sub-button .ico-block{ + + .nav1 .slide-zoom .sub-button .ico-block { @include button-mode($easy-color-primary, $easy-color-secondary); } - .nav2 .slide-zoom .sub-button .ico-block{ + + .nav2 .slide-zoom .sub-button .ico-block { @include button-mode($normal-color-primary, $normal-color-secondary); } - .nav3 .slide-zoom .sub-button .ico-block{ + + .nav3 .slide-zoom .sub-button .ico-block { @include button-mode($hard-color-primary, $hard-color-secondary); } - .nav4 .slide-zoom .sub-button .ico-block{ + + .nav4 .slide-zoom .sub-button .ico-block { @include button-mode($doom-color-primary, $doom-color-secondary); } -} \ No newline at end of file +} diff --git a/src/pages/nav/nav.ts b/src/pages/nav/nav.ts index 5714ffc..06a5459 100644 --- a/src/pages/nav/nav.ts +++ b/src/pages/nav/nav.ts @@ -8,6 +8,7 @@ import { EasyPage } from '../easy/easy'; import { NormalPage } from '../normal/normal'; import { HardPage } from '../hard/hard'; import { DoomPage } from '../doom/doom'; +import { RecordPage } from '../record/record'; @Component({ selector: 'page-nav', @@ -81,6 +82,9 @@ export class NavPage { goToDoomPage(): void { this.navCtrl.push(DoomPage, { "parentPage": this }); } + goToRecordPage(): void { + this.navCtrl.push(RecordPage, { "parentPage": this }); + } ngOnInit(): void { this.getBestScore(); diff --git a/src/pages/record/record.html b/src/pages/record/record.html new file mode 100644 index 0000000..5f081ea --- /dev/null +++ b/src/pages/record/record.html @@ -0,0 +1,39 @@ + +
+
+ +
+
{{recordEasy}}
+
0
+
+
+
+ + +
+
{{recordNormal}}
+
0
+
+
+
+ + +
+
{{recordHard}}
+
0
+
+
+
+ +
+
{{recordDoom}}
+
0
+
+ + +
+ +
+ diff --git a/src/pages/record/record.scss b/src/pages/record/record.scss new file mode 100644 index 0000000..3a834ea --- /dev/null +++ b/src/pages/record/record.scss @@ -0,0 +1,74 @@ +page-record { + + ion-content { + background-color: $primary-color; + background: url("../assets/img/background.jpg"); + background-size: cover; + } + .scroll-content{ + display: flex; + align-items: center; + flex-wrap:wrap; + align-content: flex-start; + padding-top: 70px !important; + justify-content:center; + + .record-box{ + width: 100%; + align-content:space-around; + display: inline-block; + height: 60px; + line-height: 60px; + display: flex; + flex-wrap:nowrap; + margin: 15px 0; + + .icon { + width: 30%; + border-right: 1px solid rgba(0,0,0,0.1); + display: inline-block; + display: flex; + align-items: center; + justify-content: center; + + img.reward { + height: 60%; + } + img.lock { + height: 60%; + } + } + + .record-number { + text-align: right; + width: 70%; + display: inline-block; + padding:0px 20px; + color: $secondary-color; + font-size: 30px; + font-weight: bold; + } + } + .record-box:nth-child(1){ + @include button-mode($easy-color-primary, $easy-color-secondary); + } + .record-box:nth-child(2){ + @include button-mode($normal-color-primary, $normal-color-secondary); + } + .record-box:nth-child(3){ + @include button-mode($hard-color-primary, $hard-color-secondary); + } + .record-box:nth-child(4){ + @include button-mode($doom-color-primary, $doom-color-secondary); + } + } + + .button-block { + width:45%; + margin-top:50px; + @include button-mode($normal-color-primary, $normal-color-secondary); + } + ion-icon{ + font-size: 2em; + } +} diff --git a/src/pages/record/record.ts b/src/pages/record/record.ts new file mode 100644 index 0000000..4165dd4 --- /dev/null +++ b/src/pages/record/record.ts @@ -0,0 +1,42 @@ +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-record', + templateUrl: 'record.html', +}) +export class RecordPage { + + constructor(public navCtrl: NavController, public navParams: NavParams, private shareService: ShareService, private storage: Storage) { + this.getBestScore(); + } + recordEasy: number; + recordNormal: number; + recordHard: number; + recordDoom: number; + + getBestScore(): void { + this.storage.get('bestScoreEasy').then((val: number) => { + this.recordEasy = val; + }); + this.storage.get('bestScoreNormal').then((val: number) => { + this.recordNormal = val; + }); + this.storage.get('bestScoreHard').then((val: number) => { + this.recordHard = val; + }); + this.storage.get('bestScoreDoom').then((val: number) => { + this.recordDoom = val; + }); + } + + ngOnInit(): void { + this.getBestScore(); + } + + goToNavPage(): void { + this.navCtrl.pop() + } +}