/**** 
* Classes
****/ 
/***********************************************************************************/ 
/********************************** CAMERA HUD CLASS ************************************/
/***********************************************************************************/ 
var CameraHUD = Container.expand(function () {
	var self = Container.call(this);
	function createCorner(x, y, rotation) {
		var corner = new Container();
		var line1 = LK.getAsset('line', {
			width: 100,
			height: 20,
			anchorX: 0,
			anchorY: 0
		});
		var line2 = LK.getAsset('line', {
			width: 100,
			height: 20,
			anchorX: 0,
			anchorY: 0
		});
		line2.rotation = Math.PI / 2;
		line1.alpha = 0.5;
		line2.alpha = 0.5;
		corner.addChild(line1);
		corner.addChild(line2);
		corner.x = x;
		corner.y = y;
		corner.rotation = rotation;
		return corner;
	}
	var topLeft = createCorner(256, 700, 0);
	var topRight = createCorner(2048 - 256, 700, Math.PI / 2);
	var bottomLeft = createCorner(256, 2732 - 700, -Math.PI / 2);
	var bottomRight = createCorner(2048 - 256, 2732 - 700, Math.PI);
	self.addChild(topLeft);
	self.addChild(topRight);
	self.addChild(bottomLeft);
	self.addChild(bottomRight);
});
/***********************************************************************************/ 
/********************************** FRAME BACKGROUND CLASS *************************/
/***********************************************************************************/ 
var FrameBackground = Container.expand(function () {
	var self = Container.call(this);
	var frameBackground = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: xMax - xMin,
		height: yMax - yMin,
		x: (xMax + xMin) / 2,
		y: (yMax + yMin) / 2
	});
});
/***********************************************************************************/ 
/********************************** FRAME MASK CLASS *************************/
/***********************************************************************************/ 
var FrameMask = Container.expand(function () {
	var self = Container.call(this);
	var top = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: yMin / 2,
		width: 2048,
		height: yMin,
		tint: isDebug ? 0xFF0000 : 0xAEC6CF // Red tint in debug mode
	});
	var left = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: xMin / 2,
		y: 2732 / 2,
		width: xMin,
		height: 2732,
		tint: isDebug ? 0x00FF00 : 0xAEC6CF // Green tint in debug mode
	});
	var bottom = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: (2732 + yMax) / 2,
		width: 2048,
		height: 2732 - yMax,
		tint: isDebug ? 0x0000FF : 0xAEC6CF // Blue tint in debug mode
	});
	var right = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: (2048 + xMax) / 2,
		y: 2732 / 2,
		width: 2048 - xMax,
		height: 2732,
		tint: isDebug ? 0xFFFF00 : 0xAEC6CF // Yellow tint in debug mode
	});
	self.addChild(top);
	self.addChild(left);
	self.addChild(bottom);
	self.addChild(right);
});
/***********************************************************************************/ 
/********************************** MOVING TARGET CLASS ************************************/
/***********************************************************************************/ 
var MovingTarget = Container.expand(function () {
	var self = Container.call(this);
	var birdAssets = ['bird1', 'bird2', 'bird3'];
	currentTargetAsset = birdAssets[Math.floor(Math.random() * birdAssets.length)];
	var targetGraphics = self.attachAsset(currentTargetAsset, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedX = 10;
	self.update = function () {
		if (!isPlaying) {
			return;
		}
		self.x += self.speedX;
		self.y = Math.max(yMin, Math.min(self.y, yMax));
		if (self.x > 2048 + self.width) {
			self.destroy();
			cleanPlayingState();
			initResultState();
		}
	};
});
/***********************************************************************************/ 
/********************************** PHOTOFRAME CLASS ************************************/
/***********************************************************************************/ 
var PhotoFrame = Container.expand(function () {
	var self = Container.call(this);
	var frameBorderTop = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderTop.width = xMax - xMin;
	frameBorderTop.height = 20;
	frameBorderTop.alpha = 1.0;
	frameBorderTop.x = (xMax + xMin) / 2;
	frameBorderTop.y = yMin;
	var frameBorderBottom = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0x808080 // Grey color
	});
	frameBorderBottom.width = xMax - xMin;
	frameBorderBottom.height = 20;
	frameBorderBottom.alpha = 1.0;
	frameBorderBottom.x = (xMax + xMin) / 2;
	frameBorderBottom.y = yMax;
	var frameBorderLeft = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderLeft.width = 20;
	frameBorderLeft.height = yMax - yMin;
	frameBorderLeft.alpha = 1.0;
	frameBorderLeft.x = xMin;
	frameBorderLeft.y = (yMax + yMin) / 2;
	var frameBorderRight = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0x808080 // Grey color
	});
	frameBorderRight.width = 20;
	frameBorderRight.height = yMax - yMin;
	frameBorderRight.alpha = 1.0;
	frameBorderRight.x = xMax;
	frameBorderRight.y = (yMax + yMin) / 2;
});
/***********************************************************************************/ 
/********************************** SHOTBUTTON CLASS ************************************/
/***********************************************************************************/ 
var ShotButton = Container.expand(function () {
	var self = Container.call(this);
	var circle1 = self.attachAsset('shotButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var circle2 = self.attachAsset('shotButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0x000000,
		scaleX: 0.9,
		scaleY: 0.9
	});
	var circle3 = self.attachAsset('shotButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.85,
		scaleY: 0.85
	});
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xAEC6CF //Init game with pastel blue background
});

/**** 
* Game Code
****/ 
// Enumeration for game states
/****************************************************************************************** */ 
/************************************** GLOBAL VARIABLES ********************************** */
/****************************************************************************************** */ 
var GAME_STATE = {
	INIT: 'INIT',
	NEW_ROUND: 'NEW_ROUND',
	PLAYING: 'PLAYING',
	RESULT: 'RESULT',
	SCORE: 'SCORE'
};
// Game state variables
var gameState = GAME_STATE.INIT;
var isPlaying = false;
var score = 0;
var hasShot = false;
var targetShotX = 0;
var targetShotY = 0;
// Photo limits variables
var xMin = 256;
var xMax = 2048 - 256;
var yMin = 700;
var yMax = 2732 - 700;
// Game elements variables
var frameMask;
var photoFrame;
var frameBackground;
var background;
var cameraHUD;
var currentTarget;
var currentTargetAsset;
var shotButton;
// Game layer variables
var backgroundLayer;
var foregroundLayer;
// Result target variable
var resultTarget;
// UI variables
var scoreTxt;
var readyText;
// Debug variables
var isDebug = false;
var debugMarker;
var debugText;
/****************************************************************************************** */ 
/*********************************** UTILITY FUNCTIONS ************************************ */
/****************************************************************************************** */ 
function log() {
	if (isDebug) {
		var _console;
		(_console = console).log.apply(_console, arguments);
	}
}
/****************************************************************************************** */ 
/************************************** INPUT HANDLERS ************************************ */
/****************************************************************************************** */ 
game.down = function (x, y, obj) {
	switch (gameState) {
		case GAME_STATE.NEW_ROUND:
			gameNewRoundDown(x, y, obj);
			break;
		case GAME_STATE.PLAYING:
			gamePlayingDown(x, y, obj);
			break;
		case GAME_STATE.RESULT:
			gameResultDown(x, y, obj);
		case GAME_STATE.SCORE:
			gameScoreDown(x, y, obj);
			break;
	}
};
function gameNewRoundDown(x, y, obj) {
	log("gameNewRoundDown...");
	cleanNewRoundState();
	initPlayingState();
}
function gamePlayingDown(x, y, obj) {
	if (hasShot) {
		return;
	}
	hasShot = true;
	log("gamePlayingDown...");
	LK.getSound('cameraShot').play();
	targetShotX = currentTarget.x;
	targetShotY = currentTarget.y;
	// Add a black flash effect
	LK.effects.flashScreen(0x000000, 1000); // Flash duration of 1000ms
}
function gameResultDown(x, y, obj) {
	log("gameResultDown...");
	cleanResultState();
}
function gameScoreDown(x, y, obj) {
	log("gameScoreDown...");
	cleanScoreState();
}
/****************************************************************************************** */ 
/************************************* GAME STATES **************************************** */
/****************************************************************************************** */ 
function gameInitialize() {
	log("Game initialize...");
	background = LK.getAsset('background', {
		anchorX: 0,
		anchorY: 0,
		x: 0,
		y: 0
	});
	backgroundLayer = new Container();
	game.addChild(backgroundLayer);
	backgroundLayer.addChild(background);
	cameraHUD = new CameraHUD();
	frameBackground = new FrameBackground();
	frameBackground.visible = false;
	backgroundLayer.addChild(frameBackground);
	photoFrame = new PhotoFrame();
	backgroundLayer.addChild(photoFrame);
	frameMask = new FrameMask();
	frameMask.visible = false;
	frameBackground.visible = false;
	foregroundLayer = new Container();
	game.addChild(foregroundLayer);
	foregroundLayer.addChild(frameMask);
	backgroundLayer.addChild(cameraHUD);
	// UI Elements
	score = 0;
	scoreTxt = new Text2('Score: ' + score, {
		size: 100,
		fill: "#ffffff"
	});
	scoreTxt.anchor.set(0.5, 0);
	LK.gui.top.addChild(scoreTxt);
	shotButton = new ShotButton();
	shotButton.x = 1024;
	shotButton.y = 2500;
	game.addChild(shotButton);
	if (isDebug) {
		debugMarker = LK.getAsset('debugMarker', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 2048 / 2,
			y: 2732 - 50
		});
		game.addChild(debugMarker);
		debugText = new Text2('Debug Info', {
			size: 50,
			fill: "#ffffff"
		});
		debugText.anchor.set(0.5, 1); // Anchor to the bottom-right
		LK.gui.bottom.addChild(debugText);
	}
	initNewRoundState();
}
/**************************************** NEW ROUND STATE  *********************************/
function initNewRoundState() {
	log("initNewRoundState...");
	background.visible = true;
	gameState = GAME_STATE.NEW_ROUND;
	// TODO : handle Level change and target change
	currentTarget = new MovingTarget();
	currentTarget.x = -currentTarget.width; // Spawn out of the screen on the left
	currentTarget.y = 1366 - 256 + 512 * Math.random(); // Random vertical position
	backgroundLayer.addChild(currentTarget);
	if (!readyText) {
		readyText = new Text2('Listen...', {
			size: 200,
			fill: "#ffffff"
		});
		readyText.anchor.set(0.5, 0.5); // Center the text horizontally and vertically
		readyText.x = 2048 / 2; // Center horizontally
		readyText.y = 2732 / 2; // Center vertically
		game.addChild(readyText);
	}
	readyText.visible = true;
	photoFrame.visible = false;
	LK.getSound('forestSound').play();
	LK.setTimeout(function () {
		cleanNewRoundState();
		initPlayingState();
	}, 3000);
}
function handleNewRoundLoop() {
	// Update New round elements
}
function cleanNewRoundState() {
	log("cleanNewRoundState...");
	// Remove New round elements
	readyText.visible = false;
}
/**************************************** PLAYING STATE  *********************************/
function initPlayingState() {
	log("initPlayingState...");
	gameState = GAME_STATE.PLAYING;
	isPlaying = true;
	hasShot = false;
}
function handlePlayingLoop() {
	// Update game elements
}
function cleanPlayingState() {
	log("cleanPlayingState...");
	isPlaying = false;
	// Remove game elements
	background.visible = false;
	cameraHUD.visible = false;
}
/**************************************** RESULT STATE  *********************************/
function initResultState() {
	log("initResultState...");
	shotButton.visible = false;
	frameMask.visible = true;
	foregroundLayer.addChild(frameMask);
	gameState = GAME_STATE.RESULT;
	photoFrame.visible = true;
	frameBackground.visible = true;
	background.tint = 0x000000; // Set background to black
	// Show the target again at the shot position if within limits
	if (targetShotX >= xMin - currentTarget.width / 2 && targetShotX <= xMax + currentTarget.width / 2 && targetShotY >= yMin - currentTarget.height / 2 && targetShotY <= yMax + currentTarget.height / 2) {
		resultTarget = new Container();
		var resultTargetGraphics = resultTarget.attachAsset(currentTargetAsset, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		resultTarget.x = targetShotX;
		resultTarget.y = targetShotY;
		backgroundLayer.addChild(resultTarget);
	}
	// Calculate the center of the photo frame
	var centerX = (xMin + xMax) / 2;
	var centerY = (yMin + yMax) / 2;
	// Calculate the distance between the target shot and the center
	var distance = Math.sqrt(Math.pow(targetShotX - centerX, 2) + Math.pow(targetShotY - centerY, 2));
	// Calculate the maximum possible distance (from center to any corner)
	var maxDistance = Math.sqrt(Math.pow((xMax - xMin) / 2, 2) + Math.pow((yMax - yMin) / 2, 2));
	// Calculate the score (0 to 100)
	var shotScore = Math.max(0, 100 - distance / maxDistance * 100);
	// Update the score
	score += Math.round(shotScore);
	scoreTxt.setText('Score: ' + score);
}
function handleResultLoop() {
	// Update result elements
}
function cleanResultState() {
	log("cleanResultState...");
	frameMask.visible = false;
	scoreTxt.visible = false;
	frameBackground.visible = false;
	foregroundLayer.removeChild(frameMask);
	shotButton.visible = true;
	if (resultTarget) {
		backgroundLayer.removeChild(resultTarget);
		resultTarget = null;
	}
	// Remove result elements
	initNewRoundState();
}
/**************************************** SCORE STATE  *********************************/
function initScoreState() {
	log("initScoreState...");
	gameState = GAME_STATE.SCORE;
}
function handleScoreLoop() {
	// Update score elements
}
function cleanScoreState() {
	log("cleanScoreState...");
	scoreTxt.setText('Score: ' + score);
	LK.showGameOver();
}
/***********************************************************************************/ 
/******************************** MAIN GAME LOOP ***********************************/
/***********************************************************************************/ 
game.update = function () {
	currentTarget.update();
	switch (gameState) {
		case GAME_STATE.NEW_ROUND:
			handleNewRoundLoop();
			break;
		case GAME_STATE.PLAYING:
			handlePlayingLoop();
			break;
		case GAME_STATE.SCORE:
			handleScoreLoop();
			break;
	}
};
gameInitialize(); // Initialize the game

===================================================================
--- original.js
+++ change.js
@@ -139,9 +139,10 @@
 	frameBorderTop.x = (xMax + xMin) / 2;
 	frameBorderTop.y = yMin;
 	var frameBorderBottom = self.attachAsset('line', {
 		anchorX: 0.5,
-		anchorY: 0.5
+		anchorY: 0.5,
+		tint: 0x808080 // Grey color
 	});
 	frameBorderBottom.width = xMax - xMin;
 	frameBorderBottom.height = 20;
 	frameBorderBottom.alpha = 1.0;
@@ -157,9 +158,10 @@
 	frameBorderLeft.x = xMin;
 	frameBorderLeft.y = (yMax + yMin) / 2;
 	var frameBorderRight = self.attachAsset('line', {
 		anchorX: 0.5,
-		anchorY: 0.5
+		anchorY: 0.5,
+		tint: 0x808080 // Grey color
 	});
 	frameBorderRight.width = 20;
 	frameBorderRight.height = yMax - yMin;
 	frameBorderRight.alpha = 1.0;