correction de beugs dans le tictactoe

bob_party/src/Games/Tic-Tac-Toe/TicTacToeStyle.js

@@ -0,0 +1,65 @@
+import { StyleSheet } from "react-native";
+
+
+export default StyleSheet.create({
+    container:{
+        height:window.innerHeight,
+        width:"100%",
+        flex:1,
+        backgroundColor:"#45444E",
+        alignItems:"center",
+        justifyContent:"center"
+    },
+    grid:{
+        width:375,
+        height:375,
+        alignItems:"center",
+        justifyContent:"center",
+    },
+    row:{
+        flex:1,
+        flexDirection:"row",
+    },
+    cell:{
+        width:100,
+        flex:1,
+    },
+    circle:{
+        left:15,
+        top:15,
+        width:90,
+        height:90,
+        backgroundColor:"#0085FF",
+        borderRadius:50
+    },
+    cross:{
+        width:"100%",
+        height:"100%",
+    },
+    crossLine:{
+        left:52,
+        top:15,
+        position:"absolute",
+        width:15,
+        height:100,
+        borderRadius:50,
+        backgroundColor:"#EE9433",
+        transform:[{rotate:"45deg"},],
+    },
+    crossLineReversed:{
+        transform:[{rotate:"-45deg"},],
+    },
+    map:{
+        aspectRatio:1,
+        padding:5
+    },
+    text:{
+        fontSize: 20,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+        marginTop:25,
+        marginBottom:25
+    }
+});

bob_party/src/Games/Tic-Tac-Toe/tic-tac-toe.tsx

@@ -1,6 +1,10 @@
 import {Alert, ImageBackground, Pressable, StyleSheet, Text, View } from "react-native";
 import React, {useState} from "react";
+import styles from './TicTacToeStyle.js';
 import { useMatchStore } from "../../context/matchContext";
+import { current } from "@reduxjs/toolkit";
+import { ScreenIndicator } from "../../components/ScreenIndicator.tsx";
+import { TopBar } from "../../components/TopBar.tsx";
 
 
 export default function tic_tac_toe(props: { navigation: any}){
@@ -23,12 +27,16 @@ export default function tic_tac_toe(props: { navigation: any}){
                 updateMap[rowIndex][columnIndex]=currentTurn;
                 return updateMap;
             });
+            setCurrentTurn(currentTurn === "x"? "o" : "x");
+            const retour=checkWinning();
+            if(retour!=true){
+                checkComplete();
+            }
+            
         }else{
             Alert.alert("Case déjà prise");   
         }
-        setCurrentTurn(currentTurn === "x"? "o" : "x");
+        
-        checkWinning();
-        checkComplete();
     };
 
     const checkWinning = () =>{
@@ -39,10 +47,12 @@ export default function tic_tac_toe(props: { navigation: any}){
             if(isRowXWinning==true){
                 Alert.alert("X won !");
                 navigation.goBack();
+                return true;
             }
             else if(isRowOWinning==true){
-                Alert.alert("X won !");
+                Alert.alert("O won !");
                 navigation.goBack();
+                return true;
             }
         }
         // Checks columns
@@ -61,10 +71,12 @@ export default function tic_tac_toe(props: { navigation: any}){
             if (isColumnXWinning == true){
                 Alert.alert("X won !");
                 navigation.goBack();
+                return true;
             }
             if(isColumnOWinning==true){
                 Alert.alert("O won !");
                 navigation.goBack();
+                return true;
             }
             
         }
@@ -90,40 +102,34 @@ export default function tic_tac_toe(props: { navigation: any}){
         if(isDiag1OWinning==true || isDiag2OWinning==true){
             Alert.alert("O won !");
             navigation.goBack();
+            return true;
         }
         if(isDiag1XWinning==true || isDiag2XWinning==true){
             Alert.alert("X won !");
             navigation.goBack();
+            return true;
         }
     };
 
     const checkComplete = () =>{
-        /*let isFull;
-        for (let row=0; row<3; row++){
-            for(let col=0;col<3;col++){
-                if(map[row][col]==="o" || map[row][col]==="x"){
-                    isFull=false;
-                }
-            }
-        }
-        if (isFull!=false){
-            Alert.alert("Draw !");
-            navigation.goBack();
-        }*/
         const isRow0Full = map[0].every((cell)=> cell!=="");
         const isRow1Full = map[1] .every((cell)=>cell!=="");
         const isRow2Full = map[2] .every((cell)=>cell!=="");
         if(isRow0Full==true && isRow1Full==true && isRow2Full==true){
             Alert.alert("Draw !");
             navigation.goBack();
+            return false;
         }
     };
 
     return(
         <View style={styles.container}>
-            <Text style={styles.text}>TIC TAC TOE</Text>
+            <TopBar nav={navigation} state={"game"}/>
+            <ScreenIndicator title='TIC TAC TOE'/>
+            <Text style={styles.text}>Current turn: {currentTurn}</Text>
             <ImageBackground style={styles.grid} source={{uri:"https://upload.wikimedia.org/wikipedia/commons/6/64/Tic-tac-toe.png"}} >
             <View style={styles.map}>
+                
                 {map.map((row, rowIndex)=>(
                     <View key={`row-${rowIndex}`} style={styles.row}>
                         {row.map((cell, columnIndex)=> (
@@ -148,65 +154,3 @@ export default function tic_tac_toe(props: { navigation: any}){
         </View>
     );
 }
-
-const styles= StyleSheet.create({
-    container:{
-        height:"100%",
-        width:"100%",
-        flex:1,
-        backgroundColor:"#45444E",
-        alignItems:"center",
-        justifyContent:"center",
-    },
-    grid:{
-        width:375,
-        height:375,
-        alignItems:"center",
-        justifyContent:"center",
-    },
-    row:{
-        flex:1,
-        flexDirection:"row",
-    },
-    cell:{
-        width:100,
-        flex:1,
-    },
-    circle:{
-        left:15,
-        top:15,
-        width:90,
-        height:90,
-        backgroundColor:"#0085FF",
-        borderRadius:50
-    },
-    cross:{
-        width:"100%",
-        height:"100%",
-    },
-    crossLine:{
-        left:52,
-        top:15,
-        position:"absolute",
-        width:15,
-        height:100,
-        borderRadius:50,
-        backgroundColor:"#EE9433",
-        transform:[{rotate:"45deg"},],
-    },
-    crossLineReversed:{
-        transform:[{rotate:"-45deg"},],
-    },
-    map:{
-        aspectRatio:1,
-        padding:5
-    },
-    text:{
-        fontSize: 26,
-        lineHeight: 21,
-        fontWeight: 'bold',
-        letterSpacing: 0.25,
-        color: 'white',
-        marginBottom:25
-    }
-})  

bob_party/src/components/TopBar.tsx

@@ -51,7 +51,7 @@ FC<{nav: any, state?: string}> =
                 </View>
             )
 
-        case 'matchmacking':
+        case 'matchmacking'|| 'game':
             return (
                 <View style={styles.header}>
                     <Pressable>

bob_party/src/navigation/AppNavigator.tsx

@@ -15,7 +15,7 @@ import SignUp from '../screens/SignUp'
 import LobbySolo from '../screens/LobbySolo'
 import CookieClicker from '../Games/CookieClicker/cookieClicker'
 import MatchMaking from '../screens/MatchMaking'
-import TicTacToe from '../Games/Tic-Tac-Toe/tic-tac-toe'
+import TicTacToe from '../Games/Tic-Tac-Toe/Tic-Tac-Toe'
 
 
 const HomeStack = createStackNavigator();
@@ -95,7 +95,7 @@ const GameSoloStack = createStackNavigator();
 function GameSoloStackScreen() {
   return (
     <GameSoloStack.Navigator screenOptions={{headerShown: false}}>
-      <GameSoloStack.Screen name='MatchMaking' component={MatchMaking} options={{animationEnabled: false,}}/>
+      <GameSoloStack.Screen name='LobbySolo' component={LobbySolo} options={{animationEnabled: false,}}/>
       <GameSoloStack.Screen name='CookieClicker' component={CookieClicker} />
       <GameSoloStack.Screen name='TicTacToe' component={TicTacToe} />
     </GameSoloStack.Navigator>