Bandeau indiquant à partir de quand il est possible de commencer à poursuivre

client/components/FreeChaseBanner.tsx

@@ -0,0 +1,49 @@
+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 stunChase = 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(remainingTime % 4)) {
+      case 0: return 'hourglass-empty'
+      case 1: return 'hourglass-end'
+      case 2: return 'hourglass-half'
+      case 3: return 'hourglass-start'
+    }
+  }, [remainingTime])
+
+  useEffect(() => {
+    if (!stunChase)
+      return
+    const interval = setInterval(() => setRemainingTime(Math.floor((chaseFreeDate.getTime() - new Date().getTime()) / 1000)), 1000)
+    return () => clearInterval(interval)
+  }, [stunChase, chaseFreeDate])
+
+  return (
+    <View>
+      <ProgressBar
+          visible={stunChase}
+          animatedValue={1 - remainingTime / (45 * 60)}
+          color={'green'}
+          style={{ height: 6 }} />
+          <Banner
+              visible={stunChase}
+              icon={({ size }) => <FontAwesome6 name={iconName} size={size} color={MD3Colors.secondary90} />}
+              style={{ backgroundColor: MD3Colors.secondary40 }}>
+            <View>
+              <Text variant='titleMedium'>Vous pourrez vous mettre en chasse à {chaseFreePretty}.</Text>
+              <Text variant='titleSmall'>Temps restant : {prettyRemainingTime}</Text>
+            </View>
+          </Banner>
+    </View>
+  )
+}