Pong

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 = 2.0
let mutable dy = -2.0
let ballRadius = 8.0

let mutable leftPressed = false
let mutable rightPressed = false

let mutable score = 0
let mutable gameOver = false

document.addEventListener("keydown", fun e ->
    let ke = e :?> KeyboardEvent
    if ke.key = "a" then leftPressed <- true
    if ke.key = "d" then rightPressed <- true
    if ke.key = "r" && gameOver then  // restart feature
        ballX <- 250.
        ballY <- 150.
        dx <- 2.0
        dy <- -2.0
        paddleX <- 200.
        score <- 0
        gameOver <- false
)

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 drawScore() =
    ctx.font <- "16px Arial"
    ctx.fillStyle <- U3.Case1 "black"
    ctx.fillText($"Score: {score}", 10., 20.)

let drawGameOver() =
    ctx.font <- "32px Arial"
    ctx.fillStyle <- U3.Case1 "red"
    ctx.fillText("GAME OVER", float canvas.width / 2. - 100., float canvas.height / 2.)
    ctx.font <- "20px Arial"
    ctx.fillStyle <- U3.Case1 "black"
    ctx.fillText("Press R to Restart", float canvas.width / 2. - 100., float canvas.height / 2. + 40.)

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

    drawBall()
    drawPaddle()
    drawScore()

    if not gameOver then
        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
                score <- score + 1

                // optional: gradually increase speed
                dx <- if dx > 0. then 2.0 + float(score) * 0.1 else -2.0 - float(score) * 0.1
                dy <- if dy > 0. then 2.0 + float(score) * 0.1 else -2.0 - float(score) * 0.1
            else
                gameOver <- true

        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.
    else
        drawGameOver()

    window.requestAnimationFrame(update) |> ignore

window.requestAnimationFrame(update) |> ignore