/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
	level: 1,
	score: 0,
	highScore: 0
});

/**** 
* Classes
****/ 
var ImageContainer = Container.expand(function (imageKey, letter) {
	var self = Container.call(this);
	// Create the image box background
	var box = self.attachAsset('imageBox', {
		anchorX: 0.5,
		anchorY: 0.7
	});
	// Attach the actual image asset
	var imageAsset = self.attachAsset(imageKey, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.addChild(imageAsset);
	// Letter label below the image
	var letterLabel = new Text2("(" + letter + ")", {
		size: 50,
		fill: 0x333333
	});
	letterLabel.anchor.set(0.5, 0);
	letterLabel.y = 70;
	self.addChild(letterLabel);
	// Properties
	self.imageKey = imageKey;
	self.letter = letter;
	self.matched = false;
	// Mark as matched
	self.markMatched = function () {
		if (!self.matched) {
			self.matched = true;
			// Visual feedback for matched state
			tween(box, {
				tint: 0x66cc66
			}, {
				duration: 300
			});
			// Add a checkmark or similar
			var checkmark = new Text2("✓", {
				size: 70,
				fill: 0x00AA00
			});
			checkmark.anchor.set(0.5, 0.5);
			checkmark.y = -50;
			checkmark.x = 50;
			self.addChild(checkmark);
		}
	};
	return self;
});
var Letter = Container.expand(function (letter, imageKey) {
	var self = Container.call(this);
	// Create the letter box background
	var box = self.attachAsset('letterBox', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Add letter text
	var letterText = new Text2(letter, {
		size: 80,
		fill: 0xFFFFFF
	});
	letterText.anchor.set(0.5, 0.5);
	self.addChild(letterText);
	// Properties
	self.letter = letter;
	self.imageKey = imageKey;
	self.speed = 1 + Math.random() * 1.5; // Varying fall speeds
	self.matched = false;
	self.dragging = false;
	self.originalX = 0;
	self.originalY = 0;
	// Interactive properties
	self.interactive = true;
	// Event handlers
	self.down = function (x, y, obj) {
		if (!self.matched) {
			self.dragging = true;
			self.originalX = self.x;
			self.originalY = self.y;
			// Bring to front by re-adding to parent
			var parent = self.parent;
			if (parent) {
				parent.removeChild(self);
				parent.addChild(self);
			}
			// Scale up slightly to indicate selection
			tween(self, {
				scaleX: 1.1,
				scaleY: 1.1
			}, {
				duration: 200
			});
			// Set drag target
			dragTarget = self;
		}
	};
	self.up = function (x, y, obj) {
		if (self.dragging) {
			self.dragging = false;
			// Check if letter intersects with any image container
			var matched = false;
			for (var i = 0; i < imageContainers.length; i++) {
				if (self.intersects(imageContainers[i]) && self.imageKey === imageContainers[i].imageKey) {
					// Correct match!
					matched = true;
					self.matched = true;
					// Award points
					LK.setScore(LK.getScore() + 10);
					scoreTxt.setText(LK.getScore());
					// Play correct sound
					LK.getSound('correct').play();
					// Animate to center of image
					tween(self, {
						x: imageContainers[i].x,
						y: imageContainers[i].y,
						scaleX: 0.9,
						scaleY: 0.9
					}, {
						duration: 300,
						easing: tween.easeOut,
						onFinish: function onFinish() {
							// Celebrate with a bounce
							tween(self, {
								scaleX: 1.0,
								scaleY: 1.0
							}, {
								duration: 200,
								easing: tween.bounceOut
							});
							// Mark image as matched
							imageContainers[i].markMatched();
							// Check if level is complete
							checkLevelComplete();
						}
					});
					break;
				}
			}
			if (!matched) {
				// Return to original position if not matched
				LK.getSound('wrong').play();
				tween(self, {
					x: self.originalX,
					y: self.originalY,
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 300,
					easing: tween.easeOut
				});
			}
		}
	};
	self.update = function () {
		if (!self.dragging && !self.matched) {
			self.y += self.speed;
			// If letter goes off screen, reset it
			if (self.y > 2732 + 100) {
				self.y = -100;
				self.x = 200 + Math.random() * (2048 - 400);
			}
		}
	};
	return self;
});
var LevelCompleteMessage = Container.expand(function () {
	var self = Container.call(this);
	// Create background
	var bg = LK.getAsset('letterBox', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 1000,
		height: 600,
		tint: 0x00AA00
	});
	self.addChild(bg);
	// Title text
	var titleText = new Text2("Level Complete!", {
		size: 100,
		fill: 0xFFFFFF
	});
	titleText.anchor.set(0.5, 0.5);
	titleText.y = -150;
	self.addChild(titleText);
	// Score text
	var scoreText = new Text2("Score: 0", {
		size: 70,
		fill: 0xFFFFFF
	});
	scoreText.anchor.set(0.5, 0.5);
	scoreText.y = 0;
	self.addChild(scoreText);
	// Update score
	self.updateScore = function (score) {
		scoreText.setText("Score: " + score);
	};
	// Next button
	var nextButton = new Text2("NEXT LEVEL", {
		size: 80,
		fill: 0xFFFF00
	});
	nextButton.anchor.set(0.5, 0.5);
	nextButton.y = 150;
	nextButton.interactive = true;
	nextButton.down = function () {
		tween(nextButton, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100
		});
	};
	nextButton.up = function () {
		tween(nextButton, {
			scaleX: 1.0,
			scaleY: 1.0
		}, {
			duration: 100,
			onFinish: function onFinish() {
				self.onNextLevel();
			}
		});
	};
	self.addChild(nextButton);
	// Event handler for next level button
	self.onNextLevel = function () {
		// To be set by the game
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Add background image
var backgroundImage = LK.getAsset('backgroundImage', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2
});
game.addChild(backgroundImage);
// Initialize the first level 
var level = storage.level || 1;
var lettersInPlay = [];
var imageContainers = [];
var levelComplete = false;
var levelCompleteMessage = null;
// Define letter-image pairs for different levels
var levelData = [
// Level 1: Simple letters A-E
{
	letters: [{
		letter: 'A',
		image: 'apple'
	}, {
		letter: 'B',
		image: 'ball'
	}, {
		letter: 'C',
		image: 'cat'
	}, {
		letter: 'D',
		image: 'dog'
	}, {
		letter: 'E',
		image: 'elephant'
	}]
},
// Level 2: F-J
{
	letters: [{
		letter: 'F',
		image: 'fish'
	}, {
		letter: 'G',
		image: 'goat'
	}, {
		letter: 'H',
		image: 'hat'
	}, {
		letter: 'I',
		image: 'ice'
	}, {
		letter: 'J',
		image: 'jam'
	}]
},
// Level 3: K-O
{
	letters: [{
		letter: 'K',
		image: 'kite'
	}, {
		letter: 'L',
		image: 'lion'
	}, {
		letter: 'M',
		image: 'monkey'
	}, {
		letter: 'N',
		image: 'nest'
	}, {
		letter: 'O',
		image: 'orange'
	}]
},
// Level 4: P-T
{
	letters: [{
		letter: 'P',
		image: 'panda'
	}, {
		letter: 'Q',
		image: 'queen'
	}, {
		letter: 'R',
		image: 'rabbit'
	}, {
		letter: 'S',
		image: 'sun'
	}, {
		letter: 'T',
		image: 'tiger'
	}]
},
// Level 5: U-Z
{
	letters: [{
		letter: 'U',
		image: 'umbrella'
	}, {
		letter: 'V',
		image: 'violin'
	}, {
		letter: 'W',
		image: 'whale'
	}, {
		letter: 'X',
		image: 'xylophone'
	}, {
		letter: 'Y',
		image: 'yacht'
	}, {
		letter: 'Z',
		image: 'zebra'
	}]
}];
// Make sure we don't exceed available levels
if (level > levelData.length) {
	level = 1;
	storage.level = 1;
}
// Level indicator
var levelTxt = new Text2("Level " + level, {
	size: 80,
	fill: 0x333333
});
levelTxt.anchor.set(0.5, 0);
levelTxt.y = 30;
LK.gui.top.addChild(levelTxt);
// Score display
var scoreTxt = new Text2("0", {
	size: 80,
	fill: 0x333333
});
scoreTxt.anchor.set(0, 0);
scoreTxt.x = 150;
scoreTxt.y = 30;
LK.gui.topRight.addChild(scoreTxt);
// Initialize score
LK.setScore(0);
scoreTxt.setText("0");
// Function to initialize level
function initLevel(levelNumber) {
	// Clear any existing objects
	clearLevel();
	// Set level text
	levelTxt.setText("Level " + levelNumber);
	// Get current level data
	var currentLevelData = levelData[levelNumber - 1];
	// Create image containers at the bottom
	var containerSpacing = 2048 / (currentLevelData.letters.length + 1);
	for (var i = 0; i < currentLevelData.letters.length; i++) {
		var imageContainer = new ImageContainer(currentLevelData.letters[i].image, currentLevelData.letters[i].letter);
		imageContainer.x = containerSpacing * (i + 1);
		imageContainer.y = 2732 - 300;
		game.addChild(imageContainer);
		imageContainers.push(imageContainer);
	}
	// Shuffle letters
	var shuffledLetters = currentLevelData.letters.slice().sort(function () {
		return Math.random() - 0.5;
	});
	// Create falling letters
	for (var i = 0; i < shuffledLetters.length; i++) {
		var letter = new Letter(shuffledLetters[i].letter, shuffledLetters[i].image);
		letter.x = containerSpacing * (i + 1); // Align with image containers
		letter.y = -200 - i * 300; // Stagger the starting positions
		game.addChild(letter);
		lettersInPlay.push(letter);
	}
	// Reset level complete flag
	levelComplete = false;
}
// Function to clear level
function clearLevel() {
	// Remove all letters
	for (var i = 0; i < lettersInPlay.length; i++) {
		if (lettersInPlay[i].parent) {
			lettersInPlay[i].parent.removeChild(lettersInPlay[i]);
		}
	}
	lettersInPlay = [];
	// Remove all image containers
	for (var i = 0; i < imageContainers.length; i++) {
		if (imageContainers[i].parent) {
			imageContainers[i].parent.removeChild(imageContainers[i]);
		}
	}
	imageContainers = [];
	// Remove level complete message if present
	if (levelCompleteMessage && levelCompleteMessage.parent) {
		levelCompleteMessage.parent.removeChild(levelCompleteMessage);
		levelCompleteMessage = null;
	}
}
// Function to check if level is complete
function checkLevelComplete() {
	// Check if all images are matched
	var allMatched = true;
	for (var i = 0; i < imageContainers.length; i++) {
		if (!imageContainers[i].matched) {
			allMatched = false;
			break;
		}
	}
	if (allMatched && !levelComplete) {
		levelComplete = true;
		// Save progress
		storage.score = LK.getScore();
		if (LK.getScore() > (storage.highScore || 0)) {
			storage.highScore = LK.getScore();
		}
		// Show level complete message
		levelCompleteMessage = new LevelCompleteMessage();
		levelCompleteMessage.x = 2048 / 2;
		levelCompleteMessage.y = 2732 / 2;
		levelCompleteMessage.updateScore(LK.getScore());
		levelCompleteMessage.onNextLevel = function () {
			// Increment level
			level++;
			storage.level = level;
			// If we've completed all levels, go back to level 1
			if (level > levelData.length) {
				level = 1;
				storage.level = 1;
				LK.showYouWin();
			} else {
				// Start next level
				initLevel(level);
			}
		};
		game.addChild(levelCompleteMessage);
	}
}
// Handle dragging
var dragTarget = null;
game.down = function (x, y, obj) {
	// The letter objects handle their own down events
};
game.up = function (x, y, obj) {
	// The letter objects handle their own up events
	dragTarget = null;
};
game.move = function (x, y, obj) {
	// Move the dragged letter
	if (dragTarget) {
		dragTarget.x = x;
		dragTarget.y = y;
	}
};
// Game update loop
game.update = function () {
	// Nothing needed here - objects handle their own updates
};
// Initialize the first level
initLevel(level);
// Play background music
LK.playMusic('bgMusic', {
	fade: {
		start: 0,
		end: 0.4,
		duration: 1000
	}
});

===================================================================
--- original.js
+++ change.js
@@ -250,9 +250,17 @@
 
 /**** 
 * Game Code
 ****/ 
-// Game variables
+// Add background image
+var backgroundImage = LK.getAsset('backgroundImage', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	x: 2048 / 2,
+	y: 2732 / 2
+});
+game.addChild(backgroundImage);
+// Initialize the first level 
 var level = storage.level || 1;
 var lettersInPlay = [];
 var imageContainers = [];
 var levelComplete = false;