diff --git a/built/index.html b/built/index.html
new file mode 100644
index 0000000..384a0b2
--- /dev/null
+++ b/built/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Knilch Out
+
+
+
+
+
+
+
+
+
+
diff --git a/knilch.png b/built/knilch.png
similarity index 100%
rename from knilch.png
rename to built/knilch.png
diff --git a/knilchoff.png b/built/knilchoff.png
similarity index 100%
rename from knilchoff.png
rename to built/knilchoff.png
diff --git a/built/main.js b/built/main.js
new file mode 100644
index 0000000..2678f1a
--- /dev/null
+++ b/built/main.js
@@ -0,0 +1,172 @@
+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) {
+ for (var i = 0; i < gridsize; i++) {
+ for (var k = 0; k < gridsize; k++) {
+ if (Math.random() > 0.5) {
+ grid[i][k] = true;
+ }
+ else {
+ grid[i][k] = false;
+ }
+ }
+ }
+ 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) {
+ 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]);
+ }
+ }
+ }
+ }
+ }
+ }
+ 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 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);
+ };
+ };
+}
diff --git a/index.html b/index.html
deleted file mode 100644
index bc2f11e..0000000
--- a/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
- Knilch Out
-
- ![]()
-
-
-
diff --git a/main.js b/main.js
deleted file mode 100644
index 837cc08..0000000
--- a/main.js
+++ /dev/null
@@ -1,109 +0,0 @@
-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) {
- var rect = canvas.getBoundingClientRect();
- var x = event.clientX - rect.left;
- var y = event.clientY - rect.top;
- return { x: x, y: 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) * 90;
- canvas.height = (window.innerHeight / 100) * 90;
-}
-function drawGrid(gridsize, grid, c, ctx) {
- var knilchon = new Image();
- knilchon.src = 'knilch.png';
- knilchon.onload = function (e) {
- var knilchoff = new Image();
- knilchoff.src = 'knilchoff.png';
- knilchoff.onload = function (e) {
- 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 populateGrid(grid, gridsize) {
- for (var i = 0; i < gridsize; i++) {
- for (var k = 0; k < gridsize; k++) {
- if (Math.random() > 0.5) {
- grid[i][k] = true;
- }
- else {
- grid[i][k] = false;
- }
- }
- }
- 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) {
- 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 = 3;
- var grid = initGrid(gridsize);
- grid = populateGrid(grid, gridsize);
- var c = document.getElementById("Game");
- 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);
-}
diff --git a/main.ts b/main.ts
index e692ed0..3e500d3 100644
--- a/main.ts
+++ b/main.ts
@@ -1,12 +1,23 @@
+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> = 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
+ 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);
@@ -27,107 +38,181 @@ function drawPointOnCanvas(
ctx.stroke();
}
function resizeCanvas(canvas: HTMLCanvasElement) {
- canvas.width = (window.innerHeight / 100) * 90;
- canvas.height = (window.innerHeight / 100) * 90;
+ canvas.width = (window.innerHeight / 100) * 80;
+ canvas.height = (window.innerHeight / 100) * 80;
}
-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 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 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 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 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 changeGridsize(amount: number) {
+ gridsize += amount;
+ grid = initGrid(gridsize);
+ grid = populateGrid(grid, gridsize);
+ drawGrid(gridsize, grid, c, ctx);
+}
+
+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 (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]);
+ }
+ }
+ }
+ }
+ }
+ }
+ 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 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() {
- 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);
+ handelClicks(c, e, gridsize, grid, ctx);
});
- var ctx = c.getContext("2d");
- ctx.moveTo(0, 0);
- drawGrid(gridsize,grid,c,ctx)
-}
\ No newline at end of file
+
+ 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);
+ };
+ };
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..7bbb805
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "target": "ES6",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "outDir": "./built"
+ }
+}
\ No newline at end of file