Connect Four проверяет выигрыш выигрыша после того, как выигрыш был найден

Question

Я работаю над простой игрой Connect Four.Прямо сейчас я проверяю горизонтальное и вертикальное, и логика верна, просто моя функция проверки выигрыша срабатывает после того, как следующий игрок ушел.Любой вклад будет принята с благодарностью.

На игровой доске происходит большая часть логики

class Gameboard extends Component  {

   checkBoard = () => {

        //top to bottom
         for (let i = 1; i<= 2; i++) {

            for ( let x = 0; x<= 3; x++) {
                for ( let y = 0; y<=5; y++) {
                    if(this.props.game_board[y][x] === i) {
                        if(this.props.game_board[y][x + 1] === i && this.props.game_board[y][x + 2] === i && this.props.game_board[y][x + 3] === i) {
                            let winner = i;

                            alert('The winner is player ' + winner)
                            this.props.stopGame(winner)

                        }
                    }
                }
            }
         }

         //horizontal
         for (let i = 1; i<= 2; i++) {
             for ( let x = 0; x<= 5; x++) {

                for ( let y = 0; y<=3; y++) {
                    if(this.props.game_board[y][x] === i) {
                         if(this.props.game_board[y + 1][x] === i && this.props.game_board[y + 2][x] === 1 && this.props.game_board[y + 3][x] === i) {
                             let winner = i
                             console.log( 'winner is: ', winner)
                             this.props.stopGame(winner)
                             return 
                         }
                     }
                 }
             }
          }

          this.props.drop(this.props.columns)
     }

    handleClick = () => {
         if(this.props.start_game) {
            this.checkBoard(this.props.game_board)
         } else {
             alert('Please Start Game')
         }

    }


    render () {

        const board = this.props.game_board
        const col = this.props.columns
        const rows = this.props.rows

        let activeClass = 'board'
        if(board[col][rows] !== undefined) {
            if(board[col][rows] === 1) {
                activeClass += ' player_1'
            } else {
                activeClass += ' player_2'
            }
        }

        return (
            <div className={activeClass} onClick={this.handleClick}></div>
        )
    }
}
const mapStateToProps = state => {
    return {
        current_ply: state.current_player,
        winner: state.winner,
        start_game: state.active_game,
        game_board: state.gameBoard
    }
}

const mapDispatchToProps = dispatch => {
    return {
        drop: col => dispatch(dropToken(col)),
        startGame: () => dispatch(startGame()),
        stopGame: winner => dispatch(stopGame(winner))
    }
}

Действия

export const startGame = () =>  dispatch => {
    dispatch( {
        type: 'GAME_START',
        payload: true
    })
}

export const dropToken = col => {
    console.log('in actions')
   return { 
        type: 'DROP_TOKEN',
        payload: col
    }; 
}

export const stopGame = winner => dispatch =>  {
    dispatch({
        type: 'WINNER_START'
    })
    dispatch({
        type: 'WINNER_FOUND',
        payload: winner
    })
}

Редуктор

const initialState = {
    active_game: false,
    current_player: 1,
    winner: '',
    gameBoard: [
        [], 
        [],
        [], 
        [], 
        [], 
        [], 
        []
    ]
}

export default (state = initialState, action) => {
    switch(action.type) {
        case GAME_START: 

            return {
                ...state,
                active_game: action.payload
            }
        case DROP_TOKEN:

                const token = state.current_player
                const column = state.gameBoard[action.payload].concat(token)
                const gameBoard = state.gameBoard.slice()
                gameBoard[action.payload] = column
            return {
                ...state,
                current_player: state.current_player === 1 ? 2 : 1,
                gameBoard: gameBoard
            };

        case WINNER_START: 
            return {
                ...state
            }
        case WINNER_FOUND:
            return {
                ...state,
                winner: action.payload,
                active_game: false
            } 
        default: 
            return state 
    }

}

App.js

const cells = [] //6 rows

  for (let y = 5; y >= 0; y--) {
    const row = [] // will make 6 rows

    for (let x = 0; x < 7; x++) { // will make 7 columns
      row.push(<Gameboard  key= {x} columns={x} rows={y}/>)
      console.log(`colmun length`, row)  //outputs 7
    }

    cells.push(<div className='row' key={y}>{row}</div>) 
  }

class App extends Component  {

  start = event => {
    event.preventDefault()
    this.props.begin()

}


  render () {

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={this.props.begin}> Start Game </button>
        <p>Game Active: {this.props.start_game ? 'True' : 'False'}</p>
        <p> The Current Player is: Player {this.props.current_ply}</p>
        <p>Winner: Player {this.props.winner}</p>
      </header>
      {cells}
    </div>
  )}
}

const mapStateToProps = state => {
  console.log(state, 'app state')
  return {
      current_ply: state.current_player,
      winner: state.winner,
      start_game: state.active_game,
      game_board: state.gameBoard
  }
}

const mapDispatchToProps = dispatch => {
  return {

      begin: () => dispatch(startGame())
  }
}