KnilchWeb/main.ts

var gridsize: number = 3;
var grid: boolean[][] = initGrid(gridsize);
grid = populateGrid(grid, gridsize);
var c: HTMLCanvasElement = document.getElementById("Game") as HTMLCanvasElement;
var knilchoff: HTMLImageElement = new Image();
var knilchon: HTMLImageElement = new Image();
var ctx = c.getContext("2d");
var scoring: boolean = true;
var turns: number = 0;
var edit: boolean = false;

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) * 80;
	canvas.height = (window.innerHeight / 100) * 80;
}
function drawGrid(
	gridsize: number,
	grid: boolean[][],
	c: HTMLCanvasElement,
	ctx: CanvasRenderingContext2D
) {
	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 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: number) {
	gridsize += amount;
	grid = initGrid(gridsize);
	grid = populateGrid(grid, gridsize);
	drawGrid(gridsize, grid, c, ctx);
}

function populateGrid(grid: boolean[][], gridsize): boolean[][] {
	let solvegrid: boolean[][] = initGrid(gridsize)
	for (var i: number = 0; i < gridsize; i++) {
		for (var k: number = 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: 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
				) {
					toggleSpace(i,k)
				}
			}
		}
	}
	drawGrid(gridsize, grid, c, ctx);
	if (scoring == true) {
		turns++;
		var none: boolean = false;
		var all: boolean = 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: number){
	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: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
	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: Event) => {
		knilchoff.src = "knilchoff.png";
		knilchoff.onload = (e: Event) => {
			ctx.moveTo(0, 0);
			drawGrid(gridsize, grid, c, ctx);
		};
	};
}