$ rails new ultrasoul

$ rails g controller ultrasoul

class UltrasoulController < ApplicationController
    # トップ画面に遷移するためのアクション
    def top
    end

    # 準備画面に遷移するためのアクション
    def ultrasoul
    end
end

Rails.application.routes.draw do
  # UltrasoulControllerのtopアクションを呼び出す
  root 'ultrasoul#top', as: 'top'

  # UltrasoulControllerのultrasoulアクションを呼び出す
  get '/ultrasoul' => 'ultrasoul#ultrasoul', as: 'ultrasoul'

  # Jsonを利用して非同期通信を行う
  get "/result" => 'ultrasoul#result', as: 'result'
end

<div class="box">
    <h1 class="title">ウルトラソウル</h1>
    <p class="about-message">「そしてかがや〜くウルトラソウル！ハイ！！！」の
    「ハイ！！！」のタイミングでタッチ！！！
    あなたのウルトラソウル力が試される！！</p>
    <%= link_to "あそぶ", ultrasoul_path %>
</div>

/*
 :
 :
 *= require_tree .
 *= require_self
 */

/*共通*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    padding: 0 5%;
}

/*トップ画面*/
.box {
    padding-top: 50px;
    width: 500px;
    margin: 0 auto;
}

.title {
    font-size: 45px;
    text-align: center;
    padding-bottom: 10px;
}

.about-message {
    font-size: 25px;
    text-align: center;
    padding: 30px 0;
}

gem 'jquery-rails'

gem 'bootstrap-sass'

$ bundle install

/*
 :
 :
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets"; /*追加*/
@import "bootstrap"; /*追加*/

:
:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require bootstrap-sprockets
//= require_tree .
:
:

<div class="box">
　　　　  :
    :
　　　　　　　　<!-- class: "btn btn-default"を追加 -->
    <%= link_to "あそぶ", ultrasoul_path, class: "btn btn-default" %>
</div>

/*共通*/
:
:

.btn {
    width: 200px;
    display: block;
    border-radius: 15px;
    font-size: 20px;
    padding: 10px 30px;
    margin: 0 auto;
}
/*トップ画面*/

<div class="box">
    <!-- スタートボタンを押した時、「スタート！」にテキスト変更
    ハイ！！ボタンを押したら非表示 -->
    <p id="introduction">
        音声は流れません。脳内でイントロからウルトラソウルを再生してください。
    </p>

    <img id="illust" src="/assets/ready.png">

    <!-- 初めは<div class="start-message">のみ表示
    ハイ！！ボタンを押したら<div class="start-message">を非表示にして
    <div class="end-message">を表示する -->
    <div class="message-group">
        <div class="start-message">
            <p>準備が整ったら</p>
        </div>
        <div class="end-message">
            <p>あなたの<br>ウルトラソウル力は</p>
            <p class="result-message"></p>
        </div>
    </div>

    <!-- 初めは<div id="ready">のみ表示
    ハイ！！ボタンを押したら<div id="ready">を非表示にして
    <ul id="again">を表示する -->
    <div id="ready">
        <input type="button" value="スタート" id="start" class="btn btn-default"></input>
    </div>
    <ul id="again">
        <li class="retry"><%= link_to 'やり直したい', ultrasoul_path, class: "btn btn-default" %></li>
        <li><%= link_to 'トップに戻る', top_path, class: "btn btn-default" %></li>
    </ul>
</div>

:
:
/*準備画面 脳内再生画面 結果画面*/

.start-message > p {
    font-size: 25px;
    text-align: center;
    padding-bottom: 15px;
}

.end-message > p {
    font-size: 25px;
    text-align: center;
    padding-bottom: 15px;
}

.result-message {
    font-weight: bold;
}

#again {
    list-style: none;
}

.retry {
    padding: 8px 0;
}

:
:
/*準備画面 脳内再生画面 結果画面*/
:
:
/* 追加 */
.end-message {
    display: none;
}

#again {
    list-style: none;
    display: none; /* 追加 */
}

:
:

:
:
$(function(){
    /**
     * スタートボタンを押したタイミングのミリ秒のための変数
     * @type {Number}
     */
    let startTime = 0;

    /**
     * 「ハイ！」を押したタイミングのミリ秒のための変数
     * @type {Number}
     */
    let endTime = 0;

    /**
     * endTimeからstartTimeを引いたミリ秒のための変数
     * @type {Number}
     */
    let totalTime = 0;

    /**
     * 結果画面でのメッセージを変更するための連想配列
     * @type {Object}
     */
    let messages = {
        'perfect': 'ウルトラソウルパーフェクト',
        'great': 'ウルトラソウルグッド',
        'good': '平凡ソウル',
        'bad': '無'
    };

    /**
     * 結果画面での画像を変更するための連想配列
     * @type {Object}
     */
    let src = {
        'perfect': '/assets/perfect.png',
        'great': '/assets/great.png',
        'good': '/assets/good.png',
        'bad': '/assets/bad.png'
    };
});

$(function(){
:
:

    // 「スタート」ボタンを押した時のイベント
    $(document).on('click', '#start', function(){
        // スタートボタンを押した時点でのミリ秒
        startTime = Date.now();
        // イラストを変更するメソッド
        $('#illust').attr('src', '/assets/start.png');
        // テキストを変更するメソッド
        $('#introduction').text('スタート！！！');
        // テキストを変更するメソッド
        $('.start-message').find('p').text('ハイ！！！のタイミングでタッチ！！')
        // ボタンのテキストとidを変更するメソッド
        $(this).attr({
            'value': 'ハイ！',
            'id': 'end'
        });
    });
});

:
<input type="button" value="スタート" id="start" class="btn btn-default"></input>
:

$(function(){
:
:

    // 「ハイ！」ボタンを押した時のイベント
    $(document).on('click', '#end', function(){
        // ハイ！ボタンを押した時点でのミリ秒
        endTime = Date.now();
        // 残りミリ秒を計算
        totalTime = endTime - startTime;
        // 秒に直す
        let resultTime = totalTime / 1000;
        // 「ハイ！」が66秒目なので、そこからさっき計算した秒数を引く
        resultTime = 66 - resultTime;

        // 非同期通信を行う
        $.ajax({
            url: '/result', // URLは”/result”を指定
            type: 'GET', // リクエストのタイプはGET
            dataType: 'json' // データの型はjson
        })
        // 通信に成功した場合の処理
        .done(function(data) {
            // illsutChange関数からの戻り値を受け取り画像を変更
            $('#illust').attr('src', illustChange(resultTime));
            // 要素を隠すメソッド
            $('#introduction, .start-message, #ready').hide();
            // 要素を表示するメソッド
            $('.end-message, #again').show();
            // ultraSoul関数からの戻り値をもとにテキストを変更するメソッド
            $('.result-message').text('「 ' + ultraSoul(resultTime) + ' 」');

            // パーフェクトであれば「やり直し」ボタンを表示しない
            if (resultTime <= 2 && resultTime >= 0) {
                $('.retry').hide();
            }
        })
        // 通信に失敗した場合の処理
        .fail(function(data) {
            // アラートで失敗した旨をダイアログで表示
            alert('エラーです。もう一度「スタート」を押してください。');
            // ボタンのテキストとidを変更するメソッド
            $('#end').attr({
                'value': 'スタート',
                'id': 'start'
            });
        })
    });
});

$(function(){
:
:
    /**
     * 秒数によって結果画面で表示するメッセージを戻り値として返すための関数
     * @param {Number} time 秒数を受け取る
     * @return {Object}     結果メッセージを返す
     */
    function ultraSoul (time) {
        if (time <= 2 && time >= 0) {
            return messages['perfect'];
        } else if (time <= 5 && time >= 0) {
            return messages['great'];
        } else if (time <= 10 && time >= 0) {
            return messages['good'];
        } else {
            return messages['bad'];
        }
    }

    /**
     * 秒数によって結果画面で表示する画像を戻り値として返すための関数
     * @param {Number} time 秒数を受け取る
     * @return {Object}     結果メッセージを返す
     */
    function illustChange (time) {
        if (time <= 2 && time >= 0) {
            return src['perfect'];
        } else if (time <= 5 && time >= 0) {
            return src['great'];
        } else if (time <= 10 && time >= 0) {
            return src['good'];
        } else {
            return src['bad'];
        }
    }
});