Im trying to make a tic-tack-toe game as a simple react-native app. But I cant make the alert work while trying to get the game to alert that player 1 or two wins when getting "3 in row". Can somebody see what I did wrong or give me some advice.
Everything is working exept that the Alert and the this.initializeGame(); under the part where I want to get the winner.
If someone would know if there is a "better" practice to name the variables const or let im also wondering that. :)
Thank you!
Here is the code:
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Alert, } from 'react-native';
import { MaterialCommunityIcons as Icon } from 'react-native-vector-icons'
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
gameState: [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
],
currentPlayer: 1,
}
}
componentDidMount() {
this.initializeGame();
}
initializeGame = () => {
this.setState({gameState:
[
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
],
currentPlayer: 1,
});
}
getWinner = () => {
const NUM_TILES = 3;
var arr = this.state.gameState;
var sum;
var i = 0;
//rows
for (i; 1 < NUM_TILES; i++) {
sum = arr[i][0] + arr[i][1] + arr[i][2];
if (sum == 3) { return 1; }
else if (sum == -3) { return -1; }
}
//colums
for (i; 1 < NUM_TILES; i++) {
sum = arr[0][i] + arr[1][i] + arr[2][i];
if (sum == 3) { return 1; }
else if (sum == -3) { return -1; }
}
//diagonals
sum = arr[0][0] + arr[1][1] + arr[2][2];
if (sum == 3) { return 1; }
else if (sum == -3) { return -1; }
sum = arr[2][0] + arr[1][1] + arr[0][2];
if (sum == 3) { return 1; }
else if (sum == -3) { return -1; }
//If no winners
return 0;
}
onTilePress = (row, col) => {
//makes sure that the tiles dont change
var value = this.state.gameState[row][col];
if (value !== 0) { return; }
//sets currant player
var currentPlayer = this.state.currentPlayer;
//sets the correct tile
var arr = this.state.gameState.slice();
arr [row][col] = currentPlayer;
this.setState({gameState: arr});
//switches player
var nextPlayer = (currentPlayer == 1) ? -1 : 1;
this.setState({currentPlayer: nextPlayer});
//check for winners
var winner = this.getWinner();
if (winner == 1) {
Alert.alert("Player 1 is the winner");
this.initializeGame();
} else if (winner == -1) {
Alert.alert("Player 2 is the winner");
this.initializeGame();
}
}
renderIcon = (row, col) => {
var value = this.state.gameState[row][col];
switch(value)
{
case 1: return <Icon name="close" style={styles.tileX} />;
case -1: return <Icon name="circle-outline" style={styles.tileO} />;
default: return <View />;
}
}
render() {
return (
<View style={styles.container}>
<View style={{flexDirection: "row"}}>
<TouchableOpacity onPress={() => this.onTilePress(0, 0)} style={[styles.tile, { borderLeftWidth: 0, borderTopWidth: 0 }]}>
{this.renderIcon(0, 0)}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onTilePress(0, 1)} style={[styles.tile, { borderTopWidth: 0, }]}>
{this.renderIcon(0, 1)}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onTilePress(0, 2)} style={[styles.tile, { borderRightWidth: 0, borderTopWidth: 0 }]}>
{this.renderIcon(0, 2)}
</TouchableOpacity>
</View>
<View style={{flexDirection: "row"}}>
<TouchableOpacity onPress={() => this.onTilePress(1, 0)} style={[styles.tile, { borderLeftWidth: 0 }]}>
{this.renderIcon(1, 0)}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onTilePress(1, 1)} style={[styles.tile, { }]}>
{this.renderIcon(1, 1)}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onTilePress(1, 2)} style={[styles.tile, { borderRightWidth: 0 }]}>
{this.renderIcon(1, 2)}
</TouchableOpacity>
</View>
<View style={{flexDirection: "row"}}>
<TouchableOpacity onPress={() => this.onTilePress(2, 0)} style={[styles.tile, { borderBottomWidth: 0, borderLeftWidth: 0, }]}>
{this.renderIcon(2, 0)}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onTilePress(2, 1)} style={[styles.tile, { borderBottomWidth: 0, }]}>
{this.renderIcon(2, 1)}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onTilePress(2, 2)} style={[styles.tile, { borderBottomWidth: 0, borderRightWidth: 0,
}]}>
{this.renderIcon(2, 2)}
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
alignItems: 'center',
},
tile: {
borderWidth: 10,
width: 100,
height: 100,
},
tileX: {
color: "red",
fontSize: 60,
},
tileO: {
color: "green",
fontSize: 60,
}
});
Looks like everything you did is fine, except your algorithm for the getWinner() function. There were many things wrong with this function, for example, you had the for loop ending condition as 1 < NUM_OF_TILES where NUM_OF_TILES is 3. And also you have to reinitialize the i to 0 when moving from rows to columns because i is already 2 at the end of first for loop.
I have updated this function for you as follows:
getWinner = () => {
const NUM_TILES = 3;
var arr = this.state.gameState;
var sum;
var i = 0;
//rows
for (i = 0; i < NUM_TILES; i++) {
sum = arr[i][0] + arr[i][1] + arr[i][2];
if (sum == 3) {
return 1;
} else if (sum == -3) {
return -1;
}
}
//colums
for (i = 0; i < NUM_TILES; i++) {
sum = arr[0][i] + arr[1][i] + arr[2][i];
if (sum == 3) {
return 1;
} else if (sum == -3) {
return -1;
}
}
//diagonals
sum = arr[0][0] + arr[1][1] + arr[2][2];
if (sum == 3) {
return 1;
} else if (sum == -3) {
return -1;
}
sum = arr[2][0] + arr[1][1] + arr[0][2];
if (sum == 3) {
return 1;
} else if (sum == -3) {
return -1;
}
//If no winners
return 0;
};
You can find the working code at: https://codesandbox.io/s/react-native-4f2yu I have not tested all use-cases btw, but hopefully it puts you in the right direction.