Ionic3-firebase-renda

app.module.ts

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 {}

home.html

<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>

home.ts

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;
      // １秒後に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));
    }
  }

}

ranking.html

<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>

ranking.scss

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;
  }
}

ranking.ts

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');
  }

}