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

/**** 
* Classes
****/ 
// LetterBubble: A bubble with a letter inside, touchable
var LetterBubble = Container.expand(function () {
	var self = Container.call(this);
	// Properties to be set after creation:
	// self.letter (string, e.g. "A")
	// self.isTarget (bool, is this the correct letter to pop?)
	// We'll assign a color randomly from the available bubble assets
	var bubbleColors = ['bubbleBlue', 'bubbleGreen', 'bubbleRed', 'bubbleYellow', 'bubblePurple', 'bubbleOrange'];
	var colorIdx = Math.floor(Math.random() * bubbleColors.length);
	var bubbleAsset = self.attachAsset(bubbleColors[colorIdx], {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Letter text
	self.letterText = new Text2('A', {
		size: 120,
		fill: 0xFFFFFF,
		font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
	});
	self.letterText.anchor.set(0.5, 0.5);
	self.addChild(self.letterText);
	// Animate in (pop effect)
	self.scale.set(0.1, 0.1);
	tween(self.scale, {
		x: 1,
		y: 1
	}, {
		duration: 300,
		easing: tween.elasticOut
	});
	// Touch event
	self.down = function (x, y, obj) {
		// Only allow popping if not already popped
		if (self.popped) return;
		self.popped = true;
		onBubbleTapped(self);
	};
	// Pop animation
	self.pop = function (_onFinish) {
		// Play pop sound
		LK.getSound('pop').play();
		// Animate: scale up, fade out, then destroy
		tween(self.scale, {
			x: 1.3,
			y: 1.3
		}, {
			duration: 120,
			easing: tween.easeOut
		});
		tween(self, {
			alpha: 0
		}, {
			duration: 180,
			delay: 100,
			onFinish: function onFinish() {
				if (_onFinish) _onFinish();
				self.destroy();
			}
		});
	};
	// Gentle shake for incorrect
	self.shake = function () {
		// Animate left-right shake
		var origX = self.x;
		tween(self, {
			x: origX - 20
		}, {
			duration: 60,
			easing: tween.easeIn,
			onFinish: function onFinish() {
				tween(self, {
					x: origX + 20
				}, {
					duration: 60,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						tween(self, {
							x: origX
						}, {
							duration: 60
						});
					}
				});
			}
		});
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xE3F6FD // Light blue background for kid-friendly look
});

/**** 
* Game Code
****/ 
// No need for update loop, as all logic is event-driven
// Touchscreen: No drag/move needed, only tap (down) on bubbles
// Make sure no elements are in top-left 100x100 (all UI is top/center/right);
// --- Add Return Home Button ---
var homeButton = LK.getAsset('bubbleOrange', {
	anchorX: 0.5,
	anchorY: 0.5
});
homeButton.width = 180;
homeButton.height = 180;
homeButton.x = 2048 - 140;
homeButton.y = 140;
LK.gui.topRight.addChild(homeButton);
var homeText = new Text2('Home', {
	size: 54,
	fill: 0xffffff,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
homeText.anchor.set(0.5, 0.5);
homeText.x = homeButton.x;
homeText.y = homeButton.y;
LK.gui.topRight.addChild(homeText);
function showStartScreen() {
	// Remove all bubbles
	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].destroy();
	}
	bubbles = [];
	// Hide UI
	promptText.alpha = 0;
	scoreText.alpha = 0;
	feedbackText.alpha = 0;
	// Reset start screen container
	startScreenContainer.alpha = 1;
	game.addChild(startScreenContainer);
}
homeButton.down = function () {
	showStartScreen();
};
// Sounds for correct/incorrect feedback
// Simple celebratory sound for win
var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
// Game state
var currentLetterIdx = 0; // Index in alphabet for the current target letter
var bubbles = []; // Array of LetterBubble instances
var lettersPerRound = 4; // Start with 4, will increase as player gets correct answers
var correctInARow = 0; // Track correct answers in a row for difficulty
var roundActive = false; // Is a round currently active?
var score = 0; // Number of correct letters popped
// UI elements
var promptText = new Text2('', {
	size: 110,
	fill: 0x333333,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
promptText.anchor.set(0.5, 0);
LK.gui.top.addChild(promptText);
var scoreText = new Text2('0', {
	size: 110,
	fill: 0x4A90E2,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
scoreText.anchor.set(0.5, 1);
LK.gui.bottom.addChild(scoreText);
// Feedback text (centered, fades in/out)
var feedbackText = new Text2('', {
	size: 130,
	fill: 0x43A047,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
feedbackText.anchor.set(0.5, 0.5);
feedbackText.alpha = 0;
LK.gui.center.addChild(feedbackText);
// Helper: Shuffle array (Fisher-Yates)
function shuffleArray(arr) {
	var a = arr.slice();
	for (var i = a.length - 1; i > 0; i--) {
		var j = Math.floor(Math.random() * (i + 1));
		var t = a[i];
		a[i] = a[j];
		a[j] = t;
	}
	return a;
}
// Helper: Start a new round
function startRound() {
	// Remove old bubbles
	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].destroy();
	}
	bubbles = [];
	if (currentLetterIdx >= alphabet.length) {
		// All letters done!
		showCelebration();
		return;
	}
	roundActive = true;
	// Set prompt
	var targetLetter = alphabet[currentLetterIdx];
	promptText.setText("Find: " + targetLetter);
	// Pick distractor letters (not the target)
	var distractors = [];
	var pool = [];
	for (var i = 0; i < alphabet.length; i++) {
		if (i !== currentLetterIdx) pool.push(alphabet[i]);
	}
	pool = shuffleArray(pool);
	for (var i = 0; i < lettersPerRound - 1; i++) {
		distractors.push(pool[i]);
	}
	// Combine and shuffle
	var roundLetters = distractors.concat([targetLetter]);
	roundLetters = shuffleArray(roundLetters);
	// Dynamically arrange bubbles in a centered grid or row depending on count
	var numBubbles = roundLetters.length;
	var bubbleSize = 300; // match asset size
	var margin = 60;
	var positions = [];
	if (numBubbles <= 5) {
		// Arrange in a single centered row
		var totalWidth = numBubbles * bubbleSize + (numBubbles - 1) * margin;
		var startX = (2048 - totalWidth) / 2 + bubbleSize / 2;
		var y = 2732 / 2;
		for (var i = 0; i < numBubbles; i++) {
			positions.push({
				x: startX + i * (bubbleSize + margin),
				y: y
			});
		}
	} else {
		// Arrange in two rows, centered
		var rowCount = 2;
		var perRow = Math.ceil(numBubbles / rowCount);
		var totalWidth = perRow * bubbleSize + (perRow - 1) * margin;
		var startY = 2732 / 2 - (bubbleSize + margin) / 2;
		for (var row = 0; row < rowCount; row++) {
			var y = startY + row * (bubbleSize + margin);
			var bubblesInThisRow = row === 0 ? Math.min(perRow, numBubbles) : numBubbles - perRow;
			var rowStartX = (2048 - (bubblesInThisRow * bubbleSize + (bubblesInThisRow - 1) * margin)) / 2 + bubbleSize / 2;
			for (var col = 0; col < bubblesInThisRow; col++) {
				positions.push({
					x: rowStartX + col * (bubbleSize + margin),
					y: y
				});
			}
		}
	}
	for (var i = 0; i < roundLetters.length; i++) {
		var bubble = new LetterBubble();
		bubble.letter = roundLetters[i];
		bubble.letterText.setText(bubble.letter);
		bubble.isTarget = bubble.letter === targetLetter;
		// Position
		bubble.x = positions[i].x;
		bubble.y = positions[i].y;
		// Add to game
		game.addChild(bubble);
		bubbles.push(bubble);
	}
}
// Handle bubble tap
function onBubbleTapped(bubble) {
	if (!roundActive) return;
	if (bubble.isTarget) {
		// Correct!
		roundActive = false;
		score++;
		scoreText.setText(score);
		// Track correct answers in a row for difficulty increase
		if (typeof correctInARow === "undefined") {
			correctInARow = 0;
		}
		correctInARow++;
		// After every two correct answers, increase number of options (up to 10)
		if (correctInARow % 2 === 0) {
			if (typeof lettersPerRound === "undefined") lettersPerRound = 4;
			lettersPerRound = Math.min(lettersPerRound + 1, 10);
		}
		// Feedback
		showFeedback("Great!", "#43A047");
		LK.getSound('ding').play();
		// Pop animation, then next round
		bubble.pop(function () {
			// Remove other bubbles with fade out
			for (var i = 0; i < bubbles.length; i++) {
				if (bubbles[i] !== bubble) {
					tween(bubbles[i], {
						alpha: 0
					}, {
						duration: 200,
						onFinish: function (bub) {
							return function () {
								bub.destroy();
							};
						}(bubbles[i])
					});
				}
			}
			// Next letter after short delay
			LK.setTimeout(function () {
				currentLetterIdx++;
				startRound();
			}, 600);
		});
	} else {
		// Reset streak on incorrect answer
		correctInARow = 0;
		// Incorrect
		showFeedback("Try again!", "#D0021B");
		LK.getSound('oops').play();
		bubble.shake();
		// Allow another try (do not end round)
	}
}
// Show feedback text in center, fade in/out
function showFeedback(msg, color) {
	feedbackText.setText(msg);
	// Use setStyle to update fill color safely
	feedbackText.setStyle({
		fill: color
	});
	feedbackText.alpha = 0;
	tween(feedbackText, {
		alpha: 1
	}, {
		duration: 120,
		onFinish: function onFinish() {
			LK.setTimeout(function () {
				tween(feedbackText, {
					alpha: 0
				}, {
					duration: 200
				});
			}, 500);
		}
	});
}
// Show celebration screen
function showCelebration() {
	// Remove any remaining bubbles
	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].destroy();
	}
	bubbles = [];
	promptText.setText("All done!");
	feedbackText.setText("You did it!");
	// Use setStyle to update fill color safely
	feedbackText.setStyle({
		fill: 0xF5A623
	});
	feedbackText.alpha = 0;
	tween(feedbackText, {
		alpha: 1
	}, {
		duration: 300
	});
	// Play cheer sound
	LK.getSound('cheer').play();
	// Show "You Win" after a short delay (triggers LK's win popup)
	LK.setTimeout(function () {
		LK.showYouWin();
	}, 1200);
}
// Start game
function startGame() {
	currentLetterIdx = 0;
	score = 0;
	scoreText.setText(score);
	feedbackText.alpha = 0;
	startRound();
}
// Start screen elements
var startScreenContainer = new Container();
// Decorative bubbles in background
var decoBubbles = [];
var decoColors = ['bubbleGreen', 'bubbleYellow', 'bubblePurple', 'bubbleOrange', 'bubbleRed'];
for (var i = 0; i < decoColors.length; i++) {
	var deco = LK.getAsset(decoColors[i], {
		anchorX: 0.5,
		anchorY: 0.5
	});
	deco.width = 320 + Math.random() * 200;
	deco.height = deco.width;
	deco.x = 400 + Math.random() * 1200;
	deco.y = 600 + Math.random() * 1400;
	deco.alpha = 0.18 + Math.random() * 0.12;
	startScreenContainer.addChild(deco);
	decoBubbles.push(deco);
}
// Main title bubble
var startBg = LK.getAsset('bubbleBlue', {
	anchorX: 0.5,
	anchorY: 0.5
});
startBg.width = 950;
startBg.height = 950;
startBg.x = 2048 / 2;
startBg.y = 2732 / 2 - 120;
startScreenContainer.addChild(startBg);
// Add a fun icon/emoji above the title
var iconText = new Text2('🔤', {
	size: 180,
	fill: 0xffffff,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
iconText.anchor.set(0.5, 0.5);
iconText.x = 2048 / 2;
iconText.y = startBg.y - 320;
startScreenContainer.addChild(iconText);
var titleText = new Text2('Letter Pop!', {
	size: 180,
	fill: 0xffffff,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = startBg.y - 80;
startScreenContainer.addChild(titleText);
// Subtitle for extra friendliness
var subtitleText = new Text2('Pop the right letter bubbles!', {
	size: 70,
	fill: 0xffffff,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
subtitleText.anchor.set(0.5, 0.5);
subtitleText.x = 2048 / 2;
subtitleText.y = startBg.y + 120;
startScreenContainer.addChild(subtitleText);
// Play button
var playButton = LK.getAsset('bubbleGreen', {
	anchorX: 0.5,
	anchorY: 0.5
});
playButton.width = 420;
playButton.height = 420;
playButton.x = 2048 / 2;
playButton.y = 2732 / 2 + 320;
startScreenContainer.addChild(playButton);
var playText = new Text2('Play', {
	size: 120,
	fill: 0xffffff,
	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
});
playText.anchor.set(0.5, 0.5);
playText.x = playButton.x;
playText.y = playButton.y;
startScreenContainer.addChild(playText);
// Fun animated effect: gently float the main title bubble
tween(startBg, {
	y: startBg.y + 30
}, {
	duration: 1200,
	yoyo: true,
	repeat: Infinity,
	easing: tween.sineInOut
});
// Animate decorative bubbles (gentle scale pulse)
for (var i = 0; i < decoBubbles.length; i++) {
	(function (deco) {
		var origScale = deco.scale.x;
		tween(deco.scale, {
			x: origScale * 1.08,
			y: origScale * 1.08
		}, {
			duration: 1800 + Math.random() * 800,
			yoyo: true,
			repeat: Infinity,
			easing: tween.sineInOut
		});
	})(decoBubbles[i]);
}
game.addChild(startScreenContainer);
// Hide UI until game starts
promptText.alpha = 0;
scoreText.alpha = 0;
// Play button handler
playButton.down = function () {
	// Animate out start screen
	tween(startScreenContainer, {
		alpha: 0
	}, {
		duration: 300,
		onFinish: function onFinish() {
			startScreenContainer.destroy();
			// Show UI
			promptText.alpha = 1;
			scoreText.alpha = 1;
			startGame();
		}
	});
};
// No need for update loop, as all logic is event-driven
// Touchscreen: No drag/move needed, only tap (down) on bubbles
// Make sure no elements are in top-left 100x100 (all UI is top/center/right)

===================================================================
--- original.js
+++ change.js
@@ -162,14 +162,14 @@
 });
 promptText.anchor.set(0.5, 0);
 LK.gui.top.addChild(promptText);
 var scoreText = new Text2('0', {
-	size: 90,
+	size: 110,
 	fill: 0x4A90E2,
 	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
 });
-scoreText.anchor.set(0.5, 0);
-LK.gui.topRight.addChild(scoreText);
+scoreText.anchor.set(0.5, 1);
+LK.gui.bottom.addChild(scoreText);
 // Feedback text (centered, fades in/out)
 var feedbackText = new Text2('', {
 	size: 130,
 	fill: 0x43A047,
@@ -377,34 +377,72 @@
 	startRound();
 }
 // Start screen elements
 var startScreenContainer = new Container();
+// Decorative bubbles in background
+var decoBubbles = [];
+var decoColors = ['bubbleGreen', 'bubbleYellow', 'bubblePurple', 'bubbleOrange', 'bubbleRed'];
+for (var i = 0; i < decoColors.length; i++) {
+	var deco = LK.getAsset(decoColors[i], {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	deco.width = 320 + Math.random() * 200;
+	deco.height = deco.width;
+	deco.x = 400 + Math.random() * 1200;
+	deco.y = 600 + Math.random() * 1400;
+	deco.alpha = 0.18 + Math.random() * 0.12;
+	startScreenContainer.addChild(deco);
+	decoBubbles.push(deco);
+}
+// Main title bubble
 var startBg = LK.getAsset('bubbleBlue', {
 	anchorX: 0.5,
 	anchorY: 0.5
 });
-startBg.width = 900;
-startBg.height = 900;
+startBg.width = 950;
+startBg.height = 950;
 startBg.x = 2048 / 2;
 startBg.y = 2732 / 2 - 120;
 startScreenContainer.addChild(startBg);
+// Add a fun icon/emoji above the title
+var iconText = new Text2('🔤', {
+	size: 180,
+	fill: 0xffffff,
+	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
+});
+iconText.anchor.set(0.5, 0.5);
+iconText.x = 2048 / 2;
+iconText.y = startBg.y - 320;
+startScreenContainer.addChild(iconText);
 var titleText = new Text2('Letter Pop!', {
 	size: 180,
 	fill: 0xffffff,
 	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
 });
 titleText.anchor.set(0.5, 0.5);
 titleText.x = 2048 / 2;
-titleText.y = 2732 / 2 - 320;
+titleText.y = startBg.y - 80;
 startScreenContainer.addChild(titleText);
+// Subtitle for extra friendliness
+var subtitleText = new Text2('Pop the right letter bubbles!', {
+	size: 70,
+	fill: 0xffffff,
+	font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
+});
+subtitleText.anchor.set(0.5, 0.5);
+subtitleText.x = 2048 / 2;
+subtitleText.y = startBg.y + 120;
+startScreenContainer.addChild(subtitleText);
+// Play button
 var playButton = LK.getAsset('bubbleGreen', {
 	anchorX: 0.5,
 	anchorY: 0.5
 });
 playButton.width = 420;
 playButton.height = 420;
 playButton.x = 2048 / 2;
-playButton.y = 2732 / 2 + 220;
+playButton.y = 2732 / 2 + 320;
 startScreenContainer.addChild(playButton);
 var playText = new Text2('Play', {
 	size: 120,
 	fill: 0xffffff,
@@ -413,8 +451,32 @@
 playText.anchor.set(0.5, 0.5);
 playText.x = playButton.x;
 playText.y = playButton.y;
 startScreenContainer.addChild(playText);
+// Fun animated effect: gently float the main title bubble
+tween(startBg, {
+	y: startBg.y + 30
+}, {
+	duration: 1200,
+	yoyo: true,
+	repeat: Infinity,
+	easing: tween.sineInOut
+});
+// Animate decorative bubbles (gentle scale pulse)
+for (var i = 0; i < decoBubbles.length; i++) {
+	(function (deco) {
+		var origScale = deco.scale.x;
+		tween(deco.scale, {
+			x: origScale * 1.08,
+			y: origScale * 1.08
+		}, {
+			duration: 1800 + Math.random() * 800,
+			yoyo: true,
+			repeat: Infinity,
+			easing: tween.sineInOut
+		});
+	})(decoBubbles[i]);
+}
 game.addChild(startScreenContainer);
 // Hide UI until game starts
 promptText.alpha = 0;
 scoreText.alpha = 0;