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

/**** 
* Classes
****/ 
// A green circle
var BouncingCircle = Container.expand(function () {
	var self = Container.call(this);
	// Method to animate squash and stretch on collision
	// Methods must be defined before properties are assigned if they use those properties (though JS hoists function defs)
	// Best practice: define methods first.
	self.animateHit = function (targetScaleXFactor, targetScaleYFactor) {
		// Assuming self.circleGraphic.scaleX and self.circleGraphic.scaleY default to 1
		// and should return to 1 after the animation.
		var normalScale = 1.0;
		var squashDuration = 80; // milliseconds
		var returnDuration = 120; // milliseconds
		// Tween to squashed/stretched state
		// Assumes a new tween on the same properties will override any existing one.
		tween(self.circleGraphic, squashDuration, {
			scaleX: normalScale * targetScaleXFactor,
			scaleY: normalScale * targetScaleYFactor,
			onComplete: function onComplete() {
				// Wobble back to normal scale with a jelly effect (overshoot and settle)
				// First overshoot past normal, then return, then settle
				tween(self.circleGraphic, returnDuration, {
					scaleX: normalScale + (targetScaleYFactor - 1) * 0.25,
					scaleY: normalScale + (targetScaleXFactor - 1) * 0.25,
					onComplete: function onComplete() {
						tween(self.circleGraphic, 90, {
							scaleX: normalScale - (targetScaleYFactor - 1) * 0.15,
							scaleY: normalScale - (targetScaleXFactor - 1) * 0.15,
							onComplete: function onComplete() {
								tween(self.circleGraphic, 70, {
									scaleX: normalScale,
									scaleY: normalScale
								});
							}
						});
					}
				});
			}
		});
	};
	self.update = function () {
		// Update position based on current speed
		self.x += self.speedX;
		self.y += self.speedY;
		// Get UN SCALED dimensions for boundary checks (anchor is 0.5, 0.5)
		// Collision boundary should be consistent and not affected by visual scale animation.
		var halfWidth = self.circleGraphic.width / 2;
		var halfHeight = self.circleGraphic.height / 2;
		// Game world dimensions
		var worldWidth = 2048;
		var worldHeight = 2732;
		// Check for collision with horizontal walls
		if (self.x - halfWidth <= 0) {
			// Hit left wall
			self.x = halfWidth; // Clamp position to prevent sticking
			if (self.speedX < 0) {
				// Only reverse if moving towards wall
				self.speedX *= -1;
				self.animateHit(0.7, 1.2); // Squash horizontally, stretch vertically
			}
		} else if (self.x + halfWidth >= worldWidth) {
			// Hit right wall
			self.x = worldWidth - halfWidth; // Clamp position
			if (self.speedX > 0) {
				// Only reverse if moving towards wall
				self.speedX *= -1;
				self.animateHit(0.7, 1.2); // Squash horizontally, stretch vertically
			}
		}
		// Check for collision with vertical walls
		if (self.y - halfHeight <= 0) {
			// Hit top wall
			self.y = halfHeight; // Clamp position
			if (self.speedY < 0) {
				// Only reverse if moving towards wall
				self.speedY *= -1;
				self.animateHit(1.2, 0.7); // Stretch horizontally, squash vertically
			}
		} else if (self.y + halfHeight >= worldHeight) {
			// Hit bottom wall
			self.y = worldHeight - halfHeight; // Clamp position
			if (self.speedY > 0) {
				// Only reverse if moving towards wall
				self.speedY *= -1;
				self.animateHit(1.2, 0.7); // Stretch horizontally, squash vertically
			}
		}
		// Store current position as last position for the next frame
		self.lastX = self.x;
		self.lastY = self.y;
	};
	// Attach the visual asset to this container
	// The asset 'bouncingCircleAsset' needs to be defined in the Assets section
	self.circleGraphic = self.attachAsset('bouncingCircleAsset', {
		anchorX: 0.5,
		// Center anchor for easier positioning
		anchorY: 0.5
	});
	// self.circleGraphic.scaleX and self.circleGraphic.scaleY will default to 1.0
	// if not specified in attachAsset or set manually after.
	// Movement properties to be initialized when an instance is created
	self.speedX = 0;
	self.speedY = 0;
	// Store last known position (initialized when circle is created)
	self.lastX = 0;
	self.lastY = 0;
	return self; // Important for class structure
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x202040 // A nice dark blue/purple background
});

/**** 
* Game Code
****/ 
// Create an instance of our BouncingCircle class
// Game dimensions are 2048x2732 (width x height)
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
var circle = new BouncingCircle();
// Position the circle in the center of the screen.
// Its graphic asset has anchorX: 0.5, anchorY: 0.5, so this centers it.
circle.x = 2048 / 2;
circle.y = 2732 / 2;
// Initialize its lastX and lastY properties to its starting position
circle.lastX = circle.x;
circle.lastY = circle.y;
// Set a random initial direction and speed for the circle
var initialSpeedMagnitude = 8; // Adjust this value for faster or slower movement (pixels per frame)
var randomAngle = Math.random() * 2 * Math.PI; // Generates a random angle in radians (0 to 2*PI)
circle.speedX = initialSpeedMagnitude * Math.cos(randomAngle);
circle.speedY = initialSpeedMagnitude * Math.sin(randomAngle);
// Safety check: if somehow both speeds are zero (highly unlikely with non-zero magnitude), give it a default push.
if (circle.speedX === 0 && circle.speedY === 0 && initialSpeedMagnitude !== 0) {
	circle.speedX = initialSpeedMagnitude; // Default to moving right
}
// Add the circle instance to the game's display list.
// The LK engine will automatically call the .update() method of 'circle' each frame.
game.addChild(circle);
// No explicit game.update() function is required for this simple game,
// as the circle's movement and logic are self-contained in its BouncingCircle.update() method.
// If we had other global game logic that needed to run every frame (e.g., checking win/loss conditions,
// spawning new objects), we would define game.update = function() { ... }; here.

===================================================================
--- original.js
+++ change.js
@@ -23,12 +23,25 @@
 		tween(self.circleGraphic, squashDuration, {
 			scaleX: normalScale * targetScaleXFactor,
 			scaleY: normalScale * targetScaleYFactor,
 			onComplete: function onComplete() {
-				// Tween back to normal scale
+				// Wobble back to normal scale with a jelly effect (overshoot and settle)
+				// First overshoot past normal, then return, then settle
 				tween(self.circleGraphic, returnDuration, {
-					scaleX: normalScale,
-					scaleY: normalScale
+					scaleX: normalScale + (targetScaleYFactor - 1) * 0.25,
+					scaleY: normalScale + (targetScaleXFactor - 1) * 0.25,
+					onComplete: function onComplete() {
+						tween(self.circleGraphic, 90, {
+							scaleX: normalScale - (targetScaleYFactor - 1) * 0.15,
+							scaleY: normalScale - (targetScaleXFactor - 1) * 0.15,
+							onComplete: function onComplete() {
+								tween(self.circleGraphic, 70, {
+									scaleX: normalScale,
+									scaleY: normalScale
+								});
+							}
+						});
+					}
 				});
 			}
 		});
 	};
@@ -110,11 +123,11 @@
 
 /**** 
 * Game Code
 ****/ 
-//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
-// Game dimensions are 2048x2732 (width x height)
 // Create an instance of our BouncingCircle class
+// Game dimensions are 2048x2732 (width x height)
+//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
 var circle = new BouncingCircle();
 // Position the circle in the center of the screen.
 // Its graphic asset has anchorX: 0.5, anchorY: 0.5, so this centers it.
 circle.x = 2048 / 2;