/**** 
* 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)
		self.hitbox = self.attachAsset('btnRed', {
			anchorX: 0.5,
			anchorY: 0.5,
			width: self.asset.width,
			height: self.asset.height,
			color: 0xffff00,
			alpha: 0.22
		});
		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
		});
		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;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Health bar assets
// --- Game State ---
// Ball colors
// Button colors
// Sound
// Music (optional, but initialized for future use)
var ball;
var buttons = [];
var colorOrder = ['red', 'blue', 'green'];
var currentColor = 'red';
var score = 0;
var highScore = storage.highScore || 0;
var timeLimit = 5000; // ms, initial time to respond (5 seconds)
var minTimeLimit = 5000; // ms, minimum allowed (5 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);
scoreTxt.y = 60;
// Add scoreTxt after timer and hearts to ensure it is always on top
LK.setTimeout(function () {
	LK.gui.top.addChild(scoreTxt);
}, 0);
var highScoreTxt = new Text2('BEST: ' + highScore, {
	size: 60,
	fill: "#aaa"
});
highScoreTxt.anchor.set(0.5, 0);
highScoreTxt.y = 170;
LK.gui.top.addChild(highScoreTxt);
// --- Timer Bar (under score) ---
// --- Timer Bar (under score, in GUI) ---
var timerBar = LK.getAsset('timerBar', {
	width: 900,
	height: 30,
	color: 0xffffff,
	anchorX: 0.5,
	anchorY: 0.0
});
timerBar.x = 0.5; // relative to gui width
timerBar.y = scoreTxt.y + scoreTxt.height + 70; // 70px below score (moved further down)
timerBar.alpha = 0.18;
timerBar.isGUI = true;
LK.gui.top.addChild(timerBar);
var timerBarFill = LK.getAsset('timerBarFill', {
	width: 900,
	height: 30,
	color: 0x2ecc40,
	anchorX: 0.5,
	anchorY: 0.0
});
timerBarFill.x = 0.5; // relative to gui width
timerBarFill.y = scoreTxt.y + scoreTxt.height + 70; // 70px below score (moved further down)
timerBarFill.isGUI = true;
LK.gui.top.addChild(timerBarFill);
// --- Health Bars (under timer, in GUI) ---
var health = 3;
var maxHealth = 3;
var healthBars = [];
var healthBarSpacing = 130;
var healthBarWidth = 120;
var healthBarHeight = 120;
var healthBarAssets = [{
	id: 'healthBarRed',
	color: 0xd83318
},
// Red
{
	id: 'healthBarBlue',
	color: 0x187ad8
},
// Blue
{
	id: 'healthBarGreen',
	color: 0x2ecc40
} // Green
];
var healthBarY = timerBar.y + timerBar.height + 30; // 30px below timer bar
// Calculate total width of all health bars and starting x for centering
var totalHealthWidth = (maxHealth - 1) * healthBarSpacing;
var healthStartX = 0.5 + -(totalHealthWidth / 2); // 0.5 is center in LK.gui coordinates
for (var i = 0; i < maxHealth; i++) {
	var assetInfo = healthBarAssets[i];
	var bar = LK.getAsset(assetInfo.id, {
		width: healthBarWidth,
		height: healthBarHeight,
		color: assetInfo.color,
		anchorX: 0.5,
		anchorY: 0.0
	});
	// Center health bars under the timer
	bar.x = healthStartX + i * healthBarSpacing;
	bar.y = healthBarY;
	bar.isGUI = true;
	LK.gui.top.addChild(bar);
	healthBars.push(bar);
}
// Helper to update health bar visuals
function updateHealthBars() {
	for (var i = 0; i < maxHealth; i++) {
		// Each bar is independent: show full alpha if "alive", faded if "lost"
		healthBars[i].alpha = i < health ? 1 : 0.18;
	}
}
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
	// Timer speeds up by 0.1x for each point scored (decrease timeLimit by 10% per point)
	timeLimit = 10000 * Math.pow(0.9, score);
	if (timeLimit < minTimeLimit) {
		timeLimit = minTimeLimit;
	}
	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;
	}
	// Divide the screen into three vertical regions: left, middle, right
	var region;
	if (x < 2048 / 3) {
		region = 'left';
	} else if (x > 2048 * 2 / 3) {
		region = 'right';
	} else {
		region = 'middle';
	}
	// Map region to color
	var color;
	if (region === 'left') {
		color = 'red';
	} else if (region === 'right') {
		color = 'green';
	} else {
		color = 'blue';
	}
	// Find the button with this color (for animation/feedback)
	var btn = null;
	for (var i = 0; i < buttons.length; i++) {
		if (buttons[i].color === color) {
			btn = buttons[i];
			break;
		}
	}
	if (btn) {
		handleButtonPress(btn);
	}
};
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() {
	LK.playMusic('g');
	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
@@ -188,9 +188,9 @@
 highScoreTxt.y = 170;
 LK.gui.top.addChild(highScoreTxt);
 // --- Timer Bar (under score) ---
 // --- Timer Bar (under score, in GUI) ---
-var timerBar = LK.getAsset('btnRed', {
+var timerBar = LK.getAsset('timerBar', {
 	width: 900,
 	height: 30,
 	color: 0xffffff,
 	anchorX: 0.5,
@@ -200,9 +200,9 @@
 timerBar.y = scoreTxt.y + scoreTxt.height + 70; // 70px below score (moved further down)
 timerBar.alpha = 0.18;
 timerBar.isGUI = true;
 LK.gui.top.addChild(timerBar);
-var timerBarFill = LK.getAsset('btnRed', {
+var timerBarFill = LK.getAsset('timerBarFill', {
 	width: 900,
 	height: 30,
 	color: 0x2ecc40,
 	anchorX: 0.5,