/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
	savedCharacters: [],
	currentLanguage: "en"
});

/**** 
* Classes
****/ 
var CategorySelector = Container.expand(function () {
	var self = Container.call(this);
	self.categories = [{
		id: 'malay',
		label: {
			en: 'Malay',
			ms: 'Melayu',
			zh: '马来',
			ta: 'மலாய்'
		}
	}, {
		id: 'chinese',
		label: {
			en: 'Chinese',
			ms: 'Cina',
			zh: '华人',
			ta: 'சீன'
		}
	}, {
		id: 'indian',
		label: {
			en: 'Indian',
			ms: 'India',
			zh: '印度',
			ta: 'இந்திய'
		}
	}, {
		id: 'indigenous',
		label: {
			en: 'Indigenous',
			ms: 'Orang Asal',
			zh: '原住民',
			ta: 'பழங்குடி'
		}
	}, {
		id: 'modern',
		label: {
			en: 'Modern',
			ms: 'Moden',
			zh: '现代',
			ta: 'நவீன'
		}
	}];
	self.selectedCategory = 'malay';
	self.buttons = [];
	self.updateLanguage = function (lang) {
		for (var i = 0; i < self.categories.length; i++) {
			var cat = self.categories[i];
			self.buttons[i].setText(cat.label[lang]);
		}
	};
	self.setup = function () {
		var spacing = 200;
		var startX = -((self.categories.length - 1) * spacing) / 2;
		for (var i = 0; i < self.categories.length; i++) {
			var cat = self.categories[i];
			var lang = storage.currentLanguage;
			var btn = new UIButton(cat.label[lang], 180, 60, 0x87CEFA);
			btn.x = startX + i * spacing;
			btn.categoryId = cat.id;
			btn.setCallback(function () {
				var catId = this.categoryId;
				LK.getSound('categoryChange').play();
				self.selectedCategory = catId;
				self.updateButtonStates();
				if (self.onCategoryChange) {
					self.onCategoryChange(catId);
				}
			}.bind(btn));
			self.addChild(btn);
			self.buttons.push(btn);
		}
		self.updateButtonStates();
		return self;
	};
	self.updateButtonStates = function () {
		for (var i = 0; i < self.buttons.length; i++) {
			var btn = self.buttons[i];
			if (btn.categoryId === self.selectedCategory) {
				btn.buttonText.style.fill = "#FFFFFF";
				tween(btn.children[0], {
					tint: 0x4682B4
				}, {
					duration: 200
				});
			} else {
				btn.buttonText.style.fill = "#000000";
				tween(btn.children[0], {
					tint: 0x87CEFA
				}, {
					duration: 200
				});
			}
		}
	};
	self.setChangeCallback = function (callback) {
		self.onCategoryChange = callback;
		return self;
	};
	return self;
});
var Character = Container.expand(function () {
	var self = Container.call(this);
	// Create character base
	var base = self.attachAsset('characterBase', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 1,
		scaleY: 1
	});
	// Layers for different clothing types
	self.layers = {
		base: base,
		bottom: null,
		top: null,
		headdress: null,
		accessory: null
	};
	self.equip = function (item) {
		if (!item) return;
		// Remove previous item in this layer if exists
		if (self.layers[item.type]) {
			self.removeChild(self.layers[item.type]);
		}
		// Add new item and store reference
		self.layers[item.type] = item;
		self.addChild(item);
		// Position according to type
		switch (item.type) {
			case 'top':
				item.y = 50;
				break;
			case 'bottom':
				item.y = 300;
				break;
			case 'headdress':
				item.y = -300;
				break;
			case 'accessory':
				item.y = -100;
				break;
		}
		// Ensure proper layering
		self.sortLayers();
		return self;
	};
	self.sortLayers = function () {
		// Manual sorting to ensure correct layering
		var layerOrder = ['base', 'bottom', 'top', 'accessory', 'headdress'];
		var zIndex = 0;
		layerOrder.forEach(function (layerName) {
			var layer = self.layers[layerName];
			if (layer) {
				// Remove and re-add to ensure proper order
				if (layer.parent === self) {
					self.removeChild(layer);
				}
				self.addChild(layer);
			}
		});
	};
	self.getData = function () {
		var data = {
			items: {}
		};
		// Store item data for each layer
		for (var layerName in self.layers) {
			if (layerName !== 'base' && self.layers[layerName]) {
				data.items[layerName] = {
					name: self.layers[layerName].itemName,
					category: self.layers[layerName].category
				};
			}
		}
		return data;
	};
	self.loadData = function (data) {
		// Clear current items
		for (var layerName in self.layers) {
			if (layerName !== 'base' && self.layers[layerName]) {
				self.removeChild(self.layers[layerName]);
				self.layers[layerName] = null;
			}
		}
		// Load saved items
		if (data && data.items) {
			for (var layerName in data.items) {
				var itemData = data.items[layerName];
				var item = new ClothingItem(layerName, itemData.category, itemData.name);
				self.equip(item);
			}
		}
		return self;
	};
	return self;
});
var ClothingItem = Container.expand(function (type, category, itemName) {
	var self = Container.call(this);
	self.type = type;
	self.category = category;
	self.itemName = itemName;
	var itemGraphics = self.attachAsset(itemName, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.select = function () {
		LK.getSound('itemSelect').play();
		return self;
	};
	self.down = function (x, y, obj) {
		// Handle item selection
		self.select();
	};
	return self;
});
var ItemSelector = Container.expand(function () {
	var self = Container.call(this);
	self.items = {
		malay: {
			top: [{
				name: 'bajuKurung',
				label: {
					en: 'Baju Kurung',
					ms: 'Baju Kurung',
					zh: '马来传统服装',
					ta: 'பாஜு குருங்'
				}
			}],
			headdress: [{
				name: 'songkok',
				label: {
					en: 'Songkok',
					ms: 'Songkok',
					zh: '马来帽子',
					ta: 'சோங்கோக்'
				}
			}]
		},
		chinese: {
			top: [{
				name: 'cheongsam',
				label: {
					en: 'Cheongsam',
					ms: 'Cheongsam',
					zh: '旗袍',
					ta: 'சியோங்சாம்'
				}
			}],
			accessory: [{
				name: 'chineseFan',
				label: {
					en: 'Fan',
					ms: 'Kipas',
					zh: '扇子',
					ta: 'விசிறி'
				}
			}]
		},
		indian: {
			top: [{
				name: 'saree',
				label: {
					en: 'Saree',
					ms: 'Sari',
					zh: '纱丽',
					ta: 'சேலை'
				}
			}],
			accessory: [{
				name: 'bindiForeheadMark',
				label: {
					en: 'Bindi',
					ms: 'Bindi',
					zh: '额头装饰',
					ta: 'பொட்டு'
				}
			}]
		},
		indigenous: {
			top: [{
				name: 'indigenousVest',
				label: {
					en: 'Traditional Vest',
					ms: 'Rompi Tradisional',
					zh: '传统背心',
					ta: 'பாரம்பரிய மேலாடை'
				}
			}],
			headdress: [{
				name: 'headDress',
				label: {
					en: 'Headdress',
					ms: 'Hiasan Kepala',
					zh: '头饰',
					ta: 'தலை அணி'
				}
			}]
		},
		modern: {
			top: [{
				name: 'modernTop',
				label: {
					en: 'Modern Top',
					ms: 'Atasan Moden',
					zh: '现代上衣',
					ta: 'நவீன மேல்'
				}
			}],
			bottom: [{
				name: 'modernBottom',
				label: {
					en: 'Modern Bottom',
					ms: 'Bawahan Moden',
					zh: '现代裤子',
					ta: 'நவீன கீழ்'
				}
			}]
		}
	};
	self.currentCategory = 'malay';
	self.currentType = 'top';
	self.itemButtons = [];
	self.typeButtons = [];
	// Group by type instead of category
	self.getItemsByType = function () {
		var types = {};
		// Get all available types for current category
		for (var type in self.items[self.currentCategory]) {
			types[type] = true;
		}
		return Object.keys(types);
	};
	self.setCategory = function (category) {
		self.currentCategory = category;
		// Determine available types for this category
		var types = self.getItemsByType();
		// Default to first type if current not available
		if (!self.items[category][self.currentType]) {
			self.currentType = types[0];
		}
		self.refreshTypeButtons();
		self.refreshItems();
		return self;
	};
	self.setType = function (type) {
		self.currentType = type;
		self.refreshItems();
		return self;
	};
	self.refreshTypeButtons = function () {
		// Clear existing buttons
		for (var i = 0; i < self.typeButtons.length; i++) {
			self.removeChild(self.typeButtons[i]);
		}
		self.typeButtons = [];
		var types = self.getItemsByType();
		var spacing = 150;
		var startX = -((types.length - 1) * spacing) / 2;
		// Type translation mapping
		var typeLabels = {
			top: {
				en: 'Top',
				ms: 'Atas',
				zh: '上身',
				ta: 'மேல்'
			},
			bottom: {
				en: 'Bottom',
				ms: 'Bawah',
				zh: '下身',
				ta: 'கீழ்'
			},
			headdress: {
				en: 'Headdress',
				ms: 'Hiasan Kepala',
				zh: '头饰',
				ta: 'தலை அணி'
			},
			accessory: {
				en: 'Accessory',
				ms: 'Aksesori',
				zh: '饰品',
				ta: 'அணிகலன்'
			}
		};
		// Create buttons for each available type
		for (var i = 0; i < types.length; i++) {
			var type = types[i];
			var label = typeLabels[type][storage.currentLanguage] || type;
			var btn = new UIButton(label, 150, 50, 0xBBBBBB);
			btn.x = startX + i * spacing;
			btn.y = -80;
			btn.typeName = type;
			btn.setCallback(function () {
				self.setType(this.typeName);
				self.updateTypeButtonStates();
			}.bind(btn));
			self.addChild(btn);
			self.typeButtons.push(btn);
		}
		self.updateTypeButtonStates();
	};
	self.updateTypeButtonStates = function () {
		for (var i = 0; i < self.typeButtons.length; i++) {
			var btn = self.typeButtons[i];
			if (btn.typeName === self.currentType) {
				btn.buttonText.style.fill = "#FFFFFF";
				tween(btn.children[0], {
					tint: 0x555555
				}, {
					duration: 200
				});
			} else {
				btn.buttonText.style.fill = "#000000";
				tween(btn.children[0], {
					tint: 0xBBBBBB
				}, {
					duration: 200
				});
			}
		}
	};
	self.refreshItems = function () {
		// Clear existing item buttons
		for (var i = 0; i < self.itemButtons.length; i++) {
			self.removeChild(self.itemButtons[i]);
		}
		self.itemButtons = [];
		var currentItems = self.items[self.currentCategory][self.currentType] || [];
		var spacing = 170;
		var startX = -((currentItems.length - 1) * spacing) / 2;
		// Create buttons for each item
		for (var i = 0; i < currentItems.length; i++) {
			var item = currentItems[i];
			var label = item.label[storage.currentLanguage] || item.name;
			var itemContainer = new Container();
			// Item preview
			var itemPreview = new ClothingItem(self.currentType, self.currentCategory, item.name);
			itemPreview.scale.set(0.3, 0.3);
			itemContainer.addChild(itemPreview);
			// Item label
			var itemLabel = new Text2(label, {
				size: 24,
				fill: 0x000000
			});
			itemLabel.anchor.set(0.5, 0);
			itemLabel.y = 60;
			itemContainer.addChild(itemLabel);
			// Clickable background
			var bg = LK.getAsset('itemButton', {
				anchorX: 0.5,
				anchorY: 0.5,
				width: 150,
				height: 150
			});
			itemContainer.addChildAt(bg, 0);
			// Position and setup
			itemContainer.x = startX + i * spacing;
			itemContainer.itemName = item.name;
			// Handle selection
			itemContainer.interactive = true;
			itemContainer.down = function (x, y, obj) {
				// Create and return a new ClothingItem when selected
				var itemInstance = new ClothingItem(self.currentType, self.currentCategory, this.itemName);
				if (self.onItemSelected) {
					self.onItemSelected(itemInstance);
				}
				// Visual feedback
				tween(this, {
					scaleX: 0.95,
					scaleY: 0.95
				}, {
					duration: 100,
					easing: tween.easeOut,
					onFinish: function () {
						tween(this, {
							scaleX: 1,
							scaleY: 1
						}, {
							duration: 100,
							easing: tween.easeOut
						});
					}.bind(this)
				});
			}.bind(itemContainer);
			self.addChild(itemContainer);
			self.itemButtons.push(itemContainer);
		}
		return self;
	};
	self.setSelectionCallback = function (callback) {
		self.onItemSelected = callback;
		return self;
	};
	return self;
});
var LanguageSelector = Container.expand(function () {
	var self = Container.call(this);
	self.languages = [{
		code: 'en',
		name: 'English'
	}, {
		code: 'ms',
		name: 'Bahasa Melayu'
	}, {
		code: 'zh',
		name: '中文'
	}, {
		code: 'ta',
		name: 'தமிழ்'
	}];
	self.buttons = [];
	self.setup = function () {
		var spacing = 150;
		var startX = -((self.languages.length - 1) * spacing) / 2;
		for (var i = 0; i < self.languages.length; i++) {
			var lang = self.languages[i];
			var btn = new UIButton(lang.name, 140, 50, 0xDDDDDD);
			btn.x = startX + i * spacing;
			btn.languageCode = lang.code;
			btn.setCallback(function () {
				var langCode = this.languageCode;
				storage.currentLanguage = langCode;
				// Update button states
				self.updateButtonStates();
				// Notify about language change
				if (self.onLanguageChange) {
					self.onLanguageChange(langCode);
				}
			}.bind(btn));
			self.addChild(btn);
			self.buttons.push(btn);
		}
		self.updateButtonStates();
		return self;
	};
	self.updateButtonStates = function () {
		for (var i = 0; i < self.buttons.length; i++) {
			var btn = self.buttons[i];
			if (btn.languageCode === storage.currentLanguage) {
				btn.buttonText.style.fill = "#FFFFFF";
				tween(btn.children[0], {
					tint: 0x4682B4
				}, {
					duration: 200
				});
			} else {
				btn.buttonText.style.fill = "#000000";
				tween(btn.children[0], {
					tint: 0xDDDDDD
				}, {
					duration: 200
				});
			}
		}
	};
	self.setChangeCallback = function (callback) {
		self.onLanguageChange = callback;
		return self;
	};
	return self;
});
var UIButton = Container.expand(function (text, width, height, bgColor) {
	var self = Container.call(this);
	self.width = width || 200;
	self.height = height || 80;
	self.bgColor = bgColor || 0x6495ED;
	var buttonBg = self.attachAsset('button', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: self.width,
		height: self.height,
		tint: self.bgColor
	});
	self.buttonText = new Text2(text, {
		size: 40,
		fill: 0x000000
	});
	self.buttonText.anchor.set(0.5, 0.5);
	self.buttonText.style = {
		fill: 0x000000
	};
	self.addChild(self.buttonText);
	self.setText = function (newText) {
		self.buttonText.setText(newText);
	};
	self.down = function (x, y, obj) {
		// Button pressed effect
		tween(buttonBg, {
			scaleX: 0.95,
			scaleY: 0.95
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function (x, y, obj) {
		// Button release effect
		tween(buttonBg, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		// Trigger callback if set
		if (self.callback) {
			self.callback();
		}
	};
	self.setCallback = function (callback) {
		self.callback = callback;
		return self;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Music
// Sounds
// Modern fusion
// Indigenous traditional
// Indian traditional
// Chinese traditional
// Malay traditional
// Clothing items
// UI elements
// Character base
// Text translations
var translations = {
	title: {
		en: 'Malaysian Mosaic',
		ms: 'Mosek Malaysia',
		zh: '马来西亚镶嵌',
		ta: 'மலேசிய மொசைக்'
	},
	save: {
		en: 'Save',
		ms: 'Simpan',
		zh: '保存',
		ta: 'சேமி'
	},
	reset: {
		en: 'Reset',
		ms: 'Tetapkan Semula',
		zh: '重置',
		ta: 'மீட்டமை'
	}
};
// Create background
var background = LK.getAsset('backgroundBox', {
	anchorX: 0.5,
	anchorY: 0.5
});
background.x = 2048 / 2;
background.y = 2732 / 2;
game.addChild(background);
// Add title to GUI
var titleText = new Text2(translations.title[storage.currentLanguage], {
	size: 80,
	fill: 0x4682B4
});
titleText.anchor.set(0.5, 0);
titleText.y = 20;
LK.gui.top.addChild(titleText);
// Add character
var character = new Character();
character.x = 2048 / 2;
character.y = 2732 / 2;
game.addChild(character);
// Add category selector
var categorySelector = new CategorySelector();
categorySelector.x = 2048 / 2;
categorySelector.y = 2732 - 400;
categorySelector.setup();
game.addChild(categorySelector);
// Add item selector
var itemSelector = new ItemSelector();
itemSelector.x = 2048 / 2;
itemSelector.y = 2732 - 200;
itemSelector.refreshTypeButtons();
itemSelector.refreshItems();
game.addChild(itemSelector);
// Add language selector
var languageSelector = new LanguageSelector();
languageSelector.x = 2048 / 2;
languageSelector.y = 2732 - 80;
languageSelector.setup();
game.addChild(languageSelector);
// Add action buttons
var saveButton = new UIButton(translations.save[storage.currentLanguage], 200, 80, 0x4CAF50);
saveButton.x = 2048 - 300;
saveButton.y = 100;
game.addChild(saveButton);
var resetButton = new UIButton(translations.reset[storage.currentLanguage], 200, 80, 0xF44336);
resetButton.x = 2048 - 300;
resetButton.y = 200;
game.addChild(resetButton);
// Connect components
categorySelector.setChangeCallback(function (category) {
	itemSelector.setCategory(category);
});
itemSelector.setSelectionCallback(function (item) {
	character.equip(item);
});
languageSelector.setChangeCallback(function (language) {
	// Update all UI text
	titleText.setText(translations.title[language]);
	saveButton.setText(translations.save[language]);
	resetButton.setText(translations.reset[language]);
	// Update category and item selectors
	categorySelector.updateLanguage(language);
	itemSelector.refreshTypeButtons();
	itemSelector.refreshItems();
});
// Button actions
saveButton.setCallback(function () {
	var savedCharacters = storage.savedCharacters || [];
	savedCharacters.push(character.getData());
	storage.savedCharacters = savedCharacters;
	LK.getSound('characterSaved').play();
	// Visual feedback
	LK.effects.flashScreen(0x00FF00, 300);
});
resetButton.setCallback(function () {
	// Reset character by clearing all items
	for (var layerName in character.layers) {
		if (layerName !== 'base' && character.layers[layerName]) {
			character.removeChild(character.layers[layerName]);
			character.layers[layerName] = null;
		}
	}
});
// Play background music
LK.playMusic('malaysiaMix');
// Game update function
game.update = function () {
	// Game logic updates would go here if needed
};

===================================================================
--- original.js
+++ change.js
@@ -588,9 +588,11 @@
 		size: 40,
 		fill: 0x000000
 	});
 	self.buttonText.anchor.set(0.5, 0.5);
-	self.buttonText.style = self.buttonText.style || {};
+	self.buttonText.style = {
+		fill: 0x000000
+	};
 	self.addChild(self.buttonText);
 	self.setText = function (newText) {
 		self.buttonText.setText(newText);
 	};