Skip to content

Instantly share code, notes, and snippets.

@adash333 adash333/app.module.ts
Last active Jun 30, 2018

Embed
What would you like to do?
Ionic3-firebase-renda
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { RankingPage } from '../pages/ranking/ranking';
// importing AF2 modules
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
MyApp,
HomePage,
RankingPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
RankingPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
<ion-header>
<ion-navbar color="primary">
<ion-title>
連打ゲーム
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="grid-basic-page">
<button ion-button block color="secondary" (click)="goToRanking()">
ランキングを見る
</button>
<ion-row justify-content-center>
<button ion-button outline>連打数:<strong>{{counter}}</strong></button>
</ion-row>
<ion-row justify-content-center>
<img src="assets/imgs/target.jpg" width="250" height="250" alt="mato"
(click)="tapCount()">
</ion-row>
<ion-row justify-content-center>
<p>↓スタートボタンを押してゲームスタート↓</p>
</ion-row>
<ion-row justify-content-center>
<button ion-button block (click)="startGame()">START</button>
</ion-row>
</ion-content>
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RankingPage } from '../ranking/ranking';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { GameScore } from '../../models/gameScore';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public gameScores: AngularFireList<{}>;
// タイマー設定
public countTimer = 13;
// タップ回数カウンター
public counter = 0;
// 「tapFlag」的のタップ可否設定
public tapFlag = false;
constructor(public navCtrl: NavController, db: AngularFireDatabase) {
this.gameScores = db.list('gameScores');
}
goToRanking() {
this.navCtrl.push(RankingPage);
}
// 「Start」ボタン押下時の処理
startGame() {
// ボタンの無効化
//startButtonFlag true のときにstartボタンを押せないようにする
//startButtonFlag true のときにrankingボタンを押せないようにする
// タップカウンターリセット
this.counter = 0;
// タイマーリセット
this.countTimer = 13;
// タイマーを起動
this.countTime(this.countTimer);
}
//firebaseへのデータ保存
saveScore(user: string, score: number) {
this.gameScores.push(new GameScore(user, score))
}
// タイマー
countTime(time: number) {
if (time > 0){
if (time >= 11) {
this.tapFlag = false;
$("p").html(String(time-10));
} else if (time == 10) {
this.tapFlag = true;
$("p").html("スタート!");
} else {
this.tapFlag = true;
$("p").html(String(time));
}
this.countTimer -= 1;
// 1秒後にcountTime()を呼び出す
setTimeout(() => {
this.countTime(this.countTimer)
},1000);
} else {
this.tapFlag = false;
$("p").html("タイムアップ!");
this.imputName(this.counter);
}
}
// 名前入力アラートの表示
imputName(count: number) {
// 入力アラートを表示
var name = window.prompt("名前を入力してください", "");
if (name == null || name == "") {
$("p").html("保存がキャンセルされました");
} else {
// スコアと入力した名前を保存
this.saveScore(name, count);
$("p").html(name + "さんのスコアは" + String(count) + "連打でした");
}
// ボタンの有効化
//document.gameForm.start.disabled = false;
//document.gameForm.ranking.disabled = false;
}
// タップ数カウント
tapCount() {
if (this.tapFlag) {
this.counter += 1;
console.log(this.counter+"回タップしました");
//$("strong").html(String(this.counter));
}
}
}
<ion-header>
<ion-navbar color="primary">
<ion-title>
ランキング
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid no-padding>
<ion-row text-center>
<ion-col col-2>
<div class="top">順位</div>
</ion-col>
<ion-col col-8>
<div class="top">お名前</div>
</ion-col>
<ion-col col-2>
<div class="top">記録</div>
</ion-col>
</ion-row>
<ion-row *ngFor="let item of gameScores; index as i">
<ion-col col-2>
<div>{{i + 1}}位</div>
</ion-col>
<ion-col col-8>
<div>{{item.name}}</div>
</ion-col>
<ion-col col-2>
<div>{{item.score}}点</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
page-ranking {
ion-col div {
background-color: white;
border: 0px solid #e6e9ee;
//border-radius: 2px;
padding: 5px;
text-align: center;
}
ion-col .top {
border-bottom: solid 2px orange;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { GameScore } from '../../models/gameScore';
@IonicPage()
@Component({
selector: 'page-ranking',
templateUrl: 'ranking.html',
})
export class RankingPage {
public FB_gameScores: AngularFireList<{}>;
public gameScores: GameScore[] = [];
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public db: AngularFireDatabase
) {
this.FB_gameScores = db.list('/gameScores');
this.FB_gameScores.snapshotChanges().subscribe((actions: any[]) => {
this.gameScores = [];
actions.forEach((action: any) => {
// 取得したデータを反映
const val = action.payload.val()
this.gameScores.push(new GameScore(val.name, val.score));
});
this.gameScores.sort( function(a, b) {
return a.score > b.score ? -1 : 1;
});
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad RankingPage');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.