ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bandeau indiquant à partir de quand il est possible de commencer à poursuivre

Browse Source
This commit is contained in:
Emmy D'Anello 2024-12-13 00:23:39 +01:00
parent 6dbda9d927
commit 1241669c35
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
3 changed files with 106 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
client/app/(tabs)/index.tsx
View File

@ -1,3 +1,58 @@
import MapScreen from './map'
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'
export default MapScreen
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"} />
<FreeChaseBanner />
</Surface>
)
}
const styles = StyleSheet.create({
page: {
flex: 1,
},
map: {
flex: 1,
alignSelf: 'stretch',
},
moneyBadge: {
position: 'absolute',
top: 40,
right: 20,
backgroundColor: 'orange',
},
statusBadge: {
position: 'absolute',
top: 40,
left: 20,
backgroundColor: 'pink',
},
})

58
client/app/(tabs)/map.tsx
View File

@ -1,58 +0,0 @@
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',
},
})

49
client/components/FreeChaseBanner.tsx Normal file
View File

@ -0,0 +1,49 @@
import { useGame } from "@/hooks/useGame"
import { FontAwesome6 } from "@expo/vector-icons"
import { useEffect, useMemo, useState } from "react"
import { View } from "react-native"
import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper"
export default function FreeChaseBanner() {
const game = useGame()
const chaseFreeTime = game.chaseFreeTime
const stunChase = game.gameStarted && !game.currentRunner && chaseFreeTime !== null
const chaseFreeDate = useMemo(() => new Date(chaseFreeTime || 0), [chaseFreeTime])
const chaseFreePretty = chaseFreeDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
const [remainingTime, setRemainingTime] = useState(0)
const prettyRemainingTime = useMemo(() => `${Math.floor(remainingTime / 60).toString().padStart(2, '0')}:${Math.floor(remainingTime % 60).toString().padStart(2, '0')}`, [remainingTime])
const iconName = useMemo(() => {
switch (Math.abs(remainingTime % 4)) {
case 0: return 'hourglass-empty'
case 1: return 'hourglass-end'
case 2: return 'hourglass-half'
case 3: return 'hourglass-start'
}
}, [remainingTime])
useEffect(() => {
if (!stunChase)
return
const interval = setInterval(() => setRemainingTime(Math.floor((chaseFreeDate.getTime() - new Date().getTime()) / 1000)), 1000)
return () => clearInterval(interval)
}, [stunChase, chaseFreeDate])
return (
<View>
<ProgressBar
visible={stunChase}
animatedValue={1 - remainingTime / (45 * 60)}
color={'green'}
style={{ height: 6 }} />
<Banner
visible={stunChase}
icon={({ size }) => <FontAwesome6 name={iconName} size={size} color={MD3Colors.secondary90} />}
style={{ backgroundColor: MD3Colors.secondary40 }}>
<View>
<Text variant='titleMedium'>Vous pourrez vous mettre en chasse à {chaseFreePretty}.</Text>
<Text variant='titleSmall'>Temps restant : {prettyRemainingTime}</Text>
</View>
</Banner>
</View>
)
}