Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Haidar #9

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Finish the game
  • Loading branch information
haidarafif0809 committed Apr 13, 2018
commit 72873eb79e5ed2f8024453527ba520c1ccc71708
6 changes: 5 additions & 1 deletion App.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Navigator from './navigator/AppNavigator'
import { Provider } from 'react-redux'
import store from './store'

export default class App extends React.Component {
render() {
return (
<Navigator />
<Provider store={store} >
<Navigator />
</Provider>
);
}
}
11 changes: 10 additions & 1 deletion navigator/AppNavigator.js
Original file line number Diff line number Diff line change
@@ -4,6 +4,9 @@ import Welcome from '../pages/Welcome'
import GameOver from '../pages/GameOver'
import Board from '../pages/Board'
import { StackNavigator } from 'react-navigation';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { touchBoard } from '../store/action'

export const RootStack = StackNavigator({
Board: {
@@ -35,5 +38,11 @@ const styles = StyleSheet.create({
},
});

const mapStateToProps = (state) => {
return {
redux: state
}
}

export default Navigator
const mapDispatchToProps = (dispatch) => bindActionCreators({ touchBoard }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Navigator);
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -22,6 +22,8 @@
"expo": "^26.0.0",
"react": "16.3.0-alpha.1",
"react-native": "0.54.0",
"react-navigation": "^1.5.11"
"react-navigation": "^1.5.11",
"react-redux": "^5.0.7",
"redux": "^3.7.2"
}
}
206 changes: 169 additions & 37 deletions pages/Board.js
Original file line number Diff line number Diff line change
@@ -3,23 +3,141 @@ import {
View,
Text,
Button,
TouchableHighlight
TouchableHighlight,
Alert
} from 'react-native'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { touchBoard , winner} from '../store/action'

class Board extends Component {


constructor(props) {
super(props);
this.state = {
text: 'board',
boardData: [[0,0,0],[0,0,0],[0,0,0]],
nullBoard: [],
activePlayer: 0
winner: null
}
}
checkSebaris = (baris,player) => {
const { boardData } = this.props.redux
if (boardData[baris][0] == player) {
if (boardData[baris][1] == player) {
if (boardData[baris][2] == player) {
return true
}
}
}
return false
}


checkSerongKanan = (player) => {
const { boardData } = this.props.redux
if (boardData[0][0] == player) {
if (boardData[1][1] == player) {
if (boardData[2][2] == player) {
return true
}
}
}
return false
}

checkSerongKiri = (player) => {
const { boardData } = this.props.redux
if (boardData[0][2] == player) {
if (boardData[1][1] == player) {
if (boardData[2][0] == player) {
return true
}
}
}
return false
}

checkKebawah = (kolom,player) => {
const { boardData } = this.props.redux
if (boardData[0][kolom] == player) {
if (boardData[1][kolom] == player) {
if (boardData[2][kolom] == player) {
return true
}
}
}
return false
}
isGameOver = () => {
const boardData = this.props.redux.boardData
let isOver = 0
for (var i = 0; i < boardData.length; i++) {
for (var j = 0; j < boardData[i].length; j++) {
if (boardData[i][j] == 0) {
isOver++
}
}
}
if (isOver == 0) {
if(!this.theWinner()) {
this.setState({winner: 0})
this.props.winner(0)
} else {
this.props.winner(this.state.winner)
}
}

}
theWinner = () => {

for(var i = 0; i < 2; i++) {
if (this.checkKebawah(i,1)) {
this.setState({winner: 1})
return true
}
}

for(var i = 0; i < 2; i++) {
if (this.checkKebawah(i,2)) {
this.setState({winner: 2})
return true
}
}

for(var i = 0; i < 2; i++) {
if (this.checkSebaris(i,1)) {
this.setState({winner: 1})
return true
}
}

for(var i = 0; i < 2; i++) {
if (this.checkSebaris(i,2)) {
this.setState({winner: 2})
return true
}
}
if (this.checkSerongKanan(1)) {
this.setState({winner: 1})
return true
}

if (this.checkSerongKanan(2)) {
this.setState({winner: 2})
return true
}

if (this.checkSerongKiri(1)) {
this.setState({winner: 1})
return true
}

if (this.checkSerongKiri(2)) {
this.setState({winner: 2})
return true
}
return false
}
computerTurn = () => {
const { boardData } = this.state
const boardData = this.props.redux.boardData
let getBoard = false
let nullBoard = []
for (var i = 0; i < boardData.length; i++) {
@@ -35,29 +153,37 @@ class Board extends Component {
}
}

this.setState({ boardData: boardData, activePlayer: 0 })
this.props.touchBoard(boardData, 0)
}

touchBoard = (x,y) => {
if (this.state.boardData[x][y] == 0) {
if (this.state.activePlayer == 0) {
this.state.boardData[x][y] = 1
this.state.activePlayer = 1
const boardData = this.props.redux.boardData
let activePlayer = this.props.redux.activePlayer
if (boardData[x][y] == 0) {
if (activePlayer == 0) {
boardData[x][y] = 1
activePlayer = 1
} else {
this.state.boardData[x][y] = 2
this.state.activePlayer = 0
boardData[x][y] = 2
activePlayer = 0
}
const newBoard = this.state.boardData
this.setState({ boardData: newBoard, activePlayer: this.state.activePlayer })
const newBoard = boardData
this.props.touchBoard(newBoard, 1)
this.computerTurn()
this.isGameOver()
}
}

render() {
const boardData = this.props.redux.boardData
const activePlayer = this.props.redux.activePlayer
return (
<View>
<Text>{ this.state.text } </Text>
{ this.state.activePlayer === 0 ? <Text> Your Turn </Text> : <Text> Computer Turn </Text> }
<Text>{ this.props.redux.winner } </Text>
{ this.state.winner == 1 && <Text> You Win </Text> }
{ this.state.winner == 2 && <Text> Computer Win </Text> }
{ this.state.winner == 0 && <Text> Seri </Text> }
{ activePlayer === 0 ? <Text> Your Turn </Text> : <Text> Computer Turn </Text> }
<View style={{
flex: 1,
flexDirection: 'row',
@@ -66,20 +192,20 @@ class Board extends Component {
}}>
<TouchableHighlight onPress={ () => this.touchBoard(0,0) }>
<View style={{width: 50, height: 50, backgroundColor: 'skyblue',}}>
{ this.state.boardData[0][0] == 1 && <Text> o </Text> }
{ this.state.boardData[0][0] == 2 && <Text> x </Text> }
{ boardData[0][0] == 1 && <Text> o </Text> }
{ boardData[0][0] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
<TouchableHighlight onPress={ () => this.touchBoard(0,1) }>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} >
{ this.state.boardData[0][1] == 1 && <Text> o </Text> }
{ this.state.boardData[0][1] == 2 && <Text> x </Text> }
{ boardData[0][1] == 1 && <Text> o </Text> }
{ boardData[0][1] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
<TouchableHighlight onPress={ () => this.touchBoard(0,2) }>
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}>
{ this.state.boardData[0][2] == 1 && <Text> o </Text> }
{ this.state.boardData[0][2] == 2 && <Text> x </Text> }
{ boardData[0][2] == 1 && <Text> o </Text> }
{ boardData[0][2] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
</View>
@@ -91,20 +217,20 @@ class Board extends Component {
}}>
<TouchableHighlight onPress={ () => this.touchBoard(1,0) }>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}>
{ this.state.boardData[1][0] == 1 && <Text> o </Text> }
{ this.state.boardData[1][0] == 2 && <Text> x </Text> }
{ boardData[1][0] == 1 && <Text> o </Text> }
{ boardData[1][0] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
<TouchableHighlight onPress={ () => this.touchBoard(1,1) }>
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} >
{ this.state.boardData[1][1] == 1 && <Text> o </Text> }
{ this.state.boardData[1][1] == 2 && <Text> x </Text> }
{ boardData[1][1] == 1 && <Text> o </Text> }
{ boardData[1][1] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
<TouchableHighlight onPress={ () => this.touchBoard(1,2) }>
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} >
{ this.state.boardData[1][2] == 1 && <Text> o </Text> }
{ this.state.boardData[1][2] == 2 && <Text> x </Text> }
{ boardData[1][2] == 1 && <Text> o </Text> }
{ boardData[1][2] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
</View>
@@ -116,20 +242,20 @@ class Board extends Component {
}}>
<TouchableHighlight onPress={ () => this.touchBoard(2,0) }>
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}>
{ this.state.boardData[2][0] == 1 && <Text> o </Text> }
{ this.state.boardData[2][0] == 2 && <Text> x </Text> }
{ boardData[2][0] == 1 && <Text> o </Text> }
{ boardData[2][0] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
<TouchableHighlight onPress={ () => this.touchBoard(2,1) }>
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} >
{ this.state.boardData[2][1] == 1 && <Text> o </Text> }
{ this.state.boardData[2][1] == 2 && <Text> x </Text> }
{ boardData[2][1] == 1 && <Text> o </Text> }
{ boardData[2][1] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
<TouchableHighlight onPress={ () => this.touchBoard(2,2) }>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} >
{ this.state.boardData[2][2] == 1 && <Text> o </Text> }
{ this.state.boardData[2][2] == 2 && <Text> x </Text> }
{ boardData[2][2] == 1 && <Text> o </Text> }
{ boardData[2][2] == 2 && <Text> x </Text> }
</View>
</TouchableHighlight>
</View>
@@ -139,5 +265,11 @@ class Board extends Component {
);
}
}
const mapStateToProps = (state) => {
return {
redux: state
}
}

export default Board;
const mapDispatchToProps = (dispatch) => bindActionCreators({ touchBoard, winner }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Board);
7 changes: 6 additions & 1 deletion pages/GameOver.js
Original file line number Diff line number Diff line change
@@ -16,9 +16,14 @@ class GameOver extends Component {
}

render() {
const { params } = this.props.navigation.state;
const winner = params ? params.winner : null;
return (
<View>
<Text>{ this.state.text } </Text>
<Text> {winner} </Text>
{ winner == 1 && <Text> You Win </Text> }
{ winner == 2 && <Text> Computer Win </Text> }
{ winner == 0 && <Text> Seri </Text> }
<Button onPress={ () => this.props.navigation.navigate('Board') } title="Play Again" />
</View>
);
14 changes: 14 additions & 0 deletions store/action.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { TOUCH_BOARD, WINNER } from './actionTypes'

export const touchBoard = (newBoard, activePlayer) => {
return {
type: TOUCH_BOARD,
payload: { newBoard, activePlayer }
}
}
export const winner = (player) => {
return {
type: WINNER,
payload: player

}}
2 changes: 2 additions & 0 deletions store/actionTypes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const TOUCH_BOARD = 'TOUCH_BOARD'
export const WINNER = 'WINNER'
6 changes: 6 additions & 0 deletions store/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { createStore } from 'redux'
import tictacReducer from './reducers'

const store = createStore(tictacReducer)

export default store
Loading