/**** 
* 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);
});
/***********************************************************************************/ 
/********************************** MOVING TARGET CLASS ************************************/
/***********************************************************************************/ 
var MovingTarget = Container.expand(function () {
	var self = Container.call(this);
	var targetGraphics = self.attachAsset('target', {
		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 = 10;
	frameBorderTop.alpha = 0.8;
	frameBorderTop.y = yMin - self.y;
	var frameBorderBottom = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderBottom.width = xMax - xMin;
	frameBorderBottom.height = 10;
	frameBorderBottom.alpha = 0.8;
	frameBorderBottom.y = yMax - self.y;
	var frameBorderLeft = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderLeft.width = 10;
	frameBorderLeft.height = yMax - yMin;
	frameBorderLeft.alpha = 0.8;
	frameBorderLeft.x = xMin - self.x;
	var frameBorderRight = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderRight.width = 10;
	frameBorderRight.height = yMax - yMin;
	frameBorderRight.alpha = 0.8;
	frameBorderRight.x = xMax - self.x;
});
/***********************************************************************************/ 
/********************************** 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 background;
var cameraHUD;
var currentTarget;
var shotButton;
// UI variables
var scoreTxt;
var readyText;
// Debug variables
var isDebug = true;
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...");
	targetShotX = currentTarget.x;
	targetShotY = currentTarget.y;
	// Add a black flash effect
	LK.effects.flashScreen(0x000000, 1000); // Flash duration of 600ms
}
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
	});
	game.addChild(background);
	cameraHUD = new CameraHUD();
	game.addChild(cameraHUD);
	// UI Elements
	scoreTxt = new Text2('Score: 0', {
		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: xMin,
			y: yMin
		});
		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 = Math.random() * 2732; // Random vertical position
	game.addChild(currentTarget);
	if (!readyText) {
		readyText = new Text2('Be ready...', {
			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;
}
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;
}
/**************************************** RESULT STATE  *********************************/
function initResultState() {
	log("initResultState...");
	gameState = GAME_STATE.RESULT;
	// Show the target again at the shot position
	var resultTarget = new MovingTarget();
	resultTarget.x = targetShotX;
	resultTarget.y = targetShotY;
	game.addChild(resultTarget);
}
function handleResultLoop() {
	// Update result elements
}
function cleanResultState() {
	log("cleanResultState...");
	// Remove result elements
	initNewRoundState();
}
/**************************************** SCORE STATE  *********************************/
function initScoreState() {
	log("initScoreState...");
	gameState = GAME_STATE.SCORE;
}
function handleScoreLoop() {
	// Update score elements
}
function cleanScoreState() {
	log("cleanScoreState...");
	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
@@ -70,36 +70,36 @@
 	var frameBorderTop = self.attachAsset('line', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
-	frameBorderTop.width = 500;
+	frameBorderTop.width = xMax - xMin;
 	frameBorderTop.height = 10;
 	frameBorderTop.alpha = 0.8;
-	frameBorderTop.y = -350;
+	frameBorderTop.y = yMin - self.y;
 	var frameBorderBottom = self.attachAsset('line', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
-	frameBorderBottom.width = 500;
+	frameBorderBottom.width = xMax - xMin;
 	frameBorderBottom.height = 10;
 	frameBorderBottom.alpha = 0.8;
-	frameBorderBottom.y = 350;
+	frameBorderBottom.y = yMax - self.y;
 	var frameBorderLeft = self.attachAsset('line', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
 	frameBorderLeft.width = 10;
-	frameBorderLeft.height = 700;
+	frameBorderLeft.height = yMax - yMin;
 	frameBorderLeft.alpha = 0.8;
-	frameBorderLeft.x = -250;
+	frameBorderLeft.x = xMin - self.x;
 	var frameBorderRight = self.attachAsset('line', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
 	frameBorderRight.width = 10;
-	frameBorderRight.height = 700;
+	frameBorderRight.height = yMax - yMin;
 	frameBorderRight.alpha = 0.8;
-	frameBorderRight.x = 250;
+	frameBorderRight.x = xMax - self.x;
 });
 /***********************************************************************************/ 
 /********************************** SHOTBUTTON CLASS ************************************/
 /***********************************************************************************/