Récupération du solde de points et affichage sur la carte

client/app/(tabs)/index.tsx

@@ -2,16 +2,33 @@ import { StyleSheet } from 'react-native'
 import "maplibre-gl/dist/maplibre-gl.css"
 import { useBackgroundPermissions } from 'expo-location'
 import Map from '@/components/Map'
-import { Surface, Text } from 'react-native-paper'
+import { FAB, Surface, Text } from 'react-native-paper'
+import { useGame } from '@/hooks/useGame'
+import { FontAwesome6 } from '@expo/vector-icons'
 
 export default function MapScreen() {
   const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
   if (!backgroundStatus?.granted && backgroundStatus?.canAskAgain)
     requestBackgroundPermission()
 
+  const game = useGame()
+
   return (
     <Surface style={styles.page}>
       {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
+      <FAB
+          style={styles.moneyBadge}
+          visible={game.gameStarted || game.money > 0}
+          icon={(props) => <FontAwesome6 {...props} name='coins' size={20} />}
+          color='black'
+          label={`${game.money}`} />
+      <FAB
+          style={styles.statusBadge}
+          visible={game.gameStarted || game.money > 0}
+          size='small'
+          color='black'
+          icon={game.currentRunner ? 'run-fast' : 'police-badge'}
+          label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
     </Surface>
   )
 }
@@ -26,4 +43,16 @@ const styles = StyleSheet.create({
     flex: 1,
     alignSelf: 'stretch',
   },
+  moneyBadge: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    backgroundColor: 'orange',
+  },
+  statusBadge: {
+    position: 'absolute',
+    top: 40,
+    left: 20,
+    backgroundColor: 'pink',
+  },
 })

client/app/_layout.tsx

@@ -15,6 +15,7 @@ import { useStartBackgroundFetchServiceEffect } from '@/utils/background'
 import LoginProvider from '@/components/LoginProvider'
 import GeolocationProvider from '@/components/GeolocationProvider'
 import GameProvider from '@/components/GameProvider'
+import { FontAwesome6 } from '@expo/vector-icons'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -47,7 +48,11 @@ export default function RootLayout() {
         <LoginProvider loginRedirect={'/login'}>
           <GeolocationProvider>
             <GameProvider>
-              <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
+              <PaperProvider
+                  theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}
+                  settings={{
+                    // icon: (props) => <FontAwesome6 {...props} />
+                  }}>
                 <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                   <Stack>
                     <Stack.Screen name="(tabs)" options={{ headerShown: false }} />