import { Component } from "react";
import Field from '../components/Field.js';
import request from "../scripts/requests.js";

class Game extends Component {

    constructor(props) {
        super(props);
        this.state = {
            myField: null,
            opponentField: null,
            myTurn: false
        }
    }

    doUpdate = () => {

        const process = (response) => {
            this.setState({
                myField: response.my_field,
                opponentField: response.opponent_field,
                myTurn: response.my_turn
            })
        }
        request("get_fields", {
            game_id: localStorage.getItem("gameId"),
            token: localStorage.getItem("token")
        }, process) 
    }

    componentDidMount() {
        this.timer = setInterval(() => this.doUpdate(), 2000);
    }

    render() {
        return (
            <div>
            <center><p className='logo'>Let's play!</p></center>
            <div className='row'>
                <div className='col-1'>
                    <p>Player1</p>
                    <Field cells={this.state.myField} parent={this} changeable={false} ready={false} />
                </div>
                <div className='col-5'></div>
                <div className='col-1'>
                    <p>Player2</p>
                    <Field cells={this.state.opponentField} parent={this} changeable={this.state.myTurn} ready={true} />
                </div>
            </div>
        </div>
        )
    }
}

export default Game;