/**** 
* 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 shape will be added in initialize
	self.shape = null;
	// Initialize with type
	self.initialize = function (characterType) {
		self.type = characterType;
		// Add appropriate shape based on type
		if (characterType === "boy") {
			self.shape = self.attachAsset('boyCharacter', {
				anchorX: 0.5,
				anchorY: 0.5
			});
		} else {
			self.shape = self.attachAsset('girlCharacter', {
				anchorX: 0.5,
				anchorY: 0.5
			});
		}
		// Start with scale 0
		self.scaleX = 0;
		self.scaleY = 0;
	};
	// Animate character appearance
	self.appear = function () {
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 500,
			easing: tween.elasticOut
		});
	};
	// Handle selection
	self.down = function (x, y, obj) {
		// Shrink when pressed
		tween(self, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function (x, y, obj) {
		// Play sound
		LK.getSound('buttonClick').play();
		// Expand then return to normal size
		tween(self, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				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;
// 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 disappear
	var nonSelectedCharacter = characterType === "boy" ? girlCharacter : boyCharacter;
	tween(nonSelectedCharacter, {
		alpha: 0,
		scaleX: 0,
		scaleY: 0
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			game.removeChild(nonSelectedCharacter);
		}
	});
	// Move the selected character to center
	var selectedCharacterObj = characterType === "boy" ? boyCharacter : girlCharacter;
	tween(selectedCharacterObj, {
		x: 2048 / 2
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			// Game could start here with the selected character
			console.log("Game ready to start with character: " + characterType);
		}
	});
}
// 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
@@ -5,8 +5,87 @@
 
 /**** 
 * 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 shape will be added in initialize
+	self.shape = null;
+	// Initialize with type
+	self.initialize = function (characterType) {
+		self.type = characterType;
+		// Add appropriate shape based on type
+		if (characterType === "boy") {
+			self.shape = self.attachAsset('boyCharacter', {
+				anchorX: 0.5,
+				anchorY: 0.5
+			});
+		} else {
+			self.shape = self.attachAsset('girlCharacter', {
+				anchorX: 0.5,
+				anchorY: 0.5
+			});
+		}
+		// Start with scale 0
+		self.scaleX = 0;
+		self.scaleY = 0;
+	};
+	// Animate character appearance
+	self.appear = function () {
+		tween(self, {
+			scaleX: 1,
+			scaleY: 1
+		}, {
+			duration: 500,
+			easing: tween.elasticOut
+		});
+	};
+	// Handle selection
+	self.down = function (x, y, obj) {
+		// Shrink when pressed
+		tween(self, {
+			scaleX: 0.9,
+			scaleY: 0.9
+		}, {
+			duration: 100,
+			easing: tween.easeOut
+		});
+	};
+	self.up = function (x, y, obj) {
+		// Play sound
+		LK.getSound('buttonClick').play();
+		// Expand then return to normal size
+		tween(self, {
+			scaleX: 1.1,
+			scaleY: 1.1
+		}, {
+			duration: 200,
+			easing: tween.elasticOut,
+			onFinish: function onFinish() {
+				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', {
@@ -130,10 +209,10 @@
 			easing: tween.elasticOut,
 			onFinish: function onFinish() {
 				self.rotation = 0;
 				self.isAnimating = false;
-				// Here you would normally start the game or trigger an action
-				console.log("Play button clicked!");
+				// Show character selection
+				showCharacterSelection();
 			}
 		});
 	};
 	// Idle animation to make the button more playful
@@ -213,16 +292,85 @@
 * 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;
 // 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 disappear
+	var nonSelectedCharacter = characterType === "boy" ? girlCharacter : boyCharacter;
+	tween(nonSelectedCharacter, {
+		alpha: 0,
+		scaleX: 0,
+		scaleY: 0
+	}, {
+		duration: 500,
+		easing: tween.easeOut,
+		onFinish: function onFinish() {
+			game.removeChild(nonSelectedCharacter);
+		}
+	});
+	// Move the selected character to center
+	var selectedCharacterObj = characterType === "boy" ? boyCharacter : girlCharacter;
+	tween(selectedCharacterObj, {
+		x: 2048 / 2
+	}, {
+		duration: 500,
+		easing: tween.easeOut,
+		onFinish: function onFinish() {
+			// Game could start here with the selected character
+			console.log("Game ready to start with character: " + characterType);
+		}
+	});
+}
 // Rainbow effect for the background
 var rainbowColors = [0x66CC99, 0x66CCFF, 0xCC99FF, 0xFF99CC, 0xFFCC66, 0x99FF99];
 var currentColorIndex = 0;
 // A function to cycle through background colors