/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
	highScore: 0
});

/**** 
* Classes
****/ 
// Ball class: handles color, rotation, and animation
var ColorBall = Container.expand(function () {
	var self = Container.call(this);
	// Color order: 0=Red, 1=Blue, 2=Green
	self.colors = ['red', 'blue', 'green'];
	self.colorIdx = 0;
	// Attach all color assets, only one visible at a time
	self.ballAssets = {
		red: self.attachAsset('ballRed', {
			anchorX: 0.5,
			anchorY: 0.5
		}),
		blue: self.attachAsset('ballBlue', {
			anchorX: 0.5,
			anchorY: 0.5
		}),
		green: self.attachAsset('ballGreen', {
			anchorX: 0.5,
			anchorY: 0.5
		})
	};
	self.setColor = function (color) {
		self.color = color;
		self.ballAssets.red.visible = color === 'red';
		self.ballAssets.blue.visible = color === 'blue';
		self.ballAssets.green.visible = color === 'green';
	};
	self.setColor('red');
	self.rotationSpeed = 0.02; // radians per tick
	self.targetRotationSpeed = 0.02;
	self.update = function () {
		// Smoothly approach target rotation speed
		if (self.rotationSpeed !== self.targetRotationSpeed) {
			self.rotationSpeed += (self.targetRotationSpeed - self.rotationSpeed) * 0.08;
		}
		self.rotation += self.rotationSpeed;
	};
	// Animate color change (optional: flash or scale)
	self.animateColorChange = function () {
		tween(self, {
			scaleX: 1.15,
			scaleY: 1.15
		}, {
			duration: 80,
			easing: tween.cubicOut,
			onFinish: function onFinish() {
				tween(self, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.cubicIn
				});
			}
		});
	};
	return self;
});
// Button class: handles color, label, and press feedback
var ColorButton = Container.expand(function () {
	var self = Container.call(this);
	// color: 'red', 'blue', 'green'
	self.setColor = function (color) {
		self.color = color;
		if (self.asset) self.removeChild(self.asset);
		if (self.label) self.removeChild(self.label);
		if (self.hitbox) self.removeChild(self.hitbox);
		var assetId = color === 'red' ? 'btnRed' : color === 'blue' ? 'btnBlue' : 'btnGreen';
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		// Add visible hitbox outline (matches asset size, semi-transparent yellow)
		// Move hitbox down by 32px
		self.hitbox = self.attachAsset('btnRed', {
			anchorX: 0.5,
			anchorY: 0.5,
			width: self.asset.width,
			height: self.asset.height,
			color: 0xffff00,
			alpha: 0.22,
			y: 32
		});
		self.hitbox.zIndex = -1;
		self.addChild(self.hitbox);
		self.addChild(self.asset);
		self.label = new Text2(color.toUpperCase(), {
			size: 70,
			fill: "#fff",
			font: "GillSans-Bold,Impact,'Arial Black',Tahoma"
		});
		self.label.anchor.set(0.5, 0.5);
		self.label.y = 0;
		self.addChild(self.label);
	};
	// Animate press feedback
	self.animatePress = function () {
		tween(self.asset, {
			scaleX: 0.93,
			scaleY: 0.93
		}, {
			duration: 60,
			easing: tween.cubicOut,
			onFinish: function onFinish() {
				tween(self.asset, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 80,
					easing: tween.cubicIn
				});
			}
		});
	};
	// For hit detection
	self.containsPoint = function (x, y) {
		var local = self.toLocal({
			x: x,
			y: y
		});
		// Adjust for hitbox y offset (32px down)
		var hitboxY = 32;
		return local.x > -self.hitbox.width / 2 && local.x < self.hitbox.width / 2 && local.y > -self.hitbox.height / 2 + hitboxY && local.y < self.hitbox.height / 2 + hitboxY;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Music (optional, but initialized for future use)
// Sound
// Button colors
// Ball colors
// --- Game State ---
// Health bar assets
var ball;
var buttons = [];
var colorOrder = ['red', 'blue', 'green'];
var currentColor = 'red';
var score = 0;
var highScore = storage.highScore || 0;
var timeLimit = 10000; // ms, initial time to respond (10 seconds)
var minTimeLimit = 10000; // ms, minimum allowed (10 seconds)
var timeDecrease = 80; // ms, decrease per correct
var rotationSpeed = 0.02; // initial
var maxRotationSpeed = 0.09;
var rotationIncrease = 0.008;
var waitingForInput = true;
var responseTimer = null;
var lastTapTime = 0;
// --- UI Elements ---
var scoreTxt = new Text2('0', {
	size: 120,
	fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
var highScoreTxt = new Text2('BEST: ' + highScore, {
	size: 60,
	fill: "#aaa"
});
highScoreTxt.anchor.set(0.5, 0);
highScoreTxt.y = 110;
LK.gui.top.addChild(highScoreTxt);
// --- Health Bars ---
var health = 3;
var maxHealth = 3;
var healthBars = [];
var healthBarSpacing = 60;
var healthBarY = 320;
var healthBarWidth = 120;
var healthBarHeight = 36;
for (var i = 0; i < maxHealth; i++) {
	var bar = LK.getAsset('btnRed', {
		width: healthBarWidth,
		height: healthBarHeight,
		color: 0x2ecc40,
		anchorX: 0.5,
		anchorY: 0.5
	});
	bar.x = 2048 / 2 + (i - 1) * healthBarSpacing;
	bar.y = healthBarY;
	game.addChild(bar);
	healthBars.push(bar);
}
var timerBar = LK.getAsset('btnRed', {
	width: 900,
	height: 30,
	color: 0xffffff,
	anchorX: 0.5,
	anchorY: 0.5
});
timerBar.y = 220;
timerBar.x = 2048 / 2;
timerBar.alpha = 0.18;
game.addChild(timerBar);
var timerBarFill = LK.getAsset('btnRed', {
	width: 900,
	height: 30,
	color: 0x2ecc40,
	anchorX: 0.5,
	anchorY: 0.5
});
timerBarFill.y = 220;
timerBarFill.x = 2048 / 2;
game.addChild(timerBarFill);
// Helper to update health bar visuals
function updateHealthBars() {
	for (var i = 0; i < maxHealth; i++) {
		healthBars[i].alpha = i < health ? 1 : 0.18;
		healthBars[i].tint = i < health ? 0x2ecc40 : 0xd83318;
	}
}
updateHealthBars();
// --- Setup Ball ---
ball = new ColorBall();
ball.x = 2048 / 2;
ball.y = 1100;
game.addChild(ball);
// --- Setup Buttons ---
var btnSpacing = 480;
var btnY = 2732 - 320;
// Create btnRed
var btnRed = new ColorButton();
btnRed.setColor('red');
btnRed.x = 2048 / 2 - btnSpacing;
btnRed.y = btnY;
game.addChild(btnRed);
// Create btnBlue
var btnBlue = new ColorButton();
btnBlue.setColor('blue');
btnBlue.x = 2048 / 2;
btnBlue.y = btnY;
game.addChild(btnBlue);
// Create btnGreen
var btnGreen = new ColorButton();
btnGreen.setColor('green');
btnGreen.x = 2048 / 2 + btnSpacing;
btnGreen.y = btnY;
game.addChild(btnGreen);
// Place all buttons in the same positions as btnRed, btnBlue, btnGreen
buttons = [btnRed, btnBlue, btnGreen];
// Ensure all color buttons are positioned exactly as btnRed, btnBlue, btnGreen
buttons[0].x = btnRed.x;
buttons[0].y = btnRed.y;
buttons[1].x = btnBlue.x;
buttons[1].y = btnBlue.y;
buttons[2].x = btnGreen.x;
buttons[2].y = btnGreen.y;
// --- Helper Functions ---
function setScore(val) {
	score = val;
	scoreTxt.setText(score);
	if (score > highScore) {
		highScore = score;
		storage.highScore = highScore;
		highScoreTxt.setText('BEST: ' + highScore);
	}
}
function randomColor() {
	// Never repeat the same color twice in a row
	var idx = colorOrder.indexOf(currentColor);
	var nextIdx = idx;
	while (nextIdx === idx) {
		nextIdx = Math.floor(Math.random() * 3);
	}
	return colorOrder[nextIdx];
}
function startNewRound() {
	waitingForInput = true;
	// Pick new color
	currentColor = randomColor();
	ball.setColor(currentColor);
	ball.animateColorChange();
	// Increase difficulty
	if (timeLimit > minTimeLimit) timeLimit -= timeDecrease;
	if (rotationSpeed < maxRotationSpeed) rotationSpeed += rotationIncrease;
	ball.targetRotationSpeed = rotationSpeed;
	// Start timer
	timerBarFill.width = 900;
	timerBarFill.tint = currentColor === 'red' ? 0xd83318 : currentColor === 'blue' ? 0x187ad8 : 0x2ecc40;
	if (responseTimer) {
		LK.clearTimeout(responseTimer);
		responseTimer = null;
	}
	responseTimer = LK.setTimeout(function () {
		// Time's up
		waitingForInput = false;
		LK.effects.flashScreen(0xff0000, 600);
		LK.getSound('wrong').play();
		health--;
		updateHealthBars();
		if (health <= 0) {
			endGame();
		} else {
			// Give player another chance, start new round after short delay
			responseTimer = LK.setTimeout(function () {
				startNewRound();
			}, 700);
		}
	}, timeLimit);
	lastTapTime = Date.now();
}
function endGame() {
	if (responseTimer) {
		LK.clearTimeout(responseTimer);
		responseTimer = null;
	}
	waitingForInput = false;
	// Flash ball red
	LK.effects.flashObject(ball, 0xff0000, 600);
	// Show game over (handled by LK)
	LK.showGameOver();
}
// --- Input Handling ---
game.down = function (x, y, obj) {
	if (!waitingForInput) return;
	// Check if any button is pressed using containsPoint
	for (var i = 0; i < buttons.length; i++) {
		var btn = buttons[i];
		if (btn.containsPoint(x, y)) {
			handleButtonPress(btn);
			break;
		}
	}
};
function handleButtonPress(btn) {
	if (!waitingForInput) return;
	btn.animatePress();
	LK.effects.flashObject(btn.asset, 0xffffff, 120);
	waitingForInput = false;
	if (btn.color === currentColor) {
		// Correct!
		setScore(score + 1);
		LK.getSound('correct').play();
		// Animate ball
		tween(ball, {
			scaleX: 1.18,
			scaleY: 1.18
		}, {
			duration: 80,
			easing: tween.cubicOut,
			onFinish: function onFinish() {
				tween(ball, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.cubicIn
				});
			}
		});
		// Next round after short delay
		if (responseTimer) {
			LK.clearTimeout(responseTimer);
			responseTimer = null;
		}
		responseTimer = LK.setTimeout(function () {
			startNewRound();
		}, 220);
	} else {
		// Wrong!
		LK.effects.flashScreen(0xff0000, 600);
		LK.getSound('wrong').play();
		if (responseTimer) {
			LK.clearTimeout(responseTimer);
			responseTimer = null;
		}
		health--;
		updateHealthBars();
		if (health <= 0) {
			endGame();
		} else {
			// Give player another chance, start new round after short delay
			responseTimer = LK.setTimeout(function () {
				startNewRound();
			}, 700);
		}
	}
}
// --- Game Update Loop ---
game.update = function () {
	// Animate timer bar
	if (waitingForInput) {
		var elapsed = Date.now() - lastTapTime;
		var frac = 1 - elapsed / timeLimit;
		if (frac < 0) frac = 0;
		timerBarFill.width = 900 * frac;
	} else {
		timerBarFill.width = 0;
	}
};
// --- Start Game ---
function startGame() {
	setScore(0);
	timeLimit = 10000;
	rotationSpeed = 0.02;
	ball.rotationSpeed = rotationSpeed;
	ball.targetRotationSpeed = rotationSpeed;
	health = maxHealth;
	updateHealthBars();
	startNewRound();
}
startGame();
// --- Responsive UI (optional, handled by LK) ---
// --- Music (optional, not started by default) ---
// LK.playMusic('bgmusic', {fade: {start: 0, end: 1, duration: 1000}});

===================================================================
--- original.js
+++ change.js
@@ -81,15 +81,17 @@
 			anchorX: 0.5,
 			anchorY: 0.5
 		});
 		// Add visible hitbox outline (matches asset size, semi-transparent yellow)
+		// Move hitbox down by 32px
 		self.hitbox = self.attachAsset('btnRed', {
 			anchorX: 0.5,
 			anchorY: 0.5,
 			width: self.asset.width,
 			height: self.asset.height,
 			color: 0xffff00,
-			alpha: 0.22
+			alpha: 0.22,
+			y: 32
 		});
 		self.hitbox.zIndex = -1;
 		self.addChild(self.hitbox);
 		self.addChild(self.asset);
@@ -126,9 +128,11 @@
 		var local = self.toLocal({
 			x: x,
 			y: y
 		});
-		return local.x > -self.hitbox.width / 2 && local.x < self.hitbox.width / 2 && local.y > -self.hitbox.height / 2 && local.y < self.hitbox.height / 2;
+		// Adjust for hitbox y offset (32px down)
+		var hitboxY = 32;
+		return local.x > -self.hitbox.width / 2 && local.x < self.hitbox.width / 2 && local.y > -self.hitbox.height / 2 + hitboxY && local.y < self.hitbox.height / 2 + hitboxY;
 	};
 	return self;
 });