#!/usr/bin/env ruby
require 'cgi'

cgi = CGI.new

# ヘッダーを出力
cgi.out("type" => "text/html", "charset" => "UTF-8") {
  # 指定の条件に基づいてメッセージを設定
  message = if timer >= 00:00:000 && timer < 00:03:000
    "bad"
  elsif timer >= 00:03:000 && timer < 00:04:000
    "eary"
  elsif timer >= 00:04:000 && timer < 00:04:500
    "great"
  elsif timer >= 00:04:500 && timer <= 00:05:300
    "perfect"
  else
    "Out of Range"
  end

  # HTMLを出力
  cgi.html {
    cgi.head {
      cgi.title { "ストップウォッチ" }
    } +
    cgi.body {
      cgi.h1 { "ストップウォッチ" } +
      cgi.p { "経過時間: #{timer}秒" } +
      cgi.p { "メッセージ: #{message}" }
    }
  }
}
<!DOCTYPE html>
<html lang="ja">
 
<head>
  <title>心のタイマー</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
<form method="POST" action="./game.rb"></form>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="game.css">
  <style>
    .hidden {
      display: none; /* 要素を非表示にする */
    }
  </style>
</head>
 
<body>
  <h1 style="text-align: center;">心のタイマーと電子タイマーでJAAST TIME!!!</h1>
  <h3 style="text-align: center;">ルール説明!!</h3>
  <ul style="text-align: center;">
    <p>時間を5秒ぴったりに当てよう!!</p>
    <p>タイマーは表示されないので感覚で押そう!!</p>
    <p>STARTとSTOPは自分で押してね!!</p>
  </ul>
 
  <div style="text-align: center;">
    <h2><div class="timeCount hidden">00:00:000</div></h2>
    <button class="start" onclick="startTimer()">スタート</button>
    <button class="stop" onclick="stopTimer()" disabled>ストップ</button>
    
    <input type="button" value="結果" onclick="toggleTimerVisibility()">
    <p id="output_sample"></p>
  </div>
 
  <script>
    var timer; // タイマー変数の初期化
 
    function startTimer() {
      var startTime = Date.now(); // 現在時刻を取得
      timer = setInterval(function() {
        var currentTime = Date.now() - startTime; // 経過時間を計算
        var minutes = Math.floor(currentTime / 60000); // 分を計算
        var seconds = Math.floor((currentTime % 60000) / 1000); // 秒を計算
        var milliseconds = (currentTime % 1000).toString().slice(0, 3); // ミリ秒を計算
 
        // 時間を2桁表示に整形して表示
        document.querySelector('.timeCount').textContent = 
          ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + ':' + ('00' + milliseconds).slice(-3);
      }, 1); // 1ミリ秒ごとに更新
      document.querySelector('.stop').disabled = false; // ストップボタンを有効化
    }
 
    function stopTimer() {
      clearInterval(timer); // タイマー停止
      document.querySelector('.stop').disabled = true; // ストップボタンを無効化
    }
 
    function resetTimer() {
      clearInterval(timer); // タイマー停止
      document.querySelector('.timeCount').textContent = '00:00:000'; // タイマーをリセット
      document.querySelector('.stop').disabled = true; // ストップボタンを無効化
    }
    
    function toggleTimerVisibility() {
      var timeCount = document.querySelector('.timeCount');
      if (timeCount.classList.contains('hidden')) {
        timeCount.classList.remove('hidden'); // 要素を表示する
      } else {
        timeCount.classList.add('hidden'); // 要素を非表示にする
      }
    }
  </script>
</body>
 
</html>
