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

@@ -1,65 +0,0 @@
-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,10 +1,6 @@
 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}){
@@ -27,16 +23,12 @@ 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 = () =>{
@@ -47,12 +39,10 @@ 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("O won !");
+                Alert.alert("X won !");
                 navigation.goBack();
-                return true;
             }
         }
         // Checks columns
@@ -71,12 +61,10 @@ 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;
             }
             
         }
@@ -102,34 +90,40 @@ 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}>
-            <TopBar nav={navigation} state={"game"}/>
+            <Text style={styles.text}>TIC TAC TOE</Text>
-            <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)=> (
@@ -154,3 +148,65 @@ 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

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

bob_party/src/navigation/AppNavigator.tsx

@@ -18,7 +18,7 @@ import Conversation from '../screens/Conversation'
 
 import Test from '../screens/Test'
 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();
@@ -99,7 +99,7 @@ const GameSoloStack = createStackNavigator();
 function GameSoloStackScreen() {
   return (
     <GameSoloStack.Navigator screenOptions={{headerShown: false}}>
-      <GameSoloStack.Screen name='LobbySolo' component={LobbySolo} options={{animationEnabled: false,}}/>
+      <GameSoloStack.Screen name='MatchMaking' component={MatchMaking} options={{animationEnabled: false,}}/>
       <GameSoloStack.Screen name='CookieClicker' component={CookieClicker} />
       <GameSoloStack.Screen name='TicTacToe' component={TicTacToe} />
     </GameSoloStack.Navigator>