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

/**** 
* Classes
****/ 
// InventoryPopup: Shows current resource amounts
var InventoryPopup = Container.expand(function () {
	var self = Container.call(this);
	// Background
	var bg = self.attachAsset('inventoryBg', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Title
	var title = new Text2("Inventory", {
		size: 120,
		fill: "#fff"
	});
	title.anchor.set(0.5, 0);
	title.y = -bg.height / 2 + 60;
	self.addChild(title);
	// Resource rows
	var rowY = -bg.height / 2 + 220;
	var rowSpacing = 180;
	self.resourceTexts = {};
	var resourceList = [{
		type: "cow",
		icon: "cowIcon",
		label: "Cow"
	}, {
		type: "fish",
		icon: "fishIcon",
		label: "Fish"
	}, {
		type: "wheat",
		icon: "wheatIcon",
		label: "Wheat"
	}, {
		type: "ore",
		icon: "oreIcon",
		label: "Ore"
	}, {
		type: "wood",
		icon: "woodIcon",
		label: "Wood"
	}];
	for (var i = 0; i < resourceList.length; i++) {
		var res = resourceList[i];
		// Icon
		var icon = LK.getAsset(res.icon, {
			anchorX: 0.5,
			anchorY: 0.5,
			x: -220,
			y: rowY + i * rowSpacing
		});
		self.addChild(icon);
		// Label
		var label = new Text2(res.label, {
			size: 80,
			fill: "#fff"
		});
		label.anchor.set(0, 0.5);
		label.x = -120;
		label.y = rowY + i * rowSpacing;
		self.addChild(label);
		// Amount
		var amount = new Text2("0", {
			size: 80,
			fill: "#fff"
		});
		amount.anchor.set(1, 0.5);
		amount.x = 320;
		amount.y = rowY + i * rowSpacing;
		self.addChild(amount);
		self.resourceTexts[res.type] = amount;
	}
	// Close button
	var closeBtn = self.attachAsset('closeBtn', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: bg.width / 2 - 80,
		y: -bg.height / 2 + 80
	});
	closeBtn.interactive = true;
	closeBtn.down = function () {
		self.hide();
	};
	// Hide popup
	self.hide = function () {
		if (self.parent) self.parent.removeChild(self);
	};
	// Update resource amounts
	self.updateAmounts = function (amounts) {
		for (var k in self.resourceTexts) {
			if (self.resourceTexts.hasOwnProperty(k)) {
				self.resourceTexts[k].setText(amounts[k] || 0);
			}
		}
	};
	return self;
});
// ResourceButton: A button for collecting a resource with cooldown
var ResourceButton = Container.expand(function () {
	var self = Container.call(this);
	// Properties to be set after creation:
	// self.resourceType (string)
	// self.iconId (string)
	// self.cooldown (ms)
	// self.onCollect (function)
	// State
	self.isCoolingDown = false;
	self.lastCollectTime = 0;
	// Button background
	var bg = self.attachAsset('resourceBtnBg', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Icon
	// NOTE: Do not attach icon here, as iconId is not set yet. It will be attached after construction in Game Code.
	// Attach a placeholder (invisible) so children[1] exists for later replacement.
	var icon = self.attachAsset('cowIcon', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0 // invisible placeholder
	});
	icon.y = 0;
	// Cooldown overlay (semi-transparent)
	// Attach a placeholder (invisible) so children[2] exists for later replacement.
	var cooldownOverlay = self.attachAsset('cooldownOverlay', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0 // invisible placeholder
	});
	// Amount text (shows +1 when collected)
	var plusText = new Text2("+1", {
		size: 80,
		fill: 0xFFFFFF
	});
	plusText.anchor.set(0.5, 0.5);
	plusText.alpha = 0;
	self.addChild(plusText);
	// Cooldown timer text
	var cdText = new Text2("", {
		size: 60,
		fill: 0xFFFFFF
	});
	cdText.anchor.set(0.5, 0.5);
	cdText.y = 110;
	self.addChild(cdText);
	// Button press handler
	self.down = function (x, y, obj) {
		if (self.isCoolingDown) return;
		self.startCooldown();
		if (typeof self.onCollect === "function") self.onCollect();
		// Animate +1
		plusText.alpha = 1;
		plusText.y = -40;
		tween(plusText, {
			y: -120,
			alpha: 0
		}, {
			duration: 700,
			easing: tween.easeOut
		});
	};
	// Start cooldown
	self.startCooldown = function () {
		self.isCoolingDown = true;
		self.lastCollectTime = Date.now();
		cooldownOverlay.alpha = 0.5;
		cdText.visible = true;
	};
	// End cooldown
	self.endCooldown = function () {
		self.isCoolingDown = false;
		cooldownOverlay.alpha = 0;
		cdText.visible = false;
	};
	// Update cooldown overlay and timer
	self.update = function () {
		if (!self.isCoolingDown) return;
		var elapsed = Date.now() - self.lastCollectTime;
		var left = Math.max(0, self.cooldown - elapsed);
		if (left <= 0) {
			self.endCooldown();
		} else {
			// Show seconds left
			cdText.setText(Math.ceil(left / 1000) + "s");
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Resource definitions
var resources = [{
	type: "cow",
	iconId: "cowIcon",
	cooldown: 30000 // 30s
}, {
	type: "fish",
	iconId: "fishIcon",
	cooldown: 30000
}, {
	type: "wheat",
	iconId: "wheatIcon",
	cooldown: 30000
}, {
	type: "ore",
	iconId: "oreIcon",
	cooldown: 30000
}, {
	type: "wood",
	iconId: "woodIcon",
	cooldown: 30000
}];
// Resource amounts (persisted)
var resourceAmounts = {
	cow: storage.cow || 0,
	fish: storage.fish || 0,
	wheat: storage.wheat || 0,
	ore: storage.ore || 0,
	wood: storage.wood || 0
};
// Save resource amounts to storage
function saveResources() {
	storage.cow = resourceAmounts.cow;
	storage.fish = resourceAmounts.fish;
	storage.wheat = resourceAmounts.wheat;
	storage.ore = resourceAmounts.ore;
	storage.wood = resourceAmounts.wood;
}
// Create resource buttons
var resourceButtons = [];
var btnSpacing = 350;
var btnStartY = 900;
var btnX = 2048 / 2;
for (var i = 0; i < resources.length; i++) {
	var res = resources[i];
	var btn = new ResourceButton();
	btn.resourceType = res.type;
	btn.iconId = res.iconId;
	btn.cooldown = res.cooldown;
	btn.x = btnX;
	btn.y = btnStartY + i * btnSpacing;
	btn.onCollect = function (rtype) {
		return function () {
			resourceAmounts[rtype]++;
			saveResources();
		};
	}(res.type);
	// Set up icon and overlay after iconId is set
	if (btn.children.length > 1) {
		btn.removeChild(btn.children[1]); // Remove placeholder icon if exists
	}
	var icon = btn.attachAsset(res.iconId, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	icon.y = 0;
	if (btn.children.length > 1) {
		btn.removeChild(btn.children[1]); // Remove placeholder overlay if exists
	}
	var overlay = btn.attachAsset('cooldownOverlay', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0
	});
	// Add to game
	game.addChild(btn);
	resourceButtons.push(btn);
}
// Inventory popup (created once, shown/hidden)
var inventoryPopup = new InventoryPopup();
inventoryPopup.x = 2048 / 2;
inventoryPopup.y = 2732 / 2;
// Inventory button (vertically middle, right side)
var inventoryBtn = LK.getAsset('inventoryBtn', {
	anchorX: 1,
	anchorY: 0.5,
	x: 2048 - 60,
	y: 2732 / 2
});
inventoryBtn.interactive = true;
inventoryBtn.down = function () {
	// Update inventory amounts before showing
	inventoryPopup.updateAmounts(resourceAmounts);
	if (!inventoryPopup.parent) {
		game.addChild(inventoryPopup);
	}
};
LK.gui.right.addChild(inventoryBtn);
// Game update loop
game.update = function () {
	// Update all resource buttons (for cooldowns)
	for (var i = 0; i < resourceButtons.length; i++) {
		resourceButtons[i].update();
	}
};
// --- Asset Initialization Section ---
// Resource button background
// Cooldown overlay (semi-transparent)
// Inventory popup background
// Inventory button (top right)
// Close button for popup
// Resource icons

===================================================================
--- original.js
+++ change.js
@@ -286,14 +286,14 @@
 // Inventory popup (created once, shown/hidden)
 var inventoryPopup = new InventoryPopup();
 inventoryPopup.x = 2048 / 2;
 inventoryPopup.y = 2732 / 2;
-// Inventory button (top right)
+// Inventory button (vertically middle, right side)
 var inventoryBtn = LK.getAsset('inventoryBtn', {
 	anchorX: 1,
-	anchorY: 0,
+	anchorY: 0.5,
 	x: 2048 - 60,
-	y: 60
+	y: 2732 / 2
 });
 inventoryBtn.interactive = true;
 inventoryBtn.down = function () {
 	// Update inventory amounts before showing
@@ -301,11 +301,9 @@
 	if (!inventoryPopup.parent) {
 		game.addChild(inventoryPopup);
 	}
 };
-LK.gui.topRight.addChild(inventoryBtn);
-// Prevent inventoryBtn from being covered by system UI
-inventoryBtn.y = 120;
+LK.gui.right.addChild(inventoryBtn);
 // Game update loop
 game.update = function () {
 	// Update all resource buttons (for cooldowns)
 	for (var i = 0; i < resourceButtons.length; i++) {