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

/**** 
* Classes
****/ 
var Block = Container.expand(function (board) {
	var self = Container.call(this);
	var hsvToRgb = function hsvToRgb(h, s, v) {
		var r, g, b;
		var i = Math.floor(h * 6);
		var f = h * 6 - i;
		var p = v * (1 - s);
		var q = v * (1 - f * s);
		var t = v * (1 - (1 - f) * s);
		switch (i % 6) {
			case 0:
				r = v, g = t, b = p;
				break;
			case 1:
				r = q, g = v, b = p;
				break;
			case 2:
				r = p, g = v, b = t;
				break;
			case 3:
				r = p, g = q, b = v;
				break;
			case 4:
				r = t, g = p, b = v;
				break;
			case 5:
				r = v, g = p, b = q;
				break;
		}
		return (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255);
	};
	var ShapeTypes = {
		SINGLE: [[1]],
		TRI: [[1, 1, 1]],
		QUAD: [[1, 1, 1, 1]],
		LSHAPE: [[1, 0, 0], [1, 0, 0], [1, 1, 1]],
		BLOCK: [[1, 1], [1, 1]],
		SMALLLSHAPE: [[1, 0], [1, 1]]
	};
	var shapes = Object.values(ShapeTypes);
	var offset = Math.floor(Math.random() * shapes.length);
	self.shape = shapes[offset];
	var hue = offset % shapes.length / shapes.length;
	self.color = hsvToRgb(hue, 0.6, 1);
	self.rotateShapeRandomly = function () {
		var rotations = Math.floor(Math.random() * 4);
		for (var r = 0; r < rotations; r++) {
			self.shape = self.shape[0].map(function (val, index) {
				return self.shape.map(function (row) {
					return row[index];
				}).reverse();
			});
		}
	};
	self.rotateShapeRandomly();
	self.blocks = [];
	var background = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	background.alpha = 0;
	var blockSize = 160;
	background.width = 4 * blockSize;
	background.height = 4 * blockSize;
	self.addChild(background);
	self.offsetX = 0;
	self.offsetY = 0;
	var blockOffsetX = (background.width / 2 - self.shape[0].length * blockSize) / 2 - blockSize / 2;
	var blockOffsetY = (background.height / 2 - self.shape.length * blockSize) / 2 - blockSize / 2;
	for (var i = 0; i < self.shape.length; i++) {
		for (var j = 0; j < self.shape[i].length; j++) {
			if (self.shape[i][j] === 1) {
				var block = self.attachAsset('block', {
					anchorX: 0.5,
					anchorY: 0.5
				});
				block.tint = self.color;
				block.width = blockSize;
				block.height = blockSize;
				block.x = j * blockSize + blockOffsetX;
				block.y = i * blockSize + blockOffsetY;
				self.blocks.push(block);
				self.addChild(block);
			}
		}
	}
	self.startX = 0;
	self.startY = 0;
	self.moveTowardsHomePosition = function () {
		var dx = self.startX - self.x;
		var dy = self.startY - self.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		if (distance > 1) {
			self.x += dx * 0.3;
			self.y += dy * 0.3;
		} else {
			self.x = self.startX;
			self.y = self.startY;
		}
	};
	var currentX = 0;
	var currentY = 0;
	self.moveToDragTarget = function () {
		var ox = -this.targetX;
		var oy = (LK.is.mobile ? 400 : 0) - this.targetY;
		this.targetX += ox / 5;
		this.targetY += oy / 5;
		this.x = currentX - this.targetX;
		this.y = currentY - this.targetY;
	};
	self._move_migrated = function (x, y) {
		currentX = x;
		currentY = y;
		self.x = x - this.targetX;
		self.y = y - this.targetY;
	};
	self.setStartPosition = function (x, y) {
		self.startX = x;
		self.startY = y;
	};
	self.getOverlappingCells = function () {
		var cells = [];
		var boardPos = {
			x: -board.x + self.x + 160 * 4 + blockOffsetX + 160,
			y: -board.y + self.y + 160 * 4 + blockOffsetY + 160
		};
		var startX = Math.floor(boardPos.x / 160);
		var startY = Math.floor(boardPos.y / 160);
		for (var i = 0; i < self.shape.length; i++) {
			for (var j = 0; j < self.shape[i].length; j++) {
				if (self.shape[i][j] === 1) {
					var cell = board.grid && board.grid[startY + i] && board.grid[startY + i][startX + j];
					if (cell && !cell.filled) {
						cells.push(cell);
					} else {
						return null;
					}
				}
			}
		}
		return cells;
	};
	self.showOverlap = function () {
		var cells = self.getOverlappingCells();
		if (cells) {
			for (var a = 0; a < cells.length; a++) {
				var cell = cells[a];
				cell.setTint(self.color);
			}
		}
	};
	self.rotateShapeRandomly = function () {
		var rotations = Math.floor(Math.random() * 4);
		for (var r = 0; r < rotations; r++) {
			self.shape = self.shape[0].map(function (val, index) {
				return self.shape.map(function (row) {
					return row[index];
				}).reverse();
			});
		}
	};
});
var Board = Container.expand(function () {
	var self = Container.call(this);
	self.particles = [];
	Board.prototype.spawnParticles = function (x, y, tint) {
		for (var i = 0; i < 10; i++) {
			var particle = new Particle(tint);
			particle.x = x;
			particle.y = y;
			this.particles.push(particle);
			this.addChild(particle);
		}
	};
	var background = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	background.y = -20;
	background.alpha = .4;
	background.blendMode = 1;
	self.grid = new Array(10).fill(null).map(function () {
		return new Array(10).fill(null);
	});
	var size = 158;
	var totalWidth = 10 * size;
	var totalHeight = 10 * size;
	for (var i = 0; i < 10; i++) {
		for (var j = 0; j < 10; j++) {
			var cell = new Cell();
			cell.x = i * size - totalWidth / 2 + size / 2;
			cell.y = j * size - totalHeight / 2 + size / 2;
			self.grid[j][i] = cell;
			self.addChild(cell);
		}
	}
	self.removeTint = function () {
		for (var i = 0; i < 10; i++) {
			for (var j = 0; j < 10; j++) {
				if (!self.grid[i][j].filled) {
					self.grid[i][j].setTint(0xffffff);
				}
			}
		}
	};
	self.checkLines = function () {
		var rowsRemoved = 0;
		for (var i = 0; i < 10; i++) {
			var rowFilled = true;
			var colFilled = true;
			for (var j = 0; j < 10; j++) {
				if (!self.grid[i][j].filled) {
					rowFilled = false;
				}
				if (!self.grid[j][i].filled) {
					colFilled = false;
				}
			}
			if (rowFilled || colFilled) {
				rowsRemoved += (rowFilled ? 1 : 0) + (colFilled ? 1 : 0);
				for (var j = 0; j < 10; j++) {
					if (rowFilled) {
						self.grid[i][j].setFill(false);
						self.spawnParticles(self.grid[i][j].x, self.grid[i][j].y, self.grid[i][j].getTint());
					}
					if (colFilled) {
						self.grid[j][i].setFill(false);
						self.spawnParticles(self.grid[j][i].x, self.grid[j][i].y, self.grid[j][i].getTint());
					}
				}
			}
		}
		return rowsRemoved;
	};
	self.tick = function () {
		for (var i = self.particles.length - 1; i >= 0; i--) {
			var particle = self.particles[i];
			if (particle) {
				particle.tick();
				if (particle.alpha <= 0) {
					self.particles.splice(i, 1);
				}
			}
		}
	};
	self.placeBlock = function () {};
});
var Cell = Container.expand(function () {
	var self = Container.call(this);
	self.filled = false;
	var empty = self.attachAsset('cell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	empty.alpha = .8;
	var filled = self.attachAsset('block', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	empty.y = 2;
	self.setFill = function (isFilled) {
		self.filled = isFilled;
		empty.visible = !self.filled;
		filled.visible = self.filled;
	};
	self.getTint = function () {
		return filled.tint;
	};
	self.setTint = function (tint) {
		empty.tint = filled.tint = tint;
	};
	self.setFill(false);
});
var Menu = Container.expand(function () {
	var self = Container.call(this);
	// Background for menu
	var menuBackground = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	menuBackground.width = 1200;
	menuBackground.height = 1600;
	menuBackground.alpha = 0.9;
	menuBackground.tint = 0x333333;
	// Title
	var title = new Text2('Block Puzzle', {
		size: 100,
		fill: 0xFFFFFF,
		font: 'Impact',
		dropShadow: true,
		dropShadowColor: '#2a636e'
	});
	title.anchor.set(0.5, 0);
	title.y = -600;
	self.addChild(title);
	// Play button
	var playButton = new Container();
	var playButtonBg = playButton.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	playButtonBg.width = 500;
	playButtonBg.height = 120;
	playButtonBg.tint = 0x4CAF50;
	var playText = new Text2('PLAY', {
		size: 80,
		fill: 0xFFFFFF,
		font: 'Impact'
	});
	playText.anchor.set(0.5, 0.5);
	playButton.addChild(playText);
	playButton.y = -300;
	playButton.interactive = true;
	playButton.on('down', function () {
		self.emit('play');
	});
	self.addChild(playButton);
	// Settings button
	var settingsButton = new Container();
	var settingsButtonBg = settingsButton.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	settingsButtonBg.width = 500;
	settingsButtonBg.height = 120;
	settingsButtonBg.tint = 0x2196F3;
	var settingsText = new Text2('SETTINGS', {
		size: 80,
		fill: 0xFFFFFF,
		font: 'Impact'
	});
	settingsText.anchor.set(0.5, 0.5);
	settingsButton.addChild(settingsText);
	settingsButton.y = -150;
	settingsButton.interactive = true;
	settingsButton.on('down', function () {
		self.emit('settings');
	});
	self.addChild(settingsButton);
	// Creator text
	var creatorText = new Text2('Created by Mert Özzaman', {
		size: 40,
		fill: 0xFFFFFF,
		font: 'Arial'
	});
	creatorText.anchor.set(0.5, 0.5);
	creatorText.y = 700;
	self.addChild(creatorText);
	self.show = function () {
		self.visible = true;
		self.alpha = 0;
		tween(self, {
			alpha: 1
		}, {
			duration: 300
		});
	};
	self.hide = function () {
		tween(self, {
			alpha: 0
		}, {
			duration: 300,
			onFinish: function onFinish() {
				self.visible = false;
			}
		});
	};
	return self;
});
var Particle = Container.expand(function (tint) {
	var self = Container.call(this);
	self.tint = tint;
	var particleGraphics = self.attachAsset('particle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	particleGraphics.rotation = Math.random() * Math.PI * 2;
	particleGraphics.tint = self.tint;
	self.vx = Math.random() * 4 - 2;
	self.vy = Math.random() * 4 - 2;
	self.alpha = 1;
	self.lifetime = 60;
	self.tick = function () {
		self.x += self.vx;
		self.y += self.vy;
		self.alpha -= 1 / self.lifetime;
		if (self.alpha <= 0) {
			self.destroy();
		}
	};
});
var Settings = Container.expand(function () {
	var self = Container.call(this);
	// Background for settings
	var settingsBackground = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	settingsBackground.width = 1200;
	settingsBackground.height = 1600;
	settingsBackground.alpha = 0.9;
	settingsBackground.tint = 0x333333;
	// Title
	var title = new Text2('Settings', {
		size: 100,
		fill: 0xFFFFFF,
		font: 'Impact',
		dropShadow: true,
		dropShadowColor: '#2a636e'
	});
	title.anchor.set(0.5, 0);
	title.y = -600;
	self.addChild(title);
	// Music toggle button
	var musicButton = new Container();
	var musicButtonBg = musicButton.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	musicButtonBg.width = 500;
	musicButtonBg.height = 120;
	musicButtonBg.tint = 0x4CAF50;
	var musicText = new Text2('Music: ON', {
		size: 60,
		fill: 0xFFFFFF,
		font: 'Impact'
	});
	musicText.anchor.set(0.5, 0.5);
	musicButton.addChild(musicText);
	// Music state
	var musicOn = true;
	musicButton.y = -300;
	musicButton.interactive = true;
	musicButton.on('down', function () {
		musicOn = !musicOn;
		musicText.setText('Music: ' + (musicOn ? 'ON' : 'OFF'));
		musicButtonBg.tint = musicOn ? 0x4CAF50 : 0xF44336;
	});
	self.addChild(musicButton);
	// Sound toggle button
	var soundButton = new Container();
	var soundButtonBg = soundButton.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	soundButtonBg.width = 500;
	soundButtonBg.height = 120;
	soundButtonBg.tint = 0x4CAF50;
	var soundText = new Text2('Sound: ON', {
		size: 60,
		fill: 0xFFFFFF,
		font: 'Impact'
	});
	soundText.anchor.set(0.5, 0.5);
	soundButton.addChild(soundText);
	// Sound state
	var soundOn = true;
	soundButton.y = -150;
	soundButton.interactive = true;
	soundButton.on('down', function () {
		soundOn = !soundOn;
		soundText.setText('Sound: ' + (soundOn ? 'ON' : 'OFF'));
		soundButtonBg.tint = soundOn ? 0x4CAF50 : 0xF44336;
	});
	self.addChild(soundButton);
	// Back button
	var backButton = new Container();
	var backButtonBg = backButton.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	backButtonBg.width = 500;
	backButtonBg.height = 120;
	backButtonBg.tint = 0x9E9E9E;
	var backText = new Text2('BACK', {
		size: 60,
		fill: 0xFFFFFF,
		font: 'Impact'
	});
	backText.anchor.set(0.5, 0.5);
	backButton.addChild(backText);
	backButton.y = 100;
	backButton.interactive = true;
	backButton.on('down', function () {
		self.emit('back');
	});
	self.addChild(backButton);
	// Creator text
	var creatorText = new Text2('Created by Mert Özzaman', {
		size: 40,
		fill: 0xFFFFFF,
		font: 'Arial'
	});
	creatorText.anchor.set(0.5, 0.5);
	creatorText.y = 700;
	self.addChild(creatorText);
	self.show = function () {
		self.visible = true;
		self.alpha = 0;
		tween(self, {
			alpha: 1
		}, {
			duration: 300
		});
	};
	self.hide = function () {
		tween(self, {
			alpha: 0
		}, {
			duration: 300,
			onFinish: function onFinish() {
				self.visible = false;
			}
		});
	};
	return self;
});

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

/**** 
* Game Code
****/ 
var gameBackground = game.attachAsset('gameBackground', {
	anchorX: 0.5,
	anchorY: 0.5
});
gameBackground.x = 2048 / 2;
gameBackground.y = 2732 / 2;
var tilesBackground = game.attachAsset('tileBackground', {
	anchorX: 0.5,
	anchorY: 0.5
});
tilesBackground.y = -20;
tilesBackground.alpha = .4;
tilesBackground.blendMode = 1;
var blocks = [];
var dragTarget;
var board = game.addChild(new Board());
board.x = 2048 / 2;
board.y = 2732 / 2 - 250 + 30;
tilesBackground.x = 2048 / 2;
tilesBackground.y = 2732 - 300;
var targetOffset;
game.createBlock = function (index) {
	var block = new Block(board);
	block.x = 2048 / 2 + (index - 1) * (block.width + 30);
	block.y = 2732 + block.height;
	block.setStartPosition(block.x, 2732 - block.height / 2 - 30);
	blocks.push(block);
	game.addChild(block);
	block.on('down', function (x, y, obj) {
		dragTarget = this;
		var pos = this.toLocal(obj.global);
		var targetPos = game.toLocal(obj.global);
		this.targetX = pos.x;
		this.targetY = pos.y;
		dragTarget._move_migrated(targetPos.x, targetPos.y);
	});
};
game.on('move', function (x, y, obj) {
	if (dragTarget) {
		board.removeTint();
		var pos = game.toLocal(obj.global);
		dragTarget._move_migrated(pos.x, pos.y);
		dragTarget.showOverlap();
	}
});
game.on('up', function (x, y, obj) {
	if (dragTarget) {
		var cells = dragTarget.getOverlappingCells();
		if (cells) {
			for (var a = 0; a < cells.length; a++) {
				cells[a].setFill(true);
				cells[a].setTint(dragTarget.color);
			}
			blocks[blocks.indexOf(dragTarget)] = undefined;
			dragTarget.destroy();
			if (!blocks.some(function (block) {
				return block;
			})) {
				game.createBlocks();
			}
			var pointsToAdd = board.checkLines();
			if (pointsToAdd) {
				score += Math.pow(pointsToAdd, 2) * 10;
				scoreTxt.setText(score);
			}
		}
		board.removeTint();
		dragTarget = undefined;
	}
});
game.createBlocks = function () {
	for (var i = 0; i < 3; i++) {
		game.createBlock(i);
	}
};
var score = 0;
// Create menu button
var menuButton = new Container();
var menuButtonBg = menuButton.attachAsset('background', {
	anchorX: 0.5,
	anchorY: 0.5
});
menuButtonBg.width = 100;
menuButtonBg.height = 100;
menuButtonBg.tint = 0x2196F3;
var menuText = new Text2('≡', {
	size: 80,
	fill: 0xFFFFFF,
	font: 'Arial'
});
menuText.anchor.set(0.5, 0.5);
menuButton.addChild(menuText);
menuButton.x = 1920;
menuButton.y = 100;
menuButton.interactive = true;
menuButton.on('down', function () {
	toggleMenu();
});
game.addChild(menuButton);
// Create menu
var gameMenu = new Menu();
gameMenu.x = 2048 / 2;
gameMenu.y = 2732 / 2;
gameMenu.visible = false;
game.addChild(gameMenu);
// Create settings
var gameSettings = new Settings();
gameSettings.x = 2048 / 2;
gameSettings.y = 2732 / 2;
gameSettings.visible = false;
game.addChild(gameSettings);
// Add event handlers
gameMenu.on('play', function () {
	gameMenu.hide();
	resumeGame();
});
gameMenu.on('settings', function () {
	gameMenu.hide();
	gameSettings.show();
});
gameSettings.on('back', function () {
	gameSettings.hide();
	gameMenu.show();
});
// Menu functions
var gamePaused = false;
function toggleMenu() {
	if (gameMenu.visible || gameSettings.visible) {
		if (gameMenu.visible) {
			gameMenu.hide();
		}
		if (gameSettings.visible) {
			gameSettings.hide();
		}
		resumeGame();
	} else {
		pauseGame();
		gameMenu.show();
	}
}
function pauseGame() {
	gamePaused = true;
}
function resumeGame() {
	gamePaused = false;
}
// Creator text at bottom
var creatorText = new Text2('Created by Mert Özzaman', {
	size: 30,
	fill: 0xFFFFFF,
	font: 'Arial',
	dropShadow: true,
	dropShadowColor: '#000000'
});
creatorText.anchor.set(0.5, 1);
creatorText.x = 2048 / 2;
creatorText.y = 2732 - 20;
game.addChild(creatorText);
game.createBlocks();
var scoreTxt = new Text2('0', {
	size: 150,
	fill: 0xFFFFFF,
	font: 'Impact',
	dropShadow: true,
	dropShadowColor: '#2a636e'
});
scoreTxt.anchor.set(.5, 0);
LK.gui.top.addChild(scoreTxt);
game.isMovePossible = function () {
	for (var a = 0; a < blocks.length; a++) {
		if (blocks[a]) {
			for (var i = 0; i < 10; i++) {
				for (var j = 0; j < 10; j++) {
					if (board.grid[i][j].filled) {
						continue;
					}
					var canPlace = true;
					for (var k = 0; k < blocks[a].shape.length; k++) {
						for (var l = 0; l < blocks[a].shape[k].length; l++) {
							if (blocks[a].shape[k][l] === 1) {
								if (i + k < 0 || i + k >= 10 || j + l < 0 || j + l >= 10 || board.grid[i + k][j + l].filled) {
									canPlace = false;
									break;
								}
							}
						}
						if (!canPlace) {
							break;
						}
					}
					if (canPlace) {
						return true;
					}
				}
			}
		}
	}
	return false;
};
var isGameOver = false;
LK.on('tick', function () {
	// Skip game updates if paused
	if (gamePaused) return;
	board.tick();
	if (isGameOver || !game.isMovePossible()) {
		LK.effects.flashScreen(0xffffff, 1000);
		LK.showGameOver();
	}
	for (var a = blocks.length - 1; a >= 0; a--) {
		if (blocks[a]) {
			if (blocks[a] != dragTarget) {
				blocks[a].moveTowardsHomePosition();
			} else {
				blocks[a].moveToDragTarget();
			}
		}
	}
});

===================================================================
--- original.js
+++ change.js
@@ -356,17 +356,22 @@
 	self.addChild(creatorText);
 	self.show = function () {
 		self.visible = true;
 		self.alpha = 0;
-		tween.to(self, {
+		tween(self, {
 			alpha: 1
-		}, 300);
+		}, {
+			duration: 300
+		});
 	};
 	self.hide = function () {
-		tween.to(self, {
+		tween(self, {
 			alpha: 0
-		}, 300).onComplete(function () {
-			self.visible = false;
+		}, {
+			duration: 300,
+			onFinish: function onFinish() {
+				self.visible = false;
+			}
 		});
 	};
 	return self;
 });
@@ -499,17 +504,22 @@
 	self.addChild(creatorText);
 	self.show = function () {
 		self.visible = true;
 		self.alpha = 0;
-		tween.to(self, {
+		tween(self, {
 			alpha: 1
-		}, 300);
+		}, {
+			duration: 300
+		});
 	};
 	self.hide = function () {
-		tween.to(self, {
+		tween(self, {
 			alpha: 0
-		}, 300).onComplete(function () {
-			self.visible = false;
+		}, {
+			duration: 300,
+			onFinish: function onFinish() {
+				self.visible = false;
+			}
 		});
 	};
 	return self;
 });