VueとFirebaseで野球の走力判定アプリを作った #Vue.js

どうも草野球おじさんです。
おじさんになると、走力の衰えを感じます。
そこで Vue, Firebaseで自分の走力がどれくらいなのか測れるアプリを作ってみました。

概要

FirebaseのHostingを利用する。
Vue.jsで全て書いた。

デモはこちら： https://vue-baseball-8142f.firebaseapp.com/

打った瞬間にストップウォッチのスタートボタンを押して、一塁ベースを踏んだ瞬間にストップボタンを押してください。
すると同等のプロ野球選手の名前が出ます。

スクリーンショット

コード断片です。
main.cssは省略です。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>走力ウォッチ</title>
    <link href="./main.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <p>バッターが打った瞬間にストップウォッチのスタートボタンを押し、一塁ベースに到達した瞬間にストップボタンを押して下さい</p>
      <p> {{ time }} </p>
      <p> {{ player }} の走力です</p>
      <button v-on:click="Start">スタート</button>
      <button v-on:click="Stop">ストップ</button>
      <button v-on:click="Reset">リセット</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

main.js

let id;
let isRunning=false;
let player_time=0.00;

var app = new Vue({
    el: '#app',
    data:{
        time:'00.000',
        player:"-",
        startBtn:'スタート',
        stopBtn:'ストップ',
        resetBtn:'リセット'
    },
    methods: {
        Start: function(){
            this.player="-";
            if(isRunning === false){
                let vm = this;
                let startTime = Date.now();
                let count;

                count = function() {
                    let countup = Date.now() - startTime;
                    //console.log(countup);
                    player_time=countup;
                    let sec = Math.floor(countup % 60000 / 1000);
                    let msc = countup % 1000;

                    sec = ('0'  + sec).slice(-2);
                    msc = ('00' + msc).slice(-3);
                    vm.time = `${sec}.${msc}`; 
                    id = setTimeout(count, 10);
                }
                count();
                isRunning = true;
            } // if (isRunning === false) 
        },
        // Stopボタンを押したときの処理
        Stop: function() {
            if (isRunning === true) {
                clearTimeout(id);
                isRunning = false;
                console.log(this.time);
                if (player_time <= 3750){
                    this.player = "横浜DeNAベイスターズ 宮本 秀明 並";
                } else if (player_time <= 3780){
                    this.player = "中日ドラゴンズ 京田　陽太 並";
                } else if (player_time <= 3800){
                    this.player = "広島東洋カープ 田中　広輔 並"; 
　　　　　　　　　.
　　　　　　　　　.
　　　　　　　　　.
                } else {
                    this.player = "オリックス・バファローズ　Ｃ．マレーロ 並";
                }
            }

        },

        // Resetボタンを押したときの処理
        Reset: function() {
            if (isRunning === false) {
                this.time = '00:00.000';
                this.player = "-";
            }
        }
    }
})