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 (
{backgroundStatus?.granted ? : La géolocalisation est requise pour utiliser la carte.}
+ 0}
+ icon={(props) => }
+ color='black'
+ label={`${game.money}`} />
+ 0}
+ size='small'
+ color='black'
+ icon={game.currentRunner ? 'run-fast' : 'police-badge'}
+ label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
)
}
@@ -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() {
-
+
+ }}>
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}