MineSeeker/assets/js/mine-seeker/components/GameTimer.jsx

/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { BonusBox, BonusStatsDialog, Avatar } from '@mine-components';
import { formatTime } from '@global-utils/format';
import { useGame } from '@mine-contexts';

const GameTimer = () => {
  const { overlay, connectionLost, endRef, activePlayer, red, blue } = useGame();
  const [redTime, setRedTime] = useState(0);
  const [blueTime, setBlueTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [bonusDialogOpen, setBonusDialogOpen] = useState(false);
  const timerIntervalRef = useRef(null);
  const gameStartedRef = useRef(false);

  const redStartTimeRef = useRef(null);
  const blueStartTimeRef = useRef(null);
  const lastActivePlayerRef = useRef(null);
  const pausedRedTimeRef = useRef(0);
  const pausedBlueTimeRef = useRef(0);

  useEffect(() => {
    if (!overlay && !gameStartedRef.current) {
      gameStartedRef.current = true;
      setIsRunning(true);
      setRedTime(0);
      setBlueTime(0);
      redStartTimeRef.current = Date.now();
      blueStartTimeRef.current = Date.now();
      pausedRedTimeRef.current = 0;
      pausedBlueTimeRef.current = 0;
      lastActivePlayerRef.current = activePlayer;
    }
  }, [activePlayer, overlay]);

  useEffect(() => {
    if (endRef.current) setIsRunning(false);
  }, [endRef]);

  useEffect(() => {
    if (connectionLost) setIsRunning(false);
  }, [connectionLost]);

  useEffect(() => {
    if (!isRunning) return;

    if (lastActivePlayerRef.current !== activePlayer) {
      const startRef = lastActivePlayerRef.current ? blueStartTimeRef.current : redStartTimeRef.current;
      if (startRef) {
        const elapsed = Math.floor((Date.now() - startRef) / 1000);
        if (lastActivePlayerRef.current) {
          pausedBlueTimeRef.current += elapsed;
        } else {
          pausedRedTimeRef.current += elapsed;
        }
      }

      if (activePlayer) {
        blueStartTimeRef.current = Date.now();
      } else {
        redStartTimeRef.current = Date.now();
      }

      lastActivePlayerRef.current = activePlayer;
    }
  }, [activePlayer, isRunning]);

  const syncTimes = useCallback(() => {
    let currentRedTime = pausedRedTimeRef.current;
    let currentBlueTime = pausedBlueTimeRef.current;

    if (!activePlayer && redStartTimeRef.current) {
      currentRedTime += Math.floor((Date.now() - redStartTimeRef.current) / 1000);
    } else if (activePlayer && blueStartTimeRef.current) {
      currentBlueTime += Math.floor((Date.now() - blueStartTimeRef.current) / 1000);
    }

    setRedTime(currentRedTime);
    setBlueTime(currentBlueTime);
  }, [activePlayer]);

  useEffect(() => {
    if (!isRunning) {
      if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
      return;
    }

    timerIntervalRef.current = setInterval(syncTimes, 100);

    return () => {
      if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
    };
  }, [isRunning, activePlayer, syncTimes]);

  useEffect(() => {
    const handleFocus = () => {
      if (isRunning) syncTimes();
    };
    window.addEventListener('focus', handleFocus);
    return () => window.removeEventListener('focus', handleFocus);
  }, [isRunning, activePlayer, syncTimes]);

  useEffect(() => () => {
    if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
  }, []);


  return (
    <div className="game-timer-container">
      <BonusBox color="red" points={red.bonusPoints ?? 0} onClick={() => setBonusDialogOpen(true)} />
      <div className={`game-timer red-timer ${!activePlayer ? 'active' : ''}`}>
        <Avatar player={red} />
        <i className={`fa ${!activePlayer ? 'fa-hourglass-half' : 'fa-hourglass-start'} timer-icon`} />
        <span className="timer-display">{formatTime(redTime)}</span>
      </div>
      <div className={`game-timer blue-timer ${activePlayer ? 'active' : ''}`}>
        <Avatar player={blue} />
        <i className={`fa ${activePlayer ? 'fa-hourglass-half' : 'fa-hourglass-start'} timer-icon`} />
        <span className="timer-display">{formatTime(blueTime)}</span>
      </div>
      <BonusBox color="blue" points={blue.bonusPoints ?? 0} onClick={() => setBonusDialogOpen(true)} />
      <BonusStatsDialog open={bonusDialogOpen} onClose={() => setBonusDialogOpen(false)} red={red} blue={blue} />
    </div>
  );
};

export default GameTimer;