const canv = document.getElementById("canvas");
const ctx = canv.getContext("2d");
let blockSide = 0.05;
let blockLeft = 0.5;
let blockTop = 0.3;
let hurdles = [];
let minGap = blockSide * 2;
let minMinGap = blockSide * 1.1;
let hurSpeed = 0.006;
let addNext = 0.1;
let box = [];
let backLines = [];
let lineNo = 30;
let thread = null;

let protips = [
    "Focus.",
    "Use the vertical line to guide the square.",
    "Keep the cursor on the square, not higher or lower."
];

let tmpScore = localStorage.getItem("score");
let score = 0;
let prevScore = tmpScore == null ? 0 : parseInt(tmpScore);

let MIN_GAP = blockSide * 3;
let HUR_SPEED = 0.006;
let ADD_NEXT = 0.1;

document.body.addEventListener("mousemove", (event) => {
    blockLeft = event.clientX / window.innerWidth;
    if (blockLeft < blockSide / 2) {
        blockLeft = blockSide / 2;
    } else if (blockLeft > 1 - blockSide / 2) {
        blockLeft = 1 - blockSide / 2;
    }
    genBox();
});

const startGame = () => {
    const shadow = document.getElementById("shadow").style;
    shadow.display = "none";
    shadow.opacity = "0";
    shadow.animation = "fade 1s forwards 1";
    document.getElementById("howto").style.display = "none";
    document.getElementById("canvas").setAttribute("gta-ify", false);
    hurdles.length = 0;
    if (score > prevScore) {
        localStorage.setItem("score", score);
        prevScore = score;
    }
    score = 0;
    setScore();
    minGap = MIN_GAP;
    hurSpeed = HUR_SPEED;
    addNext = ADD_NEXT;
    thread = setInterval(animate, 20);
};

const stopGame = () => {
    document.getElementById("canvas").setAttribute("gta-ify", true);
    document.getElementById("protips").innerHTML =
        protips[Math.floor(Math.random() * protips.length)];
    clearInterval(thread);
    setTimeout(() => {
        document.getElementById("shadow").style.display = "block";
        document.getElementById("replay").style.display = "block";
    }, 2000);
};

const setCanvas = () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    canv.width = w;
    canv.height = h;
    canv.style.width = w + "px";
    canv.style.height = h + "px";
    genBox();
    paint();
};

window.onresize = () => {
    setCanvas();
};

const paint = () => {
    const coll = checkCollision();
    const w = window.innerWidth;
    const h = window.innerHeight;
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, w, h);
    for (let i = 0; i < backLines.length; i++) {
        ctx.fillStyle = backLines[i].col;
        ctx.fillRect(0, backLines[i].pos * h, w, h / lineNo);
    }
    ctx.fillStyle = "rgba(255,255,255,0.05)";
    ctx.fillRect(0, h * blockTop - (w * blockSide) / 2, w, w * blockSide);
    ctx.fillRect(w * (blockLeft - blockSide / 2), 0, w * blockSide, h);
    ctx.fillStyle = coll != -1 ? "#f33" : "#fff";
    ctx.beginPath();
    ctx.moveTo(box[0][0] * w, box[0][1] * w);
    for (let i = 1; i < 4; i++) {
        ctx.lineTo(box[i][0] * w, box[i][1] * w);
    }
    ctx.fill();
    for (let i = 0; i < hurdles.length; i++) {
        for (let j = 0; j < 2; j++) {
            ctx.fillStyle = coll == i * 2 + j ? "#f33" : "#fff";
            ctx.beginPath();
            ctx.moveTo(
                hurdles[i].rect[j][0][0] * w,
                hurdles[i].rect[j][0][1] * h
            );
            for (let n = 1; n < 4; n++) {
                ctx.lineTo(
                    hurdles[i].rect[j][n][0] * w,
                    hurdles[i].rect[j][n][1] * h
                );
            }
            ctx.fill();
        }
    }
    if (coll != -1) {
        stopGame();
    }
};

const animate = () => {
    for (let i = 0; i < hurdles.length; i++) {
        for (let m = 0; m < 2; m++) {
            for (let n = 0; n < 4; n++) {
                hurdles[i].rect[m][n][1] -= hurSpeed;
            }
        }
    }
    for (let i = 0; i < backLines.length; i++) {
        backLines[i].pos -= (hurSpeed / 4) * 3;
    }
    if (hurdles.length === 0) {
        addHurdle();
    } else if (hurdles[hurdles.length - 1].rect[0][0][1] < addNext) {
        addHurdle();
    }
    if (hurdles.length > 0) {
        for (let i = 0; i < hurdles.length; i++) {
            if (
                hurdles[i].rect[0][2][1] < blockTop - blockSide / 2 &&
                !hurdles[i].checked
            ) {
                score++;
                hurdles[i].checked = true;
                minGap =
                    (MIN_GAP - minMinGap) * (1 / (score / 15 + 1)) + minMinGap;
                hurSpeed = (3 - 2 / (score / 25 + 1)) * HUR_SPEED;
                addNext = (3 - 2 / (score / 25 + 1)) * ADD_NEXT;
                setScore();
                break;
            }
        }
    }
    if (hurdles[0].rect[0][0][1] < -1) {
        hurdles.shift();
    }
    if (backLines[0].pos < -1 / lineNo) {
        backLines.shift();
        addLine(backLines[backLines.length - 1].pos + 1 / lineNo);
    }
    paint();
};

const contElem = (elem, arr) => arr.includes(elem);

const addHurdle = () => {
    const posX = Math.random() * (1 - blockSide * 2) + blockSide;
    const gap = minGap;
    hurdles.push({
        rect: [
            [
                [0, 1],
                [posX - gap / 2, 1],
                [posX - gap / 2, 1 + blockSide],
                [0, 1 + blockSide]
            ],
            [
                [posX + gap / 2, 1],
                [1, 1],
                [1, 1 + blockSide],
                [posX + gap / 2, 1 + blockSide]
            ]
        ],
        checked: false
    });
};

const genLines = () => {
    for (let i = 0; i < lineNo + 10; i++) {
        addLine((1 / lineNo) * i);
    }
};

const addLine = (position) => {
    const gray = 10 + Math.floor(Math.random() * 30);
    backLines.push({
        col: `rgb(${gray * 2},${gray},${gray})`,
        pos: position
    });
};

const genBox = () => {
    const hb = blockSide / 2;
    const bt = (blockTop * window.innerHeight) / window.innerWidth;
    box.length = 0;
    box.push([blockLeft - hb, bt - hb]);
    box.push([blockLeft + hb, bt - hb]);
    box.push([blockLeft + hb, bt + hb]);
    box.push([blockLeft - hb, bt + hb]);
};

const map = (arr) => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    const arr2 = [];
    for (let i = 0; i < arr.length; i++) {
        arr2.push([arr[i][0] * w, arr[i][1] * h]);
    }
    return arr2;
};

const map2 = (arr) => {
    const w = window.innerWidth;
    const arr2 = [];
    for (let i = 0; i < arr.length; i++) {
        arr2.push([arr[i][0] * w, arr[i][1] * w]);
    }
    return arr2;
};

const checkCollision = () => {
    for (let i = 0; i < hurdles.length; i++) {
        for (let j = 0; j < 2; j++) {
            if (collision(map2(box), map(hurdles[i].rect[j]))) {
                return 2 * i + j;
            }
        }
    }
    return -1;
};

const collision = (r1, r2) => {
    for (let i = 0; i < r1.length; i++) {
        if (pointIn(r2, r1[i][0], r1[i][1])) {
            return true;
        }
    }
    for (let i = 0; i < r2.length; i++) {
        if (pointIn(r1, r2[i][0], r2[i][1])) {
            return true;
        }
    }
    return false;
};

const pointIn = (rect, x, y) => {
    return x > rect[0][0] && x < rect[1][0] && y > rect[1][1] && y < rect[2][1];
};

const setScore = () => {
    const elem = document.getElementById("score");
    elem.innerHTML = `${score} | ${prevScore}`;
    elem.style.animation = "boop 300ms 1";
    setTimeout(() => {
        elem.style.animation = "none";
    }, 300);
};

genLines();
setCanvas();