===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,628 @@
-/****
+/**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+var storage = LK.import("@upit/storage.v1", {
+	trophies: 0,
+	purpleCoins: 1000,
+	blueGems: 50,
+	currentArena: 0,
+	ownedCards: {},
+	deck: [],
+	elixir: 5
+});
+
+/**** 
+* Classes
+****/ 
+var Card = Container.expand(function () {
+	var self = Container.call(this);
+	self.cardId = '';
+	self.rarity = 'common';
+	self.level = 1;
+	self.cardPoints = 0;
+	self.cost = 3;
+	self.name = 'Card';
+	var cardGraphics = self.attachAsset('commonCard', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var nameText = new Text2('Card', {
+		size: 24,
+		fill: 0xFFFFFF
+	});
+	nameText.anchor.set(0.5, 0.5);
+	nameText.x = 0;
+	nameText.y = -100;
+	self.addChild(nameText);
+	var levelText = new Text2('Lv 1', {
+		size: 20,
+		fill: 0xFFFFFF
+	});
+	levelText.anchor.set(0.5, 0.5);
+	levelText.x = 0;
+	levelText.y = 80;
+	self.addChild(levelText);
+	var costText = new Text2('3', {
+		size: 32,
+		fill: 0xE91E63
+	});
+	costText.anchor.set(0.5, 0.5);
+	costText.x = -70;
+	costText.y = -110;
+	self.addChild(costText);
+	self.setCard = function (cardId, rarity, level, name, cost) {
+		self.cardId = cardId;
+		self.rarity = rarity;
+		self.level = level;
+		self.name = name;
+		self.cost = cost;
+		// Update graphics based on rarity
+		self.removeChild(cardGraphics);
+		var assetName = rarity + 'Card';
+		cardGraphics = self.attachAsset(assetName, {
+			anchorX: 0.5,
+			anchorY: 0.5
+		});
+		nameText.setText(name);
+		levelText.setText('Lv ' + level);
+		costText.setText(cost.toString());
+	};
+	self.down = function (x, y, obj) {
+		if (gameState === 'deck' && self.cardId !== '') {
+			selectedCard = self;
+			LK.getSound('cardFlip').play();
+		} else if (gameState === 'battle' && currentElixir >= self.cost && self.cardId !== '') {
+			deployCard(self);
+		}
+	};
+	return self;
+});
+var DeckSlot = Container.expand(function () {
+	var self = Container.call(this);
+	var slotGraphics = self.attachAsset('cardSlot', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var plusText = new Text2('+', {
+		size: 60,
+		fill: 0x888888
+	});
+	plusText.anchor.set(0.5, 0.5);
+	plusText.x = 0;
+	plusText.y = 0;
+	self.addChild(plusText);
+	self.card = null;
+	self.slotIndex = 0;
+	self.setCard = function (card) {
+		if (self.card) {
+			self.removeChild(self.card);
+		}
+		self.card = card;
+		if (card) {
+			card.x = 0;
+			card.y = 0;
+			self.addChild(card);
+			plusText.alpha = 0;
+		} else {
+			plusText.alpha = 1;
+		}
+	};
+	self.down = function (x, y, obj) {
+		if (gameState === 'deck' && selectedCard) {
+			self.setCard(selectedCard);
+			currentDeck[self.slotIndex] = selectedCard.cardId;
+			selectedCard = null;
+			LK.getSound('cardDrop').play();
+		}
+	};
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
-});
\ No newline at end of file
+	backgroundColor: 0x1a1a2e
+});
+
+/**** 
+* Game Code
+****/ 
+// Game states
+var gameState = 'main'; // 'main', 'deck', 'battle', 'shop'
+var selectedCard = null;
+var currentElixir = 5.0;
+var maxElixir = 10.0;
+var elixirRegenRate = 1.0; // per second
+var lastElixirUpdate = 0;
+// Arena data
+var arenas = [{
+	name: 'Training Camp',
+	trophiesRequired: 0,
+	color: 0x4caf50
+}, {
+	name: 'Goblin Stadium',
+	trophiesRequired: 400,
+	color: 0xff9800
+}, {
+	name: 'Bone Pit',
+	trophiesRequired: 800,
+	color: 0x795548
+}, {
+	name: 'Barbarian Bowl',
+	trophiesRequired: 1100,
+	color: 0xf44336
+}, {
+	name: 'P.E.K.K.A Playhouse',
+	trophiesRequired: 1400,
+	color: 0x9c27b0
+}, {
+	name: 'Spell Valley',
+	trophiesRequired: 1700,
+	color: 0x673ab7
+}, {
+	name: 'Builder Workshop',
+	trophiesRequired: 2000,
+	color: 0x3f51b5
+}, {
+	name: 'Royal Arena',
+	trophiesRequired: 2300,
+	color: 0x2196f3
+}, {
+	name: 'Frozen Peak',
+	trophiesRequired: 2600,
+	color: 0x00bcd4
+}, {
+	name: 'Jungle Arena',
+	trophiesRequired: 2900,
+	color: 0x4caf50
+}, {
+	name: 'Hog Mountain',
+	trophiesRequired: 3200,
+	color: 0x8bc34a
+}, {
+	name: 'Legendary Arena',
+	trophiesRequired: 3500,
+	color: 0xffc107
+}];
+// Sample cards data
+var cardDatabase = {
+	'knight': {
+		name: 'Knight',
+		rarity: 'common',
+		baseCost: 3,
+		baseLevel: 1
+	},
+	'archer': {
+		name: 'Archer',
+		rarity: 'common',
+		baseCost: 3,
+		baseLevel: 1
+	},
+	'giant': {
+		name: 'Giant',
+		rarity: 'special',
+		baseCost: 5,
+		baseLevel: 3
+	},
+	'wizard': {
+		name: 'Wizard',
+		rarity: 'special',
+		baseCost: 5,
+		baseLevel: 3
+	},
+	'prince': {
+		name: 'Prince',
+		rarity: 'epic',
+		baseCost: 5,
+		baseLevel: 6
+	},
+	'pekka': {
+		name: 'P.E.K.K.A',
+		rarity: 'epic',
+		baseCost: 7,
+		baseLevel: 6
+	},
+	'princess': {
+		name: 'Princess',
+		rarity: 'legendary',
+		baseCost: 3,
+		baseLevel: 9
+	},
+	'dragon': {
+		name: 'Dragon',
+		rarity: 'legendary',
+		baseCost: 4,
+		baseLevel: 9
+	}
+};
+// Initialize owned cards if not exist
+if (!storage.ownedCards || Object.keys(storage.ownedCards).length === 0) {
+	storage.ownedCards = {
+		'knight': {
+			level: 1,
+			points: 0
+		},
+		'archer': {
+			level: 1,
+			points: 0
+		},
+		'giant': {
+			level: 3,
+			points: 0
+		},
+		'wizard': {
+			level: 3,
+			points: 0
+		}
+	};
+}
+// Initialize deck if not exist
+if (!storage.deck || storage.deck.length === 0) {
+	storage.deck = ['knight', 'archer', '', '', '', '', '', ''];
+}
+var currentDeck = storage.deck.slice();
+var currentArena = Math.min(getCurrentArena(), arenas.length - 1);
+// UI Elements
+var titleText = new Text2('CEXLA', {
+	size: 80,
+	fill: 0xFFFFFF
+});
+titleText.anchor.set(0.5, 0.5);
+var arenaText = new Text2('', {
+	size: 36,
+	fill: 0xFFFFFF
+});
+arenaText.anchor.set(0.5, 0.5);
+var trophiesText = new Text2('', {
+	size: 24,
+	fill: 0xFFC107
+});
+trophiesText.anchor.set(0.5, 0.5);
+var coinsText = new Text2('', {
+	size: 24,
+	fill: 0x9C27B0
+});
+coinsText.anchor.set(0.5, 0.5);
+var gemsText = new Text2('', {
+	size: 24,
+	fill: 0x2196F3
+});
+gemsText.anchor.set(0.5, 0.5);
+// Buttons
+var battleButton = game.addChild(LK.getAsset('battleButton', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+var deckButton = game.addChild(LK.getAsset('deckButton', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+var shopButton = game.addChild(LK.getAsset('shopButton', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+var backButton = game.addChild(LK.getAsset('menuButton', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+// Battle UI
+var elixirBarBg = game.addChild(LK.getAsset('elixirBarBg', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+var elixirBar = game.addChild(LK.getAsset('elixirBar', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+var elixirText = new Text2('5/10', {
+	size: 20,
+	fill: 0xFFFFFF
+});
+elixirText.anchor.set(0.5, 0.5);
+// Deck slots for deck builder
+var deckSlots = [];
+for (var i = 0; i < 8; i++) {
+	var slot = new DeckSlot();
+	slot.slotIndex = i;
+	deckSlots.push(slot);
+	game.addChild(slot);
+}
+// Card collection for deck builder
+var cardCollection = [];
+var cardCollectionContainer = new Container();
+game.addChild(cardCollectionContainer);
+// Battle hand cards
+var handCards = [];
+for (var j = 0; j < 4; j++) {
+	var handCard = new Card();
+	handCards.push(handCard);
+	game.addChild(handCard);
+}
+// Add text elements to GUI
+LK.gui.top.addChild(titleText);
+LK.gui.top.addChild(arenaText);
+LK.gui.top.addChild(trophiesText);
+LK.gui.top.addChild(coinsText);
+LK.gui.top.addChild(gemsText);
+LK.gui.bottom.addChild(elixirText);
+// Button texts
+var battleButtonText = new Text2('BATTLE', {
+	size: 32,
+	fill: 0xFFFFFF
+});
+battleButtonText.anchor.set(0.5, 0.5);
+battleButton.addChild(battleButtonText);
+var deckButtonText = new Text2('DECK', {
+	size: 24,
+	fill: 0xFFFFFF
+});
+deckButtonText.anchor.set(0.5, 0.5);
+deckButton.addChild(deckButtonText);
+var shopButtonText = new Text2('SHOP', {
+	size: 24,
+	fill: 0xFFFFFF
+});
+shopButtonText.anchor.set(0.5, 0.5);
+shopButton.addChild(shopButtonText);
+var backButtonText = new Text2('BACK', {
+	size: 20,
+	fill: 0xFFFFFF
+});
+backButtonText.anchor.set(0.5, 0.5);
+backButton.addChild(backButtonText);
+// Functions
+function getCurrentArena() {
+	var arena = 0;
+	for (var i = arenas.length - 1; i >= 0; i--) {
+		if (storage.trophies >= arenas[i].trophiesRequired) {
+			arena = i;
+			break;
+		}
+	}
+	return arena;
+}
+function updateUI() {
+	currentArena = getCurrentArena();
+	var nextArena = Math.min(currentArena + 1, arenas.length - 1);
+	var progress = 0;
+	if (currentArena < arenas.length - 1) {
+		var currentReq = arenas[currentArena].trophiesRequired;
+		var nextReq = arenas[nextArena].trophiesRequired;
+		progress = Math.floor((storage.trophies - currentReq) / (nextReq - currentReq) * 100);
+	} else {
+		progress = 100;
+	}
+	arenaText.setText(arenas[currentArena].name);
+	trophiesText.setText('🏆 ' + storage.trophies + ' (' + progress + '%)');
+	coinsText.setText('💰 ' + storage.purpleCoins);
+	gemsText.setText('💎 ' + storage.blueGems);
+	elixirText.setText(Math.floor(currentElixir) + '/' + maxElixir);
+}
+function showMainMenu() {
+	gameState = 'main';
+	// Position elements for main menu
+	titleText.x = 0;
+	titleText.y = 100;
+	arenaText.x = 0;
+	arenaText.y = 200;
+	trophiesText.x = 0;
+	trophiesText.y = 250;
+	coinsText.x = -100;
+	coinsText.y = 300;
+	gemsText.x = 100;
+	gemsText.y = 300;
+	battleButton.x = 1024;
+	battleButton.y = 1800;
+	battleButton.alpha = 1;
+	deckButton.x = 700;
+	deckButton.y = 1900;
+	deckButton.alpha = 1;
+	shopButton.x = 1348;
+	shopButton.y = 1900;
+	shopButton.alpha = 1;
+	backButton.alpha = 0;
+	// Hide deck builder elements
+	for (var i = 0; i < deckSlots.length; i++) {
+		deckSlots[i].alpha = 0;
+	}
+	cardCollectionContainer.alpha = 0;
+	// Hide battle elements
+	for (var j = 0; j < handCards.length; j++) {
+		handCards[j].alpha = 0;
+	}
+	elixirBarBg.alpha = 0;
+	elixirBar.alpha = 0;
+	elixirText.alpha = 0;
+}
+function showDeckBuilder() {
+	gameState = 'deck';
+	titleText.alpha = 0;
+	arenaText.alpha = 0;
+	trophiesText.alpha = 0;
+	coinsText.alpha = 0;
+	gemsText.alpha = 0;
+	battleButton.alpha = 0;
+	deckButton.alpha = 0;
+	shopButton.alpha = 0;
+	backButton.x = 1800;
+	backButton.y = 200;
+	backButton.alpha = 1;
+	// Position deck slots
+	for (var i = 0; i < 8; i++) {
+		var col = i % 4;
+		var row = Math.floor(i / 4);
+		deckSlots[i].x = 300 + col * 220;
+		deckSlots[i].y = 400 + row * 320;
+		deckSlots[i].alpha = 1;
+		// Load existing deck card
+		if (currentDeck[i] && cardDatabase[currentDeck[i]]) {
+			var cardData = cardDatabase[currentDeck[i]];
+			var ownedData = storage.ownedCards[currentDeck[i]];
+			if (ownedData) {
+				var deckCard = new Card();
+				deckCard.setCard(currentDeck[i], cardData.rarity, ownedData.level, cardData.name, cardData.baseCost);
+				deckSlots[i].setCard(deckCard);
+			}
+		}
+	}
+	// Setup card collection
+	cardCollectionContainer.alpha = 1;
+	setupCardCollection();
+	// Hide battle elements
+	for (var j = 0; j < handCards.length; j++) {
+		handCards[j].alpha = 0;
+	}
+	elixirBarBg.alpha = 0;
+	elixirBar.alpha = 0;
+	elixirText.alpha = 0;
+}
+function setupCardCollection() {
+	// Clear existing collection
+	while (cardCollectionContainer.children.length > 0) {
+		cardCollectionContainer.removeChild(cardCollectionContainer.children[0]);
+	}
+	cardCollection = [];
+	var cardIndex = 0;
+	for (var cardId in storage.ownedCards) {
+		if (cardDatabase[cardId]) {
+			var cardData = cardDatabase[cardId];
+			var ownedData = storage.ownedCards[cardId];
+			var collectionCard = new Card();
+			collectionCard.setCard(cardId, cardData.rarity, ownedData.level, cardData.name, cardData.baseCost);
+			var col = cardIndex % 8;
+			var row = Math.floor(cardIndex / 8);
+			collectionCard.x = 150 + col * 200;
+			collectionCard.y = 1200 + row * 300;
+			cardCollection.push(collectionCard);
+			cardCollectionContainer.addChild(collectionCard);
+			cardIndex++;
+		}
+	}
+}
+function showBattle() {
+	gameState = 'battle';
+	titleText.alpha = 0;
+	arenaText.alpha = 0;
+	trophiesText.alpha = 0;
+	coinsText.alpha = 0;
+	gemsText.alpha = 0;
+	battleButton.alpha = 0;
+	deckButton.alpha = 0;
+	shopButton.alpha = 0;
+	backButton.x = 1800;
+	backButton.y = 200;
+	backButton.alpha = 1;
+	// Hide deck builder elements
+	for (var i = 0; i < deckSlots.length; i++) {
+		deckSlots[i].alpha = 0;
+	}
+	cardCollectionContainer.alpha = 0;
+	// Show battle elements
+	elixirBarBg.x = 1024;
+	elixirBarBg.y = 2600;
+	elixirBarBg.alpha = 1;
+	elixirBar.x = 1024;
+	elixirBar.y = 2600;
+	elixirBar.alpha = 1;
+	elixirText.x = 0;
+	elixirText.y = -50;
+	elixirText.alpha = 1;
+	// Setup hand cards
+	setupBattleHand();
+	currentElixir = 5.0;
+}
+function setupBattleHand() {
+	var validCards = currentDeck.filter(function (cardId) {
+		return cardId !== '' && cardDatabase[cardId] && storage.ownedCards[cardId];
+	});
+	for (var i = 0; i < 4; i++) {
+		if (validCards.length > i) {
+			var cardId = validCards[i];
+			var cardData = cardDatabase[cardId];
+			var ownedData = storage.ownedCards[cardId];
+			handCards[i].setCard(cardId, cardData.rarity, ownedData.level, cardData.name, cardData.baseCost);
+			handCards[i].x = 400 + i * 220;
+			handCards[i].y = 2400;
+			handCards[i].alpha = 1;
+		} else {
+			handCards[i].alpha = 0;
+		}
+	}
+}
+function deployCard(card) {
+	if (currentElixir >= card.cost) {
+		currentElixir -= card.cost;
+		// Flash the card
+		LK.effects.flashObject(card, 0xffffff, 300);
+		// Rotate hand (simple simulation)
+		var nextCardIndex = Math.floor(Math.random() * currentDeck.filter(function (c) {
+			return c !== '';
+		}).length);
+		var validCards = currentDeck.filter(function (cardId) {
+			return cardId !== '' && cardDatabase[cardId] && storage.ownedCards[cardId];
+		});
+		if (validCards.length > 0) {
+			var newCardId = validCards[nextCardIndex];
+			var cardData = cardDatabase[newCardId];
+			var ownedData = storage.ownedCards[newCardId];
+			card.setCard(newCardId, cardData.rarity, ownedData.level, cardData.name, cardData.baseCost);
+		}
+		LK.getSound('cardDrop').play();
+	}
+}
+// Button handlers
+battleButton.down = function (x, y, obj) {
+	if (gameState === 'main') {
+		LK.getSound('buttonClick').play();
+		showBattle();
+	}
+};
+deckButton.down = function (x, y, obj) {
+	if (gameState === 'main') {
+		LK.getSound('buttonClick').play();
+		showDeckBuilder();
+	}
+};
+shopButton.down = function (x, y, obj) {
+	if (gameState === 'main') {
+		LK.getSound('buttonClick').play();
+		// Shop functionality to be implemented
+	}
+};
+backButton.down = function (x, y, obj) {
+	if (gameState !== 'main') {
+		LK.getSound('buttonClick').play();
+		storage.deck = currentDeck.slice(); // Save deck changes
+		showMainMenu();
+	}
+};
+// Initialize game state
+showMainMenu();
+updateUI();
+// Game update loop
+game.update = function () {
+	updateUI();
+	// Update elixir in battle
+	if (gameState === 'battle') {
+		if (LK.ticks - lastElixirUpdate >= 60) {
+			// 1 second at 60 FPS
+			if (currentElixir < maxElixir) {
+				currentElixir = Math.min(currentElixir + elixirRegenRate, maxElixir);
+			}
+			lastElixirUpdate = LK.ticks;
+		}
+		// Update elixir bar visual
+		var elixirPercent = currentElixir / maxElixir;
+		elixirBar.scaleX = elixirPercent;
+	}
+	// Simple battle simulation - award trophies randomly
+	if (gameState === 'battle' && LK.ticks % 600 === 0) {
+		// Every 10 seconds
+		var trophyGain = Math.floor(Math.random() * 30) + 10;
+		storage.trophies += trophyGain;
+		var coinGain = Math.floor(Math.random() * 50) + 25;
+		storage.purpleCoins += coinGain;
+	}
+};
\ No newline at end of file