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

/**** 
* Classes
****/ 
var Character = Container.expand(function () {
	var self = Container.call(this);
	// Create base circle under character
	var base = self.attachAsset('characterBase', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.7
	});
	// Character type (boy or girl)
	self.type = "";
	// Character containers
	self.bodyContainer = new Container();
	self.headContainer = new Container();
	self.armsContainer = new Container();
	self.legsContainer = new Container();
	self.facialContainer = new Container();
	// Add all containers to self
	self.addChild(self.legsContainer);
	self.addChild(self.bodyContainer);
	self.addChild(self.armsContainer);
	self.addChild(self.headContainer);
	self.addChild(self.facialContainer);
	// Animation properties
	self.bobTimer = 0;
	self.blinkTimer = 0;
	self.isBlinking = false;
	self.armSwingDirection = 1;
	// Initialize with type
	self.initialize = function (characterType) {
		self.type = characterType;
		// Reset containers
		self.bodyContainer.removeChildren();
		self.headContainer.removeChildren();
		self.armsContainer.removeChildren();
		self.legsContainer.removeChildren();
		self.facialContainer.removeChildren();
		// Build character based on type
		if (characterType === "boy") {
			// Body
			var body = self.bodyContainer.attachAsset('boyBody', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: 30
			});
			// Head
			var head = self.headContainer.attachAsset('boyHead', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -80
			});
			// Hair
			var hair = self.headContainer.attachAsset('boyHair', {
				anchorX: 0.5,
				anchorY: 1,
				y: -130
			});
			// Left Eye
			var leftEye = self.facialContainer.attachAsset('boyEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: -25,
				y: -90
			});
			// Right Eye
			var rightEye = self.facialContainer.attachAsset('boyEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: 25,
				y: -90
			});
			// Mouth
			var mouth = self.facialContainer.attachAsset('boyMouth', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -60
			});
			// Left Arm
			var leftArm = self.armsContainer.attachAsset('boyArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: -65,
				y: -20,
				rotation: 0.2
			});
			// Right Arm
			var rightArm = self.armsContainer.attachAsset('boyArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: 65,
				y: -20,
				rotation: -0.2
			});
			// Left Leg
			var leftLeg = self.legsContainer.attachAsset('boyLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: -30,
				y: 100
			});
			// Right Leg
			var rightLeg = self.legsContainer.attachAsset('boyLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: 30,
				y: 100
			});
		} else {
			// Body
			var body = self.bodyContainer.attachAsset('girlBody', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: 30
			});
			// Head
			var head = self.headContainer.attachAsset('girlHead', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -80
			});
			// Hair - main part
			var hair = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -100
			});
			// Add additional hair sections for a more styled look
			var hairBangs = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -120,
				width: 130,
				height: 50,
				scaleX: 1.1,
				scaleY: 0.6
			});
			// Side hair strands
			var leftHairStrand = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0,
				x: -60,
				y: -100,
				width: 40,
				height: 120,
				scaleY: 1.2
			});
			var rightHairStrand = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0,
				x: 60,
				y: -100,
				width: 40,
				height: 120,
				scaleY: 1.2
			});
			// Left Eye
			var leftEye = self.facialContainer.attachAsset('girlEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: -25,
				y: -90
			});
			// Right Eye
			var rightEye = self.facialContainer.attachAsset('girlEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: 25,
				y: -90
			});
			// Mouth
			var mouth = self.facialContainer.attachAsset('girlMouth', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -60
			});
			// Left Arm
			var leftArm = self.armsContainer.attachAsset('girlArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: -65,
				y: -20,
				rotation: 0.2
			});
			// Right Arm
			var rightArm = self.armsContainer.attachAsset('girlArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: 65,
				y: -20,
				rotation: -0.2
			});
			// Left Leg
			var leftLeg = self.legsContainer.attachAsset('girlLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: -30,
				y: 100
			});
			// Right Leg
			var rightLeg = self.legsContainer.attachAsset('girlLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: 30,
				y: 100
			});
		}
		// Start animations
		LK.setInterval(function () {
			self.blink();
		}, 3000);
		// Start with scale 0
		self.scaleX = 0;
		self.scaleY = 0;
	};
	// Blink animation
	self.blink = function () {
		if (self.isBlinking) {
			return;
		}
		var leftEye = self.facialContainer.children[0];
		var rightEye = self.facialContainer.children[1];
		self.isBlinking = true;
		// Close eyes
		tween(leftEye, {
			scaleY: 0.1
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		tween(rightEye, {
			scaleY: 0.1
		}, {
			duration: 100,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				// Open eyes
				tween(leftEye, {
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.easeOut
				});
				tween(rightEye, {
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						self.isBlinking = false;
					}
				});
			}
		});
	};
	// Continuous update for idle animations
	self.update = function () {
		// Bob up and down
		self.bobTimer += 0.05;
		var bobOffset = Math.sin(self.bobTimer) * 5;
		self.headContainer.y = bobOffset * 0.5;
		self.bodyContainer.y = bobOffset * 0.3;
		// Swing arms slightly
		if (self.armsContainer.children.length >= 2) {
			var leftArm = self.armsContainer.children[0];
			var rightArm = self.armsContainer.children[1];
			leftArm.rotation = 0.2 + Math.sin(self.bobTimer) * 0.1;
			rightArm.rotation = -0.2 - Math.sin(self.bobTimer) * 0.1;
		}
	};
	// Animate character appearance
	self.appear = function () {
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 500,
			easing: tween.elasticOut
		});
		// Add a little jump after appearing
		LK.setTimeout(function () {
			tween(self, {
				y: self.y - 30
			}, {
				duration: 300,
				easing: tween.easeOut,
				onFinish: function onFinish() {
					tween(self, {
						y: self.y + 30
					}, {
						duration: 400,
						easing: tween.bounceOut
					});
				}
			});
		}, 600);
	};
	// Handle selection
	self.down = function (x, y, obj) {
		// Shrink when pressed
		tween(self, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		// Make eyes bigger on press
		if (self.facialContainer.children.length >= 2) {
			var leftEye = self.facialContainer.children[0];
			var rightEye = self.facialContainer.children[1];
			tween(leftEye, {
				scaleX: 1.3,
				scaleY: 1.3
			}, {
				duration: 100,
				easing: tween.easeOut
			});
			tween(rightEye, {
				scaleX: 1.3,
				scaleY: 1.3
			}, {
				duration: 100,
				easing: tween.easeOut
			});
		}
	};
	self.up = function (x, y, obj) {
		// Play sound
		LK.getSound('buttonClick').play();
		// Return eyes to normal
		if (self.facialContainer.children.length >= 2) {
			var leftEye = self.facialContainer.children[0];
			var rightEye = self.facialContainer.children[1];
			tween(leftEye, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 100,
				easing: tween.easeOut
			});
			tween(rightEye, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 100,
				easing: tween.easeOut
			});
		}
		// Expand then return to normal size
		tween(self, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				// Celebrate selection with a spin
				tween(self.headContainer, {
					rotation: Math.PI * 2
				}, {
					duration: 500,
					easing: tween.elasticOut
				});
				tween(self, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						// Character selected!
						characterSelected(self.type);
					}
				});
			}
		});
	};
	return self;
});
var PlayButton = Container.expand(function () {
	var self = Container.call(this);
	// Create shadow first so it appears behind the button
	var shadow = self.attachAsset('buttonShadow', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.5,
		x: 10,
		y: 10
	});
	// Create base circle
	var buttonBase = self.attachAsset('playButtonBase', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Create play triangle and rotate it to point right
	var playIcon = self.attachAsset('playTriangle', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 15,
		// Offset slightly to the right for better visual centering
		rotation: Math.PI / 4 // 45 degrees in radians
	});
	// Variables to track button state
	self.isPressed = false;
	self.isAnimating = false;
	// Set interactive state functions
	self.down = function (x, y, obj) {
		if (self.isAnimating) {
			return;
		}
		self.isPressed = true;
		// Shrink button when pressed
		tween(buttonBase, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		tween(playIcon, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		// Move shadow closer
		tween(shadow, {
			x: 5,
			y: 5
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function (x, y, obj) {
		if (!self.isPressed || self.isAnimating) {
			return;
		}
		self.isPressed = false;
		self.isAnimating = true;
		// Play sound
		LK.getSound('buttonClick').play();
		// Return to normal size with a bounce
		tween(buttonBase, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				tween(buttonBase, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						self.isAnimating = false;
						// Trigger the "play" action
						self.triggerPlay();
					}
				});
			}
		});
		// Return play icon to normal with a bounce
		tween(playIcon, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				tween(playIcon, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut
				});
			}
		});
		// Return shadow to normal position
		tween(shadow, {
			x: 10,
			y: 10
		}, {
			duration: 200,
			easing: tween.easeOut
		});
	};
	// Function called when button is clicked
	self.triggerPlay = function () {
		// Spin the button when clicked
		self.isAnimating = true;
		// Celebrate by spinning the button
		tween(self, {
			rotation: Math.PI * 2
		}, {
			duration: 1000,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				self.rotation = 0;
				self.isAnimating = false;
				// Show character selection
				showCharacterSelection();
			}
		});
	};
	// Idle animation to make the button more playful
	self.startIdleAnimation = function () {
		function pulseButton() {
			if (self.isPressed || self.isAnimating) {
				LK.setTimeout(pulseButton, 2000);
				return;
			}
			tween(buttonBase, {
				scaleX: 1.05,
				scaleY: 1.05
			}, {
				duration: 1000,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					tween(buttonBase, {
						scaleX: 1.0,
						scaleY: 1.0
					}, {
						duration: 1000,
						easing: tween.easeInOut,
						onFinish: function onFinish() {
							LK.setTimeout(pulseButton, 2000);
						}
					});
				}
			});
		}
		// Start the idle animation
		LK.setTimeout(pulseButton, 2000);
	};
	// Initial scale effect when the button appears
	buttonBase.scaleX = 0;
	buttonBase.scaleY = 0;
	playIcon.scaleX = 0;
	playIcon.scaleY = 0;
	shadow.scaleX = 0;
	shadow.scaleY = 0;
	self.appear = function () {
		tween(shadow, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 500,
			easing: tween.elasticOut
		});
		tween(buttonBase, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 700,
			easing: tween.elasticOut
		});
		tween(playIcon, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 700,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				self.startIdleAnimation();
			}
		});
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Set the game's background color to a softer green
game.setBackgroundColor(0x66CC99);
// Game state variables
var showingCharacterSelection = false;
var selectedCharacter = null;
var boyCharacter = null;
var girlCharacter = null;
// Update function for character animations
game.update = function () {
	// Update character animations if they exist
	if (boyCharacter) {
		boyCharacter.update();
	}
	if (girlCharacter) {
		girlCharacter.update();
	}
};
// Create the play button and center it on screen
var playButton = new PlayButton();
game.addChild(playButton);
// Position the button in the center of the screen
playButton.x = 2048 / 2;
playButton.y = 2732 / 2;
// Make the button appear with animation
playButton.appear();
// Function to show character selection screen
function showCharacterSelection() {
	if (showingCharacterSelection) {
		return;
	}
	showingCharacterSelection = true;
	// Make play button disappear
	tween(playButton, {
		alpha: 0,
		scaleX: 0,
		scaleY: 0
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			// Remove play button from display
			game.removeChild(playButton);
			// Create character options
			boyCharacter = new Character();
			boyCharacter.initialize("boy");
			game.addChild(boyCharacter);
			boyCharacter.x = 2048 / 3;
			boyCharacter.y = 2732 / 2;
			girlCharacter = new Character();
			girlCharacter.initialize("girl");
			game.addChild(girlCharacter);
			girlCharacter.x = 2048 * 2 / 3;
			girlCharacter.y = 2732 / 2;
			// Make characters appear with animation
			boyCharacter.appear();
			girlCharacter.appear();
		}
	});
}
// Function called when a character is selected
function characterSelected(characterType) {
	selectedCharacter = characterType;
	console.log("Selected character: " + characterType);
	// Make the non-selected character sad and disappear
	var nonSelectedCharacter = characterType === "boy" ? girlCharacter : boyCharacter;
	var selectedCharacterObj = characterType === "boy" ? boyCharacter : girlCharacter;
	// Make selected character happy
	if (selectedCharacterObj.facialContainer.children.length >= 3) {
		var mouth = selectedCharacterObj.facialContainer.children[2];
		// Make mouth bigger and smile
		tween(mouth, {
			scaleX: 1.5,
			scaleY: 1.5,
			y: -55
		}, {
			duration: 300,
			easing: tween.elasticOut
		});
	}
	// Make non-selected character sad
	if (nonSelectedCharacter.facialContainer.children.length >= 3) {
		var sadMouth = nonSelectedCharacter.facialContainer.children[2];
		// Make mouth smaller and frown
		tween(sadMouth, {
			scaleX: 0.8,
			scaleY: -1.2,
			y: -50
		}, {
			duration: 300,
			easing: tween.easeOut
		});
	}
	// Fade out and shrink non-selected character
	tween(nonSelectedCharacter, {
		alpha: 0,
		scaleX: 0,
		scaleY: 0
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			game.removeChild(nonSelectedCharacter);
		}
	});
	// Jump and move the selected character to center
	LK.setTimeout(function () {
		// Jump up first
		tween(selectedCharacterObj, {
			y: selectedCharacterObj.y - 100
		}, {
			duration: 400,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				// Move to center while in air
				tween(selectedCharacterObj, {
					x: 2048 / 2
				}, {
					duration: 300,
					easing: tween.linear,
					onFinish: function onFinish() {
						// Land with bounce
						tween(selectedCharacterObj, {
							y: 2732 / 2,
							scaleY: 0.7,
							scaleX: 1.3
						}, {
							duration: 300,
							easing: tween.easeIn,
							onFinish: function onFinish() {
								// Bounce back to normal
								tween(selectedCharacterObj, {
									scaleY: 1.1,
									scaleX: 0.9
								}, {
									duration: 150,
									easing: tween.easeOut,
									onFinish: function onFinish() {
										// Return to normal scale
										tween(selectedCharacterObj, {
											scaleY: 1.0,
											scaleX: 1.0
										}, {
											duration: 150,
											easing: tween.easeOut,
											onFinish: function onFinish() {
												// Celebrate with a spin
												tween(selectedCharacterObj.headContainer, {
													rotation: Math.PI * 2
												}, {
													duration: 800,
													easing: tween.elasticOut,
													onFinish: function onFinish() {
														// Reset rotation
														selectedCharacterObj.headContainer.rotation = 0;
														// Game could start here with the selected character
														console.log("Game ready to start with character: " + characterType);
													}
												});
											}
										});
									}
								});
							}
						});
					}
				});
			}
		});
	}, 300);
}
// Rainbow effect for the background
var rainbowColors = [0x66CC99, 0x66CCFF, 0xCC99FF, 0xFF99CC, 0xFFCC66, 0x99FF99];
var currentColorIndex = 0;
// A function to cycle through background colors
function cycleBackgroundColor() {
	currentColorIndex = (currentColorIndex + 1) % rainbowColors.length;
	// Animate the color change
	var targetColor = rainbowColors[currentColorIndex];
	tween(game, {
		backgroundColor: targetColor
	}, {
		duration: 2000,
		easing: tween.easeInOut,
		onFinish: function onFinish() {
			// Schedule the next color change
			LK.setTimeout(cycleBackgroundColor, 4000);
		}
	});
}
// Start the background color animation after a delay
LK.setTimeout(cycleBackgroundColor, 4000);

===================================================================
--- original.js
+++ change.js
@@ -124,14 +124,43 @@
 				anchorX: 0.5,
 				anchorY: 0.5,
 				y: -80
 			});
-			// Hair
+			// Hair - main part
 			var hair = self.headContainer.attachAsset('girlHair', {
 				anchorX: 0.5,
 				anchorY: 0.5,
 				y: -100
 			});
+			// Add additional hair sections for a more styled look
+			var hairBangs = self.headContainer.attachAsset('girlHair', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				y: -120,
+				width: 130,
+				height: 50,
+				scaleX: 1.1,
+				scaleY: 0.6
+			});
+			// Side hair strands
+			var leftHairStrand = self.headContainer.attachAsset('girlHair', {
+				anchorX: 0.5,
+				anchorY: 0,
+				x: -60,
+				y: -100,
+				width: 40,
+				height: 120,
+				scaleY: 1.2
+			});
+			var rightHairStrand = self.headContainer.attachAsset('girlHair', {
+				anchorX: 0.5,
+				anchorY: 0,
+				x: 60,
+				y: -100,
+				width: 40,
+				height: 120,
+				scaleY: 1.2
+			});
 			// Left Eye
 			var leftEye = self.facialContainer.attachAsset('girlEyes', {
 				anchorX: 0.5,
 				anchorY: 0.5,