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

/**** 
* Classes
****/ 
var CharacterSelector = Container.expand(function (sprunkiId, name, health, attack, speed) {
	var self = Container.call(this);
	self.sprunkiId = sprunkiId;
	self.name = name;
	self.health = health;
	self.attack = attack;
	self.speed = speed;
	self.isSelected = false;
	// Character preview
	var characterPreview = self.attachAsset(sprunkiId, {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.8,
		scaleY: 0.8
	});
	// Selection highlight (initially hidden)
	var highlight = self.attachAsset('selectionHighlight', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0
	});
	self.highlight = highlight;
	// Name text
	var nameText = new Text2(name, {
		size: 40,
		fill: 0xFFFFFF
	});
	nameText.anchor.set(0.5, 0);
	nameText.y = 100;
	self.addChild(nameText);
	self.select = function () {
		self.isSelected = true;
		tween(self.highlight, {
			alpha: 0.8
		}, {
			duration: 300
		});
	};
	self.deselect = function () {
		self.isSelected = false;
		tween(self.highlight, {
			alpha: 0
		}, {
			duration: 300
		});
	};
	self.down = function (x, y, obj) {
		if (gameState === 'characterSelection') {
			handleCharacterSelection(self);
		}
	};
	return self;
});
var HealthBar = Container.expand(function (maxHealth) {
	var self = Container.call(this);
	self.maxHealth = maxHealth;
	self.currentHealth = maxHealth;
	// Background
	var background = self.attachAsset('healthBarBg', {
		anchorX: 0,
		anchorY: 0
	});
	// Health fill
	var healthFill = self.attachAsset('healthBarFill', {
		anchorX: 0,
		anchorY: 0
	});
	self.healthFill = healthFill;
	self.updateHealth = function (newHealth) {
		self.currentHealth = Math.max(0, newHealth);
		var healthPercent = self.currentHealth / self.maxHealth;
		// Update width of health bar
		tween(self.healthFill, {
			scaleX: healthPercent
		}, {
			duration: 300
		});
		// Change color based on health
		if (healthPercent > 0.6) {
			self.healthFill.tint = 0x00FF00; // Green
		} else if (healthPercent > 0.3) {
			self.healthFill.tint = 0xFFFF00; // Yellow
		} else {
			self.healthFill.tint = 0xFF0000; // Red
		}
	};
	return self;
});
var SprunkiCharacter = Container.expand(function (sprunkiId, name, health, attack, speed) {
	var self = Container.call(this);
	// Store character properties
	self.sprunkiId = sprunkiId;
	self.name = name;
	self.maxHealth = health || 100;
	self.currentHealth = self.maxHealth;
	self.attack = attack || 20;
	self.speed = speed || 1;
	self.isAttacking = false;
	self.originalX = 0;
	// Create visual representation
	var characterGraphics = self.attachAsset(sprunkiId, {
		anchorX: 0.5,
		anchorY: 1
	});
	// Add a simple face to make it more character-like
	var face = self.attachAsset('hitEffect', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.3,
		scaleY: 0.3,
		y: -140
	});
	face.tint = 0x000000;
	self.takeDamage = function (damage) {
		self.currentHealth = Math.max(0, self.currentHealth - damage);
		// Flash red when taking damage
		tween(characterGraphics, {
			tint: 0xFF0000
		}, {
			duration: 200,
			onFinish: function onFinish() {
				tween(characterGraphics, {
					tint: 0xFFFFFF
				}, {
					duration: 200
				});
			}
		});
		// Shake effect
		var originalX = self.x;
		tween(self, {
			x: originalX - 10
		}, {
			duration: 50,
			onFinish: function onFinish() {
				tween(self, {
					x: originalX + 10
				}, {
					duration: 50,
					onFinish: function onFinish() {
						tween(self, {
							x: originalX
						}, {
							duration: 50
						});
					}
				});
			}
		});
		LK.getSound('hit').play();
	};
	self.performAttack = function () {
		if (self.isAttacking) return;
		self.isAttacking = true;
		// Attack animation - move forward
		var targetX = self.originalX + (self.originalX < 1024 ? 100 : -100);
		tween(self, {
			x: targetX
		}, {
			duration: 300,
			onFinish: function onFinish() {
				// Return to original position
				tween(self, {
					x: self.originalX
				}, {
					duration: 300,
					onFinish: function onFinish() {
						self.isAttacking = false;
					}
				});
			}
		});
		// Scale effect during attack
		tween(characterGraphics, {
			scaleX: 1.2,
			scaleY: 1.2
		}, {
			duration: 150,
			onFinish: function onFinish() {
				tween(characterGraphics, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 150
				});
			}
		});
	};
	self.playVictoryAnimation = function () {
		// Jump animation
		tween(self, {
			y: self.y - 50
		}, {
			duration: 400,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self, {
					y: self.y + 50
				}, {
					duration: 400,
					easing: tween.easeIn
				});
			}
		});
		// Color flash
		var colors = [0xFF6B6B, 0x4ECDC4, 0x45B7D1, 0xF9CA24];
		var colorIndex = 0;
		var colorTimer = LK.setInterval(function () {
			characterGraphics.tint = colors[colorIndex % colors.length];
			colorIndex++;
		}, 200);
		LK.setTimeout(function () {
			LK.clearInterval(colorTimer);
			characterGraphics.tint = 0xFFFFFF;
		}, 2000);
		LK.getSound('victory').play();
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Game state management
// Sprunki characters - colorful fighters with unique designs
// Battle arena elements
// Effect shapes
// Sound effects
var gameState = 'characterSelection'; // 'characterSelection', 'battle', 'victory'
var selectedCharacters = [];
var battleCharacters = [];
var currentTurn = 0;
var battleTimer = null;
// Character data
var characterData = [{
	id: 'sprunki1',
	name: 'Red Fury',
	health: 120,
	attack: 25,
	speed: 1.2
}, {
	id: 'sprunki2',
	name: 'Aqua Storm',
	health: 100,
	attack: 30,
	speed: 1.5
}, {
	id: 'sprunki3',
	name: 'Blue Thunder',
	health: 110,
	attack: 28,
	speed: 1.3
}, {
	id: 'sprunki4',
	name: 'Golden Flash',
	health: 90,
	attack: 35,
	speed: 1.8
}, {
	id: 'sprunki5',
	name: 'Orange Blaze',
	health: 130,
	attack: 22,
	speed: 1.0
}, {
	id: 'sprunki6',
	name: 'Crimson Strike',
	health: 105,
	attack: 32,
	speed: 1.4
}, {
	id: 'sprunki7',
	name: 'Purple Phantom',
	health: 95,
	attack: 38,
	speed: 1.6
}, {
	id: 'sprunki8',
	name: 'Mystic Violet',
	health: 115,
	attack: 26,
	speed: 1.1
}, {
	id: 'sprunki9',
	name: 'Shadow Hunter',
	health: 85,
	attack: 42,
	speed: 2.0
}, {
	id: 'sprunki10',
	name: 'Emerald Guardian',
	health: 140,
	attack: 20,
	speed: 0.9
}, {
	id: 'sprunki11',
	name: 'Crystal Warrior',
	health: 125,
	attack: 24,
	speed: 1.2
}];
// UI Elements
var titleText = new Text2('Sprunki Battle Arena', {
	size: 80,
	fill: 0xFFD700
});
titleText.anchor.set(0.5, 0);
LK.gui.top.addChild(titleText);
titleText.y = 50;
var instructionText = new Text2('Select your first fighter!', {
	size: 50,
	fill: 0xFFFFFF
});
instructionText.anchor.set(0.5, 0);
LK.gui.top.addChild(instructionText);
instructionText.y = 150;
// Character selection grid
var characterSelectors = [];
var gridStartX = 250;
var gridStartY = 400;
var gridSpacing = 350;
// Create character selection grid
for (var i = 0; i < characterData.length; i++) {
	var data = characterData[i];
	var selector = new CharacterSelector(data.id, data.name, data.health, data.attack, data.speed);
	var col = i % 4;
	var row = Math.floor(i / 4);
	selector.x = gridStartX + col * gridSpacing;
	selector.y = gridStartY + row * 300;
	game.addChild(selector);
	characterSelectors.push(selector);
}
// Battle UI elements (initially hidden)
var battleground = null;
var healthBars = [];
var battleUI = null;
function handleCharacterSelection(selector) {
	if (selectedCharacters.length < 2) {
		// Add to selection
		selectedCharacters.push(selector);
		selector.select();
		if (selectedCharacters.length === 1) {
			instructionText.setText('Select your second fighter!');
		} else if (selectedCharacters.length === 2) {
			instructionText.setText('Battle begins!');
			// Start battle after short delay
			LK.setTimeout(function () {
				startBattle();
			}, 1000);
		}
	}
}
function startBattle() {
	gameState = 'battle';
	// Hide character selection
	for (var i = 0; i < characterSelectors.length; i++) {
		characterSelectors[i].visible = false;
	}
	// Create battleground
	battleground = game.attachAsset('battleground', {
		anchorX: 0.5,
		anchorY: 1,
		x: 1024,
		y: 2000
	});
	// Create battle characters
	for (var i = 0; i < selectedCharacters.length; i++) {
		var selector = selectedCharacters[i];
		var battleChar = new SprunkiCharacter(selector.sprunkiId, selector.name, selector.health, selector.attack, selector.speed);
		// Position characters
		if (i === 0) {
			battleChar.x = 700;
			battleChar.originalX = 700;
		} else {
			battleChar.x = 1348;
			battleChar.originalX = 1348;
		}
		battleChar.y = 2000;
		game.addChild(battleChar);
		battleCharacters.push(battleChar);
		// Create health bars
		var healthBar = new HealthBar(selector.health);
		if (i === 0) {
			healthBar.x = 200;
		} else {
			healthBar.x = 1448;
		}
		healthBar.y = 300;
		LK.gui.addChild(healthBar);
		healthBars.push(healthBar);
	}
	// Update instruction
	instructionText.setText('Fight!');
	// Start battle sequence
	currentTurn = 0;
	battleTimer = LK.setInterval(function () {
		performBattleTurn();
	}, 1500);
}
function performBattleTurn() {
	if (battleCharacters.length !== 2) return;
	var attacker = battleCharacters[currentTurn];
	var defender = battleCharacters[1 - currentTurn];
	var defenderHealthBar = healthBars[1 - currentTurn];
	if (attacker.currentHealth <= 0 || defender.currentHealth <= 0) {
		endBattle();
		return;
	}
	// Perform attack
	attacker.performAttack();
	LK.setTimeout(function () {
		// Calculate damage with some randomness
		var baseDamage = attacker.attack;
		var randomFactor = 0.8 + Math.random() * 0.4; // 80% to 120% of base damage
		var damage = Math.floor(baseDamage * randomFactor);
		// Apply damage
		defender.takeDamage(damage);
		defenderHealthBar.updateHealth(defender.currentHealth);
		// Check for battle end
		if (defender.currentHealth <= 0) {
			LK.setTimeout(function () {
				endBattle();
			}, 500);
		}
	}, 300);
	// Switch turns
	currentTurn = 1 - currentTurn;
}
function endBattle() {
	gameState = 'victory';
	LK.clearInterval(battleTimer);
	// Find winner
	var winner = null;
	if (battleCharacters[0].currentHealth > 0) {
		winner = battleCharacters[0];
	} else if (battleCharacters[1].currentHealth > 0) {
		winner = battleCharacters[1];
	}
	if (winner) {
		winner.playVictoryAnimation();
		instructionText.setText(winner.name + ' Wins!');
		// Add score
		LK.setScore(LK.getScore() + 1);
	} else {
		instructionText.setText('Draw!');
	}
	// Return to character selection after delay
	LK.setTimeout(function () {
		resetGame();
	}, 3000);
}
function resetGame() {
	gameState = 'characterSelection';
	// Clear battle elements
	if (battleground) {
		battleground.destroy();
		battleground = null;
	}
	for (var i = 0; i < battleCharacters.length; i++) {
		battleCharacters[i].destroy();
	}
	battleCharacters = [];
	for (var i = 0; i < healthBars.length; i++) {
		healthBars[i].destroy();
	}
	healthBars = [];
	// Reset selections
	for (var i = 0; i < selectedCharacters.length; i++) {
		selectedCharacters[i].deselect();
	}
	selectedCharacters = [];
	// Show character selectors
	for (var i = 0; i < characterSelectors.length; i++) {
		characterSelectors[i].visible = true;
	}
	// Reset UI
	instructionText.setText('Select your first fighter!');
}
// Update game
game.update = function () {
	// Game logic handled by timers and events
};

===================================================================
--- original.js
+++ change.js
@@ -235,13 +235,13 @@
 
 /**** 
 * Game Code
 ****/ 
-// Sound effects
-// Effect shapes
-// Battle arena elements
-// Sprunki characters - colorful fighters with unique designs
 // Game state management
+// Sprunki characters - colorful fighters with unique designs
+// Battle arena elements
+// Effect shapes
+// Sound effects
 var gameState = 'characterSelection'; // 'characterSelection', 'battle', 'victory'
 var selectedCharacters = [];
 var battleCharacters = [];
 var currentTurn = 0;
@@ -294,8 +294,26 @@
 	name: 'Mystic Violet',
 	health: 115,
 	attack: 26,
 	speed: 1.1
+}, {
+	id: 'sprunki9',
+	name: 'Shadow Hunter',
+	health: 85,
+	attack: 42,
+	speed: 2.0
+}, {
+	id: 'sprunki10',
+	name: 'Emerald Guardian',
+	health: 140,
+	attack: 20,
+	speed: 0.9
+}, {
+	id: 'sprunki11',
+	name: 'Crystal Warrior',
+	health: 125,
+	attack: 24,
+	speed: 1.2
 }];
 // UI Elements
 var titleText = new Text2('Sprunki Battle Arena', {
 	size: 80,
@@ -312,11 +330,11 @@
 LK.gui.top.addChild(instructionText);
 instructionText.y = 150;
 // Character selection grid
 var characterSelectors = [];
-var gridStartX = 300;
+var gridStartX = 250;
 var gridStartY = 400;
-var gridSpacing = 400;
+var gridSpacing = 350;
 // Create character selection grid
 for (var i = 0; i < characterData.length; i++) {
 	var data = characterData[i];
 	var selector = new CharacterSelector(data.id, data.name, data.health, data.attack, data.speed);