/**** 
* Classes
****/
// Grid class to manage the puzzle grid
var Grid = Container.expand(function () {
	var self = Container.call(this);
	this.gridSize = 7; // 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 = 290;
		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);
				tile.x = rowOffset + j * (tileWidth + 0);
				tile.y = i * (tileHeight - 75);
				self.addChild(tile);
				tileArray[i][j] = tile;
				// 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) {
		// Get the current shape data from the ShapeDisplay
		var shapeData = shapeDisplay.shape.shapeData;
		// Loop through the shape data, highlight tiles that will flip in red, and flip them after a delay
		for (var i = 0; i < shapeData.length; i++) {
			for (var j = 0; j < shapeData[i].length; j++) {
				if (shapeData[i][j] === 1) {
					var targetX = x + i - 1;
					var targetY = y + j - 1;
					if (targetX >= 0 && targetX < this.gridSize && targetY >= 0 && targetY < this.gridSize) {
						// Highlight the tile in red
						var tileToFlip = tileArray[targetX][targetY];
						if (tileToFlip) {
							tileToFlip.highlight(0xff0000);
						}
						// Flip the tile color after a delay
						LK.setTimeout(function (tile) {
							return function () {
								tile.flipColor();
							};
						}(tileToFlip), 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;
	};
});
// Shape class to manage individual shapes
var Shape = Container.expand(function (shapeData) {
	var self = Container.call(this);
	var shapeGraphics = [];
	for (var row = 0; row < 3; row++) {
		shapeGraphics[row] = [];
		for (var col = 0; col < 3; col++) {
			shapeGraphics[row][col] = self.createAsset('shapeTile', 'Shape Tile Graphics', 0.5, 0.5);
			shapeGraphics[row][col].width = 100;
			shapeGraphics[row][col].height = 120;
			shapeGraphics[row][col].x = col * 100 + row % 2 * 50;
			shapeGraphics[row][col].y = row * (120 - 25);
			shapeGraphics[row][col].tint = shapeData[row][col] === 1 ? 0x3636f7 : 0xFFFFFF;
			shapeGraphics[row][col].alpha = shapeData[row][col] === 1 ? 1 : 0.6;
			self.addChild(shapeGraphics[row][col]);
		}
	}
	// Store the shape data
	this.shapeData = shapeData;
	// Set the initial color of the shape based on shapeData
	shapeGraphics.tint = shapeData.reduce(function (acc, row) {
		return acc.concat(row);
	}, []).some(function (cell) {
		return cell === 1;
	}) ? 0x3636f7 : 0xFFFFFF;
	// Removed the direct addition of shapeGraphics as a child since it's an array of assets, not a single asset
});
var ShapeDisplay = Container.expand(function () {
	var self = Container.call(this);
	this.shape = null;
	// Create a background for the ShapeDisplay
	var shapeDisplayBackground = self.createAsset('shapeDisplayBackground', 'ShapeDisplay Background', 0, 0);
	shapeDisplayBackground.width = 2048;
	shapeDisplayBackground.height = 2732;
	shapeDisplayBackground.tint = 0xffffff;
	shapeDisplayBackground.alpha = 0.4;
	self.addChildAt(shapeDisplayBackground, 0);
	// Function to set the shape to be displayed
	self.setShape = function (shape) {
		this.shape = shape;
		this.addChild(shape);
		shape.x = 950; // Center the shape in the display area
		shape.y = 2732 - shape.height - 200; // Position the shape at the bottom of the screen
		shapeDisplayBackground.width = shape.width + 1800;
		shapeDisplayBackground.height = 600;
		// Center ShapeDisplay background on the middle of ShapeDisplay
		shapeDisplayBackground.x = shape.x + shape.width / 2 - shapeDisplayBackground.width / 2 - 50;
		shapeDisplayBackground.y = 2100;
	};
	// Function to update the displayed shape
	self.updateShape = function () {
		var randomIndex = Math.floor(Math.random() * shapes.length);
		var newShape = shapes[randomIndex];
		if (this.shape) {
			this.removeChild(this.shape);
		}
		this.setShape(newShape);
	};
});
var Tile = Container.expand(function (gridX, gridY, width, height) {
	var self = Container.call(this);
	self.color = Math.random() < 0.5 ? 0xFFFFFF : 0x33d62a; // Randomly set the tile color to white or green
	var tileGraphics = self.createAsset('tile', 'Tile Graphics', 0.5, 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();
		}
	});
});
var CountdownTimer = Container.expand(function () {
	var self = Container.call(this);
	this.timeLeft = Math.floor(Math.random() * 11) + 5; // Random time between 5 and 15 seconds
	var timerText = new Text2(this.timeLeft.toString(), {
		size: 150,
		font: "Comic Sans MS",
		fill: "#000000",
		weight: 900,
		dropShadow: true,
		dropShadowColor: '#ffffff',
		dropShadowAngle: Math.PI / 6,
		dropShadowDistance: 5
	});
	timerText.anchor.set(0.5, 0);
	self.addChild(timerText);
	// Add 'Next Shape In' text below the timer
	var nextShapeText = new Text2('Next\nShape', {
		size: 80,
		font: "Arial",
		fill: "#000000",
		weight: 600,
		align: 'right'
	});
	nextShapeText.anchor.set(1, 0);
	nextShapeText.x = -100;
	nextShapeText.y = self.y + timerText.height - 200;
	self.addChild(nextShapeText);
	self.x = shapeDisplay.shape.x + shapeDisplay.shape.width / 2 - timerText.width / 2 + 150;
	self.y = shapeDisplay.shape.y + shapeDisplay.shape.height / 2 - timerText.height / 2 + 200;
	self.updateTimer = function () {
		timerText.setText(self.timeLeft.toString());
	};
	self.decrementTime = function () {
		if (self.timeLeft > 0) {
			self.timeLeft--;
			self.updateTimer();
		} else {
			shapeDisplay.updateShape();
			self.timeLeft = Math.floor(Math.random() * 11) + 5; // Reset time between 5 and 15 seconds
			self.updateTimer();
		}
	};
	LK.setInterval(self.decrementTime, 1000);
});
// 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.createAsset('tile', 'Tile Counter Graphics', 0, 0);
	tileGraphics.width = 500;
	tileGraphics.height = 600;
	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());
		}
	};
});

/**** 
* 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
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, 'Background Image ' + backgroundNumber, 0, 0);
	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 - 185;
game.grid.y = (2732 - tileHeight * game.grid.gridSize) / 2 + tileHeight / 2 - 350;
// Array to hold a range of 3x3 shapes
var shapes = [new Shape([[1, 0, 1], [0, 1, 0], [1, 0, 1]]), new Shape([[0, 1, 0], [1, 0, 1], [0, 1, 0]]), new Shape([[1, 1, 1], [1, 0, 1], [1, 1, 1]]), new Shape([[0, 0, 0], [1, 1, 1], [0, 0, 0]]), new Shape([[1, 0, 0], [0, 1, 0], [0, 0, 1]]), new Shape([[0, 0, 1], [0, 1, 0], [1, 0, 0]]), new Shape([[0, 0, 1], [0, 1, 1], [1, 1, 0]]), new Shape([[0, 0, 0], [0, 1, 1], [1, 1, 0]]), new Shape([[1, 1, 1], [0, 1, 0], [0, 1, 0]]), new Shape([[0, 0, 0], [0, 1, 0], [0, 0, 0]]), new Shape([[1, 0, 0], [1, 0, 0], [0, 0, 0]]), new Shape([[0, 0, 0], [0, 0, 0], [0, 1, 1]]), new Shape([[0, 1, 1], [0, 0, 1], [0, 0, 0]])];
// 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 - 185;
		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 ShapeDisplay and display a randomly selected shape
var shapeDisplay = game.addChild(new ShapeDisplay());
shapeDisplay.updateShape();
// Initialize the CountdownTimer and add it to the game
var countdownTimer = game.addChild(new CountdownTimer());
// Initialize the TileColorCounter and add it to the game
var tileColorCounter;
function initializeTileColorCounter() {
	tileColorCounter = game.addChild(new TileColorCounter());
}
initializeTileColorCounter();

===================================================================
--- original.js
+++ change.js
@@ -7,10 +7,10 @@
 	this.gridSize = 7; // Gridsize control - 9 x 9
 	var tileArray = []; // Array to hold the tiles
 	// Initialize the grid with tiles
 	self.initGrid = function () {
-		var tileWidth = 200;
-		var tileHeight = 240;
+		var tileWidth = 250;
+		var tileHeight = 290;
 		for (var i = 0; i < this.gridSize; i++) {
 			tileArray[i] = [];
 			var numTilesInRow = i + 1;
 			var rowOffset = (this.gridSize - numTilesInRow) * (tileWidth / 2 + 5);