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

let board = [
["r","n","b","q","k","b","n","r"],
["p","p","p","p","p","p","p","p"],
["","","","","","","",""],
["","","","","","","",""],
["","","","","","","",""],
["","","","","","","",""],
["P","P","P","P","P","P","P","P"],
["R","N","B","Q","K","B","N","R"]
];

let selected = null;

function drawBoard(){
    let size = canvas.width / 8;

    for(let y=0;y<8;y++){
        for(let x=0;x<8;x++){
            ctx.fillStyle = (x+y)%2==0 ? "#eee" : "#555";
            ctx.fillRect(x*size,y*size,size,size);

            let piece = board[y][x];
            if(piece){
                ctx.fillStyle = piece === piece.toUpperCase() ? "white" : "black";
                ctx.font = "30px monospace";
                ctx.fillText(piece, x*size+10, y*size+30);
            }
        }
    }
}

canvas.addEventListener("click", e=>{
    let rect = canvas.getBoundingClientRect();
    let x = Math.floor((e.clientX - rect.left) / (canvas.width/8));
    let y = Math.floor((e.clientY - rect.top) / (canvas.height/8));

    if(selected){
        board[y][x] = board[selected.y][selected.x];
        board[selected.y][selected.x] = "";
        selected = null;
    } else {
        if(board[y][x] !== ""){
            selected = {x,y};
        }
    }

    drawBoard();
});

drawBoard();