Boutons de démarrage du jeu fonctionnels

client/app/(tabs)/settings.tsx

@@ -1,35 +1,39 @@
 import { useGameRepairMutation, useGameResetMutation, useGameStartMutation, useGameStopMutation, useGameSwitchPlayerMutation } from '@/hooks/mutations/useGameMutation'
 import { useAuth } from '@/hooks/useAuth'
-import { useGame } from '@/hooks/useGame'
+import { useGame, useUpdateGameState } from '@/hooks/useGame'
 import { useRouter } from 'expo-router'
-import { FAB, List, Surface } from 'react-native-paper'
+import { useState } from 'react'
+import { Button, Dialog, FAB, List, Portal, Surface, Text } from 'react-native-paper'
 
 export default function HistoryScreen() {
   const router = useRouter()
   const auth = useAuth()
   const game = useGame()
+  const updateGameState = useUpdateGameState()
 
   const gameStartMutation = useGameStartMutation({
     auth,
-    game,
+    updateGameState,
   })
   const gameStopMutation = useGameStopMutation({
     auth,
-    game,
+    updateGameState,
   })
   const gameSwitchMutation = useGameSwitchPlayerMutation({
     auth,
-    game,
+    updateGameState,
   })
   const gameRepairMutation = useGameRepairMutation({
     auth,
-    game,
+    updateGameState,
   })
   const gameResetMutation = useGameResetMutation({
     auth,
-    game,
+    updateGameState,
   })
 
+  const [resetConfirmVisible, setResetConfirmVisible] = useState(false)
+
   return (
     <Surface
       style={{ flex: 1 }}>
@@ -74,8 +78,23 @@ export default function HistoryScreen() {
             title="Réinitialiser les données de jeu"
             description="Permet de détruire toutes les données. À manipuler avec précaution."
             right={() => <FAB icon="reload-alert" size="small" variant={'tertiary'} />}
-            onPress={() => gameResetMutation.mutate()} />
+            onPress={() => setResetConfirmVisible(true)} />
       </List.Section>
+      <Portal>
+        <Dialog key="confirmReset" visible={resetConfirmVisible} onDismiss={() => setResetConfirmVisible(false)}>
+          <Dialog.Title>Confirmer</Dialog.Title>
+          <Dialog.Content>
+            <Text variant="bodyMedium">
+              Cette action va réinitialiser TOUTES les données de jeu : l'historique des positions, les défis réalisés et les trains empruntés.
+              Êtes-vous réellement sûr⋅e de vouloir tout supprimer ?
+            </Text>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setResetConfirmVisible(false)}>Annuler</Button>
+            <Button onPress={() => { setResetConfirmVisible(false); gameResetMutation.mutate() }}>Confirmer</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
     </Surface>
   )
 }

client/app/_layout.tsx

@@ -14,6 +14,7 @@ import store from '@/utils/store'
 import { useStartBackgroundFetchServiceEffect } from '@/utils/background'
 import LoginProvider from '@/components/LoginProvider'
 import GeolocationProvider from '@/components/GeolocationProvider'
+import GameProvider from '@/components/GameProvider'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -45,16 +46,18 @@ export default function RootLayout() {
           onSuccess={() => queryClient.resumePausedMutations().then(() => queryClient.invalidateQueries())}>
         <LoginProvider loginRedirect={'/login'}>
           <GeolocationProvider>
-            <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
-              <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-                <Stack>
-                  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-                  <Stack.Screen name="login" options={{ headerShown: false }} />
-                  <Stack.Screen name="+not-found" />
-                </Stack>
-                <StatusBar style="auto" />
-              </ThemeProvider>
-            </PaperProvider>
+            <GameProvider>
+              <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
+                <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+                  <Stack>
+                    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+                    <Stack.Screen name="login" options={{ headerShown: false }} />
+                    <Stack.Screen name="+not-found" />
+                  </Stack>
+                  <StatusBar style="auto" />
+                </ThemeProvider>
+              </PaperProvider>
+            </GameProvider>
           </GeolocationProvider>
         </LoginProvider>
       </PersistQueryClientProvider>