/**** 
* Classes
****/
var Zbert = Container.expand(function (gridX, gridY, width, height, gridSize) {
	var self = Container.call(this);
	this.gridX = gridX;
	this.gridY = gridY;
	this.gridSize = gridSize;
	var zbertGraphics = self.attachAsset('Zbert1', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	zbertGraphics.width = width;
	zbertGraphics.height = height;
	// Function to update Zbert's position on the grid
	self.moveTo = function (newGridX, newGridY) {
		this.gridX = newGridX;
		this.gridY = newGridY;
		this.x = newGridX * width;
		this.y = newGridY * height;
		// Trigger tile flip and win check
		game.grid.flipTiles(this.gridX, this.gridY);
		if (game.grid.checkWinCondition()) {
			game.showWin();
		}
	};
	// Initialize Zbert's position
	self.moveTo(gridX, gridY);
});
// Grid class to manage the puzzle grid
var Grid = Container.expand(function () {
	var self = Container.call(this);
	this.gridSize = 8; // Gridsize control - 9 x 9
	var tileArray = []; // Array to hold the tiles
	// Initialize the grid with tiles
	self.initGrid = function () {
		var tileWidth = 250;
		var tileHeight = 270;
		for (var i = 0; i < this.gridSize; i++) {
			tileArray[i] = [];
			var numTilesInRow = i + 1;
			var rowOffset = (this.gridSize - numTilesInRow) * (tileWidth / 2 + 5);
			for (var j = 0; j < numTilesInRow; j++) {
				var tile = new Tile(i, j, tileWidth, tileHeight, this.gridSize);
				tile.x = rowOffset + j * (tileWidth + 0);
				tile.y = i * (tileHeight - 90);
				self.addChild(tile);
				tileArray[i][j] = tile;
				// Attach Zbert to the left hand bottom grid cell
				if (i === this.gridSize - 1 && j === 0) {
					var zbert = new Zbert(0, this.gridSize - 1, 180, 180, this.gridSize);
					zbert.name = 'Zbert';
					self.addChild(zbert);
				}
				// Update color counts
				if (tile.color === 0xFFFFFF) {
					tileColorCounter.whiteCount++;
				} else if (tile.color === 0x33d62a) {
					tileColorCounter.greenCount++;
				}
				// Update the TileColorCounter display with the new counts after reinitialization
				if (tileColorCounter) {
					tileColorCounter.updateCounts(tileColorCounter.whiteCount, tileColorCounter.greenCount);
				}
			}
		}
	};
	// Function to flip the color of a tile and its neighbors
	self.flipTiles = function (x, y) {
		// Highlight the clicked tile in red
		var tileToFlip = tileArray[x][y];
		if (tileToFlip) {
			tileToFlip.highlight(0xff0000);
			// Flip the tile color after a delay
			LK.setTimeout(function () {
				tileToFlip.flipColor();
			}, 700);
		}
		// Update color counts after a delay to ensure it happens after all tiles have flipped
		LK.setTimeout(function () {
			var whiteCount = 0;
			var greenCount = 0;
			for (var i = 0; i < self.gridSize; i++) {
				for (var j = 0; j < tileArray[i].length; j++) {
					if (tileArray[i][j].color === 0xFFFFFF) {
						whiteCount++;
					} else if (tileArray[i][j].color === 0x33d62a) {
						greenCount++;
					}
				}
			}
			if (tileColorCounter) {
				tileColorCounter.updateCounts(whiteCount, greenCount);
			}
			// Check if either tile count is at 0 and run the win routine if so
			if (whiteCount === 0 || greenCount === 0) {
				game.showWin();
			}
		}, 900);
	};
	// Check if all tiles are the same color
	self.checkWinCondition = function () {
		var firstColor = tileArray[0][0].color;
		for (var i = 0; i < this.gridSize; i++) {
			for (var j = 0; j < tileArray[i].length; j++) {
				if (tileArray[i][j].color !== firstColor) {
					return false;
				}
			}
		}
		return true;
	};
});
var Tile = Container.expand(function (gridX, gridY, width, height, gridSize) {
	var self = Container.call(this);
	self.gridSize = gridSize;
	self.color = gridX === self.gridSize - 1 && gridY === 0 ? 0x33d62a : 0xFFFFFF; // Set all cells to white apart from the cell Zbert is on in the bottom left corner, set this cell to green
	var tileGraphics = self.attachAsset('tile', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	tileGraphics.width = width;
	tileGraphics.height = height;
	tileGraphics.tint = self.color;
	// Function to highlight the tile
	self.highlight = function (color) {
		tileGraphics.tint = color;
		LK.setTimeout(function () {
			tileGraphics.tint = self.color;
		}, 500); // Reset tint after 500ms
	};
	// Function to flip the color of the tile
	self.flipColor = function () {
		self.color = self.color === 0xFFFFFF ? 0x33d62a : 0xFFFFFF;
		tileGraphics.tint = self.color;
	};
	// Add event listener to flip tiles on touch
	self.on('down', function () {
		game.grid.flipTiles(gridX, gridY);
		if (game.grid.checkWinCondition()) {
			game.showWin();
		}
	});
});
// TileColorCounter class to manage the count of each tile color
var TileColorCounter = Container.expand(function () {
	var self = Container.call(this);
	this.whiteCount = 0;
	this.greenCount = 0;
	this.whiteTile = new TileCounter(0xFFFFFF);
	this.greenTile = new TileCounter(0x33d62a);
	// Position the tiles
	this.whiteTile.x = 180;
	this.whiteTile.y = 2732 - 685;
	this.greenTile.x = 1400;
	this.greenTile.y = 2732 - 685;
	// Add the tiles to the container
	self.addChild(this.whiteTile);
	self.addChild(this.greenTile);
	// Method to update the counts
	self.updateCounts = function (whiteCount, greenCount) {
		this.whiteTile.updateCount(whiteCount);
		this.greenTile.updateCount(greenCount);
	};
});
// TileCounter class to manage the display of each tile type count
var TileCounter = Container.expand(function (color) {
	var self = Container.call(this);
	this.color = color;
	var tileGraphics = self.attachAsset('tile', {});
	tileGraphics.width = 350;
	tileGraphics.height = 400;
	tileGraphics.tint = this.color;
	this.countText = new Text2('0', {
		size: 230,
		weight: 800,
		fill: this.color === 0xFFFFFF ? "#000000" : "#ffffff",
		align: 'center'
	});
	this.countText.anchor.set(0.5);
	this.countText.x = tileGraphics.width / 2;
	this.countText.y = tileGraphics.height / 2;
	self.addChild(tileGraphics);
	self.addChild(this.countText);
	// Method to update the count
	self.updateCount = function (count) {
		if (typeof count !== 'undefined') {
			this.countText.setText(count.toString());
		}
	};
});
var Joystick = Container.expand(function (player, gridSize) {
	var self = Container.call(this);
	// Attach joystick base
	var joystickBaseGraphics = self.attachAsset('joystickBase', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	// Attach joystick knob
	var joystickKnobGraphics = self.attachAsset('joystickKnob', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	self.joystickKnobGraphics = joystickKnobGraphics;
	this.player = player;
	this.gridSize = gridSize;
	this.directions = {
		'UP_LEFT': {
			x: -1,
			y: -1
		},
		'UP_RIGHT': {
			x: 1,
			y: -1
		},
		'DOWN_LEFT': {
			x: -1,
			y: 1
		},
		'DOWN_RIGHT': {
			x: 1,
			y: 1
		}
	};
	// Function to move the player in the grid
	self.movePlayer = function (direction) {
		var move = this.directions[direction];
		if (move) {
			var newX = this.player.gridX + move.x;
			var newY = this.player.gridY + move.y * (this.gridSize - this.player.gridY - 1);
			// Check bounds
			if (newX >= 0 && newX < this.gridSize && newY >= 0 && newY < this.gridSize) {
				this.player.moveTo(newX, newY);
			}
		}
	};
	// Add touch controls for joystick
	self.on('down', function (obj) {
		var pos = obj.event.getLocalPosition(self);
		// Determine direction based on touch position
		if (pos.x < joystickBaseGraphics.width / 2 && pos.y < joystickBaseGraphics.height / 2) {
			self.movePlayer('UP_LEFT');
		} else if (pos.x > joystickBaseGraphics.width / 2 && pos.y < joystickBaseGraphics.height / 2) {
			self.movePlayer('UP_RIGHT');
		} else if (pos.x < joystickBaseGraphics.width / 2 && pos.y > joystickBaseGraphics.height / 2) {
			self.movePlayer('DOWN_LEFT');
		} else if (pos.x > joystickBaseGraphics.width / 2 && pos.y > joystickBaseGraphics.height / 2) {
			self.movePlayer('DOWN_RIGHT');
		}
	});
});

/**** 
* Initialize Game
****/
var game = new LK.Game({
	backgroundColor: 0x000000 // Init game with black background
});

/**** 
* Game Code
****/
// Function to select and set background by variable number
function getZbertFromGrid(grid) {
	for (var i = 0; i < grid.children.length; i++) {
		if (grid.children[i].name === 'Zbert') {
			return grid.children[i];
		}
	}
	return null; // Return null if Zbert is not found
}
var setBackgroundByNumber = function setBackgroundByNumber() {
	var backgroundNumber = Math.floor(Math.random() * 6) + 1;
	// Remove the current background if it exists
	if (game.background) {
		game.removeChild(game.background);
	}
	// Create a new background asset based on the provided number
	game.background = game.createAsset('backgroundImage' + backgroundNumber, {});
	game.background.width = 3000;
	game.background.height = 3000;
	game.background.x = 2048 / 2 - game.background.width / 2;
	game.background.y = 2732 / 2 - game.background.height / 2;
	// Add the new background to the game
	game.addChildAt(game.background, 0);
};
// Set an initial background
setBackgroundByNumber(2);
// Initialize the TileColorCounter and add it to the game
initializeTileColorCounter();
// Add the grid to the game
game.grid = game.addChild(new Grid());
game.grid.initGrid();
var tileWidth = 150;
var tileHeight = 150;
game.grid.x = (2048 - tileWidth * game.grid.gridSize) / 2 + tileWidth / 2 - 295;
game.grid.y = (2732 - tileHeight * game.grid.gridSize) / 2 + tileHeight / 2 - 350;
// Function to show win condition and increase grid size
game.showWin = function () {
	LK.effects.flashScreen(0xFF0000, 1000); // Flash the screen green for 1 second
	if (game.grid.gridSize < 9) {
		game.grid.initGrid();
		game.grid.x = (2048 - tileWidth * game.grid.gridSize) / 2 + tileWidth / 2 - 295;
		game.grid.y = (2732 - tileHeight * game.grid.gridSize) / 2 + tileHeight / 2 - 350;
		setBackgroundByNumber(Math.floor(Math.random() * 6) + 1);
	} else {
		LK.showGameOver(); // Show game over screen when max size is reached
	}
};
// Initialize the TileColorCounter and add it to the game
var tileColorCounter;
function initializeTileColorCounter() {
	tileColorCounter = game.addChild(new TileColorCounter());
}
initializeTileColorCounter();
var joystick;
function initializeJoystick() {
	var zbert = getZbertFromGrid(game.grid);
	joystick = game.addChild(new Joystick(zbert, game.grid.gridSize));
	joystick.x = 150;
	joystick.y = 2732 - 300 / 2 - 150;
}
initializeJoystick();

===================================================================
--- original.js
+++ change.js
@@ -230,26 +230,26 @@
 	self.movePlayer = function (direction) {
 		var move = this.directions[direction];
 		if (move) {
 			var newX = this.player.gridX + move.x;
-			var newY = this.player.gridY + move.y;
+			var newY = this.player.gridY + move.y * (this.gridSize - this.player.gridY - 1);
 			// Check bounds
 			if (newX >= 0 && newX < this.gridSize && newY >= 0 && newY < this.gridSize) {
 				this.player.moveTo(newX, newY);
 			}
 		}
 	};
 	// Add touch controls for joystick
 	self.on('down', function (obj) {
-		var pos = obj.event.getLocalPosition(game);
+		var pos = obj.event.getLocalPosition(self);
 		// Determine direction based on touch position
-		if (pos.x < self.player.x && pos.y < self.player.y) {
+		if (pos.x < joystickBaseGraphics.width / 2 && pos.y < joystickBaseGraphics.height / 2) {
 			self.movePlayer('UP_LEFT');
-		} else if (pos.x > self.player.x && pos.y < self.player.y) {
+		} else if (pos.x > joystickBaseGraphics.width / 2 && pos.y < joystickBaseGraphics.height / 2) {
 			self.movePlayer('UP_RIGHT');
-		} else if (pos.x < self.player.x && pos.y > self.player.y) {
+		} else if (pos.x < joystickBaseGraphics.width / 2 && pos.y > joystickBaseGraphics.height / 2) {
 			self.movePlayer('DOWN_LEFT');
-		} else if (pos.x > self.player.x && pos.y > self.player.y) {
+		} else if (pos.x > joystickBaseGraphics.width / 2 && pos.y > joystickBaseGraphics.height / 2) {
 			self.movePlayer('DOWN_RIGHT');
 		}
 	});
 });