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

/**** 
* Classes
****/ 
var Character = Container.expand(function () {
	var self = Container.call(this);
	var characterGraphics = self.attachAsset('character', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Add floating text for muscle display
	self.muscleText = new Text2('Muscle: 0', {
		size: 60,
		fill: '#ffffff'
	});
	self.muscleText.anchor.set(0.5, 1);
	self.addChild(self.muscleText);
	self.speed = 4;
	self.velocityX = 0;
	self.velocityY = 0;
	self.targetRotation = 0;
	self.setVelocity = function (vx, vy) {
		self.velocityX = vx;
		self.velocityY = vy;
		// Calculate rotation to face movement direction
		if (vx !== 0 || vy !== 0) {
			self.targetRotation = Math.atan2(vy, vx);
		}
	};
	self.update = function () {
		// Move character
		self.x += self.velocityX * self.speed;
		self.y += self.velocityY * self.speed;
		// Keep character within screen bounds
		if (self.x < 40) {
			self.x = 40;
		}
		if (self.x > 2008) {
			self.x = 2008;
		}
		if (self.y < 40) {
			self.y = 40;
		}
		if (self.y > 2692) {
			self.y = 2692;
		}
		// Update muscle text
		self.muscleText.setText('Muscle: ' + muscle);
		self.muscleText.x = 0;
		self.muscleText.y = -100; // 50px higher than before
		// Smooth rotation towards target
		var currentRotation = characterGraphics.rotation;
		var rotationDiff = self.targetRotation - currentRotation;
		// Handle rotation wrapping
		if (rotationDiff > Math.PI) {
			rotationDiff -= 2 * Math.PI;
		}
		if (rotationDiff < -Math.PI) {
			rotationDiff += 2 * Math.PI;
		}
		characterGraphics.rotation += rotationDiff * 0.15;
	};
	return self;
});
var Joystick = Container.expand(function () {
	var self = Container.call(this);
	var baseGraphics = self.attachAsset('joystickBase', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var handleGraphics = self.attachAsset('joystickHandle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	baseGraphics.alpha = 0.3;
	handleGraphics.alpha = 0.7;
	self.baseRadius = 100;
	self.handleRadius = 40;
	self.isActive = false;
	self.centerX = 0;
	self.centerY = 0;
	self.handleX = 0;
	self.handleY = 0;
	self.show = function (x, y) {
		self.visible = true;
		self.isActive = true;
		self.x = x;
		self.y = y;
		self.centerX = x;
		self.centerY = y;
		self.handleX = 0;
		self.handleY = 0;
		handleGraphics.x = 0;
		handleGraphics.y = 0;
	};
	self.hide = function () {
		self.visible = false;
		self.isActive = false;
		// Smooth return to center
		tween(handleGraphics, {
			x: 0,
			y: 0
		}, {
			duration: 200
		});
	};
	self.updateHandle = function (x, y) {
		if (!self.isActive) {
			return;
		}
		// Calculate offset from center
		var offsetX = x - self.centerX;
		var offsetY = y - self.centerY;
		var distance = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
		// Constrain handle within base radius
		if (distance > self.baseRadius) {
			offsetX = offsetX / distance * self.baseRadius;
			offsetY = offsetY / distance * self.baseRadius;
			distance = self.baseRadius;
		}
		self.handleX = offsetX;
		self.handleY = offsetY;
		handleGraphics.x = offsetX;
		handleGraphics.y = offsetY;
		// Return normalized values for movement
		return {
			x: offsetX / self.baseRadius,
			y: offsetY / self.baseRadius,
			magnitude: distance / self.baseRadius
		};
	};
	self.visible = false;
	return self;
});

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

/**** 
* Game Code
****/ 
// Initialize muscle variable
var muscle = 0;
// Joystick handle (smaller circle)
// Joystick base (semi-transparent circle)
// Character shape
var character = game.addChild(new Character());
character.x = 1024;
character.y = 1366;
// Create Weight Lifting rectangle at top-center, 100px from left edge
var weightLiftingRect = game.addChild(LK.getAsset('weightLiftingRect', {
	anchorX: 0.5,
	anchorY: 0.5
}));
weightLiftingRect.x = 200 + 175; // 200px from left + half width (175) to center
weightLiftingRect.y = 50 + 70; // 50 + half height (70) to center
// Add text above the rectangle
var weightLiftingText = new Text2('Weight Lifting', {
	size: 58,
	// 36 * 1.6 = 57.6, rounded to 58
	fill: '#ffffff'
});
weightLiftingText.anchor.set(0.5, 1);
weightLiftingText.x = weightLiftingRect.x;
weightLiftingText.y = weightLiftingRect.y - 50;
game.addChild(weightLiftingText);
// Create Up Movement rectangle at top-center
var upMovementRect = game.addChild(LK.getAsset('upMovementRect', {
	anchorX: 0.5,
	anchorY: 0.5
}));
upMovementRect.x = 1024; // Center horizontally
upMovementRect.y = 100; // Top area
// Create Down Movement rectangle at bottom-center
var downMovementRect = game.addChild(LK.getAsset('downMovementRect', {
	anchorX: 0.5,
	anchorY: 0.5
}));
downMovementRect.x = 1024; // Center horizontally
downMovementRect.y = 2632; // Bottom area
// Create Left Movement rectangle at middle-left
var leftMovementRect = game.addChild(LK.getAsset('leftMovementRect', {
	anchorX: 0.5,
	anchorY: 0.5
}));
leftMovementRect.x = 150; // Left area
leftMovementRect.y = 1366; // Center vertically
// Create Right Movement rectangle at middle-right
var rightMovementRect = game.addChild(LK.getAsset('rightMovementRect', {
	anchorX: 0.5,
	anchorY: 0.5
}));
rightMovementRect.x = 1898; // Right area
rightMovementRect.y = 1366; // Center vertically
// Variables for weight lifting interaction
var isMovingToWeights = false;
var isWaitingAtWeights = false;
var joystick = game.addChild(new Joystick());
var isDragging = false;
var joystickTouchId = null;
game.down = function (x, y, obj) {
	// Check if weight lifting rectangle was clicked
	var rectLeft = weightLiftingRect.x - 175;
	var rectRight = weightLiftingRect.x + 175;
	var rectTop = weightLiftingRect.y - 70;
	var rectBottom = weightLiftingRect.y + 70;
	if (x >= rectLeft && x <= rectRight && y >= rectTop && y <= rectBottom && !isMovingToWeights && !isWaitingAtWeights) {
		// Move character to weight lifting area
		isMovingToWeights = true;
		character.setVelocity(0, 0); // Stop current movement
		tween(character, {
			x: weightLiftingRect.x,
			y: weightLiftingRect.y
		}, {
			duration: 1000,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				isMovingToWeights = false;
				isWaitingAtWeights = true;
				// Wait 1 second then increase muscle
				LK.setTimeout(function () {
					muscle += 1;
					isWaitingAtWeights = false;
				}, 1000);
			}
		});
		return;
	}
	// Check if up movement rectangle was clicked
	var upRectLeft = upMovementRect.x - 100;
	var upRectRight = upMovementRect.x + 100;
	var upRectTop = upMovementRect.y - 50;
	var upRectBottom = upMovementRect.y + 50;
	if (x >= upRectLeft && x <= upRectRight && y >= upRectTop && y <= upRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
		character.setVelocity(0, -1); // Move up
		return;
	}
	// Check if down movement rectangle was clicked
	var downRectLeft = downMovementRect.x - 100;
	var downRectRight = downMovementRect.x + 100;
	var downRectTop = downMovementRect.y - 50;
	var downRectBottom = downMovementRect.y + 50;
	if (x >= downRectLeft && x <= downRectRight && y >= downRectTop && y <= downRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
		character.setVelocity(0, 1); // Move down
		return;
	}
	// Check if left movement rectangle was clicked
	var leftRectLeft = leftMovementRect.x - 100;
	var leftRectRight = leftMovementRect.x + 100;
	var leftRectTop = leftMovementRect.y - 50;
	var leftRectBottom = leftMovementRect.y + 50;
	if (x >= leftRectLeft && x <= leftRectRight && y >= leftRectTop && y <= leftRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
		character.setVelocity(-1, 0); // Move left
		return;
	}
	// Check if right movement rectangle was clicked
	var rightRectLeft = rightMovementRect.x - 100;
	var rightRectRight = rightMovementRect.x + 100;
	var rightRectTop = rightMovementRect.y - 50;
	var rightRectBottom = rightMovementRect.y + 50;
	if (x >= rightRectLeft && x <= rightRectRight && y >= rightRectTop && y <= rightRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
		character.setVelocity(1, 0); // Move right
		return;
	}
	// Show joystick at bottom-left area when touched
	if (x < 400 && y > 2332) {
		joystick.show(x, y);
		isDragging = true;
		var input = joystick.updateHandle(x, y);
		if (input) {
			character.setVelocity(input.x * input.magnitude, input.y * input.magnitude);
		}
	}
};
game.move = function (x, y, obj) {
	if (isDragging && joystick.isActive && !isMovingToWeights && !isWaitingAtWeights) {
		var input = joystick.updateHandle(x, y);
		if (input) {
			character.setVelocity(input.x * input.magnitude, input.y * input.magnitude);
		}
	}
};
game.up = function (x, y, obj) {
	if (isDragging && !isMovingToWeights && !isWaitingAtWeights) {
		isDragging = false;
		joystick.hide();
		character.setVelocity(0, 0);
	}
};
game.update = function () {
	// Character update is handled automatically by its update method
};

===================================================================
--- original.js
+++ change.js
@@ -163,15 +163,44 @@
 weightLiftingRect.x = 200 + 175; // 200px from left + half width (175) to center
 weightLiftingRect.y = 50 + 70; // 50 + half height (70) to center
 // Add text above the rectangle
 var weightLiftingText = new Text2('Weight Lifting', {
-	size: 36,
+	size: 58,
+	// 36 * 1.6 = 57.6, rounded to 58
 	fill: '#ffffff'
 });
 weightLiftingText.anchor.set(0.5, 1);
 weightLiftingText.x = weightLiftingRect.x;
 weightLiftingText.y = weightLiftingRect.y - 50;
 game.addChild(weightLiftingText);
+// Create Up Movement rectangle at top-center
+var upMovementRect = game.addChild(LK.getAsset('upMovementRect', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+upMovementRect.x = 1024; // Center horizontally
+upMovementRect.y = 100; // Top area
+// Create Down Movement rectangle at bottom-center
+var downMovementRect = game.addChild(LK.getAsset('downMovementRect', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+downMovementRect.x = 1024; // Center horizontally
+downMovementRect.y = 2632; // Bottom area
+// Create Left Movement rectangle at middle-left
+var leftMovementRect = game.addChild(LK.getAsset('leftMovementRect', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+leftMovementRect.x = 150; // Left area
+leftMovementRect.y = 1366; // Center vertically
+// Create Right Movement rectangle at middle-right
+var rightMovementRect = game.addChild(LK.getAsset('rightMovementRect', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+rightMovementRect.x = 1898; // Right area
+rightMovementRect.y = 1366; // Center vertically
 // Variables for weight lifting interaction
 var isMovingToWeights = false;
 var isWaitingAtWeights = false;
 var joystick = game.addChild(new Joystick());
@@ -204,8 +233,44 @@
 			}
 		});
 		return;
 	}
+	// Check if up movement rectangle was clicked
+	var upRectLeft = upMovementRect.x - 100;
+	var upRectRight = upMovementRect.x + 100;
+	var upRectTop = upMovementRect.y - 50;
+	var upRectBottom = upMovementRect.y + 50;
+	if (x >= upRectLeft && x <= upRectRight && y >= upRectTop && y <= upRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
+		character.setVelocity(0, -1); // Move up
+		return;
+	}
+	// Check if down movement rectangle was clicked
+	var downRectLeft = downMovementRect.x - 100;
+	var downRectRight = downMovementRect.x + 100;
+	var downRectTop = downMovementRect.y - 50;
+	var downRectBottom = downMovementRect.y + 50;
+	if (x >= downRectLeft && x <= downRectRight && y >= downRectTop && y <= downRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
+		character.setVelocity(0, 1); // Move down
+		return;
+	}
+	// Check if left movement rectangle was clicked
+	var leftRectLeft = leftMovementRect.x - 100;
+	var leftRectRight = leftMovementRect.x + 100;
+	var leftRectTop = leftMovementRect.y - 50;
+	var leftRectBottom = leftMovementRect.y + 50;
+	if (x >= leftRectLeft && x <= leftRectRight && y >= leftRectTop && y <= leftRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
+		character.setVelocity(-1, 0); // Move left
+		return;
+	}
+	// Check if right movement rectangle was clicked
+	var rightRectLeft = rightMovementRect.x - 100;
+	var rightRectRight = rightMovementRect.x + 100;
+	var rightRectTop = rightMovementRect.y - 50;
+	var rightRectBottom = rightMovementRect.y + 50;
+	if (x >= rightRectLeft && x <= rightRectRight && y >= rightRectTop && y <= rightRectBottom && !isMovingToWeights && !isWaitingAtWeights) {
+		character.setVelocity(1, 0); // Move right
+		return;
+	}
 	// Show joystick at bottom-left area when touched
 	if (x < 400 && y > 2332) {
 		joystick.show(x, y);
 		isDragging = true;