// Object n IDs
const scoreMsg      = document.getElementById("score");
const restartBttn   = document.getElementById("restart");
const upCont        = document.getElementById("up");
const downCont      = document.getElementById("down");
const leftCont      = document.getElementById("left");
const rightCont     = document.getElementById("right");
const cvs           = document.getElementById("canvas");
const brush         = cvs.getContext("2d");

// Settings
const intervalSpeed = 50;                     // 'Game speed/refresh'
const timeoutAmount = 40;                     // Used in conjunction with intervalSpeed
                                              // Basically, it lets the head 'scan' if
                                              // it's gunna collide with anything thus
                                              // setting game state to fail if true...

let intervalTimer   = null;                   // Main game 'loop' object
let intervalTick    = 0;                      // See if we need to add to score
let score           = 0;                      // The score
let brWidth         = 8;                      // Brush ir 'body' width
let brHeight        = 8;                      // Brush ir 'body' height
let dirX            = 11;                     // Direction modifyer x
let dirY            = 0;                      // Direction modifyer y
let scoreTiming     = 1000;                   // Add to score score evey ~1 sec if not dead
let headColor       = "#ad3636";              // Snake head color
let bodyColor       = "#00e8ff";              // Snake body color
let posX            = cvs.width / 2;          // Default to center of canvas x
let posY            = cvs.height / 2;         // Default to center of canvas y
const boundsWidth   = cvs.width  - brWidth;   // Get bounds width size
const boundsHeight  = cvs.height - brHeight;  // Get bounds height size

// Main Game Loop
const loop = () => {
    brush.fillStyle = headColor;
    brush.fillRect(posX, posY, brWidth, brHeight);
    const p   = brush.getImageData(posX + dirX, posY + dirY, brWidth, brHeight).data;
    const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    brush.fillStyle = bodyColor;

    setTimeout(function () {  // Timeout used so head can be seen b4 body draws over it
        if (hex != bodyColor) { // Check if we colided with body
            // Bounds check
            if (posX > 0 && posY > 0 && posX < boundsWidth && posY < boundsHeight) {
                brush.fillRect(posX, posY, brWidth, brHeight);
                posX += dirX;
                posY += dirY;

                intervalTick += intervalSpeed;
                // intervalSpeed is mili seconds; 1000 mili is 1 sec
                if (intervalTick >= scoreTiming) {
                    scoreMsg.innerHTML = "Score: " + (score += 1);
                    intervalTick       = 0;
                }
            } else {
                lostGame();
            }
        } else {
            lostGame();
        }

    }, timeoutAmount);
}

const lostGame = () => {
    brush.fillStyle = "#ff0000";
    brush.fillText("You Lose!", (cvs.width / 2) - 128, 72);
    restartBttn.style.display = "block";
    clearInterval(intervalTimer);
}

const restartGame = () => {
    brush.clearRect(0, 0, cvs.width, cvs.height);
    posX               = cvs.width / 2;
    posY               = cvs.height / 2;
    score              = 0
    intervalTick       = 0;
    scoreMsg.innerHTML = "Score:";
    restartBttn.style.display = "none";
    brush.fillRect(posX, posY, brWidth, brHeight);
    intervalTimer = setInterval(loop, intervalSpeed);
}

// Start Game
brush.font    = "72px Arial";
intervalTimer = setInterval(loop, intervalSpeed);
