From 49c320b2db34c51204a3b45b6f55cc178384585b Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Wed, 11 Dec 2024 22:28:32 +0100
Subject: [PATCH] =?UTF-8?q?R=C3=A9cup=C3=A9ration=20du=20solde=20de=20poin?=
 =?UTF-8?q?ts=20et=20affichage=20sur=20la=20carte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app/(tabs)/index.tsx        | 31 +++++++++++++++++++++++++++++-
 client/app/_layout.tsx             |  7 ++++++-
 client/components/GameProvider.tsx | 27 ++++++++++++++++++++------
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/client/app/(tabs)/index.tsx b/client/app/(tabs)/index.tsx
index bcafad1..2bbb9f9 100644
--- a/client/app/(tabs)/index.tsx
+++ b/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',
+  },
 })
diff --git a/client/app/_layout.tsx b/client/app/_layout.tsx
index 9e6eb09..d3e36a2 100644
--- a/client/app/_layout.tsx
+++ b/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 }} />
diff --git a/client/components/GameProvider.tsx b/client/components/GameProvider.tsx
index d64a85e..1c92dca 100644
--- a/client/components/GameProvider.tsx
+++ b/client/components/GameProvider.tsx
@@ -1,24 +1,39 @@
 import { useAuth } from '@/hooks/useAuth'
-import { useUpdateGameState } from '@/hooks/useGame'
+import { useGame, useUpdateGameState, useUpdateMoney } from '@/hooks/useGame'
 import { useQuery } from '@tanstack/react-query'
 import { ReactNode, useEffect } from 'react'
 
 export default function GameProvider({ children }: { children: ReactNode }) {
   const auth = useAuth()
+  const game = useGame()
   const updateGameState = useUpdateGameState()
+  const updateMoney = useUpdateMoney()
+
   const gameQuery = useQuery({
-    queryKey: ['update-game'],
+    queryKey: ['get-game'],
     queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/game/`, {
       headers: { "Authorization": `Bearer ${auth.token}` }}
     ).then(resp => resp.json()),
     enabled: auth.loggedIn,
     refetchInterval: 5000,
   })
-  const game = gameQuery.data
   useEffect(() => {
-    if (game)
-      updateGameState(game)
-  }, [game])
+    if (gameQuery.isSuccess && gameQuery.data)
+      updateGameState(gameQuery.data)
+  }, [gameQuery])
+
+  const playerQuery = useQuery({
+    queryKey: ['get-player'],
+    queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/players/${game.playerId}/`, {
+      headers: { "Authorization": `Bearer ${auth.token}` }}
+    ).then(resp => resp.json()),
+    enabled: auth.loggedIn && !!game.playerId,
+    refetchInterval: 5000,
+  })
+  useEffect(() => {
+    if (playerQuery.isSuccess && playerQuery.data)
+      updateMoney(playerQuery.data.money)
+  }, [playerQuery])
 
   return <>
     {children}