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

/**** 
* Classes
****/ 
// --- Cloud class: drifting cloud background element ---
var Cloud = Container.expand(function () {
	var self = Container.call(this);
	// Use a tile asset as a placeholder for a cloud (tile16 is lightest)
	self.asset = self.attachAsset('tile16', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.18
	});
	// Randomize scale and y position for variety
	var scale = 1.1 + Math.random() * 1.2;
	self.scaleX = scale;
	self.scaleY = scale * (0.7 + Math.random() * 0.5);
	self.y = 200 + Math.random() * 1200;
	self.x = -300 + Math.random() * 2300;
	self.speed = 0.3 + Math.random() * 0.25;
	// Track lastX for event logic
	self.lastX = self.x;
	self.update = function () {
		self.lastX = self.x;
		self.x += self.speed;
		// If cloud moves off right edge, wrap to left
		if (self.x > 2048 + 200) {
			self.x = -300;
			self.y = 200 + Math.random() * 1200;
			self.speed = 0.3 + Math.random() * 0.25;
		}
	};
	return self;
});
// --- Plane class: animated plane flying across the screen ---
var Plane = Container.expand(function () {
	var self = Container.call(this);
	// Use a tile asset as a placeholder for a plane (tile32 is reddish)
	self.asset = self.attachAsset('tile32', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.32
	});
	self.scaleX = 1.1;
	self.scaleY = 0.7;
	self.y = 900 + Math.random() * 600;
	self.x = -200;
	self.speed = 4.5;
	self.lastX = self.x;
	self.update = function () {
		self.lastX = self.x;
		self.x += self.speed;
		// If plane moves off right edge, reset to left and randomize y
		if (self.x > 2048 + 200) {
			self.x = -200;
			self.y = 900 + Math.random() * 600;
		}
	};
	return self;
});
// Tile class for each grid cell
var Tile = Container.expand(function () {
	var self = Container.call(this);
	// Properties
	self.value = 2; // Default value
	self.row = 0;
	self.col = 0;
	self.asset = null;
	self.text = null;
	// Set tile value and update appearance
	self.setValue = function (val) {
		self.value = val;
		// Remove old asset if exists
		if (self.asset) {
			self.removeChild(self.asset);
		}
		// Choose asset by value
		var assetId = 'tile' + val;
		var supportedAssets = {
			'tile2': true,
			'tile4': true,
			'tile8': true,
			'tile16': true,
			'tile32': true,
			'tile64': true,
			'tile128': true,
			'tile256': true,
			'tile512': true,
			'tile1024': true,
			'tile2048': true
		};
		if (!supportedAssets[assetId]) assetId = 'tile2048'; // fallback
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		// Remove old text if exists
		if (self.text) {
			self.removeChild(self.text);
		}
		// Add value text (empty label, no fruit names)
		var label = '';
		self.text = new Text2(label, {
			size: 60,
			fill: 0xFFFFFF,
			align: "center"
		});
		self.text.anchor.set(0.5, 0.5);
		self.text.y = 0;
		self.text.x = 0;
		self.addChild(self.text);
		// Restart dancing after value change
		if (self.startDancing) self.startDancing();
	};
	// Animate merge
	self.animateMerge = function () {
		tween(self, {
			scaleX: 1.2,
			scaleY: 1.2
		}, {
			duration: 100,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.easeIn,
					onFinish: function onFinish() {
						if (self.startDancing) self.startDancing();
					}
				});
			}
		});
	};
	// Animate spawn
	self.animateSpawn = function () {
		self.scaleX = 0.2;
		self.scaleY = 0.2;
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 150,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				if (self.startDancing) self.startDancing();
			}
		});
	};
	// Set position on grid
	self.setGridPos = function (row, col, cellSize, gridX, gridY) {
		self.row = row;
		self.col = col;
		self.x = gridX + col * cellSize + cellSize / 2;
		self.y = gridY + row * cellSize + cellSize / 2;
	};
	// Add dancing animation (continuous, unique per value)
	self.startDancing = function () {
		// Cancel any previous tweens on scale
		tween.stop(self, {
			scaleX: true,
			scaleY: true
		});
		// Unique dance parameters per value
		var dances = {
			2: {
				sx1: 1.10,
				sy1: 0.90,
				sx2: 0.90,
				sy2: 1.10,
				dur1: 220,
				dur2: 220,
				ease1: tween.easeInOut,
				ease2: tween.easeInOut
			},
			4: {
				sx1: 1.15,
				sy1: 0.85,
				sx2: 0.85,
				sy2: 1.15,
				dur1: 180,
				dur2: 180,
				ease1: tween.bounceIn,
				ease2: tween.bounceOut
			},
			8: {
				sx1: 1.08,
				sy1: 1.08,
				sx2: 0.92,
				sy2: 0.92,
				dur1: 260,
				dur2: 260,
				ease1: tween.elasticIn,
				ease2: tween.elasticOut
			},
			16: {
				sx1: 1.20,
				sy1: 0.80,
				sx2: 0.80,
				sy2: 1.20,
				dur1: 150,
				dur2: 150,
				ease1: tween.cubicOut,
				ease2: tween.cubicIn
			},
			32: {
				sx1: 1.05,
				sy1: 1.15,
				sx2: 1.15,
				sy2: 1.05,
				dur1: 200,
				dur2: 200,
				ease1: tween.quarticInOut,
				ease2: tween.quarticInOut
			},
			64: {
				sx1: 1.18,
				sy1: 0.95,
				sx2: 0.95,
				sy2: 1.18,
				dur1: 170,
				dur2: 170,
				ease1: tween.sineIn,
				ease2: tween.sineOut
			},
			128: {
				sx1: 1.12,
				sy1: 1.12,
				sx2: 0.88,
				sy2: 0.88,
				dur1: 250,
				dur2: 250,
				ease1: tween.elasticInOut,
				ease2: tween.elasticInOut
			},
			256: {
				sx1: 1.25,
				sy1: 0.75,
				sx2: 0.75,
				sy2: 1.25,
				dur1: 140,
				dur2: 140,
				ease1: tween.bounceOut,
				ease2: tween.bounceIn
			},
			512: {
				sx1: 1.10,
				sy1: 1.05,
				sx2: 1.05,
				sy2: 1.10,
				dur1: 210,
				dur2: 210,
				ease1: tween.cubicIn,
				ease2: tween.cubicOut
			},
			1024: {
				sx1: 1.22,
				sy1: 0.92,
				sx2: 0.92,
				sy2: 1.22,
				dur1: 160,
				dur2: 160,
				ease1: tween.quinticIn,
				ease2: tween.quinticOut
			},
			2048: {
				sx1: 1.30,
				sy1: 0.70,
				sx2: 0.70,
				sy2: 1.30,
				dur1: 120,
				dur2: 120,
				ease1: tween.expoIn,
				ease2: tween.expoOut
			}
		};
		var dance = dances[self.value] || dances[2];
		function danceUp() {
			tween(self, {
				scaleX: dance.sx1,
				scaleY: dance.sy1
			}, {
				duration: dance.dur1,
				easing: dance.ease1,
				onFinish: function onFinish() {
					danceDown();
				}
			});
		}
		function danceDown() {
			tween(self, {
				scaleX: dance.sx2,
				scaleY: dance.sy2
			}, {
				duration: dance.dur2,
				easing: dance.ease2,
				onFinish: function onFinish() {
					danceUp();
				}
			});
		}
		// Start the loop
		danceUp();
	};
	// Stop dancing animation
	self.stopDancing = function () {
		tween.stop(self, {
			scaleX: true,
			scaleY: true
		});
		self.scaleX = 1;
		self.scaleY = 1;
	};
	// Start dancing by default
	self.startDancing();
	return self;
});

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

/**** 
* Game Code
****/ 
// --- Grid and Layout ---
// Space tile assets: We'll use colored ellipses for different tile values
// 2: Asteroid (gray), 4: Moon (light blue), 8: Planet (blue), 16: Star (yellow), 32: Red Giant (red), 64: Neutron Star (purple), 128: Black Hole (black), 256: Nebula (pink), 512: Galaxy (cyan), 1024: Quasar (orange), 2048: Universe (white)
// Optionally, a subtle grid background
var gridSize = 4;
var cellSize = 370; // 370*4=1480, bigger board
var gridPadding = 28;
var gridWidth = cellSize * gridSize + gridPadding * (gridSize + 1);
var gridHeight = cellSize * gridSize + gridPadding * (gridSize + 1);
var gridX = Math.floor((2048 - gridWidth) / 2);
var gridY = Math.floor((2732 - gridHeight) / 2);
// --- Game State ---
var grid = []; // 2D array of tiles or null
var tiles = []; // All tile objects for easy management
var score = 0;
var scoreTxt = null;
var isMoving = false; // Prevent input during animation
// --- GUI: Score ---
scoreTxt = new Text2('0', {
	size: 120,
	fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// --- Draw grid background ---
var gridBg = LK.getAsset('gridBg', {
	anchorX: 0,
	anchorY: 0,
	// Enlarge the background image to be much bigger than the grid, centered behind it
	x: gridX - 200,
	y: gridY - 200,
	width: gridWidth + 400,
	height: gridHeight + 400
});
game.addChild(gridBg);
// --- Add moving clouds and plane ---
var clouds = [];
for (var i = 0; i < 6; i++) {
	var cloud = new Cloud();
	clouds.push(cloud);
	game.addChild(cloud);
}
var plane = new Plane();
game.addChild(plane);
// --- Draw a more beautiful box outline with double border and subtle shadow ---
// Outer border (thicker, dark, semi-transparent)
var boxOuter = LK.getAsset('shape', {
	width: gridWidth + 24,
	height: gridHeight + 24,
	color: 0x222222,
	shape: 'box',
	anchorX: 0,
	anchorY: 0,
	alpha: 0.22,
	x: gridX - 12,
	y: gridY - 12
});
boxOuter.visible = true;
boxOuter.interactive = false;
game.addChild(boxOuter);
// Inner border (thin, bright, more opaque)
var boxInner = LK.getAsset('shape', {
	width: gridWidth,
	height: gridHeight,
	color: 0xffffff,
	shape: 'box',
	anchorX: 0,
	anchorY: 0,
	alpha: 0.13,
	x: gridX,
	y: gridY
});
boxInner.visible = true;
boxInner.interactive = false;
game.addChild(boxInner);
// Decorative shadow (soft, large, very transparent)
var boxShadow = LK.getAsset('shape', {
	width: gridWidth + 80,
	height: gridHeight + 80,
	color: 0x000000,
	shape: 'box',
	anchorX: 0,
	anchorY: 0,
	alpha: 0.08,
	x: gridX - 40,
	y: gridY - 20
});
boxShadow.visible = true;
boxShadow.interactive = false;
game.addChild(boxShadow);
// --- Draw transparent gray grill overlay ---
var grillContainer = new Container();
var grillLineColor = 0x000000;
var grillAlpha = 0.25;
var grillLineWidth = 24;
// The grill lines should not cover the outer grid edges, so lines are drawn only between cells
// The vertical lines go from the top inner padding to the bottom inner padding
var grillInnerHeight = cellSize * gridSize + gridPadding * (gridSize - 1);
var grillInnerWidth = cellSize * gridSize + gridPadding * (gridSize - 1);
// Vertical lines (between columns, not at the very left/right)
for (var c = 1; c < gridSize; c++) {
	var x = gridX + gridPadding + c * cellSize + (c - 0.5) * gridPadding;
	var lineAsset = LK.getAsset('shape', {
		width: grillLineWidth,
		height: grillInnerHeight,
		color: grillLineColor,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 0,
		alpha: grillAlpha,
		x: x,
		y: gridY + gridPadding
	});
	grillContainer.addChild(lineAsset);
}
// Horizontal lines (between rows, not at the very top/bottom)
for (var r = 1; r < gridSize; r++) {
	var y = gridY + gridPadding + r * cellSize + (r - 0.5) * gridPadding;
	var lineAsset = LK.getAsset('shape', {
		width: grillInnerWidth,
		height: grillLineWidth,
		color: grillLineColor,
		shape: 'box',
		anchorX: 0,
		anchorY: 0.5,
		alpha: grillAlpha,
		x: gridX + gridPadding,
		y: y
	});
	grillContainer.addChild(lineAsset);
}
game.addChild(grillContainer);
// --- Draw grid cell backgrounds ---
// (No transparent fruit tiles on the back)
// --- Initialize grid state ---
function resetGrid() {
	grid = [];
	for (var r = 0; r < gridSize; r++) {
		var row = [];
		for (var c = 0; c < gridSize; c++) {
			row.push(null);
		}
		grid.push(row);
	}
	// Remove all tiles from game
	for (var i = 0; i < tiles.length; i++) {
		tiles[i].destroy();
	}
	tiles = [];
	score = 0;
	scoreTxt.setText(score);
}
// --- Add a new tile (2 or 4) at random empty position ---
function addRandomTile() {
	var empties = [];
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			if (!grid[r][c]) empties.push({
				r: r,
				c: c
			});
		}
	}
	if (empties.length === 0) return false;
	var idx = Math.floor(Math.random() * empties.length);
	var pos = empties[idx];
	var val = Math.random() < 0.9 ? 2 : 4;
	var tile = new Tile();
	tile.setValue(val);
	tile.setGridPos(pos.r, pos.c, cellSize, gridX + gridPadding, gridY + gridPadding);
	tile.animateSpawn();
	grid[pos.r][pos.c] = tile;
	tiles.push(tile);
	game.addChild(tile);
	return true;
}
// --- Move/merge logic ---
function canMove() {
	// Check for any empty cell
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			if (!grid[r][c]) return true;
		}
	}
	// Check for any mergeable neighbor
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			var tile = grid[r][c];
			if (!tile) continue;
			// Right
			if (c + 1 < gridSize && grid[r][c + 1] && grid[r][c + 1].value === tile.value) return true;
			// Down
			if (r + 1 < gridSize && grid[r + 1][c] && grid[r + 1][c].value === tile.value) return true;
		}
	}
	return false;
}
// Returns true if any tile reached 2048
function has2048() {
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			if (grid[r][c] && grid[r][c].value === 2048) return true;
		}
	}
	return false;
}
// Move tiles in a direction: 'up', 'down', 'left', 'right'
function moveTiles(dir) {
	if (isMoving) return;
	isMoving = true;
	var moved = false;
	var mergedThisMove = [];
	// Helper to reset merged flags
	function resetMerged() {
		for (var i = 0; i < tiles.length; i++) {
			tiles[i].merged = false;
		}
	}
	resetMerged();
	// For each direction, set up iteration order
	var startR = 0,
		endR = gridSize,
		stepR = 1;
	var startC = 0,
		endC = gridSize,
		stepC = 1;
	if (dir === 'up') {
		startR = 1;
		endR = gridSize;
		stepR = 1;
	}
	if (dir === 'down') {
		startR = gridSize - 2;
		endR = -1;
		stepR = -1;
	}
	if (dir === 'left') {
		startC = 1;
		endC = gridSize;
		stepC = 1;
	}
	if (dir === 'right') {
		startC = gridSize - 2;
		endC = -1;
		stepC = -1;
	}
	// Move/merge logic
	var movedTiles = [];
	if (dir === 'up' || dir === 'down') {
		for (var c = 0; c < gridSize; c++) {
			for (var r = startR; r != endR; r += stepR) {
				var tile = grid[r][c];
				if (!tile) continue;
				var tr = r;
				while (true) {
					var nr = tr + (dir === 'up' ? -1 : 1);
					if (nr < 0 || nr >= gridSize) break;
					if (!grid[nr][c]) {
						// Move
						grid[nr][c] = tile;
						grid[tr][c] = null;
						tr = nr;
						moved = true;
					} else if (grid[nr][c].value === tile.value && !grid[nr][c].merged && !tile.merged) {
						// Merge
						grid[nr][c].setValue(tile.value * 2);
						grid[nr][c].animateMerge();
						grid[nr][c].merged = true;
						score += tile.value * 2;
						scoreTxt.setText(score);
						tile.stopDancing && tile.stopDancing();
						tiles.splice(tiles.indexOf(tile), 1);
						grid[tr][c] = null;
						moved = true;
						break;
					} else {
						break;
					}
				}
				// Animate move
				if (tile && tr !== r) {
					tile.setGridPos(tr, c, cellSize, gridX + gridPadding, gridY + gridPadding);
					movedTiles.push(tile);
				}
			}
		}
	} else {
		for (var r = 0; r < gridSize; r++) {
			for (var c = startC; c != endC; c += stepC) {
				var tile = grid[r][c];
				if (!tile) continue;
				var tc = c;
				while (true) {
					var nc = tc + (dir === 'left' ? -1 : 1);
					if (nc < 0 || nc >= gridSize) break;
					if (!grid[r][nc]) {
						// Move
						grid[r][nc] = tile;
						grid[r][tc] = null;
						tc = nc;
						moved = true;
					} else if (grid[r][nc].value === tile.value && !grid[r][nc].merged && !tile.merged) {
						// Merge
						grid[r][nc].setValue(tile.value * 2);
						grid[r][nc].animateMerge();
						grid[r][nc].merged = true;
						score += tile.value * 2;
						scoreTxt.setText(score);
						tile.stopDancing && tile.stopDancing();
						tiles.splice(tiles.indexOf(tile), 1);
						grid[r][tc] = null;
						moved = true;
						break;
					} else {
						break;
					}
				}
				// Animate move
				if (tile && tc !== c) {
					tile.setGridPos(r, tc, cellSize, gridX + gridPadding, gridY + gridPadding);
					movedTiles.push(tile);
				}
			}
		}
	}
	// Animate all moved tiles
	var animCount = movedTiles.length;
	if (animCount === 0) {
		isMoving = false;
		afterMove(moved);
	} else {
		for (var i = 0; i < movedTiles.length; i++) {
			var t = movedTiles[i];
			tween(t, {
				x: t.x,
				y: t.y
			}, {
				duration: 100,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					animCount--;
					if (animCount === 0) {
						isMoving = false;
						afterMove(moved);
					}
				}
			});
		}
	}
	if (animCount === 0) {
		// No animation, call afterMove immediately
		afterMove(moved);
	}
}
// After move: add new tile, check win/lose
function afterMove(moved) {
	if (moved) {
		addRandomTile();
	}
	if (has2048()) {
		LK.showYouWin();
		return;
	}
	if (!canMove()) {
		LK.showGameOver();
		return;
	}
}
// --- Input: Swipe detection ---
// We'll use game.down, game.move, game.up to detect swipe direction
var touchStartX = 0,
	touchStartY = 0,
	touchMoved = false;
game.down = function (x, y, obj) {
	if (isMoving) return;
	touchStartX = x;
	touchStartY = y;
	touchMoved = false;
};
game.move = function (x, y, obj) {
	if (isMoving) return;
	if (touchStartX === undefined) return;
	var dx = x - touchStartX;
	var dy = y - touchStartY;
	if (!touchMoved && (Math.abs(dx) > 40 || Math.abs(dy) > 40)) {
		touchMoved = true;
		// Determine direction
		if (Math.abs(dx) > Math.abs(dy)) {
			if (dx > 0) moveTiles('right');else moveTiles('left');
		} else {
			if (dy > 0) moveTiles('down');else moveTiles('up');
		}
		// Reset to prevent multiple moves per swipe
		touchStartX = undefined;
		touchStartY = undefined;
	}
};
game.up = function (x, y, obj) {
	touchStartX = undefined;
	touchStartY = undefined;
	touchMoved = false;
};
// --- Game update (not used, but required for tick-based games) ---
game.update = function () {
	// Animate clouds
	for (var i = 0; i < clouds.length; i++) {
		clouds[i].update();
	}
	// Animate plane
	plane.update();
};
// --- Start game ---
function startGame() {
	resetGrid();
	addRandomTile();
	addRandomTile();
	scoreTxt.setText(score);
}
startGame();

===================================================================
--- original.js
+++ change.js
@@ -331,12 +331,12 @@
 
 /**** 
 * Game Code
 ****/ 
-// Optionally, a subtle grid background
-// 2: Asteroid (gray), 4: Moon (light blue), 8: Planet (blue), 16: Star (yellow), 32: Red Giant (red), 64: Neutron Star (purple), 128: Black Hole (black), 256: Nebula (pink), 512: Galaxy (cyan), 1024: Quasar (orange), 2048: Universe (white)
-// Space tile assets: We'll use colored ellipses for different tile values
 // --- Grid and Layout ---
+// Space tile assets: We'll use colored ellipses for different tile values
+// 2: Asteroid (gray), 4: Moon (light blue), 8: Planet (blue), 16: Star (yellow), 32: Red Giant (red), 64: Neutron Star (purple), 128: Black Hole (black), 256: Nebula (pink), 512: Galaxy (cyan), 1024: Quasar (orange), 2048: Universe (white)
+// Optionally, a subtle grid background
 var gridSize = 4;
 var cellSize = 370; // 370*4=1480, bigger board
 var gridPadding = 28;
 var gridWidth = cellSize * gridSize + gridPadding * (gridSize + 1);
@@ -464,9 +464,9 @@
 	grillContainer.addChild(lineAsset);
 }
 game.addChild(grillContainer);
 // --- Draw grid cell backgrounds ---
-// (Removed transparent fruit tiles on the back)
+// (No transparent fruit tiles on the back)
 // --- Initialize grid state ---
 function resetGrid() {
 	grid = [];
 	for (var r = 0; r < gridSize; r++) {