51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import { useGame } from "@/hooks/useGame"
|
|
import { FontAwesome6 } from "@expo/vector-icons"
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import { View } from "react-native"
|
|
import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper"
|
|
|
|
export default function FreeChaseBanner() {
|
|
const game = useGame()
|
|
const chaseFreeTime = game.chaseFreeTime
|
|
const chaser = game.gameStarted && !game.currentRunner && chaseFreeTime !== null
|
|
const chaseFreeDate = useMemo(() => new Date(chaseFreeTime || 0), [chaseFreeTime])
|
|
const chaseFreePretty = chaseFreeDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
|
|
const [remainingTime, setRemainingTime] = useState(0)
|
|
const prettyRemainingTime = useMemo(() => `${Math.floor(remainingTime / 60).toString().padStart(2, '0')}:${Math.floor(remainingTime % 60).toString().padStart(2, '0')}`, [remainingTime])
|
|
const iconName = useMemo(() => {
|
|
switch (Math.abs(Math.floor(remainingTime) % 4)) {
|
|
case 0: return 'hourglass-empty'
|
|
case 1: return 'hourglass-end'
|
|
case 2: return 'hourglass-half'
|
|
case 3: return 'hourglass-start'
|
|
}
|
|
}, [remainingTime])
|
|
|
|
useEffect(() => {
|
|
const now = new Date().getTime()
|
|
if (!chaser || (chaseFreeTime < now && remainingTime < 0))
|
|
return
|
|
const interval = setInterval(() => setRemainingTime(Math.floor(chaseFreeTime - new Date().getTime()) / 1000), 1000)
|
|
return () => clearInterval(interval)
|
|
}, [game.gameStarted, game.currentRunner, chaseFreeDate])
|
|
|
|
return (
|
|
<View>
|
|
<ProgressBar
|
|
visible={chaser && remainingTime > 0}
|
|
animatedValue={1 - remainingTime / (45 * 60)}
|
|
color={'green'}
|
|
style={{ height: 6 }} />
|
|
<Banner
|
|
visible={chaser && remainingTime > 0}
|
|
icon={({ size }) => <FontAwesome6 name={iconName} size={size} color={MD3Colors.secondary90} />}
|
|
style={{ backgroundColor: MD3Colors.secondary40 }}>
|
|
<View>
|
|
<Text variant='titleMedium'>Vous pourrez commencer la poursuite à {chaseFreePretty}.</Text>
|
|
<Text variant='titleSmall'>Temps restant : {prettyRemainingTime}</Text>
|
|
</View>
|
|
</Banner>
|
|
</View>
|
|
)
|
|
}
|