114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
import ChallengeCard from '@/components/ChallengeCard'
|
|
import PenaltyBanner from '@/components/PenalyBanner'
|
|
import { useDrawRandomChallengeMutation, useEndChallenge } from '@/hooks/mutations/useChallengeMutation'
|
|
import { useAuth } from '@/hooks/useAuth'
|
|
import { useChallengeActions } from '@/hooks/useChallengeActions'
|
|
import { useChallenges } from '@/hooks/useChallenges'
|
|
import { useGame } from '@/hooks/useGame'
|
|
import { FontAwesome6 } from '@expo/vector-icons'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import { View } from 'react-native'
|
|
import { ActivityIndicator, Appbar, Banner, FAB, MD3Colors, Snackbar, Surface, Text, TouchableRipple } from 'react-native-paper'
|
|
|
|
function ChallengeScreenHeader() {
|
|
return <>
|
|
<Appbar.Header>
|
|
<Appbar.Content title={"Défis"} />
|
|
<Appbar.Action icon='format-list-bulleted' />
|
|
</Appbar.Header>
|
|
<PenaltyBanner />
|
|
</>
|
|
}
|
|
|
|
function ChallengeScreenBody() {
|
|
const queryClient = useQueryClient()
|
|
const auth = useAuth()
|
|
const game = useGame()
|
|
const challengeActions = useChallengeActions()
|
|
const challenges = useChallenges()
|
|
const currentChallengeAction = useMemo(() => {
|
|
if (!game.activeChallengeId)
|
|
return null
|
|
return challengeActions.challengeActions.find((action) => action.id === game.activeChallengeId)
|
|
}, [game, challengeActions])
|
|
const currentChallenge = useMemo(() => {
|
|
if (!currentChallengeAction)
|
|
return null
|
|
return challenges.challenges.find((challenge) => challenge.id === currentChallengeAction.challengeId)
|
|
}, [currentChallengeAction, challenges])
|
|
const [loading, setLoading] = useState(false)
|
|
const [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
|
|
const drawRandomChallengeMutation = useDrawRandomChallengeMutation({
|
|
auth,
|
|
onPostSuccess: () => {
|
|
setLoading(true)
|
|
setSuccessSnackbarVisible(true)
|
|
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
|
|
}
|
|
})
|
|
const endChallenge = useEndChallenge({
|
|
auth,
|
|
onPostSuccess: () => {
|
|
setLoading(true)
|
|
setSuccessSnackbarVisible(true)
|
|
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
|
|
},
|
|
})
|
|
useEffect(() => {
|
|
if (challengeActions)
|
|
setLoading(false)
|
|
}, [challengeActions])
|
|
|
|
return <>
|
|
{loading &&
|
|
<View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<ActivityIndicator size={'large'} />
|
|
</View>}
|
|
{!loading && currentChallenge &&
|
|
<ChallengeCard
|
|
challenge={currentChallenge}
|
|
onSuccess={() => { setLoading(true); endChallenge.mutate({ success: true }) }}
|
|
onFail={() => endChallenge.mutate({ success: false })} />}
|
|
{!loading && !game.penaltyEnd && !currentChallenge && game.currentRunner && <>
|
|
<Banner
|
|
visible={!currentChallenge && game.currentRunner && !loading}
|
|
icon='cancel'
|
|
style={{ backgroundColor: MD3Colors.error40 }}>
|
|
Aucun défi n'est en cours.
|
|
</Banner>
|
|
<View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<FAB
|
|
label='Tirer un défi'
|
|
icon='cards'
|
|
disabled={drawRandomChallengeMutation.isPending}
|
|
visible={!currentChallenge && game.currentRunner && !loading}
|
|
onPress={() => drawRandomChallengeMutation.mutate()}
|
|
variant='tertiary'
|
|
customSize={64} />
|
|
</View>
|
|
</>}
|
|
<Banner
|
|
visible={!loading && 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>
|
|
<Snackbar
|
|
visible={successSnackbarVisible}
|
|
onDismiss={() => setSuccessSnackbarVisible(false)}
|
|
action={{ label: "Fermer", onPress: () => setSuccessSnackbarVisible(false) }}>
|
|
Jeu actualisé
|
|
</Snackbar>
|
|
</>
|
|
}
|
|
|
|
export default function ChallengesScreen() {
|
|
return (
|
|
<Surface style={{ flex: 1 }}>
|
|
<ChallengeScreenHeader />
|
|
<ChallengeScreenBody />
|
|
</Surface>
|
|
)
|
|
}
|