const canvas = document.createElement('canvas')
document.body.appendChild(canvas)
canvas.style.width = window.innerWidth / 2 + 'px'
canvas.style.height = window.innerHeight / 2 + 'px'
canvas.width = window.innerWidth / 2
canvas.height = window.innerHeight / 2
canvas.style.border = '1px solid red'

const ctx = canvas.getContext('2d')

var ballX = canvas.width / 2
var ballY = canvas.height / 2 
var ballAngle = 0
var ballSize = 10

var player1Pos = canvas.height / 2
var player2Pos = canvas.height / 2

const playerSize = canvas.height / 8
const wallSize = 10

let hitWall = false
const ballMove = () => {
    //check player 1
    if(ballX - wallSize < 0) {
        //hit player1 wall
        hitWall = true
    }
    if(ballX + wallSize > canvas.width) {
        //hit player2 wall
        hitWall = false
    }
    
    
    
    if(hitWall) {
        ballX+=10
    }
    else {
        ballX-=10
    }
}

AB.world.getState = function() {
    
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath()
    ctx.fillStyle = 'gray'

    //wall Player 1
    ctx.fillRect(0, 0, canvas.width, wallSize)
    //wall player 2
    ctx.fillRect(0, canvas.height - wallSize, canvas.width, wallSize)

    //player 1 planc
    ctx.fillRect(0, player1Pos - playerSize, wallSize, playerSize)
    //player 1 planc
    ctx.fillRect(canvas.width - wallSize, player2Pos - playerSize, wallSize, playerSize)
    

    ctx.fillStyle = 'red'
    ctx.arc(ballX, ballY, ballSize, 0, 2 * Math.PI)
    ctx.fill()
    
    ballMove()
    
    return {ballX, ballY}
    
}


AB.world.takeAction = function ( [actionPlayer1, actionPlayer2] ) {


    tmp1Pos = player1Pos
    tmp2Pos = player2Pos

    actionPlayer1 ? tmp1Pos+=3 : tmp1Pos-=3
    actionPlayer2 ? tmp2Pos+=3 : tmp2Pos-=3
    
    if(tmp1Pos + playerSize < canvas.width && tmp1Pos - playerSize > 0)
        player1Pos = tmp1Pos

    if(tmp2Pos + playerSize < canvas.width && tmp2Pos - playerSize > 0)
        player2Pos = tmp2Pos

}