const cvs       = document.getElementById("canvas");
const brush     = cvs.getContext("2d");
const headColor = "#ad3636";
const bodyColor = "#00e8ff";
const brWidth   = 8;
const brHeight  = 8;
let player      = [1, 1];  // x,y
let target      = [2, 2];  // x,y


const clearCanvas = () => {
    brush.clearRect(0, 0, cvs.width, cvs.height);
}


/*    Draw Functions    */

const preDrawLine = (eve) => {
    const x    = eve.clientX - cvs.offsetLeft;
    const y    = eve.clientY - cvs.offsetTop;
    clicks += 1;

    if (clicks == 1) {
        player[0] = x - 5;
        player[1] = y - 5;

        // 1st  x, y
        brush.fillStyle = headColor;
        brush.fillRect(player[0], player[1], brWidth, brHeight);
    } else if (clicks == 2) {
        target[0] = x - 5;
        target[1] = y - 5;

        // 2nd xTwo, yTwo
        brush.fillStyle = headColor;
        brush.fillRect(target[0], target[1], brWidth, brHeight);

        brush.fillStyle = bodyColor;
        drawLine(player, target);

        clicks = 0;
    }
}

const drawLine = (start = [0, 0], end = [1, 1]) => {
    brush.lineWidth   = brWidth;
    brush.strokeStyle = bodyColor;

    brush.beginPath();
    brush.moveTo(start[0], start[1]);
    brush.lineTo(end[0], end[1]);
    brush.stroke();
}


// Shitty way to draw line

// const drawLine = (start = [0, 0], end = [1, 1]) => {
//     // Slope
//     const m    = (end[1] - start[1]) / (end[0] - start[0]);
//     // Y-intercept
//     const b    = start[1] - (m * start[0]);
//     let change = 1;
//     let xPt    = null;
//     let yPt    = null;
//
//     // if slope is +/- or 0
//     if (m > 0) {
//         change = change;
//     } else if (m < 0) {
//         change = -change;
//     } else {
//         change = 0;
//     }
//
//     xPt = start[0];
//     if (xPt == end[0]) {  // If vertical
//         yPt = end[1];
//         while (yPt !== end[1]) {
//             yPt += change;
//             brush.fillRect(xPt, yPt, brWidth, brHeight);
//         }
//     } else {               // All others
//         while (xPt < end[0]) {
//             xPt += change;
//             yPt = m * xPt + b;
//             brush.fillRect(xPt, yPt, brWidth, brHeight);
//         }
//     }
// }
