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.drawImage(knilchon,(i * c.width) / gridsize,(k * c.height) / gridsize,c.width / gridsize,c.height / gridsize);
                    } else {
                        ctx.drawImage(knilchoff,(i * c.width) / gridsize,(k * c.height) / gridsize,c.width / gridsize,c.height / gridsize);
                    }
                    ctx.rect(
                        (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 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) {
		drawPointOnCanvas(c, e, ctx);
	});
	var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    drawGrid(gridsize,grid,c,ctx)
}