ADD : jeu basique tictactoe fini

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

@@ -1,22 +1,137 @@
-import {ImageBackground, StyleSheet, Text, View } from "react-native";
+import {Alert, ImageBackground, Pressable, StyleSheet, Text, View } from "react-native";
 import React, {useState} from "react";
+import { useMatchStore } from "../../context/matchContext";
 
-export default function tic_tac_toe(){
+
+export default function tic_tac_toe(props: { navigation: any}){
     const [map,setMap]=useState([
-        ['o','',''],
+        ['','',''],
-        ['','x','x'],
+        ['','',''],
-        ['o','',''], 
+        ['','',''], 
     ]);
 
+    const {navigation}=props;
+
+    const [currentTurn,setCurrentTurn] = useState("x");
+
+    //const resetMatch = useMatchStore((state) => state.resetMatch);
+
+    const onPressCell = (rowIndex:number,columnIndex:number) => {
+        if(map[rowIndex][columnIndex]==""){
+            setMap((existingMap) =>{
+                const updateMap = [...existingMap]
+                updateMap[rowIndex][columnIndex]=currentTurn;
+                return updateMap;
+            });
+        }else{
+            Alert.alert("Case déjà prise");
+        }
+        setCurrentTurn(currentTurn === "x"? "o" : "x");
+        checkWinning();
+        checkComplete();
+    };
+
+    const checkWinning = () =>{
+        // Checks rows
+        for (let i=0; i<3; i++){
+            const isRowXWinning = map[i].every((cell)=> cell==="x");
+            const isRowOWinning = map[i] .every((cell)=>cell==="o");
+            if(isRowXWinning==true){
+                Alert.alert("X won !");
+                navigation.goBack();
+            }
+            else if(isRowOWinning==true){
+                Alert.alert("X won !");
+                navigation.goBack();
+            }
+        }
+        // Checks columns
+        for (let col=0;col<3;col++){
+            let isColumnXWinning=true;
+            let isColumnOWinning=true;
+
+            for(let row=0;row<3;row++){
+                if(map[row][col] !== "x"){
+                    isColumnXWinning=false;
+                }
+                if(map[row][col] !== "o"){
+                    isColumnOWinning=false;
+                }
+            }
+            if (isColumnXWinning == true){
+                Alert.alert("X won !");
+                navigation.goBack();
+            }
+            if(isColumnOWinning==true){
+                Alert.alert("O won !");
+                navigation.goBack();
+            }
+            
+        }
+        // Checks diag
+        let isDiag1XWinning=true;
+        let isDiag1OWinning=true;
+        let isDiag2XWinning=true;
+        let isDiag2OWinning=true;
+        for (let i=0;i<3;i++){
+            if(map[i][i]!=="x"){
+                isDiag1XWinning=false;
+            }
+            if(map[i][i]!=="o"){
+                isDiag1OWinning=false;
+            }
+            if(map[i][2-i]!=="x"){
+                isDiag2XWinning=false;
+            }
+            if(map[i][2-i]!=="o"){
+                isDiag2OWinning=false;
+            }
+        }
+        if(isDiag1OWinning==true || isDiag2OWinning==true){
+            Alert.alert("O won !");
+            navigation.goBack();
+        }
+        if(isDiag1XWinning==true || isDiag2XWinning==true){
+            Alert.alert("X won !");
+            navigation.goBack();
+        }
+    };
+
+    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(
         <View style={styles.container}>
-            <Text>TIC TAC TOE</Text>
+            <Text style={styles.text}>TIC TAC TOE</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)=>(
+                {map.map((row, rowIndex)=>(
-                    <View style={styles.row}>
+                    <View key={`row-${rowIndex}`} style={styles.row}>
-                        {row.map((cell)=> (
+                        {row.map((cell, columnIndex)=> (
-                            <View style={styles.cell}>
+                            <Pressable 
+                                onPress={() => onPressCell(rowIndex,columnIndex)} 
+                                style={styles.cell}
+                                key={`row-${rowIndex}-col-${columnIndex}`}
+                            >
                                 {cell === "o" && <View style={styles.circle}/>}
                                 {cell === "x" &&(
                                     <View style={styles.cross}>
@@ -24,12 +139,11 @@ export default function tic_tac_toe(){
                                             <View style={[styles.crossLine, styles.crossLineReversed]}/>
                                     </View>
                                 )}
-                            </View>
+                            </Pressable>
                         ))}
                     </View>
                 ))}
             </View>
-            
             </ImageBackground>
         </View>
     );
@@ -37,6 +151,8 @@ export default function tic_tac_toe(){
 
 const styles= StyleSheet.create({
     container:{
+        height:"100%",
+        width:"100%",
         flex:1,
         backgroundColor:"#45444E",
         alignItems:"center",
@@ -75,7 +191,7 @@ const styles= StyleSheet.create({
         width:15,
         height:100,
         borderRadius:50,
-        backgroundColor:"#0085FF",
+        backgroundColor:"#EE9433",
         transform:[{rotate:"45deg"},],
     },
     crossLineReversed:{
@@ -84,5 +200,13 @@ const styles= StyleSheet.create({
     map:{
         aspectRatio:1,
         padding:5
+    },
+    text:{
+        fontSize: 26,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+        marginBottom:25
     }
 })