La bannière de pénalité tient compte des vraies données et est animée

client/components/PenalyBanner.tsx

@@ -1,20 +1,49 @@
-import { FontAwesome6 } from "@expo/vector-icons";
+import { useGame } from "@/hooks/useGame"
-import { View } from "react-native";
+import { FontAwesome6 } from "@expo/vector-icons"
-import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper";
+import { useEffect, useMemo, useState } from "react"
+import { View } from "react-native"
+import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper"
 
 export default function PenaltyBanner() {
+  const game = useGame()
+  const penaltyEnd = game.penaltyEnd
+  const hasPenalty = penaltyEnd !== null
+  const penaltyEndDate = useMemo(() => new Date(penaltyEnd || 0), [penaltyEnd])
+  const penaltyEndPretty = penaltyEndDate.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 (!hasPenalty)
+      return
+    const interval = setInterval(() => setRemainingTime(Math.floor((penaltyEndDate.getTime() - new Date().getTime()) / 1000)), 1000)
+    return () => clearInterval(interval)
+  }, [hasPenalty, penaltyEndDate])
+
   return (
     <View>
       <Banner
-          visible={true}
+          visible={hasPenalty}
-          icon={({ size }) => <FontAwesome6 name='hourglass-half' size={size} color={MD3Colors.tertiary80} />}
+          icon={({ size }) => <FontAwesome6 name={iconName} size={size} color={MD3Colors.tertiary80} />}
           style={{ backgroundColor: MD3Colors.primary30 }}>
         <View>
-          <Text variant='titleMedium'>Vous avez actuellement une pénalité jusqu'à 18h45.</Text>
+          <Text variant='titleMedium'>Vous avez actuellement une pénalité jusqu'à {penaltyEndPretty}.</Text>
-          <Text variant='titleSmall'>Temps restant : 14:43</Text>
+          <Text variant='titleSmall'>Temps restant : {prettyRemainingTime}</Text>
         </View>
       </Banner>
-      <ProgressBar animatedValue={0.67} color={MD3Colors.error40} style={{ height: 6 }} />
+      <ProgressBar
+          visible={hasPenalty}
+          animatedValue={1 - remainingTime / (3 * 60)}
+          color={MD3Colors.error40}
+          style={{ height: 6 }} />
     </View>
   )
 }