import { StyleSheet } from 'react-native' import "maplibre-gl/dist/maplibre-gl.css" import { useBackgroundPermissions } from 'expo-location' import Map from '@/components/Map' 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' : () => <FontAwesome6 name='cat' size={20} />} label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} /> </Surface> ) } const styles = StyleSheet.create({ page: { flex: 1, justifyContent: 'center', alignItems: 'center' }, map: { flex: 1, alignSelf: 'stretch', }, moneyBadge: { position: 'absolute', top: 40, right: 20, backgroundColor: 'orange', }, statusBadge: { position: 'absolute', top: 40, left: 20, backgroundColor: 'pink', }, })