var canvas;
var ctx;

/* Base resolution in osu! skins used for scaling */
const internal_width = 640;
const internal_height = 480;

/* Updates per second */
const framerate = 60;

/* Colors for playfield */
const colors = {
    playfield: "#000",
    lane_separator: "#222",
    hitposition: "#AA0",
    note: "#FFF"
};

/* Values retrieved from DOM */
var options = {
    columnstart: 0,
    columnwidth: 0,
    hitposition: 0,
    scrollspeed: 0,
    noteratio: 0,
    keycount: 0
}

/* Clears the canvas */
function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

/* Draws a rectangle */
function rect(x, y, w, h, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);
}

/* Draws a string */
function text(string, x, y, color) {
    ctx.fillStyle = color;
    ctx.fillText(string, x, y);
}

/* Translates osu! coordinates to screen coordinates */
function translate_pos(x, y) {
    return {
        x: Math.floor(x / internal_width * canvas.width),
        y: Math.floor(y / internal_height * canvas.height)
    }
}

function draw() {
    clear()

    const columnstart = translate_pos(options.columnstart, 0);
    const columnwidth = translate_pos(options.columnwidth, 0);
    const hitposition = translate_pos(options.columnstart, options.hitposition);

    const playfield_width = columnwidth.x * options.keycount;
    const note_height = columnwidth.x * options.noteratio;

    // playfield background
    rect(columnstart.x, 0, playfield_width, canvas.height, colors.playfield);

    // lane separators
    for (var i = 0; i <= options.keycount; i++) {
        rect(columnstart.x + i * columnwidth.x, 0, 1, canvas.height, colors.lane_separator);
    }

    // hitpos
    rect(hitposition.x, hitposition.y, playfield_width, 5, colors.hitposition);

    // notes
    let y_pos = hitposition.y - note_height;
    while (y_pos > 0) {
        for (let i = 0; i < options.keycount; ++i) {
            rect (
                columnstart.x + i * columnwidth.x,
                y_pos,
                columnwidth.x, note_height, colors.note
            );

            // completely inaccurate but i cba to simulate the whole playfield
            y_pos -= options.scrollspeed * 3;
        }
    }
}

window.onload = function () {
    create_prologue();

    canvas = document.getElementById("playfield");
    ctx = canvas.getContext("2d");

    ctx.font = "15px Arial";
    ctx.textBaseline = "hanging";

    for (let input of document.getElementsByTagName("input")) {
        input.onchange = function () {
            options[this.id] = this.value;
            document.getElementById(this.id + "_out").innerText = this.value;
        };

        input.onchange();
    }

    setInterval(function () {
        draw();
    }, 1000 / framerate);
};