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

/**** 
* Classes
****/ 
var Button = Container.expand(function (assetName, text) {
	var self = Container.call(this);
	var buttonGraphics = self.attachAsset(assetName, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var buttonText = new Text2(text, {
		size: 40,
		fill: 0xFFFFFF
	});
	buttonText.anchor.set(0.5, 0.5);
	self.addChild(buttonText);
	self.down = function (x, y, obj) {
		tween(buttonGraphics, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			onFinish: function onFinish() {
				tween(buttonGraphics, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 100
				});
			}
		});
	};
	return self;
});
var CharacterCard = Container.expand(function (characterType, name) {
	var self = Container.call(this);
	self.characterType = characterType;
	self.isSelected = false;
	var cardBg = self.attachAsset('characterCard', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var character = self.attachAsset(characterType + 'Fighter', {
		anchorX: 0.5,
		anchorY: 0.8,
		y: -20
	});
	var nameText = new Text2(name, {
		size: 30,
		fill: 0xFFFFFF
	});
	nameText.anchor.set(0.5, 0.5);
	nameText.y = 100;
	self.addChild(nameText);
	self.setSelected = function (selected) {
		self.isSelected = selected;
		if (selected) {
			cardBg.tint = 0xf39c12;
			tween(cardBg, {
				scaleX: 1.1,
				scaleY: 1.1
			}, {
				duration: 200
			});
		} else {
			cardBg.tint = 0xFFFFFF;
			tween(cardBg, {
				scaleX: 1,
				scaleY: 1
			}, {
				duration: 200
			});
		}
	};
	self.down = function (x, y, obj) {
		if (gameState === 'characterSelect') {
			selectedCharacter = self.characterType;
			for (var i = 0; i < characterCards.length; i++) {
				characterCards[i].setSelected(characterCards[i] === self);
			}
		}
	};
	return self;
});
var Fighter = Container.expand(function (isPlayer) {
	var self = Container.call(this);
	self.isPlayer = isPlayer || false;
	self.maxHealth = 100;
	self.health = self.maxHealth;
	self.maxStamina = 100;
	self.stamina = self.maxStamina;
	self.attackPower = 20;
	self.isBlocking = false;
	self.isAttacking = false;
	self.canAttack = true;
	self.staminaRegenRate = 1;
	var assetName = 'playerFighter';
	if (isPlayer && selectedCharacter) {
		assetName = selectedCharacter + 'Fighter';
	} else if (!isPlayer) {
		assetName = 'enemyFighter';
	}
	var fighterGraphics = self.attachAsset(assetName, {
		anchorX: 0.5,
		anchorY: 1
	});
	self.attack = function () {
		if (!self.canAttack || self.stamina < 20) return false;
		self.isAttacking = true;
		self.canAttack = false;
		self.stamina -= 20;
		tween(fighterGraphics, {
			scaleX: 1.2,
			scaleY: 0.9
		}, {
			duration: 100,
			onFinish: function onFinish() {
				tween(fighterGraphics, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 100
				});
			}
		});
		LK.getSound('punch').play();
		LK.setTimeout(function () {
			self.isAttacking = false;
			self.canAttack = true;
		}, 300);
		return true;
	};
	self.block = function () {
		if (self.stamina < 10) return false;
		self.isBlocking = true;
		self.stamina -= 10;
		tween(fighterGraphics, {
			tint: 0x3498db
		}, {
			duration: 200,
			onFinish: function onFinish() {
				tween(fighterGraphics, {
					tint: 0xffffff
				}, {
					duration: 200
				});
			}
		});
		LK.getSound('block').play();
		LK.setTimeout(function () {
			self.isBlocking = false;
		}, 400);
		return true;
	};
	self.specialAttack = function () {
		if (self.stamina < 50) return false;
		self.stamina -= 50;
		tween(fighterGraphics, {
			scaleX: 1.5,
			scaleY: 1.5,
			tint: 0xffd700
		}, {
			duration: 300,
			onFinish: function onFinish() {
				tween(fighterGraphics, {
					scaleX: 1,
					scaleY: 1,
					tint: 0xffffff
				}, {
					duration: 300
				});
			}
		});
		LK.getSound('special').play();
		return true;
	};
	self.takeDamage = function (damage) {
		if (self.isBlocking) {
			damage = Math.floor(damage * 0.3);
		}
		self.health -= damage;
		if (self.health < 0) self.health = 0;
		LK.effects.flashObject(self, 0xff0000, 200);
		tween(fighterGraphics, {
			x: fighterGraphics.x + (self.isPlayer ? -20 : 20)
		}, {
			duration: 100,
			onFinish: function onFinish() {
				tween(fighterGraphics, {
					x: 0
				}, {
					duration: 100
				});
			}
		});
	};
	self.update = function () {
		if (self.stamina < self.maxStamina) {
			self.stamina += self.staminaRegenRate;
			if (self.stamina > self.maxStamina) self.stamina = self.maxStamina;
		}
	};
	return self;
});
var HealthBar = Container.expand(function (maxValue) {
	var self = Container.call(this);
	self.maxValue = maxValue;
	self.currentValue = maxValue;
	var background = self.attachAsset('healthBarBg', {
		anchorX: 0,
		anchorY: 0
	});
	var bar = self.attachAsset('healthBar', {
		anchorX: 0,
		anchorY: 0
	});
	self.setValue = function (value) {
		self.currentValue = value;
		var percentage = value / self.maxValue;
		bar.scaleX = percentage;
		if (percentage > 0.6) {
			bar.tint = 0x2ecc71;
		} else if (percentage > 0.3) {
			bar.tint = 0xf39c12;
		} else {
			bar.tint = 0xe74c3c;
		}
	};
	return self;
});
var StaminaBar = Container.expand(function (maxValue) {
	var self = Container.call(this);
	self.maxValue = maxValue;
	self.currentValue = maxValue;
	var background = self.attachAsset('staminaBarBg', {
		anchorX: 0,
		anchorY: 0
	});
	var bar = self.attachAsset('staminaBar', {
		anchorX: 0,
		anchorY: 0
	});
	self.setValue = function (value) {
		self.currentValue = value;
		var percentage = value / self.maxValue;
		bar.scaleX = percentage;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
var gameState = 'menu';
var roundTimer = 60;
var roundStartTime = 0;
var selectedCharacter = 'shark';
var characterCards = [];
var menuContainer = game.addChild(new Container());
var characterSelectContainer = game.addChild(new Container());
var gameplayContainer = game.addChild(new Container());
var titleText = new Text2('FURRY FIGHTER ARENA', {
	size: 80,
	fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 600;
menuContainer.addChild(titleText);
var startButton = new Button('menuButton', 'START COMBAT');
startButton.x = 2048 / 2;
startButton.y = 1200;
menuContainer.addChild(startButton);
startButton.down = function (x, y, obj) {
	if (gameState === 'menu') {
		gameState = 'characterSelect';
		menuContainer.visible = false;
		characterSelectContainer.visible = true;
	}
};
var characterSelectTitle = new Text2('SELECT YOUR FIGHTER', {
	size: 60,
	fill: 0xFFFFFF
});
characterSelectTitle.anchor.set(0.5, 0.5);
characterSelectTitle.x = 2048 / 2;
characterSelectTitle.y = 400;
characterSelectContainer.addChild(characterSelectTitle);
var sharkCard = new CharacterCard('shark', 'SHARK');
sharkCard.x = 2048 / 2 - 300;
sharkCard.y = 1000;
characterSelectContainer.addChild(sharkCard);
characterCards.push(sharkCard);
var lizardCard = new CharacterCard('lizard', 'LIZARD');
lizardCard.x = 2048 / 2;
lizardCard.y = 1000;
characterSelectContainer.addChild(lizardCard);
characterCards.push(lizardCard);
var wolfCard = new CharacterCard('wolf', 'WOLF');
wolfCard.x = 2048 / 2 + 300;
wolfCard.y = 1000;
characterSelectContainer.addChild(wolfCard);
characterCards.push(wolfCard);
sharkCard.setSelected(true);
var fightButton = new Button('menuButton', 'FIGHT!');
fightButton.x = 2048 / 2;
fightButton.y = 1600;
characterSelectContainer.addChild(fightButton);
fightButton.down = function (x, y, obj) {
	if (gameState === 'characterSelect') {
		gameState = 'playing';
		characterSelectContainer.visible = false;
		gameplayContainer.visible = true;
		roundTimer = 60;
	}
};
characterSelectContainer.visible = false;
gameplayContainer.visible = false;
var arena = gameplayContainer.addChild(LK.getAsset('arena', {
	anchorX: 0.5,
	anchorY: 1,
	x: 2048 / 2,
	y: 2732 - 200
}));
var playerFighter = gameplayContainer.addChild(new Fighter(true));
playerFighter.x = 2048 / 2 - 300;
playerFighter.y = 2732 - 200;
var enemyFighter = gameplayContainer.addChild(new Fighter(false));
enemyFighter.x = 2048 / 2 + 300;
enemyFighter.y = 2732 - 200;
var playerHealthBar = new HealthBar(100);
playerHealthBar.x = 100;
playerHealthBar.y = 100;
LK.gui.topLeft.addChild(playerHealthBar);
var enemyHealthBar = new HealthBar(100);
enemyHealthBar.x = 100;
enemyHealthBar.y = 100;
LK.gui.topRight.addChild(enemyHealthBar);
var playerStaminaBar = new StaminaBar(100);
playerStaminaBar.x = 100;
playerStaminaBar.y = 150;
LK.gui.topLeft.addChild(playerStaminaBar);
var enemyStaminaBar = new StaminaBar(100);
enemyStaminaBar.x = 100;
enemyStaminaBar.y = 150;
LK.gui.topRight.addChild(enemyStaminaBar);
var timerText = new Text2('60', {
	size: 80,
	fill: 0xFFFFFF
});
timerText.anchor.set(0.5, 0);
LK.gui.top.addChild(timerText);
var scoreText = new Text2('Score: 0', {
	size: 50,
	fill: 0xFFFFFF
});
scoreText.anchor.set(0.5, 0);
scoreText.y = 100;
LK.gui.top.addChild(scoreText);
var attackButton = new Button('attackButton', 'ATTACK');
attackButton.x = 200;
attackButton.y = 100;
LK.gui.bottomLeft.addChild(attackButton);
var blockButton = new Button('blockButton', 'BLOCK');
blockButton.x = 200;
blockButton.y = 200;
LK.gui.bottomLeft.addChild(blockButton);
var specialButton = new Button('specialButton', 'SPECIAL');
specialButton.x = 200;
specialButton.y = 300;
LK.gui.bottomLeft.addChild(specialButton);
attackButton.down = function (x, y, obj) {
	if (gameState !== 'playing') return;
	if (playerFighter.attack()) {
		var distance = Math.abs(playerFighter.x - enemyFighter.x);
		if (distance < 350) {
			var damage = playerFighter.attackPower;
			enemyFighter.takeDamage(damage);
		}
	}
};
blockButton.down = function (x, y, obj) {
	if (gameState !== 'playing') return;
	playerFighter.block();
};
specialButton.down = function (x, y, obj) {
	if (gameState !== 'playing') return;
	if (playerFighter.specialAttack()) {
		var distance = Math.abs(playerFighter.x - enemyFighter.x);
		if (distance < 400) {
			var damage = playerFighter.attackPower * 2;
			enemyFighter.takeDamage(damage);
		}
	}
};
var enemyAI = {
	nextActionTime: 0,
	actionCooldown: 1000,
	update: function update() {
		if (gameState !== 'playing') return;
		var currentTime = Date.now();
		if (currentTime < this.nextActionTime) return;
		var distance = Math.abs(playerFighter.x - enemyFighter.x);
		var action = Math.random();
		if (distance < 350) {
			if (action < 0.4 && enemyFighter.canAttack) {
				if (enemyFighter.attack()) {
					playerFighter.takeDamage(enemyFighter.attackPower);
				}
			} else if (action < 0.7) {
				enemyFighter.block();
			} else if (action < 0.9 && enemyFighter.stamina >= 50) {
				if (enemyFighter.specialAttack()) {
					playerFighter.takeDamage(enemyFighter.attackPower * 2);
				}
			}
		}
		this.nextActionTime = currentTime + this.actionCooldown + Math.random() * 1000;
	}
};
function checkGameEnd() {
	if (playerFighter.health <= 0) {
		gameState = 'gameOver';
		LK.showGameOver();
		return true;
	}
	if (enemyFighter.health <= 0) {
		gameState = 'victory';
		LK.setScore(LK.getScore() + 100);
		LK.showYouWin();
		return true;
	}
	if (roundTimer <= 0) {
		gameState = 'timeUp';
		if (playerFighter.health > enemyFighter.health) {
			LK.setScore(LK.getScore() + 50);
			LK.showYouWin();
		} else {
			LK.showGameOver();
		}
		return true;
	}
	return false;
}
LK.playMusic('battleMusic');
game.update = function () {
	if (gameState === 'playing') {
		if (LK.ticks % 60 === 0) {
			roundTimer--;
			timerText.setText(roundTimer.toString());
			if (roundTimer <= 10) {
				timerText.tint = 0xe74c3c;
			}
		}
		playerHealthBar.setValue(playerFighter.health);
		enemyHealthBar.setValue(enemyFighter.health);
		playerStaminaBar.setValue(playerFighter.stamina);
		enemyStaminaBar.setValue(enemyFighter.stamina);
		scoreText.setText('Score: ' + LK.getScore());
		enemyAI.update();
		checkGameEnd();
	}
};

===================================================================
--- original.js
+++ change.js
@@ -35,8 +35,58 @@
 		});
 	};
 	return self;
 });
+var CharacterCard = Container.expand(function (characterType, name) {
+	var self = Container.call(this);
+	self.characterType = characterType;
+	self.isSelected = false;
+	var cardBg = self.attachAsset('characterCard', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var character = self.attachAsset(characterType + 'Fighter', {
+		anchorX: 0.5,
+		anchorY: 0.8,
+		y: -20
+	});
+	var nameText = new Text2(name, {
+		size: 30,
+		fill: 0xFFFFFF
+	});
+	nameText.anchor.set(0.5, 0.5);
+	nameText.y = 100;
+	self.addChild(nameText);
+	self.setSelected = function (selected) {
+		self.isSelected = selected;
+		if (selected) {
+			cardBg.tint = 0xf39c12;
+			tween(cardBg, {
+				scaleX: 1.1,
+				scaleY: 1.1
+			}, {
+				duration: 200
+			});
+		} else {
+			cardBg.tint = 0xFFFFFF;
+			tween(cardBg, {
+				scaleX: 1,
+				scaleY: 1
+			}, {
+				duration: 200
+			});
+		}
+	};
+	self.down = function (x, y, obj) {
+		if (gameState === 'characterSelect') {
+			selectedCharacter = self.characterType;
+			for (var i = 0; i < characterCards.length; i++) {
+				characterCards[i].setSelected(characterCards[i] === self);
+			}
+		}
+	};
+	return self;
+});
 var Fighter = Container.expand(function (isPlayer) {
 	var self = Container.call(this);
 	self.isPlayer = isPlayer || false;
 	self.maxHealth = 100;
@@ -47,9 +97,15 @@
 	self.isBlocking = false;
 	self.isAttacking = false;
 	self.canAttack = true;
 	self.staminaRegenRate = 1;
-	var fighterGraphics = self.attachAsset(isPlayer ? 'playerFighter' : 'enemyFighter', {
+	var assetName = 'playerFighter';
+	if (isPlayer && selectedCharacter) {
+		assetName = selectedCharacter + 'Fighter';
+	} else if (!isPlayer) {
+		assetName = 'enemyFighter';
+	}
+	var fighterGraphics = self.attachAsset(assetName, {
 		anchorX: 0.5,
 		anchorY: 1
 	});
 	self.attack = function () {
@@ -205,21 +261,83 @@
 
 /**** 
 * Game Code
 ****/ 
-var gameState = 'playing';
+var gameState = 'menu';
 var roundTimer = 60;
 var roundStartTime = 0;
-var arena = game.addChild(LK.getAsset('arena', {
+var selectedCharacter = 'shark';
+var characterCards = [];
+var menuContainer = game.addChild(new Container());
+var characterSelectContainer = game.addChild(new Container());
+var gameplayContainer = game.addChild(new Container());
+var titleText = new Text2('FURRY FIGHTER ARENA', {
+	size: 80,
+	fill: 0xFFFFFF
+});
+titleText.anchor.set(0.5, 0.5);
+titleText.x = 2048 / 2;
+titleText.y = 600;
+menuContainer.addChild(titleText);
+var startButton = new Button('menuButton', 'START COMBAT');
+startButton.x = 2048 / 2;
+startButton.y = 1200;
+menuContainer.addChild(startButton);
+startButton.down = function (x, y, obj) {
+	if (gameState === 'menu') {
+		gameState = 'characterSelect';
+		menuContainer.visible = false;
+		characterSelectContainer.visible = true;
+	}
+};
+var characterSelectTitle = new Text2('SELECT YOUR FIGHTER', {
+	size: 60,
+	fill: 0xFFFFFF
+});
+characterSelectTitle.anchor.set(0.5, 0.5);
+characterSelectTitle.x = 2048 / 2;
+characterSelectTitle.y = 400;
+characterSelectContainer.addChild(characterSelectTitle);
+var sharkCard = new CharacterCard('shark', 'SHARK');
+sharkCard.x = 2048 / 2 - 300;
+sharkCard.y = 1000;
+characterSelectContainer.addChild(sharkCard);
+characterCards.push(sharkCard);
+var lizardCard = new CharacterCard('lizard', 'LIZARD');
+lizardCard.x = 2048 / 2;
+lizardCard.y = 1000;
+characterSelectContainer.addChild(lizardCard);
+characterCards.push(lizardCard);
+var wolfCard = new CharacterCard('wolf', 'WOLF');
+wolfCard.x = 2048 / 2 + 300;
+wolfCard.y = 1000;
+characterSelectContainer.addChild(wolfCard);
+characterCards.push(wolfCard);
+sharkCard.setSelected(true);
+var fightButton = new Button('menuButton', 'FIGHT!');
+fightButton.x = 2048 / 2;
+fightButton.y = 1600;
+characterSelectContainer.addChild(fightButton);
+fightButton.down = function (x, y, obj) {
+	if (gameState === 'characterSelect') {
+		gameState = 'playing';
+		characterSelectContainer.visible = false;
+		gameplayContainer.visible = true;
+		roundTimer = 60;
+	}
+};
+characterSelectContainer.visible = false;
+gameplayContainer.visible = false;
+var arena = gameplayContainer.addChild(LK.getAsset('arena', {
 	anchorX: 0.5,
 	anchorY: 1,
 	x: 2048 / 2,
 	y: 2732 - 200
 }));
-var playerFighter = game.addChild(new Fighter(true));
+var playerFighter = gameplayContainer.addChild(new Fighter(true));
 playerFighter.x = 2048 / 2 - 300;
 playerFighter.y = 2732 - 200;
-var enemyFighter = game.addChild(new Fighter(false));
+var enemyFighter = gameplayContainer.addChild(new Fighter(false));
 enemyFighter.x = 2048 / 2 + 300;
 enemyFighter.y = 2732 - 200;
 var playerHealthBar = new HealthBar(100);
 playerHealthBar.x = 100;
@@ -336,20 +454,21 @@
 	return false;
 }
 LK.playMusic('battleMusic');
 game.update = function () {
-	if (gameState !== 'playing') return;
-	if (LK.ticks % 60 === 0) {
-		roundTimer--;
-		timerText.setText(roundTimer.toString());
-		if (roundTimer <= 10) {
-			timerText.tint = 0xe74c3c;
+	if (gameState === 'playing') {
+		if (LK.ticks % 60 === 0) {
+			roundTimer--;
+			timerText.setText(roundTimer.toString());
+			if (roundTimer <= 10) {
+				timerText.tint = 0xe74c3c;
+			}
 		}
+		playerHealthBar.setValue(playerFighter.health);
+		enemyHealthBar.setValue(enemyFighter.health);
+		playerStaminaBar.setValue(playerFighter.stamina);
+		enemyStaminaBar.setValue(enemyFighter.stamina);
+		scoreText.setText('Score: ' + LK.getScore());
+		enemyAI.update();
+		checkGameEnd();
 	}
-	playerHealthBar.setValue(playerFighter.health);
-	enemyHealthBar.setValue(enemyFighter.health);
-	playerStaminaBar.setValue(playerFighter.stamina);
-	enemyStaminaBar.setValue(enemyFighter.stamina);
-	scoreText.setText('Score: ' + LK.getScore());
-	enemyAI.update();
-	checkGameEnd();
 };
\ No newline at end of file