From db8a8b4b7bd92a28de3375026a71b0713b53bf38 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Thu, 12 Dec 2024 20:15:43 +0100
Subject: [PATCH] =?UTF-8?q?Gestion=20affichage=20d=C3=A9fi=20selon=20les?=
 =?UTF-8?q?=20cas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app/(tabs)/challenges.tsx | 47 ++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/client/app/(tabs)/challenges.tsx b/client/app/(tabs)/challenges.tsx
index 5369242..dafc085 100644
--- a/client/app/(tabs)/challenges.tsx
+++ b/client/app/(tabs)/challenges.tsx
@@ -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>
   )
 }