Skip to content

Commit

Permalink
Merge pull request #49 from Gaviil/record
Browse files Browse the repository at this point in the history
Record
  • Loading branch information
cprodhomme authored Mar 4, 2018
2 parents e4baef5 + cc164f3 commit 362deb4
Show file tree
Hide file tree
Showing 10 changed files with 246 additions and 43 deletions.
5 changes: 4 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -25,6 +26,7 @@ import { TrophyComponent } from '../components/trophy/trophy';
HardPage,
DoomPage,
NavPage,
RecordPage,
TrophyComponent
],
imports: [
Expand All @@ -39,7 +41,8 @@ import { TrophyComponent } from '../components/trophy/trophy';
NormalPage,
HardPage,
DoomPage,
NavPage
NavPage,
RecordPage
],
providers: [
StatusBar,
Expand Down
1 change: 1 addition & 0 deletions src/assets/img/lock.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/img/reward-circle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/img/reward.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/pages/nav/nav.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
119 changes: 78 additions & 41 deletions src/pages/nav/nav.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
}
}
4 changes: 4 additions & 0 deletions src/pages/nav/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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();
Expand Down
39 changes: 39 additions & 0 deletions src/pages/record/record.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<ion-content>
<div class="record-box">
<div class="icon">
<img class="reward" src="assets/img/reward.svg">
</div>
<div class="record-number" *ngIf="recordEasy">{{recordEasy}}</div>
<div class="record-number" *ngIf="!recordEasy">0</div>
</div>
<div class="record-box">
<div class="icon">
<img class="reward" src="assets/img/reward.svg" *ngIf="recordEasy >= 15">
<img class='lock' src="assets/img/lock.svg" *ngIf="recordEasy < 15">
</div>
<div class="record-number" *ngIf="recordEasy >= 15">{{recordNormal}}</div>
<div class="record-number" *ngIf="!recordEasy && recordEasy >= 15">0</div>
</div>
<div class="record-box">
<div class="icon">
<img class="reward" src="assets/img/reward.svg" *ngIf="recordNormal >= 15">
<img class='lock' src="assets/img/lock.svg" *ngIf="recordNormal < 15">
</div>
<div class="record-number" *ngIf="recordNormal >= 15">{{recordHard}}</div>
<div class="record-number" *ngIf="!recordNormal && recordNormal >= 15">0</div>
</div>
<div class="record-box" *ngIf="recordHard >= 15">
<div class="icon">
<img class="reward" src="assets/img/reward.svg">
</div>
<div class="record-number" *ngIf="recordHard >= 15">{{recordDoom}}</div>
<div class="record-number" *ngIf="!recordHard && recordHard >= 15">0</div>
</div>

<button class='reward_home' ion-button block (click)="goToNavPage()">
<ion-icon ios="ios-home" md="md-home"></ion-icon>
</button>
<div>

</div>
</ion-content>
74 changes: 74 additions & 0 deletions src/pages/record/record.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 362deb4

Please sign in to comment.