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',
+  },
 })