Gestion affichage défi selon les cas

This commit is contained in:
Emmy D'Anello 2024-12-12 20:15:43 +01:00
parent ac20baad23
commit db8a8b4b7b
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85

View File

@ -3,10 +3,22 @@ import PenaltyBanner from '@/components/PenalyBanner'
import { useChallengeActions } from '@/hooks/useChallengeActions'
import { useChallenges } from '@/hooks/useChallenges'
import { useGame } from '@/hooks/useGame'
import { FontAwesome6 } from '@expo/vector-icons'
import { useMemo } from 'react'
import { Appbar, Surface } from 'react-native-paper'
import { View } from 'react-native'
import { Appbar, Banner, FAB, MD3Colors, Surface, Text } from 'react-native-paper'
export default function ChallengesScreen() {
function ChallengeScreenHeader() {
return <>
<Appbar.Header>
<Appbar.Content title={"Défis"} />
<Appbar.Action icon='format-list-bulleted' />
</Appbar.Header>
<PenaltyBanner />
</>
}
function ChallengeScreenBody() {
const game = useGame()
const challengeActions = useChallengeActions()
const challenges = useChallenges()
@ -21,14 +33,33 @@ export default function ChallengesScreen() {
return challenges.challenges.find((challenge) => challenge.id === currentChallengeAction.challengeId)
}, [currentChallengeAction, challenges])
return <>
{currentChallenge && <ChallengeCard challenge={currentChallenge} />}
{!currentChallenge && game.currentRunner && <>
<Banner
visible={!currentChallenge && game.currentRunner}
icon='cancel'
style={{ backgroundColor: MD3Colors.error40 }}>
<Text variant='titleMedium' style={{ textAlign: 'center' }}>Aucun défi en cours.</Text>
</Banner>
<View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
<FAB icon='cards' variant='tertiary' style={{ width: 250, height: 250, borderRadius: 20, justifyContent: 'center' }} size='large' label='Tirer un défi' />
</View>
</>}
<Banner
visible={game.gameStarted && !game.currentRunner}
icon={({ size }) => <FontAwesome6 name='cat' size={size} color={'pink'} />}
style={{ backgroundColor: MD3Colors.secondary30 }}>
Vous êtes poursuiveuse, et n'avez donc pas de défi à accomplir.
</Banner>
</>
}
export default function ChallengesScreen() {
return (
<Surface style={{ flex: 1 }}>
<Appbar.Header>
<Appbar.Content title={"Défis"} />
<Appbar.Action icon='format-list-bulleted' />
</Appbar.Header>
<PenaltyBanner />
{currentChallenge && <ChallengeCard challenge={currentChallenge} />}
<ChallengeScreenHeader />
<ChallengeScreenBody />
</Surface>
)
}