69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
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'
|
|
import FreeChaseBanner from '@/components/FreeChaseBanner'
|
|
import { View } from 'react-native'
|
|
|
|
export default function MapScreen() {
|
|
const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
|
|
if (!backgroundStatus?.granted && backgroundStatus?.canAskAgain)
|
|
requestBackgroundPermission()
|
|
|
|
const game = useGame()
|
|
|
|
return (
|
|
<Surface style={styles.page}>
|
|
<View style={styles.container}>
|
|
{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}`}
|
|
onPress={() => {}} />
|
|
<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"}
|
|
onPress={() => {}} />
|
|
</View>
|
|
<FreeChaseBanner />
|
|
</Surface>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
page: {
|
|
flex: 1,
|
|
},
|
|
container: {
|
|
flexGrow: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
map: {
|
|
flex: 1,
|
|
alignSelf: 'stretch',
|
|
},
|
|
moneyBadge: {
|
|
position: 'absolute',
|
|
top: 40,
|
|
right: 20,
|
|
backgroundColor: 'orange',
|
|
},
|
|
statusBadge: {
|
|
position: 'absolute',
|
|
top: 40,
|
|
left: 20,
|
|
backgroundColor: 'pink',
|
|
},
|
|
})
|