All files / web/src/arcade-games/type-racer-jr/components TimerBar.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useEffect, useRef, useState } from 'react'
import { css } from '../../../../styled-system/css'

interface TimerBarProps {
  /** Total time in seconds */
  totalSeconds: number
  /** Game start timestamp */
  startTime: number
  /** Called when timer reaches zero */
  onTimeUp: () => void
  /** Called when 10 seconds remain */
  onWarning?: () => void
}

/**
 * Full-width countdown bar for beat-the-clock mode.
 * Green -> yellow -> orange -> red, pulses in the last 10s.
 */
export function TimerBar({ totalSeconds, startTime, onTimeUp, onWarning }: TimerBarProps) {
  const [remaining, setRemaining] = useState(totalSeconds)
  const warningFiredRef = useRef(false)
  const timeUpFiredRef = useRef(false)

  useEffect(() => {
    const interval = setInterval(() => {
      const elapsed = (Date.now() - startTime) / 1000
      const left = Math.max(0, totalSeconds - elapsed)
      setRemaining(left)

      if (left <= 10 && !warningFiredRef.current && onWarning) {
        warningFiredRef.current = true
        onWarning()
      }

      if (left <= 0 && !timeUpFiredRef.current) {
        timeUpFiredRef.current = true
        onTimeUp()
      }
    }, 100)

    return () => clearInterval(interval)
  }, [totalSeconds, startTime, onTimeUp, onWarning])

  const percent = (remaining / totalSeconds) * 100
  const isWarning = remaining <= 10

  let barColor: string
  if (percent > 60)
    barColor = '#22c55e' // green
  else if (percent > 35)
    barColor = '#eab308' // yellow
  else if (percent > 15)
    barColor = '#f97316' // orange
  else barColor = '#ef4444' // red

  return (
    <div data-component="TimerBar" className={css({ width: '100%', px: '4' })}>
      <div
        className={css({
          position: 'relative',
          height: '12px',
          bg: 'gray.200',
          borderRadius: 'full',
          overflow: 'hidden',
        })}
      >
        <div
          style={{
            width: `${percent}%`,
            backgroundColor: barColor,
            height: '100%',
            borderRadius: '9999px',
            transition: 'width 0.1s linear',
            animation: isWarning ? 'pulse 0.8s ease-in-out infinite' : undefined,
          }}
        />
      </div>
      <div
        className={css({
          textAlign: 'center',
          mt: '1',
          fontSize: 'sm',
          fontWeight: 'bold',
          color: isWarning ? 'red.600' : 'gray.600',
        })}
      >
        {Math.ceil(remaining)}s
      </div>
    </div>
  )
}