/**** 
* 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;
		// Define unique special effect colors for each character
		var specialColors = {
			'sprunki1': 0x00FFFF,
			// Jevin - Cyan
			'sprunki2': 0xFF69B4,
			// Sopez - Hot Pink  
			'sprunki3': 0x9370DB,
			// Wenda - Medium Purple
			'sprunki4': 0xFF4500,
			// OREN.EXE - Orange Red
			'sprunki5': 0x708090,
			// Gray - Slate Gray
			'sprunki6': 0xFF1493,
			// Raddy - Deep Pink
			'sprunki7': 0x800080,
			// Black - Purple
			'sprunki8': 0xFFD700,
			// Burger Simon - Gold
			'sprunki9': 0x00CED1,
			// Turk Jevin - Dark Turquoise
			'sprunki10': 0xFFA500,
			// Oren - Orange
			'sprunki11': 0x87CEEB // Sky - Sky Blue
		};
		// Create special effect with character's unique color
		var specialEffect = self.attachAsset('specialEffect', {
			anchorX: 0.5,
			anchorY: 0.5,
			y: -90,
			alpha: 0,
			scaleX: 0,
			scaleY: 0
		});
		specialEffect.tint = specialColors[self.sprunkiId] || 0xFFFF00;
		// Animate special effect
		tween(specialEffect, {
			alpha: 1,
			scaleX: 1.5,
			scaleY: 1.5
		}, {
			duration: 200,
			onFinish: function onFinish() {
				tween(specialEffect, {
					alpha: 0,
					scaleX: 2,
					scaleY: 2
				}, {
					duration: 300,
					onFinish: function onFinish() {
						specialEffect.destroy();
					}
				});
			}
		});
		// 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;
});
var TabButton = Container.expand(function (text, tabType) {
	var self = Container.call(this);
	self.tabType = tabType;
	self.isActive = false;
	// Background
	var background = self.attachAsset('tabButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.background = background;
	// Text
	var buttonText = new Text2(text, {
		size: 40,
		fill: 0xFFFFFF
	});
	buttonText.anchor.set(0.5, 0.5);
	self.addChild(buttonText);
	self.buttonText = buttonText;
	self.setActive = function (active) {
		self.isActive = active;
		if (active) {
			self.background.tint = 0xFFD700; // Gold when active
			self.buttonText.tint = 0x000000; // Black text when active
		} else {
			self.background.tint = 0x444444; // Dark gray when inactive
			self.buttonText.tint = 0xFFFFFF; // White text when inactive
		}
	};
	self.down = function (x, y, obj) {
		if (gameState === 'characterSelection') {
			switchTab(self.tabType);
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Sound effects
// Effect shapes
// Battle arena elements
// Sprunki characters - colorful fighters with unique designs
// Game state management
var gameState = 'characterSelection'; // 'characterSelection', 'battle', 'victory'
var selectedCharacters = [];
var battleCharacters = [];
var currentTurn = 0;
var battleTimer = null;
// Tab system
var currentTab = 'sprunki'; // 'sprunki' or 'monster'
var tabButtons = [];
// Character data
var sprunkiData = [{
	id: 'sprunki1',
	name: 'Jevin',
	health: 120,
	attack: 25,
	speed: 1.2
}, {
	id: 'sprunki2',
	name: 'Sopez',
	health: 100,
	attack: 30,
	speed: 1.5
}, {
	id: 'sprunki3',
	name: 'Wenda',
	health: 110,
	attack: 28,
	speed: 1.3
}, {
	id: 'sprunki4',
	name: 'OREN.EXE',
	health: 90,
	attack: 35,
	speed: 1.8
}, {
	id: 'sprunki5',
	name: 'Gray',
	health: 130,
	attack: 22,
	speed: 1.0
}, {
	id: 'sprunki6',
	name: 'Raddy',
	health: 105,
	attack: 32,
	speed: 1.4
}, {
	id: 'sprunki7',
	name: 'Black',
	health: 95,
	attack: 38,
	speed: 1.6
}, {
	id: 'sprunki8',
	name: 'Burger Simon',
	health: 115,
	attack: 26,
	speed: 1.1
}, {
	id: 'sprunki9',
	name: 'Turk Jevin',
	health: 85,
	attack: 42,
	speed: 2.0
}, {
	id: 'sprunki10',
	name: 'Oren',
	health: 140,
	attack: 20,
	speed: 0.9
}, {
	id: 'sprunki11',
	name: 'Sky',
	health: 125,
	attack: 24,
	speed: 1.2
}];
var monsterData = [{
	id: 'Monster1',
	name: '',
	health: 110,
	attack: 30,
	speed: 1.3
}, {
	id: 'Monster2',
	name: '',
	health: 95,
	attack: 35,
	speed: 1.7
}, {
	id: 'Monster3',
	name: '',
	health: 120,
	attack: 28,
	speed: 1.5
}, {
	id: 'Monster4',
	name: '',
	health: 100,
	attack: 32,
	speed: 1.6
}, {
	id: 'Monster5',
	name: '',
	health: 105,
	attack: 29,
	speed: 1.4
}];
var characterData = sprunkiData;
// 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;
// Create tab buttons
var sprunkiTabButton = new TabButton('Sprunki', 'sprunki');
sprunkiTabButton.x = 400;
sprunkiTabButton.y = 250;
sprunkiTabButton.setActive(true);
game.addChild(sprunkiTabButton);
tabButtons.push(sprunkiTabButton);
var monsterTabButton = new TabButton('Monster', 'monster');
monsterTabButton.x = 750;
monsterTabButton.y = 250;
monsterTabButton.setActive(false);
game.addChild(monsterTabButton);
tabButtons.push(monsterTabButton);
function switchTab(tabType) {
	if (currentTab === tabType) return;
	currentTab = tabType;
	// Update tab button states
	for (var i = 0; i < tabButtons.length; i++) {
		tabButtons[i].setActive(tabButtons[i].tabType === tabType);
	}
	// Update character data
	if (tabType === 'sprunki') {
		characterData = sprunkiData;
	} else {
		characterData = monsterData;
	}
	// Clear existing character selectors
	for (var i = 0; i < characterSelectors.length; i++) {
		characterSelectors[i].destroy();
	}
	characterSelectors = [];
	// Don't reset selections - keep existing selected characters for mixed battles
	// Create new character selection grid
	createCharacterGrid();
	// Update instruction text based on current selection count
	if (selectedCharacters.length === 0) {
		instructionText.setText('Select your first fighter!');
	} else if (selectedCharacters.length === 1) {
		instructionText.setText('Select your second fighter!');
	} else if (selectedCharacters.length === 2) {
		instructionText.setText('Select your third fighter!');
	}
}
function createCharacterGrid() {
	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);
		// Check if this character is already selected from another tab
		for (var j = 0; j < selectedCharacters.length; j++) {
			if (selectedCharacters[j].sprunkiId === data.id) {
				selector.select();
				break;
			}
		}
	}
}
// Character selection grid
var characterSelectors = [];
var gridStartX = 250;
var gridStartY = 400;
var gridSpacing = 350;
// Create character selection grid
createCharacterGrid();
// Battle UI elements (initially hidden)
var battleground = null;
var healthBars = [];
var battleUI = null;
function handleCharacterSelection(selector) {
	if (selectedCharacters.length < 3) {
		// Check if character is already selected
		for (var k = 0; k < selectedCharacters.length; k++) {
			if (selectedCharacters[k].sprunkiId === selector.sprunkiId) {
				return; // Character already selected
			}
		}
		// 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('Select your third fighter!');
		} else if (selectedCharacters.length === 3) {
			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;
	}
	// Hide tab buttons
	for (var i = 0; i < tabButtons.length; i++) {
		tabButtons[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 for 3-character battle
		if (i === 0) {
			battleChar.x = 600;
			battleChar.originalX = 600;
			battleChar.y = 2000;
		} else if (i === 1) {
			battleChar.x = 1448;
			battleChar.originalX = 1448;
			battleChar.y = 2000;
		} else {
			battleChar.x = 1024;
			battleChar.originalX = 1024;
			battleChar.y = 1700; // Above the other two
		}
		game.addChild(battleChar);
		battleCharacters.push(battleChar);
		// Create health bars
		var healthBar = new HealthBar(selector.health);
		if (i === 0) {
			healthBar.x = 100;
		} else if (i === 1) {
			healthBar.x = 824;
		} else {
			healthBar.x = 1548;
		}
		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 !== 3) return;
	var attacker = battleCharacters[currentTurn];
	// Find a random alive defender
	var aliveDefenders = [];
	for (var i = 0; i < battleCharacters.length; i++) {
		if (i !== currentTurn && battleCharacters[i].currentHealth > 0) {
			aliveDefenders.push(i);
		}
	}
	if (aliveDefenders.length === 0 || attacker.currentHealth <= 0) {
		endBattle();
		return;
	}
	var defenderIndex = aliveDefenders[Math.floor(Math.random() * aliveDefenders.length)];
	var defender = battleCharacters[defenderIndex];
	var defenderHealthBar = healthBars[defenderIndex];
	// 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
		var aliveCount = 0;
		for (var i = 0; i < battleCharacters.length; i++) {
			if (battleCharacters[i].currentHealth > 0) {
				aliveCount++;
			}
		}
		if (aliveCount <= 1) {
			LK.setTimeout(function () {
				endBattle();
			}, 500);
		}
	}, 300);
	// Switch to next alive character
	do {
		currentTurn = (currentTurn + 1) % battleCharacters.length;
	} while (battleCharacters[currentTurn].currentHealth <= 0);
}
function endBattle() {
	gameState = 'victory';
	LK.clearInterval(battleTimer);
	// Find winner
	var winner = null;
	for (var i = 0; i < battleCharacters.length; i++) {
		if (battleCharacters[i].currentHealth > 0) {
			winner = battleCharacters[i];
			break;
		}
	}
	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;
	}
	// Show tab buttons
	for (var i = 0; i < tabButtons.length; i++) {
		tabButtons[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
@@ -324,13 +324,13 @@
 
 /**** 
 * Game Code
 ****/ 
-// Game state management
-// Sprunki characters - colorful fighters with unique designs
-// Battle arena elements
-// Effect shapes
 // Sound effects
+// Effect shapes
+// Battle arena elements
+// Sprunki characters - colorful fighters with unique designs
+// Game state management
 var gameState = 'characterSelection'; // 'characterSelection', 'battle', 'victory'
 var selectedCharacters = [];
 var battleCharacters = [];
 var currentTurn = 0;
@@ -429,8 +429,14 @@
 	name: '',
 	health: 100,
 	attack: 32,
 	speed: 1.6
+}, {
+	id: 'Monster5',
+	name: '',
+	health: 105,
+	attack: 29,
+	speed: 1.4
 }];
 var characterData = sprunkiData;
 // UI Elements
 var titleText = new Text2('Sprunki Battle Arena', {