KnilchWeb/main.ts

function initGrid(gridsize: number): boolean[][] {
	var grid: Array<Array<boolean>> = 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: HTMLCanvasElement, event: any) {
	const rect = canvas.getBoundingClientRect();
	const x = event.clientX - rect.left;
	const y = event.clientY - rect.top;
	return { x, y };
}
function drawPointOnCanvas(
	canvas: HTMLCanvasElement,
	event: any,
	ctx: CanvasRenderingContext2D
) {
	var pos = getCursorPositionOnCanvas(canvas, event);
	ctx.moveTo(pos.x, pos.y);
	ctx.lineTo(pos.x + 1, pos.y + 1);
	ctx.stroke();
}
function resizeCanvas(canvas: HTMLCanvasElement) {
	canvas.width = (window.innerHeight / 100) * 90;
	canvas.height = (window.innerHeight / 100) * 90;
}
function drawGrid(gridsize: number, grid: boolean[][], c: HTMLCanvasElement, ctx: CanvasRenderingContext2D){
    var knilchon : HTMLImageElement = new Image()
    knilchon.src = 'knilch.png'
    knilchon.onload = (e: Event) => {
        var knilchoff : HTMLImageElement = new Image()
        knilchoff.src = 'knilchoff.png'
        knilchoff.onload = (e: Event) => {
            for (var i: number = 0; i <= gridsize; i++) {
                for (var k: number = 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 populateGrid (grid: boolean[][],gridsize):boolean[][]{
    for (var i: number = 0; i < gridsize; i++) {
        for (var k: number = 0; k < gridsize; k++) {
            if (Math.random() > 0.5) {
                grid[i][k] = true
            } else {
                grid[i][k] = false
            }
        }
    }
    return grid
}
function togglebool(bool:boolean):boolean {
    if (bool == true) {
        return false
    }
    return true
}

function handelClicks(c: HTMLCanvasElement,e: Event,gridsize: number,grid: boolean[][],ctx: CanvasRenderingContext2D){
    var pos = getCursorPositionOnCanvas(c,e)
    for (var i: number = 0; i < gridsize; i++) {
        for (var k: number = 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){
                    grid[i][k] = togglebool(grid[i][k])
                    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])
                    }
                }
            }
        }
    }
    drawGrid(gridsize,grid,c,ctx)
}

function bodyLoad() {
    var gridsize: number = 3;
    var grid : boolean[][] = initGrid(gridsize)
    grid = populateGrid(grid, gridsize)
	var c: HTMLCanvasElement = document.getElementById(
		"Game"
	) as HTMLCanvasElement;
	resizeCanvas(c);
	c.addEventListener("mousedown", function(e) {
		handelClicks(c, e,gridsize,grid, ctx);
	});
	var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    drawGrid(gridsize,grid,c,ctx)
}