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

/**** 
* Classes
****/ 
// Tile class: represents a single tile on the board
var Tile = Container.expand(function () {
	var self = Container.call(this);
	// Properties
	self.value = 2; // Default value
	self.row = 0;
	self.col = 0;
	self.bg = null;
	self.label = null;
	// Initialize tile graphics
	self.init = function (value, row, col) {
		self.value = value;
		self.row = row;
		self.col = col;
		// Remove previous children if any
		while (self.children.length > 0) {
			self.removeChild(self.children[0]);
		}
		// Color by value
		var colorMap = {
			2: 0xeee4da,
			4: 0xede0c8,
			8: 0xf2b179,
			16: 0xf59563,
			32: 0xf67c5f,
			64: 0xf65e3b,
			128: 0xedcf72,
			256: 0xedcc61,
			512: 0xedc850,
			1024: 0xedc53f,
			2048: 0xedc22e
		};
		var color = colorMap[self.value] || 0x3c3a32;
		self.bg = self.attachAsset('tile_' + self.value, {
			width: tileSize,
			height: tileSize,
			color: color,
			shape: 'box',
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.label = new Text2(String(self.value), {
			size: tileSize * 0.4,
			fill: self.value <= 4 ? "#776e65" : "#f9f6f2"
		});
		self.label.anchor.set(0.5, 0.5);
		self.label.x = 0;
		self.label.y = 0;
		self.addChild(self.bg);
		// Add the label on top of the background so the number is visible
		self.addChild(self.label);
	};
	// Update value and re-render
	self.setValue = function (newValue) {
		self.value = newValue;
		self.init(self.value, self.row, self.col);
	};
	// Animate merge
	self.animateMerge = function () {
		self.scale.set(1.2, 1.2);
		tween(self.scale, {
			x: 1,
			y: 1
		}, {
			duration: 120,
			easing: tween.easeOut
		});
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// blue
// light blue
// deep gold
// gold
// yellow
// red
// red-orange
// dark orange
// orange
// light beige
// very light beige
// Board settings
var boardSize = 4;
var tileSize = 320;
var tileSpacing = 32;
var boardPixelSize = tileSize * boardSize + tileSpacing * (boardSize + 1);
var boardOffsetX = (2048 - boardPixelSize) / 2;
var boardOffsetY = (2732 - boardPixelSize) / 2 + 80;
// Board state: 2D array of tiles or null
var board = [];
// Tiles container
var tilesContainer = new Container();
game.addChild(tilesContainer);
// Score
var score = 0;
var scoreTxt = new Text2('0', {
	size: 100,
	fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Helper: get position for a tile
function getTilePos(row, col) {
	return {
		x: boardOffsetX + tileSpacing + col * (tileSize + tileSpacing) + tileSize / 2,
		y: boardOffsetY + tileSpacing + row * (tileSize + tileSpacing) + tileSize / 2
	};
}
// Helper: spawn a new tile at a random empty cell
function spawnRandomTile() {
	var empty = [];
	for (var r = 0; r < boardSize; r++) {
		for (var c = 0; c < boardSize; c++) {
			if (!board[r][c]) empty.push({
				r: r,
				c: c
			});
		}
	}
	if (empty.length === 0) return false;
	var idx = Math.floor(Math.random() * empty.length);
	var pos = empty[idx];
	var value = Math.random() < 0.9 ? 2 : 4;
	var tile = new Tile();
	tile.init(value, pos.r, pos.c);
	var p = getTilePos(pos.r, pos.c);
	tile.x = p.x;
	tile.y = p.y;
	tilesContainer.addChild(tile);
	board[pos.r][pos.c] = tile;
	return true;
}
// Helper: reset board
function resetBoard() {
	// Remove all tiles
	for (var r = 0; r < boardSize; r++) {
		for (var c = 0; c < boardSize; c++) {
			if (board[r][c]) {
				board[r][c].destroy();
				board[r][c] = null;
			}
		}
	}
	// Spawn two tiles
	spawnRandomTile();
	spawnRandomTile();
}
// Helper: update score
function setScore(val) {
	score = val;
	scoreTxt.setText(score);
	LK.setScore(score);
}
// Helper: check for win
function checkWin() {
	for (var r = 0; r < boardSize; r++) {
		for (var c = 0; c < boardSize; c++) {
			if (board[r][c] && board[r][c].value === 2048) {
				LK.showYouWin();
				return true;
			}
		}
	}
	return false;
}
// Helper: check for game over
function checkGameOver() {
	// If any empty cell, not over
	for (var r = 0; r < boardSize; r++) {
		for (var c = 0; c < boardSize; c++) {
			if (!board[r][c]) return false;
		}
	}
	// If any merge possible, not over
	for (var r = 0; r < boardSize; r++) {
		for (var c = 0; c < boardSize; c++) {
			var v = board[r][c].value;
			if (r > 0 && board[r - 1][c].value === v) return false;
			if (r < boardSize - 1 && board[r + 1][c].value === v) return false;
			if (c > 0 && board[r][c - 1].value === v) return false;
			if (c < boardSize - 1 && board[r][c + 1].value === v) return false;
		}
	}
	LK.showGameOver();
	return true;
}
// Helper: move/merge logic
function moveBoard(dir) {
	// dir: 'up', 'down', 'left', 'right'
	var moved = false;
	var merged = [];
	for (var r = 0; r < boardSize; r++) {
		merged[r] = [];
		for (var c = 0; c < boardSize; c++) merged[r][c] = false;
	}
	function traverseRows() {
		return dir === 'up' ? [0, 1, 2, 3] : dir === 'down' ? [3, 2, 1, 0] : [0, 1, 2, 3];
	}
	function traverseCols() {
		return dir === 'left' ? [0, 1, 2, 3] : dir === 'right' ? [3, 2, 1, 0] : [0, 1, 2, 3];
	}
	var dRow = dir === 'up' ? -1 : dir === 'down' ? 1 : 0;
	var dCol = dir === 'left' ? -1 : dir === 'right' ? 1 : 0;
	var orderRows = traverseRows();
	var orderCols = traverseCols();
	if (dir === 'up' || dir === 'down') {
		for (var c = 0; c < boardSize; c++) {
			for (var i = 0; i < boardSize; i++) {
				var r = orderRows[i];
				if (!board[r][c]) continue;
				var nr = r;
				while (true) {
					var tr = nr + dRow;
					if (tr < 0 || tr >= boardSize) break;
					if (!board[tr][c]) {
						board[tr][c] = board[nr][c];
						board[nr][c] = null;
						board[tr][c].row = tr;
						nr = tr;
						moved = true;
					} else if (board[tr][c].value === board[nr][c].value && !merged[tr][c] && !merged[nr][c]) {
						board[tr][c].setValue(board[tr][c].value * 2);
						board[tr][c].animateMerge();
						setScore(score + board[tr][c].value);
						tilesContainer.removeChild(board[nr][c]);
						board[nr][c].destroy();
						board[nr][c] = null;
						merged[tr][c] = true;
						moved = true;
						break;
					} else {
						break;
					}
				}
			}
		}
	} else {
		for (var r = 0; r < boardSize; r++) {
			for (var i = 0; i < boardSize; i++) {
				var c = orderCols[i];
				if (!board[r][c]) continue;
				var nc = c;
				while (true) {
					var tc = nc + dCol;
					if (tc < 0 || tc >= boardSize) break;
					if (!board[r][tc]) {
						board[r][tc] = board[r][nc];
						board[r][nc] = null;
						board[r][tc].col = tc;
						nc = tc;
						moved = true;
					} else if (board[r][tc].value === board[r][nc].value && !merged[r][tc] && !merged[r][nc]) {
						board[r][tc].setValue(board[r][tc].value * 2);
						board[r][tc].animateMerge();
						setScore(score + board[r][tc].value);
						tilesContainer.removeChild(board[r][nc]);
						board[r][nc].destroy();
						board[r][nc] = null;
						merged[r][tc] = true;
						moved = true;
						break;
					} else {
						break;
					}
				}
			}
		}
	}
	// Animate all tiles to their new positions
	for (var r = 0; r < boardSize; r++) {
		for (var c = 0; c < boardSize; c++) {
			if (board[r][c]) {
				var p = getTilePos(r, c);
				tween(board[r][c], {
					x: p.x,
					y: p.y
				}, {
					duration: 80,
					easing: tween.easeOut
				});
			}
		}
	}
	if (moved) {
		LK.setTimeout(function () {
			spawnRandomTile();
			checkWin();
			checkGameOver();
		}, 100);
	}
}
// Draw board background
var boardBg = new Container();
game.addChild(boardBg);
for (var r = 0; r < boardSize; r++) {
	for (var c = 0; c < boardSize; c++) {
		var bg = LK.getAsset('tile_bg', {
			width: tileSize,
			height: tileSize,
			color: 0xcdc1b4,
			shape: 'box',
			anchorX: 0.5,
			anchorY: 0.5,
			x: boardOffsetX + tileSpacing + c * (tileSize + tileSpacing) + tileSize / 2,
			y: boardOffsetY + tileSpacing + r * (tileSize + tileSpacing) + tileSize / 2
		});
		boardBg.addChild(bg);
	}
}
// Initialize board array
for (var r = 0; r < boardSize; r++) {
	board[r] = [];
	for (var c = 0; c < boardSize; c++) {
		board[r][c] = null;
	}
}
// Start game
setScore(0);
resetBoard();
// Touch/drag controls
var dragStart = null;
var dragEnd = null;
var dragThreshold = 40; // px
game.down = function (x, y, obj) {
	dragStart = {
		x: x,
		y: y
	};
	dragEnd = null;
};
game.move = function (x, y, obj) {
	if (!dragStart) return;
	dragEnd = {
		x: x,
		y: y
	};
};
game.up = function (x, y, obj) {
	if (!dragStart || !dragEnd) {
		dragStart = null;
		dragEnd = null;
		return;
	}
	var dx = dragEnd.x - dragStart.x;
	var dy = dragEnd.y - dragStart.y;
	if (Math.abs(dx) < dragThreshold && Math.abs(dy) < dragThreshold) {
		dragStart = null;
		dragEnd = null;
		return;
	}
	if (Math.abs(dx) > Math.abs(dy)) {
		if (dx > 0) {
			moveBoard('right');
		} else {
			moveBoard('left');
		}
	} else {
		if (dy > 0) {
			moveBoard('down');
		} else {
			moveBoard('up');
		}
	}
	dragStart = null;
	dragEnd = null;
};
// Reset game on game over or win
LK.on('gameover', function () {
	setScore(0);
	resetBoard();
});
LK.on('youwin', function () {
	setScore(0);
	resetBoard();
});

===================================================================
--- original.js
+++ change.js
@@ -54,8 +54,9 @@
 		self.label.anchor.set(0.5, 0.5);
 		self.label.x = 0;
 		self.label.y = 0;
 		self.addChild(self.bg);
+		// Add the label on top of the background so the number is visible
 		self.addChild(self.label);
 	};
 	// Update value and re-render
 	self.setValue = function (newValue) {