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

/**** 
* Classes
****/ 
// Arena class: handles the ground and background
var Arena = Container.expand(function () {
	var self = Container.call(this);
	// Attach background asset
	self.bg = self.attachAsset('arena_bg', {
		anchorX: 0.5,
		anchorY: 1.0,
		x: 2048 / 2,
		y: 2732
	});
	// Ground Y for fighters
	self.groundY = 2100;
	return self;
});
// Attack class: represents a punch/kick or special move
var Attack = Container.expand(function (isSpecial) {
	var self = Container.call(this);
	self.isSpecial = isSpecial === true;
	self.owner = null;
	self.damage = self.isSpecial ? 35 : 8;
	self.lifetime = self.isSpecial ? 30 : 12;
	self.frame = 0;
	// Attach asset
	self.sprite = self.attachAsset(self.isSpecial ? 'special_attack' : 'attack', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Explosion effect: scale up and fade in, then shrink to normal
	self.sprite.scaleX = self.sprite.scaleY = 0.2;
	self.sprite.alpha = 0.2;
	// Explosion effect: scale up and fade in, then shrink to normal using tween plugin
	tween(self.sprite, {
		scaleX: 1.2,
		scaleY: 1.2,
		alpha: 1
	}, {
		duration: 700,
		onFinish: function onFinish() {
			tween(self.sprite, {
				scaleX: 1,
				scaleY: 1
			}, {
				duration: 700
			});
		}
	});
	// Set owner after creation
	self.setOwner = function (owner) {
		self.owner = owner;
	};
	// Update per frame
	self.update = function () {
		self.frame++;
		if (self.frame > self.lifetime) {
			self.destroy();
		}
	};
	return self;
});
var Fighter = Container.expand(function () {
	var self = Container.call(this);
	// Jump cooldown variables
	self.jumpCooldown = 0; // frames left until next jump allowed
	self.jumpCooldownDuration = 18; // 0.3s at 60fps
	// Attach fighter asset (placeholder box, can be replaced with unique fighter art)
	self.sprite = self.attachAsset('fighter', {
		anchorX: 0.5,
		anchorY: 1.0
	});
	// Fighter properties
	self.maxHealth = 100;
	self.health = 100;
	self.isFacingRight = true;
	self.isJumping = false;
	self.isAttacking = false;
	self.isSpecialReady = true;
	self.specialCooldown = 180; // 3 seconds at 60fps
	self.specialTimer = 0;
	self.moveSpeed = 18;
	self.jumpPower = -38;
	self.gravity = 3.2;
	self.velY = 0;
	self.groundY = 2100; // Default ground Y, will be set by Arena
	// Health bar
	self.healthBar = new Container();
	// Add outline behind healthbar background
	self.healthBarOutline = self.healthBar.addChild(LK.getAsset('healthbar_bg', {
		anchorX: 0,
		anchorY: 0.5,
		width: 308,
		// 4px border on each side (300+8)
		height: 58,
		// 4px border on each side (50+8)
		color: 0xffffff // white outline
	}));
	self.healthBarBg = self.healthBar.addChild(LK.getAsset('healthbar_bg', {
		anchorX: 0,
		anchorY: 0.5
	}));
	self.healthBarFg = self.healthBar.addChild(LK.getAsset('healthbar_fg', {
		anchorX: 0,
		anchorY: 0.5
	}));
	self.healthBar.y = -220;
	self.addChild(self.healthBar);
	// Update health bar
	self.updateHealthBar = function () {
		var ratio = Math.max(0, self.health / self.maxHealth);
		self.healthBarFg.width = 300 * ratio;
	};
	// Take damage
	self.takeDamage = function (amount) {
		// If jumping, do not take damage
		if (self.isJumping) return;
		self.health = Math.max(0, self.health - amount);
		self.updateHealthBar();
	};
	// Attack
	self.attack = function () {
		if (self.isAttacking) return;
		self.isAttacking = true;
		var atk = new Attack(false);
		atk.x = self.x + (self.isFacingRight ? 120 : -120);
		atk.y = self.y - 180;
		atk.setOwner(self);
		self.parent.addChild(atk);
		attacks.push(atk);
		LK.setTimeout(function () {
			self.isAttacking = false;
		}, 300);
	};
	// Special move
	self.special = function () {
		if (!self.isSpecialReady) return;
		self.isSpecialReady = false;
		self.specialTimer = self.specialCooldown;
		var atk = new Attack(true);
		atk.x = self.x + (self.isFacingRight ? 180 : -180);
		atk.y = self.y - 180;
		atk.setOwner(self);
		self.parent.addChild(atk);
		attacks.push(atk);
	};
	// Jump
	self.jump = function () {
		if (self.isJumping) return;
		if (self.jumpCooldown > 0) return;
		self.isJumping = true;
		self.velY = self.jumpPower;
		self.jumpCooldown = self.jumpCooldownDuration;
	};
	// Update per frame
	self.update = function () {
		// Special cooldown
		if (!self.isSpecialReady) {
			self.specialTimer--;
			if (self.specialTimer <= 0) {
				self.isSpecialReady = true;
			}
		}
		// Jump cooldown
		if (self.jumpCooldown > 0) {
			self.jumpCooldown--;
		}
		// Jump physics
		if (self.isJumping) {
			self.y += self.velY;
			self.velY += self.gravity;
			if (self.y >= self.groundY) {
				self.y = self.groundY;
				self.isJumping = false;
				self.velY = 0;
			}
		}
	};
	// Flip sprite
	self.setFacing = function (right) {
		self.isFacingRight = right;
		self.sprite.scaleX = right ? 1 : -1;
	};
	// Initialize health bar
	self.updateHealthBar();
	return self;
});

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

/**** 
* Game Code
****/ 
// --- Arena setup ---
//Note game dimensions are 2048x2732
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
var arena = new Arena();
arena.x = 0;
arena.y = 0;
game.addChild(arena);
// --- Fixed ground platform (visual) ---
var groundHeight = 60;
var groundTileWidth = LK.getAsset('ground', {
	anchorX: 0,
	anchorY: 0
}).width;
var groundY = arena.groundY - 900; // Move ground up by 900px (move it up a bit)
var groundTiles = [];
var numGroundTiles = Math.ceil(2048 / groundTileWidth); // Only enough to fill the screen
for (var i = 0; i < numGroundTiles; i++) {
	var groundTile = LK.getAsset('ground', {
		anchorX: 0,
		anchorY: 0,
		x: i * groundTileWidth,
		y: groundY
	});
	game.addChild(groundTile);
	groundTiles.push(groundTile);
}
// No infinite scrolling, ground is fixed and does not move
// --- Fighters ---
var fighter1 = new Fighter();
var fighter2 = new Fighter();
// Place fighters on opposite sides
fighter1.x = 600;
fighter1.y = arena.groundY;
fighter1.setFacing(true);
fighter2.x = 2048 - 600;
fighter2.y = arena.groundY;
fighter2.setFacing(false);
game.addChild(fighter1);
game.addChild(fighter2);
// --- Health bar GUI ---
// Create a UI background container for timer and number healthbars
var uiBgContainer = new Container();
// Add a background box (wide enough for timer and both number healthbars)
var uiBg = LK.getAsset('healthbar_bg', {
	anchorX: 0.5,
	anchorY: 0,
	width: 1100,
	height: 120,
	color: 0x222222
});
uiBgContainer.addChild(uiBg);
// Position the container at the top center, just below the very top (leave space for platform menu)
uiBgContainer.x = 2048 / 2;
uiBgContainer.y = 10;
LK.gui.top.addChild(uiBgContainer);
// Number healthbars (text)
var healthBar1 = new Text2('100', {
	size: 80,
	fill: 0xFF4444
});
var healthBar2 = new Text2('100', {
	size: 80,
	fill: 0x44AAFF
});
healthBar1.anchor.set(0, 0);
healthBar2.anchor.set(1, 0);
// Move player 1 healthbar to left, player 2 to right, both inside the UI background
healthBar1.x = -420;
healthBar2.x = 420;
healthBar1.y = 20;
healthBar2.y = 20;
uiBgContainer.addChild(healthBar1);
uiBgContainer.addChild(healthBar2);
// Move the box healthbars (fighter healthBar containers) to a more visible, symmetric place below the timer at the top center
// Remove from fighter containers and add to GUI, position symmetrically below timer
fighter1.removeChild(fighter1.healthBar);
fighter2.removeChild(fighter2.healthBar);
// Place both healthbars below the timer, offset horizontally from center
fighter1.healthBar.x = -550;
fighter1.healthBar.y = 170;
fighter2.healthBar.x = 250;
fighter2.healthBar.y = 170;
LK.gui.top.addChild(fighter1.healthBar);
LK.gui.top.addChild(fighter2.healthBar);
// --- Round and timer ---
var round = 1;
var maxRounds = 3;
var wins1 = 0;
var wins2 = 0;
var roundTime = 60 * 30; // 30 seconds at 60fps
var roundTimer = roundTime;
var timerText = new Text2('30', {
	size: 80,
	fill: "#fff"
});
timerText.anchor.set(0.5, 0);
// Place timer in the center of the UI background
timerText.x = 0;
timerText.y = 20;
uiBgContainer.addChild(timerText);
// --- Touch controls (mobile-friendly) ---
var leftPressed = false,
	rightPressed = false,
	atkPressed = false,
	jumpPressed = false,
	spcPressed = false;
// Control buttons (simple rectangles for now)
var btnLeft = LK.getAsset('btn_left', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 200,
	y: 2600
});
var btnRight = LK.getAsset('btn_right', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 500,
	y: 2600
});
var btnAtk = LK.getAsset('btn_atk', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 - 500,
	y: 2600
});
var btnJump = LK.getAsset('btn_jump', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 - 200,
	y: 2600
});
var btnSpc = LK.getAsset('btn_spc', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 - 350,
	y: 2450
});
game.addChild(btnLeft);
game.addChild(btnRight);
game.addChild(btnAtk);
game.addChild(btnJump);
game.addChild(btnSpc);
// Button event helpers
btnLeft.down = function () {
	leftPressed = true;
};
btnLeft.up = function () {
	leftPressed = false;
};
btnRight.down = function () {
	rightPressed = true;
};
btnRight.up = function () {
	rightPressed = false;
};
btnAtk.down = function () {
	atkPressed = true;
};
btnAtk.up = function () {
	atkPressed = false;
};
btnJump.down = function () {
	jumpPressed = true;
};
btnJump.up = function () {
	jumpPressed = false;
};
btnSpc.down = function () {
	spcPressed = true;
};
btnSpc.up = function () {
	spcPressed = false;
};
// --- Attacks array ---
var attacks = [];
// --- Game update loop ---
game.update = function () {
	// --- Timer ---
	if (roundTimer > 0) {
		roundTimer--;
		timerText.setText(Math.ceil(roundTimer / 60));
	}
	// --- Ground is fixed, no update needed ---
	// --- Player 1 controls (left side) ---
	if (leftPressed) {
		fighter1.x = Math.max(120, fighter1.x - fighter1.moveSpeed);
		fighter1.setFacing(false);
	}
	if (rightPressed) {
		fighter1.x = Math.min(2048 - 120, fighter1.x + fighter1.moveSpeed);
		fighter1.setFacing(true);
	}
	if (jumpPressed) {
		fighter1.jump();
	}
	if (atkPressed) {
		fighter1.attack();
	}
	if (spcPressed) {
		fighter1.special();
	}
	// --- AI for fighter2 (simple: move toward player, attack if close) ---
	var dx = fighter1.x - fighter2.x;
	if (Math.abs(dx) > 180) {
		if (dx < 0) {
			fighter2.x -= fighter2.moveSpeed * 0.7;
			fighter2.setFacing(false);
		} else {
			fighter2.x += fighter2.moveSpeed * 0.7;
			fighter2.setFacing(true);
		}
	} else if (!fighter2.isAttacking && Math.random() < 0.04) {
		fighter2.attack();
	}
	if (!fighter2.isJumping && Math.random() < 0.01) {
		fighter2.jump();
	}
	if (fighter2.isSpecialReady && Math.random() < 0.008) {
		fighter2.special();
	}
	// --- Update fighters ---
	fighter1.update();
	fighter2.update();
	// --- Update attacks ---
	for (var i = attacks.length - 1; i >= 0; i--) {
		var atk = attacks[i];
		atk.update();
		// Remove if destroyed
		if (atk.destroyed) {
			attacks.splice(i, 1);
			continue;
		}
		// Set owner if not set
		if (!atk.owner) {
			atk.setOwner(atk.isSpecial ? atk.x < 2048 / 2 ? fighter1 : fighter2 : fighter1);
		}
		// Check collision
		var target = atk.owner === fighter1 ? fighter2 : fighter1;
		if (atk.intersects(target) && !atk.hit) {
			target.takeDamage(atk.damage);
			atk.hit = true;
			atk.destroy();
			// Flash on hit
			LK.effects.flashObject(target, 0xff0000, 200);
			// Show a visible attack effect at the hit location, rotated to match the attack direction
			var hitEffect = LK.getAsset(atk.isSpecial ? 'special_attack' : 'attack', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: target.x,
				y: target.y - 200
			});
			// Rotate the effect to match the direction the attacker is facing
			if (atk.owner && atk.owner.isFacingRight === false) {
				hitEffect.rotation = Math.PI; // Face left
			} else {
				hitEffect.rotation = 0; // Face right (default)
			}
			game.addChild(hitEffect);
			// Animate the effect: scale up and fade out, then destroy
			hitEffect.scaleX = hitEffect.scaleY = 1.2;
			hitEffect.alpha = 1;
			tween(hitEffect, {
				scaleX: 2.0,
				scaleY: 2.0,
				alpha: 0
			}, {
				duration: 350,
				onFinish: function onFinish() {
					if (hitEffect && hitEffect.destroy) hitEffect.destroy();
				}
			});
		}
	}
	// --- Health bar updates ---
	healthBar1.setText(fighter1.health);
	healthBar2.setText(fighter2.health);
	// --- Win/lose/round logic ---
	var roundOver = false;
	var winner = null;
	if (fighter1.health <= 0) {
		wins2++;
		roundOver = true;
		winner = 2;
	} else if (fighter2.health <= 0) {
		wins1++;
		roundOver = true;
		winner = 1;
	} else if (roundTimer <= 0) {
		if (fighter1.health > fighter2.health) {
			wins1++;
			winner = 1;
		} else if (fighter2.health > fighter1.health) {
			wins2++;
			winner = 2;
		} else {
			// Draw, no one gets a win
		}
		roundOver = true;
	}
	if (roundOver) {
		if (wins1 >= 2) {
			LK.showYouWin();
			return;
		} else if (wins2 >= 2) {
			LK.showGameOver();
			return;
		}
		// Next round
		round++;
		roundTimer = roundTime;
		fighter1.health = fighter1.maxHealth;
		fighter2.health = fighter2.maxHealth;
		fighter1.updateHealthBar();
		fighter2.updateHealthBar();
		fighter1.x = 600;
		fighter2.x = 2048 - 600;
		fighter1.setFacing(true);
		fighter2.setFacing(false);
		// Remove all attacks
		for (var j = attacks.length - 1; j >= 0; j--) {
			if (attacks[j].destroy) attacks[j].destroy();
		}
		attacks = [];
	}
};

===================================================================
--- original.js
+++ change.js
@@ -240,8 +240,24 @@
 fighter2.setFacing(false);
 game.addChild(fighter1);
 game.addChild(fighter2);
 // --- Health bar GUI ---
+// Create a UI background container for timer and number healthbars
+var uiBgContainer = new Container();
+// Add a background box (wide enough for timer and both number healthbars)
+var uiBg = LK.getAsset('healthbar_bg', {
+	anchorX: 0.5,
+	anchorY: 0,
+	width: 1100,
+	height: 120,
+	color: 0x222222
+});
+uiBgContainer.addChild(uiBg);
+// Position the container at the top center, just below the very top (leave space for platform menu)
+uiBgContainer.x = 2048 / 2;
+uiBgContainer.y = 10;
+LK.gui.top.addChild(uiBgContainer);
+// Number healthbars (text)
 var healthBar1 = new Text2('100', {
 	size: 80,
 	fill: 0xFF4444
 });
@@ -250,13 +266,15 @@
 	fill: 0x44AAFF
 });
 healthBar1.anchor.set(0, 0);
 healthBar2.anchor.set(1, 0);
-// Move player 1 healthbar to top left, player 2 to top right, but offset both closer to center
-healthBar1.x = 180; // move right from the very edge
-healthBar2.x = -180; // move left from the very edge
-LK.gui.topLeft.addChild(healthBar1);
-LK.gui.topRight.addChild(healthBar2);
+// Move player 1 healthbar to left, player 2 to right, both inside the UI background
+healthBar1.x = -420;
+healthBar2.x = 420;
+healthBar1.y = 20;
+healthBar2.y = 20;
+uiBgContainer.addChild(healthBar1);
+uiBgContainer.addChild(healthBar2);
 // Move the box healthbars (fighter healthBar containers) to a more visible, symmetric place below the timer at the top center
 // Remove from fighter containers and add to GUI, position symmetrically below timer
 fighter1.removeChild(fighter1.healthBar);
 fighter2.removeChild(fighter2.healthBar);
@@ -278,9 +296,12 @@
 	size: 80,
 	fill: "#fff"
 });
 timerText.anchor.set(0.5, 0);
-LK.gui.top.addChild(timerText);
+// Place timer in the center of the UI background
+timerText.x = 0;
+timerText.y = 20;
+uiBgContainer.addChild(timerText);
 // --- Touch controls (mobile-friendly) ---
 var leftPressed = false,
 	rightPressed = false,
 	atkPressed = false,