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

/**** 
* Classes
****/ 
// Player character controlled by face
var FaceChar = Container.expand(function () {
	var self = Container.call(this);
	var _char = self.attachAsset('faceChar', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// For possible future effects
	self.flash = function () {
		LK.effects.flashObject(self, 0xffffff, 300);
	};
	return self;
});
// Obstacle class
var Obstacle = Container.expand(function () {
	var self = Container.call(this);
	var obs = self.attachAsset('obstacle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Speed is set on creation
	self.speed = 0;
	self.update = function () {
		self.y += self.speed;
	};
	return self;
});
// Point collectible class
var PointCollectible = Container.expand(function () {
	var self = Container.call(this);
	var pt = self.attachAsset('point', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speed = 0;
	self.update = function () {
		self.y += self.speed;
	};
	return self;
});
// Shop class for purchasing items
var Shop = Container.expand(function () {
	var self = Container.call(this);
	var items = [{
		name: "Speed Boost",
		cost: 10
	}, {
		name: "Extra Life",
		cost: 20
	}, {
		name: "Shield",
		cost: 15
	}];
	var shopText = new Text2("Shop", {
		size: 100,
		fill: 0xFFFFFF
	});
	shopText.anchor.set(0.5, 0);
	self.addChild(shopText);
	shopText.y = -200;
	// Show current persistent points
	var pointsText = new Text2("", {
		size: 70,
		fill: 0xFFFF00
	});
	pointsText.anchor.set(0.5, 0);
	pointsText.y = -100;
	self.addChild(pointsText);
	function updatePointsText() {
		var totalPoints = 0;
		var extraLives = 0;
		var shields = 0;
		if (typeof storage !== "undefined") {
			totalPoints = storage.totalPoints || 0;
			extraLives = typeof storage.extraLives !== "undefined" ? storage.extraLives : 3;
			shields = storage.shields || 0;
		}
		pointsText.setText("Points: " + totalPoints + " | Extra Lives: " + extraLives + " | Shields: " + shields);
		// Also update global scoreTxt if shop is open
		if (typeof scoreTxt !== "undefined") {
			scoreTxt.setText(totalPoints);
		}
	}
	updatePointsText();
	// Add shop items and purchase logic
	items.forEach(function (item, index) {
		var itemText = new Text2(item.name + " - " + item.cost + " points", {
			size: 70,
			fill: 0xFFFFFF
		});
		itemText.anchor.set(0.5, 0);
		itemText.y = index * 100;
		self.addChild(itemText);
		// Enable purchase on tap/click
		itemText.interactive = true;
		itemText.buttonMode = true;
		itemText.down = function (x, y, obj) {
			var totalPoints = 0;
			if (typeof storage !== "undefined") {
				totalPoints = storage.totalPoints || 0;
			}
			if (totalPoints >= item.cost) {
				// Deduct cost and update storage
				totalPoints -= item.cost;
				if (typeof storage !== "undefined") {
					storage.totalPoints = totalPoints;
				}
				updatePointsText();
				// Show feedback (flash)
				LK.effects.flashObject(itemText, 0x00FF00, 400);
				// Apply item effect in game
				if (item.name === "Extra Life") {
					// Give player an extra life (persist for next game)
					if (typeof storage !== "undefined") {
						var extraLives = storage.extraLives || 0;
						storage.extraLives = extraLives + 1;
						if (typeof updateLivesDisplay === "function") updateLivesDisplay(); // Update heart icons UI
						// updatePointsText(); // This is already called after storage.totalPoints update, which also updates lives text in shop
					}
				}
				if (item.name === "Shield") {
					// Give player a shield (persist for next game)
					if (typeof storage !== "undefined") {
						var shields = storage.shields || 0;
						storage.shields = shields + 1;
					}
				}
				// Optionally: disable item after purchase (one-time buy)
				// itemText.alpha = 0.5;
				// itemText.interactive = false;
			} else {
				// Not enough points, flash red
				LK.effects.flashObject(itemText, 0xFF0000, 400);
			}
		};
	});
	return self;
});

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

/**** 
* Game Code
****/ 
// Asset for life display
// --- Shop display ---
// Show shop on demand (e.g. after game over or via button)
function showShop() {
	var shop = new Shop();
	// Center shop based on its size
	shop.x = GAME_W / 2;
	shop.y = GAME_H / 2;
	shop.anchorX = 0.5;
	shop.anchorY = 0.5;
	game.addChild(shop);
	// Bring shop to top (after all gameplay elements)
	if (shop.parent && shop.parent.children) {
		shop.parent.removeChild(shop);
		shop.parent.addChild(shop);
	}
	// Remove shop after 5 seconds
	LK.setTimeout(function () {
		if (shop && shop.parent) shop.destroy();
	}, 5000);
}
// Obstacle: red rectangle
// Character: main player controlled by face
// Game area dimensions
var GAME_W = 2048;
var GAME_H = 2732;
// Player character
var faceChar = new FaceChar();
game.addChild(faceChar);
// Gun asset (dilci) attached to mouth
var gun = LK.getAsset('bullet', {
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 0.5,
	scaleY: 0.5
});
game.addChild(gun);
// Initial position: bottom center, 400px from bottom
faceChar.x = GAME_W / 2;
faceChar.y = GAME_H - 400;
// Arrays for obstacles and points
var obstacles = [];
var points = [];
// Score display
var scoreTxt = new Text2('0', {
	size: 120,
	fill: 0xFFF700
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Lives display elements
var livesContainer = new Container();
LK.gui.topRight.addChild(livesContainer); // Add to top-right GUI area
livesContainer.anchor.set(1, 0); // Anchor the container's top-right point
livesContainer.x = -30; // 30px from the screen's right edge
livesContainer.y = 30; // 30px from the screen's top edge
var heartIcons = []; // Array to keep track of heart icon objects
function updateLivesDisplay() {
	// Clear previously displayed hearts
	heartIcons.forEach(function (icon) {
		if (icon && icon.parent) {
			// Check if icon exists and is attached
			icon.destroy();
		}
	});
	heartIcons = []; // Reset the array
	var currentLives = 0;
	// storage.extraLives is initialized by game logic (e.g., to 3 at game start/reset)
	// before this function is typically called.
	if (typeof storage !== "undefined" && typeof storage.extraLives === "number") {
		currentLives = storage.extraLives;
	}
	// If storage.extraLives were somehow not a number here, 0 hearts would be displayed,
	// accurately reflecting an issue with the life count data, rather than masking it.
	// Optionally cap the number of hearts displayed to avoid UI clutter
	var displayableLives = Math.min(currentLives, 5); // e.g., display max 5 hearts
	for (var i = 0; i < displayableLives; i++) {
		var heart = LK.getAsset('heart_icon', {
			anchorX: 1,
			anchorY: 0.5
		}); // Anchor heart's right-middle
		if (heart) {
			// Position hearts horizontally from right to left within the livesContainer
			// The rightmost heart (i=0) is at x=0 relative to container's (anchored) right edge
			heart.x = -i * (heart.width + 10); // 10px spacing between hearts
			heart.y = heart.height / 2; // Vertically center hearts in the container
			livesContainer.addChild(heart);
			heartIcons.push(heart);
		}
	}
}
// For keeping track of score
// Load score from storage if available (after game over)
var score = 0;
if (typeof storage !== "undefined") {
	// Use lastScore for current run, totalPoints for shop
	var lastScore = storage.lastScore;
	if (typeof lastScore === "number" && !isNaN(lastScore)) {
		score = lastScore;
		LK.setScore(score);
	}
	// Ensure extraLives and shields are defined
	if (typeof storage.extraLives === "undefined" || storage.extraLives === 0) storage.extraLives = 3;
	if (typeof storage.shields === "undefined") storage.shields = 0;
	updateLivesDisplay(); // Initialize hearts display
}
// For obstacle/point spawn timing
var lastObstacleTick = 0;
var lastPointTick = 0;
// For difficulty scaling
var minObstacleInterval = 45; // ticks
var minPointInterval = 60; // ticks
var obstacleSpeed = 12; // px per frame, increases over time
// For collision state
var lastCollided = false;
// For point collection state
var lastPointCollided = {};
// Facekit smoothing
var lastFaceX = faceChar.x;
var lastFaceY = faceChar.y;
// Main update loop
game.update = function () {
	// --- Facekit control ---
	// Use mouthCenter for X/Y, clamp to game area
	var fx = facekit.mouthCenter && typeof facekit.mouthCenter.x === "number" ? facekit.mouthCenter.x : GAME_W / 2;
	var fy = facekit.mouthCenter && typeof facekit.mouthCenter.y === "number" ? facekit.mouthCenter.y : GAME_H - 400;
	// Optionally, if mouth is open, move faster (boost)
	var boost = facekit.mouthOpen ? 1.7 : 1.0;
	// Smooth movement (lerp)
	lastFaceX += (fx - lastFaceX) * 0.25 * boost;
	lastFaceY += (fy - lastFaceY) * 0.25 * boost;
	// Clamp to bounds (keep inside screen)
	var charW = faceChar.width;
	var charH = faceChar.height;
	var minX = charW / 2 + 40;
	var maxX = GAME_W - charW / 2 - 40;
	var minY = charH / 2 + 120;
	var maxY = GAME_H - charH / 2 - 40;
	faceChar.x = Math.max(minX, Math.min(maxX, lastFaceX));
	faceChar.y = Math.max(minY, Math.min(maxY, lastFaceY));
	// --- Gun follows mouth position ---
	if (facekit.mouthCenter && typeof facekit.mouthCenter.x === "number" && typeof facekit.mouthCenter.y === "number") {
		gun.x = Math.max(minX, Math.min(maxX, facekit.mouthCenter.x));
		gun.y = Math.max(minY, Math.min(maxY, facekit.mouthCenter.y));
	} else {
		gun.x = faceChar.x;
		gun.y = faceChar.y;
	}
	// --- Spawn obstacles ---
	if (LK.ticks - lastObstacleTick > minObstacleInterval + Math.floor(Math.random() * 40)) {
		var obs = new Obstacle();
		// Random X, avoid leftmost 100px (menu)
		var obsW = obs.width;
		var obsX = 100 + obsW / 2 + Math.random() * (GAME_W - obsW - 200);
		obs.x = obsX;
		obs.y = -obs.height / 2;
		obs.speed = obstacleSpeed + Math.random() * 3;
		obstacles.push(obs);
		game.addChild(obs);
		lastObstacleTick = LK.ticks;
	}
	// --- Spawn points ---
	if (LK.ticks - lastPointTick > minPointInterval + Math.floor(Math.random() * 60)) {
		var pt = new PointCollectible();
		var ptW = pt.width;
		var ptX = 100 + ptW / 2 + Math.random() * (GAME_W - ptW - 200);
		pt.x = ptX;
		pt.y = -pt.height / 2;
		pt.speed = obstacleSpeed * 0.8 + Math.random() * 2;
		points.push(pt);
		game.addChild(pt);
		lastPointTick = LK.ticks;
	}
	// --- Move obstacles, check collision ---
	var collided = false;
	for (var i = obstacles.length - 1; i >= 0; i--) {
		var o = obstacles[i];
		o.update();
		// Off screen
		if (o.y - o.height / 2 > GAME_H + 100) {
			o.destroy();
			obstacles.splice(i, 1);
			continue;
		}
		// Collision with player
		if (faceChar.intersects(o)) {
			collided = true;
		}
	}
	// --- Move points, check collection ---
	for (var j = points.length - 1; j >= 0; j--) {
		var p = points[j];
		p.update();
		// Off screen
		if (p.y - p.height / 2 > GAME_H + 100) {
			p.destroy();
			points.splice(j, 1);
			continue;
		}
		// Collision with player
		var pointId = p._lkid || p._id || j;
		if (!lastPointCollided[pointId]) {
			if (faceChar.intersects(p)) {
				// Collect point
				score += 1;
				LK.setScore(score);
				scoreTxt.setText(score);
				// Flash effect
				LK.effects.flashObject(p, 0xffffff, 200);
				p.destroy();
				points.splice(j, 1);
				lastPointCollided[pointId] = true;
				continue;
			}
		}
	}
	// --- Collision state transitions ---
	if (!lastCollided && collided) {
		// Check for shield first
		var usedShield = false;
		if (typeof storage !== "undefined" && storage.shields && storage.shields > 0) {
			storage.shields = storage.shields - 1;
			usedShield = true;
			LK.effects.flashScreen(0x00ffff, 600);
			faceChar.flash();
			// Don't trigger game over, just consume shield
		}
		// If no shield, check for extra life
		else if (typeof storage !== "undefined" && storage.extraLives && storage.extraLives > 0) {
			storage.extraLives = storage.extraLives - 1;
			if (typeof updateLivesDisplay === "function") updateLivesDisplay(); // Update hearts display
			LK.effects.flashScreen(0x00ff00, 600);
			faceChar.flash();
			// Don't trigger game over, just consume extra life
		}
		// No shield or extra life, trigger game over
		else {
			LK.effects.flashScreen(0xff0000, 800);
			faceChar.flash();
			LK.showGameOver();
			return;
		}
	}
	lastCollided = collided;
	// --- Difficulty scaling ---
	if (LK.ticks % 300 === 0 && obstacleSpeed < 32) {
		obstacleSpeed += 1.2;
		if (minObstacleInterval > 20) minObstacleInterval -= 2;
		if (minPointInterval > 30) minPointInterval -= 2;
	}
};
// --- Instructions text ---
var instrTxt = new Text2("Move your head & mouth to dodge obstacles!\nOpen mouth for speed boost.\nCollect yellow points!", {
	size: 70,
	fill: 0xFFFFFF
});
instrTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(instrTxt);
instrTxt.y = 160;
instrTxt.x = 0;
// --- Center score text ---
scoreTxt.x = 0;
scoreTxt.y = 20;
// --- Clean up on game over ---
game.on('destroy', function () {
	// Save score to persistent storage before reset
	if (typeof storage !== "undefined") {
		storage.lastScore = score;
		// Only add this run's score to totalPoints if score > 0
		if (score > 0) {
			var totalPoints = storage.totalPoints || 0;
			storage.totalPoints = totalPoints + score;
		}
	}
	obstacles = [];
	points = [];
	lastPointCollided = {};
	lastCollided = false;
	lastFaceX = GAME_W / 2;
	lastFaceY = GAME_H - 400;
	score = 0;
	LK.setScore(0);
	scoreTxt.setText('0');
	// Reset lives to 3 for new game
	if (typeof storage !== "undefined") {
		storage.extraLives = 3;
		if (typeof updateLivesDisplay === "function") updateLivesDisplay(); // Update hearts display
	}
	// Show shop after game over
	showShop();
	// Reset scoreTxt to show 0 for new game
	if (typeof scoreTxt !== "undefined") {
		scoreTxt.setText('0');
	}
});

===================================================================
--- original.js
+++ change.js
@@ -209,8 +209,9 @@
 LK.gui.top.addChild(scoreTxt);
 // Lives display elements
 var livesContainer = new Container();
 LK.gui.topRight.addChild(livesContainer); // Add to top-right GUI area
+livesContainer.anchor.set(1, 0); // Anchor the container's top-right point
 livesContainer.x = -30; // 30px from the screen's right edge
 livesContainer.y = 30; // 30px from the screen's top edge
 var heartIcons = []; // Array to keep track of heart icon objects
 function updateLivesDisplay() {
@@ -222,15 +223,15 @@
 		}
 	});
 	heartIcons = []; // Reset the array
 	var currentLives = 0;
-	if (typeof storage !== "undefined" && typeof storage.extraLives !== "undefined") {
+	// storage.extraLives is initialized by game logic (e.g., to 3 at game start/reset)
+	// before this function is typically called.
+	if (typeof storage !== "undefined" && typeof storage.extraLives === "number") {
 		currentLives = storage.extraLives;
-	} else {
-		// Fallback if storage or extraLives is not yet initialized, default to 3
-		// This path should be rare given the game's initialization logic
-		currentLives = 3;
 	}
+	// If storage.extraLives were somehow not a number here, 0 hearts would be displayed,
+	// accurately reflecting an issue with the life count data, rather than masking it.
 	// Optionally cap the number of hearts displayed to avoid UI clutter
 	var displayableLives = Math.min(currentLives, 5); // e.g., display max 5 hearts
 	for (var i = 0; i < displayableLives; i++) {
 		var heart = LK.getAsset('heart_icon', {