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

/**** 
* Classes
****/ 
var CollectionView = Container.expand(function () {
	var self = Container.call(this);
	var background = LK.getAsset('basicBox', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 4,
		scaleY: 6,
		color: 0x000000
	});
	self.addChild(background);
	var titleText = new Text2('Collection Statistics', {
		size: 80,
		fill: 0xFFFFFF
	});
	titleText.anchor.set(0.5, 0.5);
	titleText.y = -700;
	self.addChild(titleText);
	var closeButton = new Text2('X', {
		size: 100,
		fill: 0xFF0000
	});
	closeButton.anchor.set(0.5, 0.5);
	closeButton.x = 500;
	closeButton.y = -700;
	closeButton.interactive = true;
	closeButton.buttonMode = true;
	self.addChild(closeButton);
	self.setup = function (collectionData) {
		var rarities = ['common', 'uncommon', 'rare', 'epic', 'legendary'];
		var rarityColors = {
			common: 0x808080,
			uncommon: 0x32cd32,
			rare: 0x0000ff,
			epic: 0x8b008b,
			legendary: 0xff8c00
		};
		var rarityCounts = {};
		for (var i = 0; i < rarities.length; i++) {
			rarityCounts[rarities[i]] = 0;
		}
		for (var key in collectionData) {
			var parts = key.split('_');
			if (parts.length === 2) {
				var rarity = parts[1];
				if (rarityCounts[rarity] !== undefined) {
					rarityCounts[rarity] += collectionData[key];
				}
			}
		}
		for (var i = 0; i < rarities.length; i++) {
			var rarity = rarities[i];
			var count = rarityCounts[rarity];
			var textColor = rarity === 'common' ? 0xFFFFFF : rarityColors[rarity];
			var rarityText = new Text2(rarity.toUpperCase() + ': ' + count, {
				size: 60,
				fill: textColor
			});
			rarityText.anchor.set(0.5, 0.5);
			rarityText.y = -400 + i * 120;
			self.addChild(rarityText);
		}
	};
	closeButton.down = function () {
		tween(closeButton, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100
		});
	};
	closeButton.up = function () {
		tween(closeButton, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100
		});
		self.destroy();
	};
	return self;
});
var MysteryBox = Container.expand(function () {
	var self = Container.call(this);
	self.boxType = 'basic';
	self.cost = 0;
	self.isOpening = false;
	self.rarityWeights = {
		basic: {
			common: 70,
			uncommon: 25,
			rare: 4,
			epic: 0.9,
			legendary: 0.1
		},
		silver: {
			common: 50,
			uncommon: 35,
			rare: 10,
			epic: 4,
			legendary: 1
		},
		gold: {
			common: 30,
			uncommon: 40,
			rare: 20,
			epic: 8,
			legendary: 2
		},
		diamond: {
			common: 10,
			uncommon: 30,
			rare: 35,
			epic: 20,
			legendary: 5
		},
		legendary: {
			common: 0,
			uncommon: 20,
			rare: 40,
			epic: 30,
			legendary: 10
		}
	};
	self.itemValues = {
		common: 10,
		uncommon: 25,
		rare: 100,
		epic: 500,
		legendary: 2000
	};
	self.setup = function (type, cost) {
		self.boxType = type;
		self.cost = cost;
		var boxGraphics = self.attachAsset(type + 'Box', {
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.interactive = true;
		self.buttonMode = true;
	};
	self.getRarity = function () {
		var weights = self.rarityWeights[self.boxType];
		var random = Math.random() * 100;
		var cumulative = 0;
		for (var rarity in weights) {
			cumulative += weights[rarity];
			if (random <= cumulative) {
				return rarity;
			}
		}
		return 'common';
	};
	self.open = function () {
		if (self.isOpening) return null;
		self.isOpening = true;
		var rarity = self.getRarity();
		var value = self.itemValues[rarity];
		LK.getSound('boxOpen').play();
		tween(self, {
			scaleX: 1.2,
			scaleY: 1.2
		}, {
			duration: 200,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self, {
					scaleX: 0,
					scaleY: 0
				}, {
					duration: 300,
					easing: tween.easeIn
				});
			}
		});
		return {
			rarity: rarity,
			value: value
		};
	};
	return self;
});
var OpenButton = Container.expand(function () {
	var self = Container.call(this);
	self.cost = 0;
	var buttonGraphics = self.attachAsset('openButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.buttonText = new Text2('OPEN', {
		size: 60,
		fill: 0xFFFFFF
	});
	self.buttonText.anchor.set(0.5, 0.5);
	self.addChild(self.buttonText);
	self.interactive = true;
	self.buttonMode = true;
	self.updateCost = function (cost) {
		self.cost = cost;
		if (cost === 0) {
			self.buttonText.setText('OPEN FREE');
		} else {
			self.buttonText.setText('OPEN - ' + cost);
		}
	};
	self.down = function () {
		tween(self, {
			scaleX: 0.95,
			scaleY: 0.95
		}, {
			duration: 100
		});
	};
	self.up = function () {
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100
		});
	};
	return self;
});
var RewardItem = Container.expand(function () {
	var self = Container.call(this);
	self.setup = function (rarity, value) {
		var itemGraphics = self.attachAsset(rarity + 'Item', {
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.scaleX = 0;
		self.scaleY = 0;
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 500,
			easing: tween.bounceOut
		});
		if (rarity === 'epic' || rarity === 'legendary') {
			LK.getSound('rareFind').play();
			LK.effects.flashScreen(0xFFD700, 500);
		}
		var valueText = new Text2('+' + value, {
			size: 60,
			fill: 0xFFD700
		});
		valueText.anchor.set(0.5, 0.5);
		valueText.y = -150;
		self.addChild(valueText);
		tween(valueText, {
			y: -250,
			alpha: 0
		}, {
			duration: 1500,
			easing: tween.easeOut
		});
	};
	return self;
});

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

/**** 
* Game Code
****/ 
var coins = storage.coins || 100;
var collection = storage.collection || {};
var unlockedBoxes = storage.unlockedBoxes || ['basic'];
var currentBoxIndex = 0;
var boxes = [];
var boxConfigs = [{
	type: 'basic',
	cost: 0
}, {
	type: 'silver',
	cost: 100
}, {
	type: 'gold',
	cost: 500
}, {
	type: 'diamond',
	cost: 2000
}, {
	type: 'legendary',
	cost: 10000
}];
var coinsText = new Text2('Coins: ' + coins, {
	size: 80,
	fill: 0xFFD700
});
coinsText.anchor.set(0.5, 0);
LK.gui.top.addChild(coinsText);
var collectionButton = new Text2('Collection', {
	size: 60,
	fill: 0xFFFFFF
});
collectionButton.anchor.set(1, 0);
collectionButton.x = -20;
collectionButton.interactive = true;
collectionButton.buttonMode = true;
LK.gui.topRight.addChild(collectionButton);
var currentBox = null;
var openButton = new OpenButton();
openButton.x = 1024;
openButton.y = 2200;
game.addChild(openButton);
var prevButton = new Text2('<', {
	size: 120,
	fill: 0xFFFFFF
});
prevButton.anchor.set(0.5, 0.5);
prevButton.x = 200;
prevButton.y = 1366;
prevButton.interactive = true;
prevButton.buttonMode = true;
game.addChild(prevButton);
var nextButton = new Text2('>', {
	size: 120,
	fill: 0xFFFFFF
});
nextButton.anchor.set(0.5, 0.5);
nextButton.x = 1848;
nextButton.y = 1366;
nextButton.interactive = true;
nextButton.buttonMode = true;
game.addChild(nextButton);
var boxNameText = new Text2('', {
	size: 80,
	fill: 0xFFFFFF
});
boxNameText.anchor.set(0.5, 0.5);
boxNameText.x = 1024;
boxNameText.y = 800;
game.addChild(boxNameText);
function updateCoins(amount) {
	coins += amount;
	storage.coins = coins;
	coinsText.setText('Coins: ' + coins);
	LK.getSound('coinCollect').play();
}
function updateCollection(rarity) {
	var key = currentBox.boxType + '_' + rarity;
	if (!collection[key]) {
		collection[key] = 0;
	}
	collection[key]++;
	storage.collection = collection;
	collectionText.setText('Collection: ' + Object.keys(collection).length);
}
function createNewBox() {
	if (currentBox) {
		currentBox.destroy();
	}
	var config = boxConfigs[currentBoxIndex];
	currentBox = new MysteryBox();
	currentBox.setup(config.type, config.cost);
	currentBox.x = 1024;
	currentBox.y = 1366;
	game.addChild(currentBox);
	boxNameText.setText(config.type.toUpperCase() + ' BOX');
	openButton.updateCost(config.cost);
	var isUnlocked = unlockedBoxes.indexOf(config.type) !== -1;
	if (!isUnlocked) {
		currentBox.alpha = 0.3;
		openButton.visible = false;
		boxNameText.setText('LOCKED - Need ' + currentBoxIndex * 1000 + ' coins');
	} else {
		currentBox.alpha = 1;
		openButton.visible = true;
	}
}
function checkUnlocks() {
	for (var i = 0; i < boxConfigs.length; i++) {
		var boxType = boxConfigs[i].type;
		if (unlockedBoxes.indexOf(boxType) === -1) {
			if (coins >= i * 1000) {
				unlockedBoxes.push(boxType);
				storage.unlockedBoxes = unlockedBoxes;
				if (i === currentBoxIndex) {
					createNewBox();
				}
			}
		}
	}
}
prevButton.down = function () {
	tween(prevButton, {
		scaleX: 0.9,
		scaleY: 0.9
	}, {
		duration: 100
	});
};
prevButton.up = function () {
	tween(prevButton, {
		scaleX: 1,
		scaleY: 1
	}, {
		duration: 100
	});
	if (currentBoxIndex > 0) {
		currentBoxIndex--;
		createNewBox();
	}
};
nextButton.down = function () {
	tween(nextButton, {
		scaleX: 0.9,
		scaleY: 0.9
	}, {
		duration: 100
	});
};
nextButton.up = function () {
	tween(nextButton, {
		scaleX: 1,
		scaleY: 1
	}, {
		duration: 100
	});
	if (currentBoxIndex < boxConfigs.length - 1) {
		currentBoxIndex++;
		createNewBox();
	}
};
openButton.down = function () {
	if (openButton.down.__super__) {
		openButton.down.__super__.call(openButton);
	}
};
collectionButton.down = function () {
	tween(collectionButton, {
		scaleX: 0.9,
		scaleY: 0.9
	}, {
		duration: 100
	});
};
collectionButton.up = function () {
	tween(collectionButton, {
		scaleX: 1,
		scaleY: 1
	}, {
		duration: 100
	});
	var collectionView = new CollectionView();
	collectionView.setup(collection);
	collectionView.x = 1024;
	collectionView.y = 1366;
	game.addChild(collectionView);
};
openButton.up = function () {
	if (openButton.up.__super__) {
		openButton.up.__super__.call(openButton);
	}
	if (currentBox && !currentBox.isOpening) {
		var cost = boxConfigs[currentBoxIndex].cost;
		if (coins >= cost) {
			if (cost > 0) {
				updateCoins(-cost);
			}
			var result = currentBox.open();
			if (result) {
				var reward = new RewardItem();
				reward.setup(result.rarity, result.value);
				reward.x = 1024;
				reward.y = 1366;
				game.addChild(reward);
				updateCoins(result.value);
				updateCollection(result.rarity);
				LK.setTimeout(function () {
					createNewBox();
					reward.destroy();
				}, 1000);
			}
		}
	}
};
game.update = function () {
	checkUnlocks();
};
createNewBox();
LK.playMusic('bgmusic');

===================================================================
--- original.js
+++ change.js
@@ -13,9 +13,9 @@
 		anchorX: 0.5,
 		anchorY: 0.5,
 		scaleX: 4,
 		scaleY: 6,
-		color: 0x2a2a2a
+		color: 0x000000
 	});
 	self.addChild(background);
 	var titleText = new Text2('Collection Statistics', {
 		size: 80,
@@ -58,11 +58,12 @@
 		}
 		for (var i = 0; i < rarities.length; i++) {
 			var rarity = rarities[i];
 			var count = rarityCounts[rarity];
+			var textColor = rarity === 'common' ? 0xFFFFFF : rarityColors[rarity];
 			var rarityText = new Text2(rarity.toUpperCase() + ': ' + count, {
 				size: 60,
-				fill: rarityColors[rarity]
+				fill: textColor
 			});
 			rarityText.anchor.set(0.5, 0.5);
 			rarityText.y = -400 + i * 120;
 			self.addChild(rarityText);
@@ -302,16 +303,8 @@
 	fill: 0xFFD700
 });
 coinsText.anchor.set(0.5, 0);
 LK.gui.top.addChild(coinsText);
-var collectionText = new Text2('Collection: ' + Object.keys(collection).length, {
-	size: 60,
-	fill: 0xFFFFFF
-});
-collectionText.anchor.set(0, 0);
-collectionText.x = 20;
-collectionText.y = 100;
-LK.gui.topLeft.addChild(collectionText);
 var collectionButton = new Text2('Collection', {
 	size: 60,
 	fill: 0xFFFFFF
 });