import { gameLoop } from "@common/game";
import Input from "@common/input";

const setup = () => {
    let x = window.innerWidth / 2 - 16;
    let y = window.innerHeight / 2 - 16;
    const ball = document.createElement('div');

    ball.style.display = 'block';
    ball.style.width = '32px';
    ball.style.height = '32px';
    ball.style.borderRadius = '50%';
    ball.style.backgroundColor = 'red';
    ball.style.position = 'absolute';

    document.body.append(ball);

    const speed = Math.min(window.innerHeight, window.innerWidth);

    return { x, y, speed, ball };
}

const frame = (dt: number, state: ReturnType<typeof setup>) => {
    const dx = Input.getHorizontal();
    const dy = Input.getVertical();

    state.x += state.speed * dx * dt;
    state.y += state.speed * dy * dt;

    state.ball.style.left = `${state.x}px`;
    state.ball.style.top = `${state.y}px`;
}

export default gameLoop(setup, frame);