KnilchWeb/built/main.js

var gridsize = 3;
var grid = initGrid(gridsize);
grid = populateGrid(grid, gridsize);
var c = document.getElementById("Game");
var knilchoff = new Image();
var knilchon = new Image();
var ctx = c.getContext("2d");
var scoring = true;
var turns = 0;
var edit = false;
function initGrid(gridsize) {
    var grid = new Array(gridsize);
    for (var i = 0; i < gridsize; i++) {
        grid[i] = new Array(gridsize);
        for (var k = 0; k < gridsize; k++) {
            grid[i][k] = false;
        }
    }
    return grid;
}
//ctx.rect(0,0,c.width/gridsize, c.height/gridsize);
function getCursorPositionOnCanvas(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    return { x, y };
}
function drawPointOnCanvas(canvas, event, ctx) {
    var pos = getCursorPositionOnCanvas(canvas, event);
    ctx.moveTo(pos.x, pos.y);
    ctx.lineTo(pos.x + 1, pos.y + 1);
    ctx.stroke();
}
function resizeCanvas(canvas) {
    canvas.width = (window.innerHeight / 100) * 80;
    canvas.height = (window.innerHeight / 100) * 80;
}
function drawGrid(gridsize, grid, c, ctx) {
    for (var i = 0; i < gridsize; i++) {
        for (var k = 0; k < gridsize; k++) {
            if (grid[i][k] == true) {
                ctx.fillStyle = "#50C88C";
                ctx.fillRect((i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
                ctx.drawImage(knilchon, (i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
            }
            else {
                ctx.fillStyle = "#C85050";
                ctx.fillRect((i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
                ctx.drawImage(knilchoff, (i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
            }
        }
    }
    ctx.stroke();
}
function repopulateGrid() {
    grid = populateGrid(grid, gridsize);
    edit = false;
    turns = 0;
    scoring = true;
    drawGrid(gridsize, grid, c, ctx);
    var bt = document.getElementById("edittoggle");
    bt.style.color = "black";
}
function changeGridsize(amount) {
    gridsize += amount;
    grid = initGrid(gridsize);
    grid = populateGrid(grid, gridsize);
    drawGrid(gridsize, grid, c, ctx);
}
function populateGrid(grid, gridsize) {
    let solvegrid = initGrid(gridsize);
    for (var i = 0; i < gridsize; i++) {
        for (var k = 0; k < gridsize; k++) {
            if (Math.random() > 0.5) {
                toggleSpace(i, k);
                solvegrid[k][i] = true;
            }
            else {
                solvegrid[k][i] = false;
            }
        }
    }
    console.table(solvegrid);
    return grid;
}
function togglebool(bool) {
    if (bool == true) {
        return false;
    }
    return true;
}
function handelClicks(c, e, gridsize, grid, ctx) {
    var pos = getCursorPositionOnCanvas(c, e);
    for (var i = 0; i < gridsize; i++) {
        for (var k = 0; k < gridsize; k++) {
            if (pos.x > (i * c.width) / gridsize &&
                pos.x < (i * c.width) / gridsize + c.width / gridsize) {
                if (pos.y > (k * c.height) / gridsize &&
                    pos.y < (k * c.height) / gridsize + c.width / gridsize) {
                    toggleSpace(i, k);
                }
            }
        }
    }
    drawGrid(gridsize, grid, c, ctx);
    if (scoring == true) {
        turns++;
        var none = false;
        var all = false;
        if (grid[0][0] == false) {
            none = true;
        }
        else {
            all = true;
        }
        for (i = 0; i < gridsize; i++) {
            for (k = 0; k < gridsize; k++) {
                if (grid[i][k] == false) {
                    all = false;
                }
                else {
                    none = false;
                }
            }
        }
        if (all == true || none == true) {
            Winscreen(c, ctx);
            console.log(`Won took ${turns} to win.`);
        }
    }
}
function toggleSpace(i, k) {
    grid[i][k] = togglebool(grid[i][k]);
    if (edit == false) {
        if (i != 0) {
            grid[i - 1][k] = togglebool(grid[i - 1][k]);
        }
        if (k != 0) {
            grid[i][k - 1] = togglebool(grid[i][k - 1]);
        }
        if (i != gridsize - 1) {
            grid[i + 1][k] = togglebool(grid[i + 1][k]);
        }
        if (k != gridsize - 1) {
            grid[i][k + 1] = togglebool(grid[i][k + 1]);
        }
    }
}
function Winscreen(c, ctx) {
    ctx.fillStyle = "#fffff";
    ctx.font;
    ctx.fillText(`You won it took ${turns} Turns.`, 30, c.height / 2, c.width - 30);
}
function toggleEditMode() {
    edit = togglebool(edit);
    scoring = false;
    var bt = document.getElementById("edittoggle");
    if (edit == true) {
        bt.style.color = "red";
    }
    else {
        bt.style.color = "blue";
    }
}
function bodyLoad() {
    resizeCanvas(c);
    c.addEventListener("mousedown", function (e) {
        handelClicks(c, e, gridsize, grid, ctx);
    });
    knilchon.src = "knilch.png";
    knilchon.onload = (e) => {
        knilchoff.src = "knilchoff.png";
        knilchoff.onload = (e) => {
            ctx.moveTo(0, 0);
            drawGrid(gridsize, grid, c, ctx);
        };
    };
}