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}