【HTML,CSS,JS】タイマーアプリ作成（1/3）

// 必要なモジュールをインポート
import { Timer } from './timer.js';
import { UI } from './ui.js';

// タイマーアプリケーションのメインクラス
class TimerApp {
    constructor() {
        // Timerクラスのインスタンスを作成
        this.timer = new Timer();
        // UIクラスのインスタンスを作成
        this.ui = new UI();
        // イベントリスナーを設定
        this.bindEvents();
    }

    // イベントリスナーを設定するメソッド
    bindEvents() {
        // スタートボタンのクリックイベントを設定
        document.getElementById('startBtn').addEventListener('click', () => this.startTimer());
        // ストップボタンのクリックイベントを設定
        document.getElementById('stopBtn').addEventListener('click', () => this.stopTimer());
        // リセットボタンのクリックイベントを設定
        document.getElementById('resetBtn').addEventListener('click', () => this.resetTimer());

        // タイマーの毎秒更新時のコールバックを設定
        this.timer.onTick = (remainingSeconds) => this.ui.updateTimerDisplay(remainingSeconds);
        // タイマー完了時のコールバックを設定
        this.timer.onComplete = () => {
            this.ui.playAlarm(); // アラームを鳴らす
            this.ui.updateButtonStates(false, true); // ボタンの状態を更新
        };
    }

    // タイマーを開始するメソッド
    startTimer() {
        // タイマーが動作中でなく、アラームも鳴っていない場合
        if (!this.timer.isActive() && !this.ui.isAlarmActive()) {
            // 入力された時間を取得
            const { hours, minutes, seconds } = this.ui.getInputValues();
            // 合計秒数を計算
            const totalSeconds = hours * 3600 + minutes * 60 + seconds;

            // 時間が設定されていない場合はエラーメッセージを表示
            if (totalSeconds === 0) {
                this.ui.showError('タイマーの時間を設定してください');
                return;
            }

            // タイマーが未設定の場合、新しい時間をセット
            if (this.timer.getRemainingSeconds() === 0) {
                this.timer.setTime(totalSeconds);
            }
            
            // タイマーを開始
            this.timer.start();
            // UIのボタン状態を更新
            this.ui.updateButtonStates(true);
        }
    }

    // タイマーを停止するメソッド
    stopTimer() {
        // アラームが鳴っている場合はアラームを停止
        if (this.ui.isAlarmActive()) {
            this.ui.stopAlarm();
        } else {
            // そうでなければタイマーを停止
            this.timer.stop();
        }
        // UIのボタン状態を更新
        this.ui.updateButtonStates(false);
    }

    // タイマーをリセットするメソッド
    resetTimer() {
        // アラームが鳴っていない場合のみリセット
        if (!this.ui.isAlarmActive()) {
            // タイマーをリセット
            this.timer.reset();
            // 入力フィールドをリセット
            this.ui.resetInputs();
            // タイマー表示を0にリセット
            this.ui.updateTimerDisplay(0);
        }
    }
}

// DOMの読み込みが完了したらTimerAppのインスタンスを作成
document.addEventListener('DOMContentLoaded', () => {
    new TimerApp();
});

export class Timer {
    constructor() {
        // setIntervalの戻り値を保持するための変数
        this.intervalId = null;
        // 残り時間（秒）
        this.remainingSeconds = 0;
        // タイマーが動作中かどうかのフラグ
        this.isRunning = false;
        // 毎秒の更新時に呼び出されるコールバック関数
        this.onTick = null;
        // タイマー完了時に呼び出されるコールバック関数
        this.onComplete = null;
    }

    // タイマーを開始するメソッド
    start() {
        // すでに動作中の場合は何もしない
        if (this.isRunning) return;

        // タイマーを動作中に設定
        this.isRunning = true;
        // 1秒ごとにtickメソッドを呼び出す
        this.intervalId = setInterval(() => this.tick(), 1000);
    }

    // タイマーを停止するメソッド
    stop() {
        // 動作中でない場合は何もしない
        if (!this.isRunning) return;

        // タイマーを停止状態に設定
        this.isRunning = false;
        // setIntervalをクリア
        clearInterval(this.intervalId);
        this.intervalId = null;
    }

    // タイマーをリセットするメソッド
    reset() {
        // タイマーを停止
        this.stop();
        // 残り時間を0にリセット
        this.remainingSeconds = 0;
        // 更新を通知
        this.notifyTick();
    }

    // 1秒ごとに呼び出されるメソッド
    tick() {
        if (this.remainingSeconds > 0) {
            // 残り時間がある場合は1秒減らす
            this.remainingSeconds--;
            // 更新を通知
            this.notifyTick();
        } else {
            // 残り時間が0になったらタイマーを停止し、完了を通知
            this.stop();
            this.notifyComplete();
        }
    }

    // タイマーの時間を設定するメソッド
    setTime(seconds) {
        this.remainingSeconds = seconds;
        // 更新を通知
        this.notifyTick();
    }

    // 残り時間を取得するメソッド
    getRemainingSeconds() {
        return this.remainingSeconds;
    }

    // タイマーが動作中かどうかを確認するメソッド
    isActive() {
        return this.isRunning;
    }

    // 更新を通知するメソッド
    notifyTick() {
        // onTickが関数として設定されている場合に呼び出す
        if (typeof this.onTick === 'function') {
            this.onTick(this.remainingSeconds);
        }
    }

    // タイマー完了を通知するメソッド
    notifyComplete() {
        // onCompleteが関数として設定されている場合に呼び出す
        if (typeof this.onComplete === 'function') {
            this.onComplete();
        }
    }
}

export class UI {
    constructor() {
        // HTML要素の参照を取得
        this.timerElement = document.getElementById('timer');
        this.startBtn = document.getElementById('startBtn');
        this.stopBtn = document.getElementById('stopBtn');
        this.resetBtn = document.getElementById('resetBtn');
        this.hoursInput = document.getElementById('hours');
        this.minutesInput = document.getElementById('minutes');
        this.secondsInput = document.getElementById('seconds');
        this.alarmAudio = document.getElementById('alarmSound');
        
        // アラームの再生状態を管理するフラグ
        this.isAlarmPlaying = false;

        // UIの初期化
        this.initializeUI();
    }

    // UIの初期状態を設定するメソッド
    initializeUI() {
        this.updateTimerDisplay(0);
        this.updateButtonStates(false);
    }

    // タイマーの表示を更新するメソッド
    updateTimerDisplay(totalSeconds) {
        // 時、分、秒に変換
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;
        // フォーマットして表示
        this.timerElement.textContent = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
    }

    // ボタンと入力フィールドの状態を更新するメソッド
    updateButtonStates(isRunning, isAlarmActive = false) {
        // ボタンの有効/無効を設定
        this.startBtn.disabled = isRunning || isAlarmActive;
        this.stopBtn.disabled = !isRunning && !isAlarmActive;
        this.resetBtn.disabled = isRunning || isAlarmActive;
        // 入力フィールドの有効/無効を設定
        [this.hoursInput, this.minutesInput, this.secondsInput].forEach(input => input.disabled = isRunning || isAlarmActive);
    }

    // エラーメッセージを表示するメソッド
    showError(message) {
        alert(message);
    }

    // 入力フィールドの値を取得するメソッド
    getInputValues() {
        return {
            hours: parseInt(this.hoursInput.value, 10) || 0,
            minutes: parseInt(this.minutesInput.value, 10) || 0,
            seconds: parseInt(this.secondsInput.value, 10) || 0
        };
    }

    // 入力フィールドをリセットするメソッド
    resetInputs() {
        this.hoursInput.value = '0';
        this.minutesInput.value = '0';
        this.secondsInput.value = '0';
    }

    // アラーム音を再生するメソッド
    playAlarm() {
        if (this.alarmAudio) {
            this.alarmAudio.loop = true; // ループ再生を設定
            this.alarmAudio.play().catch(error => console.error('Alarm playback failed:', error));
            this.isAlarmPlaying = true;
            this.updateButtonStates(false, true);
        } else {
            console.error('Alarm audio element not found');
        }
    }

    // アラーム音を停止するメソッド
    stopAlarm() {
        if (this.alarmAudio) {
            this.alarmAudio.pause();
            this.alarmAudio.currentTime = 0; // 再生位置を先頭に戻す
            this.isAlarmPlaying = false;
            this.updateButtonStates(false);
        }
    }

    // アラームが鳴っているかどうかを確認するメソッド
    isAlarmActive() {
        return this.isAlarmPlaying;
    }

    // 数字を2桁の文字列に変換するメソッド（例: 1 → "01"）
    padZero(num) {
        return num.toString().padStart(2, '0');
    }
}