client/app/(tabs)/index.tsx

@@ -5,7 +5,6 @@ import Map from '@/components/Map'
 import { FAB, Surface, Text } from 'react-native-paper'
 import { useGame } from '@/hooks/useGame'
 import { FontAwesome6 } from '@expo/vector-icons'
-import FreeChaseBanner from '@/components/FreeChaseBanner'
 
 export default function MapScreen() {
   const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
@@ -30,7 +29,6 @@ export default function MapScreen() {
           color='black'
           icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
           label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
-      <FreeChaseBanner />
     </Surface>
   )
 }
@@ -38,6 +36,8 @@ export default function MapScreen() {
 const styles = StyleSheet.create({
   page: {
     flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   map: {
     flex: 1,

client/components/FreeChaseBanner.tsx

@@ -1,49 +0,0 @@
-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>
-  )
-}