/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");

/**** 
* Classes
****/ 
var Ball = Container.expand(function () {
	var self = Container.call(this);
	var ballGraphics = self.attachAsset('ball', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.velocityX = 6;
	self.velocityY = -8;
	self.radius = 14;
	self.update = function () {
		self.x += self.velocityX;
		self.y += self.velocityY;
		// Wall collision detection
		if (self.x - self.radius <= 0 || self.x + self.radius >= 2048) {
			self.velocityX = -self.velocityX;
			if (self.x - self.radius <= 0) self.x = self.radius;
			if (self.x + self.radius >= 2048) self.x = 2048 - self.radius;
			LK.getSound('hitWall').play();
		}
		// Top wall collision
		if (self.y - self.radius <= 0) {
			self.velocityY = -self.velocityY;
			self.y = self.radius;
			LK.getSound('hitWall').play();
		}
	};
	return self;
});
var Brick = Container.expand(function (brickType) {
	var self = Container.call(this);
	var assetName = brickType || 'brick';
	var brickGraphics = self.attachAsset(assetName, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.width = 150;
	self.height = 45;
	self.destroyed = false;
	return self;
});
var LevelMenu = Container.expand(function () {
	var self = Container.call(this);
	self.currentPage = 0;
	self.levelsPerPage = 15;
	self.totalLevels = 30;
	self.unlockedLevel = storage.unlockedLevel || 1;
	var levelButtons = [];
	var leftArrow = null;
	var rightArrow = null;
	var pageText = null;
	self.createMenu = function () {
		// Create level buttons in 3 rows of 5
		for (var i = 0; i < self.levelsPerPage; i++) {
			var row = Math.floor(i / 5);
			var col = i % 5;
			var button = new Container();
			var buttonBg = button.attachAsset('brick', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			var levelNum = new Text2('1', {
				size: 60,
				fill: 0xFFFFFF
			});
			levelNum.anchor.set(0.5, 0.5);
			button.addChild(levelNum);
			button.x = 1024 + (col - 2) * 300;
			button.y = 800 + row * 200;
			button.levelIndex = i;
			button.levelText = levelNum;
			button.bg = buttonBg;
			button.down = function (x, y, obj) {
				var levelToStart = self.currentPage * self.levelsPerPage + this.levelIndex + 1;
				if (levelToStart <= self.unlockedLevel) {
					self.startLevel(levelToStart);
				}
			};
			levelButtons.push(button);
			self.addChild(button);
		}
		// Create navigation arrows
		leftArrow = new Container();
		var leftBg = leftArrow.attachAsset('paddle', {
			anchorX: 0.5,
			anchorY: 0.5,
			scaleX: 0.5,
			scaleY: 2
		});
		var leftText = new Text2('<', {
			size: 120,
			fill: 0xFFFFFF
		});
		leftText.anchor.set(0.5, 0.5);
		leftArrow.addChild(leftText);
		leftArrow.x = 300;
		leftArrow.y = 1000;
		leftArrow.down = function () {
			if (self.currentPage > 0) {
				self.currentPage--;
				self.updatePage();
			}
		};
		self.addChild(leftArrow);
		rightArrow = new Container();
		var rightBg = rightArrow.attachAsset('paddle', {
			anchorX: 0.5,
			anchorY: 0.5,
			scaleX: 0.5,
			scaleY: 2
		});
		var rightText = new Text2('>', {
			size: 120,
			fill: 0xFFFFFF
		});
		rightText.anchor.set(0.5, 0.5);
		rightArrow.addChild(rightText);
		rightArrow.x = 1748;
		rightArrow.y = 1000;
		rightArrow.down = function () {
			var maxPages = Math.ceil(self.totalLevels / self.levelsPerPage);
			if (self.currentPage < maxPages - 1) {
				self.currentPage++;
				self.updatePage();
			}
		};
		self.addChild(rightArrow);
		// Create page indicator
		pageText = new Text2('Page 1 / 2', {
			size: 80,
			fill: 0xFFFFFF
		});
		pageText.anchor.set(0.5, 0.5);
		pageText.x = 1024;
		pageText.y = 1400;
		self.addChild(pageText);
		self.updatePage();
	};
	self.updatePage = function () {
		var maxPages = Math.ceil(self.totalLevels / self.levelsPerPage);
		for (var i = 0; i < levelButtons.length; i++) {
			var levelNum = self.currentPage * self.levelsPerPage + i + 1;
			var button = levelButtons[i];
			if (levelNum <= self.totalLevels) {
				button.levelText.setText(levelNum.toString());
				button.visible = true;
				// Set button color based on unlock status
				if (levelNum <= self.unlockedLevel) {
					button.bg.tint = 0x00ff00; // Green for unlocked
				} else {
					button.bg.tint = 0xff0000; // Red for locked
				}
			} else {
				button.visible = false;
			}
		}
		// Update page text
		pageText.setText('Page ' + (self.currentPage + 1) + ' / ' + maxPages);
		// Update arrow visibility
		leftArrow.visible = self.currentPage > 0;
		rightArrow.visible = self.currentPage < maxPages - 1;
	};
	self.startLevel = function (levelNumber) {
		currentLevel = levelNumber;
		self.destroy();
		startGame();
	};
	return self;
});
var Paddle = Container.expand(function () {
	var self = Container.call(this);
	var paddleGraphics = self.attachAsset('paddle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.width = 260;
	self.height = 24;
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x2c3e50
});

/**** 
* Game Code
****/ 
var currentLevel = 1;
var gameStarted = false;
var levelMenu = null;
// Initialize level menu first
levelMenu = game.addChild(new LevelMenu());
levelMenu.createMenu();
var paddle = null;
var ball = null;
var bricks = [];
var scoreTxt = null;
var livesTxt = null;
function startGame() {
	gameStarted = true;
	// Create paddle
	paddle = game.addChild(new Paddle());
	paddle.x = 2048 / 2;
	paddle.y = 2600;
	// Create ball
	ball = game.addChild(new Ball());
	ball.x = 2048 / 2;
	ball.y = 2400;
	// Create bricks based on current level
	bricks = [];
	var brickColors = ['brick', 'brickBlue', 'brickGreen', 'brickYellow', 'brickPurple'];
	// Vary brick layout based on level
	var rows = Math.min(8, 5 + Math.floor(currentLevel / 5));
	var cols = 18;
	var brickSpacingX = 165;
	var brickSpacingY = 60;
	var startX = (2048 - (cols - 1) * brickSpacingX) / 2;
	var startY = 200;
	for (var row = 0; row < rows; row++) {
		for (var col = 0; col < cols; col++) {
			var colorIndex = row % brickColors.length;
			var brick = new Brick(brickColors[colorIndex]);
			brick.x = startX + col * brickSpacingX;
			brick.y = startY + row * brickSpacingY;
			bricks.push(brick);
			game.addChild(brick);
		}
	}
	// Create UI elements
	scoreTxt = new Text2('Score: 0', {
		size: 80,
		fill: 0xFFFFFF
	});
	scoreTxt.anchor.set(0, 0);
	LK.gui.topRight.addChild(scoreTxt);
	livesTxt = new Text2('Lives: 3', {
		size: 80,
		fill: 0xFFFFFF
	});
	livesTxt.anchor.set(0, 0);
	livesTxt.x = -400;
	LK.gui.topRight.addChild(livesTxt);
	// Add heart icon next to lives text
	var heartIcon = LK.getAsset('heart', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	heartIcon.x = -180;
	heartIcon.y = 40;
	LK.gui.topRight.addChild(heartIcon);
	// Reset game state
	lives = 3;
	LK.setScore(0);
}
var dragNode = null;
var lastBallY = 0;
function handleMove(x, y, obj) {
	if (!gameStarted) return;
	if (dragNode) {
		dragNode.x = x;
		// Keep paddle within screen bounds
		if (dragNode.x < dragNode.width / 2) {
			dragNode.x = dragNode.width / 2;
		}
		if (dragNode.x > 2048 - dragNode.width / 2) {
			dragNode.x = 2048 - dragNode.width / 2;
		}
	}
}
game.move = handleMove;
game.down = function (x, y, obj) {
	if (!gameStarted) return;
	dragNode = paddle;
	handleMove(x, y, obj);
};
game.up = function (x, y, obj) {
	if (!gameStarted) return;
	dragNode = null;
};
function resetBall() {
	if (!ball) return;
	ball.x = 2048 / 2;
	ball.y = 2400;
	ball.velocityX = (Math.random() > 0.5 ? 1 : -1) * 6;
	ball.velocityY = -8;
}
function checkPaddleCollision() {
	if (!paddle || !ball) return;
	var paddleLeft = paddle.x - paddle.width / 2;
	var paddleRight = paddle.x + paddle.width / 2;
	var paddleTop = paddle.y - paddle.height / 2;
	var paddleBottom = paddle.y + paddle.height / 2;
	if (ball.x + ball.radius >= paddleLeft && ball.x - ball.radius <= paddleRight && ball.y + ball.radius >= paddleTop && ball.y - ball.radius <= paddleBottom && ball.velocityY > 0) {
		// Calculate hit position relative to paddle center (-1 to 1)
		var hitPos = (ball.x - paddle.x) / (paddle.width / 2);
		// Adjust ball velocity based on hit position
		ball.velocityX = hitPos * 5;
		ball.velocityY = -Math.abs(ball.velocityY);
		// Position ball above paddle
		ball.y = paddleTop - ball.radius;
		LK.getSound('hitPaddle').play();
	}
}
function checkBrickCollisions() {
	if (!ball) return;
	for (var i = bricks.length - 1; i >= 0; i--) {
		var brick = bricks[i];
		if (brick.destroyed) continue;
		var brickLeft = brick.x - brick.width / 2;
		var brickRight = brick.x + brick.width / 2;
		var brickTop = brick.y - brick.height / 2;
		var brickBottom = brick.y + brick.height / 2;
		if (ball.x + ball.radius >= brickLeft && ball.x - ball.radius <= brickRight && ball.y + ball.radius >= brickTop && ball.y - ball.radius <= brickBottom) {
			// Determine collision side
			var overlapLeft = ball.x + ball.radius - brickLeft;
			var overlapRight = brickRight - (ball.x - ball.radius);
			var overlapTop = ball.y + ball.radius - brickTop;
			var overlapBottom = brickBottom - (ball.y - ball.radius);
			var minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom);
			if (minOverlap === overlapTop || minOverlap === overlapBottom) {
				ball.velocityY = -ball.velocityY;
			} else {
				ball.velocityX = -ball.velocityX;
			}
			brick.destroyed = true;
			brick.destroy();
			bricks.splice(i, 1);
			LK.setScore(LK.getScore() + 10);
			scoreTxt.setText('Score: ' + LK.getScore());
			LK.getSound('hitBrick').play();
			// Check win condition
			if (bricks.length === 0) {
				// Unlock next level
				var unlockedLevel = storage.unlockedLevel || 1;
				if (currentLevel >= unlockedLevel && currentLevel < 30) {
					storage.unlockedLevel = currentLevel + 1;
				}
				// Check if all levels completed
				if (currentLevel >= 30) {
					// Show congratulations for completing all levels
					LK.showYouWin();
				} else {
					// Auto-progress to next level
					currentLevel++;
					// Clear current game elements
					if (paddle) {
						paddle.destroy();
						paddle = null;
					}
					if (ball) {
						ball.destroy();
						ball = null;
					}
					for (var j = 0; j < bricks.length; j++) {
						if (bricks[j]) bricks[j].destroy();
					}
					bricks = [];
					if (scoreTxt) {
						scoreTxt.destroy();
						scoreTxt = null;
					}
					if (livesTxt) {
						livesTxt.destroy();
						livesTxt = null;
					}
					// Start next level after short delay
					LK.setTimeout(function () {
						startGame();
					}, 1000);
				}
			}
			break;
		}
	}
}
game.update = function () {
	if (!gameStarted || !ball) return;
	// Check if ball fell below paddle
	if (lastBallY <= 2732 && ball.y > 2732) {
		lives--;
		livesTxt.setText('Lives: ' + lives);
		if (lives <= 0) {
			LK.showGameOver();
		} else {
			resetBall();
		}
	}
	checkPaddleCollision();
	checkBrickCollisions();
	lastBallY = ball.y;
};

===================================================================
--- original.js
+++ change.js
@@ -153,9 +153,9 @@
 				button.levelText.setText(levelNum.toString());
 				button.visible = true;
 				// Set button color based on unlock status
 				if (levelNum <= self.unlockedLevel) {
-					button.bg.tint = 0x45b7d1; // Green for unlocked
+					button.bg.tint = 0x00ff00; // Green for unlocked
 				} else {
 					button.bg.tint = 0xff0000; // Red for locked
 				}
 			} else {