10秒ピッタリゲーム

シンプルで直感的な10秒ピッタリを目指すタイミングゲームです。

遊び方

1. 「スタート」ボタンを押すとタイマーがスタートします
2. カウンターが0.00秒からカウントアップを開始します
3. 3秒経過すると数字が非表示になります（より難しくなります）
4. ちょうど10.00秒だと思ったタイミングで「ココ！」ボタンを押してください
5. 10秒との誤差が表示されます
   • 誤差が小さいほど良い評価
   • 誤差に応じたコメントが表示されます
     • 0.001秒未満：「⏰️…あなたが時の神か…🙏」
     • 0.05秒未満：「惜しい！！！🎉」
     • 0.1秒未満：「すごい！ほぼピッタリ！👏👏👏」
   • 15秒経過すると自動的に終了

特徴

• デジタル時計風の見やすい表示
• 3秒後にカウンターが非表示になる演出
• 直感的な操作性
• 10秒との誤差に基づく評価システム

技術仕様

• HTML5
• CSS3（アニメーション効果）
• JavaScript（タイマー処理・状態管理）
• Google Fonts（DS-Digital）を使用したデジタル表示

主な変更点（2025/05/01）

• アクションボタンの状態分岐をボタンの文字列ではなくdata-action属性で管理するように変更
• ボタンラベル（「スタート」「ココ！」「もう一度」など）をHTMLのdata属性（data-label-start等）で管理し、JavaScriptはその値を参照してラベル・aria-labelを切り替える方式に変更
• アクセシビリティ向上のため、ボタンのaria-labelも状態に応じて自動更新
• 「もう一度」ボタンの動作不具合を修正

ファイル構成

ten-count/
├── index.html          # メインのHTML
├── README.md          # プロジェクト説明
├── assets/           # 静的アセット
├── css/             # スタイルシート
│   ├── style.css    # メインのCSS
│   └── ranking.css  # ランキング表示用CSS
├── js/             # JavaScriptファイル
│   ├── app.js      # アプリケーションのエントリポイント
│   ├── config.js   # 設定値管理
│   └── components/ # コンポーネント別のJS
│       ├── animation.js         # アニメーション効果
│       ├── DiffMessageManager.js # 差分メッセージ管理
│       ├── form.js              # ランキング登録フォーム
│       ├── ranking.js           # ランキング管理・Supabase連携
│       ├── storage.js           # ローカルストレージ管理
│       ├── timer.js             # タイマー初期化
│       ├── TimerController.js   # タイマー制御
│       ├── TimerUI.js           # タイマーUI管理
│       └── ui.js                # UI管理（タブ切替など）
└── data/           # ローカルデータ保存用
    └── rankings.json # ローカル開発用ランキングデータ

ランキング機能

ローカルランキング

• ローカルストレージを使用したランキング機能
  1. 誤差の保存と管理（ベストレコード、直近10回分の履歴）
  2. ランキング表示（誤差が小さい順のトップ10）

グローバルランキング

• Supabaseを使用したグローバルランキング機能
  1. 日別ランキング - 当日の誤差が小さい順のトップ10
  2. 週別ランキング - 今週の誤差が小さい順のトップ10
  3. ランキング登録フォーム - 名前を入力して記録を送信

技術詳細

コンポーネント構成

• TimerController - タイマーの制御（開始、停止、更新、リセット）
• TimerUI - タイマーの表示管理
• DiffMessageManager - 誤差に応じたコメントの生成
• RankingStorage - ローカルストレージでの記録管理
• Supabase連携 - グローバルランキングのデータ送受信

設定値管理

• config.jsで一元管理されたゲーム設定
  • TARGET_TIME: 目標時間（10秒）
  • FADE_DELAY: 数字が非表示になるまでの時間（3秒）
  • FORCE_STOP_DELAY: 強制停止までの時間（15秒）
  • その他UI/UX関連の設定値

主な変更点（2025/05/03）

• Supabaseを使用したグローバルランキング機能の実装
  • 日別・週別ランキングの表示
  • ランキング登録フォームの追加
• コンポーネント構成の整理
  • app.jsをエントリポイントとした明確なモジュール構成
  • 各機能をコンポーネント化して保守性向上
• ランキング表示UIの改善
  • タブ切り替えによる複数ランキング表示
  • 1位〜3位の特別表示（メダルアイコンなど）