correction de beugs dans le tictactoe

Persistance
Lucie Bedouret 2 years ago
parent 1abfe7cc5b
commit 78577a0820

@ -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
}
});

@ -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
}
})

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

@ -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>

Loading…
Cancel
Save