module App

open Browser
open Browser.Types
open Fable.Core

let canvas = document.getElementById("game") :?> HTMLCanvasElement
let ctx = canvas.getContext_2d()

let mutable paddleX = 200.0
let paddleWidth = 80.0
let paddleHeight = 12.0

let mutable ballX = 250.0
let mutable ballY = 150.0
let mutable dx = 10.0
let mutable dy = -2.0
let ballRadius = 8.0

let mutable leftPressed = false
let mutable rightPressed = false

document.addEventListener("keydown", fun e ->
    let ke = e :?> KeyboardEvent
    if ke.key = "a" then leftPressed <- true
    if ke.key = "d" then rightPressed <- true
)

document.addEventListener("keyup", fun e ->
    let ke = e :?> KeyboardEvent
    if ke.key = "a" then leftPressed <- false
    if ke.key = "d" then rightPressed <- false
)

let drawBall() =
    ctx.beginPath()
    ctx.arc(ballX, ballY, ballRadius, 0., System.Math.PI * 2.)
    ctx.fillStyle <- U3.Case1 "red"
    ctx.fill()
    ctx.closePath()

let drawPaddle() =
    ctx.beginPath()
    ctx.rect(paddleX, 280., paddleWidth, paddleHeight)
    ctx.fillStyle <- U3.Case1 "black"
    ctx.fill()
    ctx.closePath()

let rec update (_: float) =
    ctx.clearRect(0.,0., canvas.width, canvas.height)

    drawBall()
    drawPaddle()

    if ballX + dx > float canvas.width - ballRadius || ballX + dx < ballRadius then
        dx <- -dx

    if ballY + dy < ballRadius then
        dy <- -dy
    elif ballY + dy > 280. - ballRadius then
        if ballX > paddleX && ballX < paddleX + paddleWidth then
            dy <- -dy
        else
            ballX <- 250.
            ballY <- 150.
            dx <- 2.
            dy <- -2.

    ballX <- ballX + dx
    ballY <- ballY + dy

    if leftPressed && paddleX > 0. then
        paddleX <- paddleX - 4.
    if rightPressed && paddleX < float canvas.width - paddleWidth then
        paddleX <- paddleX + 4.

    window.requestAnimationFrame(update) |> ignore

window.requestAnimationFrame(update) |> ignore