===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,308 @@
-/****
+/**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+
+/**** 
+* Classes
+****/ 
+// Palette button class
+var PaletteButton = Container.expand(function () {
+	var self = Container.call(this);
+	self.colorId = null;
+	self.block = self.attachAsset('color_white', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.block.width = paletteCellSize;
+	self.block.height = paletteCellSize;
+	self.setColor = function (colorId) {
+		self.colorId = colorId;
+		self.removeChild(self.block);
+		self.block = self.attachAsset(colorId, {
+			anchorX: 0.5,
+			anchorY: 0.5
+		});
+		self.block.width = paletteCellSize;
+		self.block.height = paletteCellSize;
+	};
+	// Touch event
+	self.down = function (x, y, obj) {
+		selectColor(self.colorId);
+	};
+	return self;
+});
+// Pixel cell class for the drawing grid
+var PixelCell = Container.expand(function () {
+	var self = Container.call(this);
+	self.colorId = null; // Current color id (e.g. 'color_yellow')
+	self.gridX = 0;
+	self.gridY = 0;
+	// The colored block
+	self.block = self.attachAsset('color_white', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.block.width = cellSize;
+	self.block.height = cellSize;
+	// Draws the cell with the given color id
+	self.setColor = function (colorId) {
+		self.colorId = colorId;
+		self.removeChild(self.block);
+		self.block = self.attachAsset(colorId, {
+			anchorX: 0.5,
+			anchorY: 0.5
+		});
+		self.block.width = cellSize;
+		self.block.height = cellSize;
+	};
+	// For checking if the cell is filled with the correct color
+	self.getColorId = function () {
+		return self.colorId;
+	};
+	// Touch event
+	self.down = function (x, y, obj) {
+		if (selectedColorId) {
+			self.setColor(selectedColorId);
+			checkIfComplete();
+		}
+	};
+	return self;
+});
+// Reference cell class (non-interactive, just for showing the reference)
+var ReferenceCell = Container.expand(function () {
+	var self = Container.call(this);
+	self.block = self.attachAsset('color_white', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.block.width = cellSize;
+	self.block.height = cellSize;
+	self.setColor = function (colorId) {
+		self.removeChild(self.block);
+		self.block = self.attachAsset(colorId, {
+			anchorX: 0.5,
+			anchorY: 0.5
+		});
+		self.block.width = cellSize;
+		self.block.height = cellSize;
+	};
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
-});
\ No newline at end of file
+	backgroundColor: 0xE0E0E0
+});
+
+/**** 
+* Game Code
+****/ 
+// Reference image: We'll use a grid of colored blocks as a reference (not an actual image asset, but a grid rendered in-game).
+// Define color palette for SpongeBob pixel art (approximate colors)
+// --- CONFIGURATION ---
+// 12x16 grid for SpongeBob pixel art
+var gridCols = 12;
+var gridRows = 16;
+var cellSize = 90; // px, for main grid
+var paletteCellSize = 80; // px, for palette
+// Center the grid
+var gridStartX = Math.floor((2048 - gridCols * cellSize) / 2);
+var gridStartY = 350;
+// Reference grid (smaller, at top)
+var refCellSize = 40;
+var refGridStartX = Math.floor((2048 - gridCols * refCellSize) / 2);
+var refGridStartY = 120;
+// Palette bar
+var paletteStartY = 2732 - 220;
+// Color palette (order matters for palette bar)
+var colorPalette = ['color_yellow', 'color_white', 'color_black', 'color_brown', 'color_blue', 'color_red', 'color_pink', 'color_green'];
+// Map colorId to color name for display
+var colorNames = {
+	'color_yellow': 'Yellow',
+	'color_white': 'White',
+	'color_black': 'Black',
+	'color_brown': 'Brown',
+	'color_blue': 'Blue',
+	'color_red': 'Red',
+	'color_pink': 'Pink',
+	'color_green': 'Green'
+};
+// The reference pixel art for SpongeBob (12x16 grid, each cell is a colorId)
+var spongebobReference = [
+// Each row is an array of 12 colorIds
+// (This is a simplified, stylized SpongeBob pixel art)
+// 0: yellow, 1: white, 2: black, 3: brown, 4: blue, 5: red, 6: pink, 7: green
+// We'll use colorPalette indices for brevity
+// (You can tweak this for a better likeness)
+[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
+// Now, fill in a stylized SpongeBob (yellow body, white shirt, brown pants, blue eyes, red tie, black outline)
+// We'll use the following mapping for color indices:
+// 0: yellow, 1: white, 2: black, 3: brown, 4: blue, 5: red, 6: pink, 7: green
+// For brevity, here's a simple pixel art (12x16) for SpongeBob
+// (You can improve this later for more detail)
+spongebobReference = [[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 2], [2, 0, 0, 4, 1, 0, 0, 1, 4, 0, 0, 2], [2, 0, 0, 2, 1, 0, 0, 1, 2, 0, 0, 2], [2, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 2], [2, 0, 0, 3, 3, 3, 3, 3, 3, 0, 0, 2], [2, 0, 0, 3, 3, 3, 3, 3, 3, 0, 0, 2], [2, 0, 0, 3, 3, 3, 3, 3, 3, 0, 0, 2], [2, 0, 0, 7, 7, 0, 0, 7, 7, 0, 0, 2], [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]];
+// Convert indices to colorIds for easier comparison
+function getColorIdByIndex(idx) {
+	return colorPalette[idx];
+}
+var spongebobReferenceColorIds = [];
+for (var y = 0; y < gridRows; y++) {
+	var row = [];
+	for (var x = 0; x < gridCols; x++) {
+		row.push(getColorIdByIndex(spongebobReference[y][x]));
+	}
+	spongebobReferenceColorIds.push(row);
+}
+// --- STATE ---
+var gridCells = []; // 2D array of PixelCell
+var selectedColorId = colorPalette[0]; // Default selected color
+var paletteButtons = [];
+var isComplete = false;
+// --- UI ---
+// Title
+var titleText = new Text2('SpongeBob Pixel Art', {
+	size: 90,
+	fill: 0x222222
+});
+titleText.anchor.set(0.5, 0);
+LK.gui.top.addChild(titleText);
+// Instructions
+var instrText = new Text2('Tap a color, then tap the grid to fill. Try to match the reference above!', {
+	size: 48,
+	fill: 0x444444
+});
+instrText.anchor.set(0.5, 0);
+LK.gui.top.addChild(instrText);
+instrText.y = 110;
+// --- REFERENCE GRID ---
+var referenceCells = [];
+for (var y = 0; y < gridRows; y++) {
+	var row = [];
+	for (var x = 0; x < gridCols; x++) {
+		var refCell = new ReferenceCell();
+		refCell.setColor(spongebobReferenceColorIds[y][x]);
+		refCell.x = refGridStartX + x * refCellSize + refCellSize / 2;
+		refCell.y = refGridStartY + y * refCellSize + refCellSize / 2;
+		game.addChild(refCell);
+		row.push(refCell);
+	}
+	referenceCells.push(row);
+}
+// --- MAIN DRAWING GRID ---
+for (var y = 0; y < gridRows; y++) {
+	var row = [];
+	for (var x = 0; x < gridCols; x++) {
+		var cell = new PixelCell();
+		cell.x = gridStartX + x * cellSize + cellSize / 2;
+		cell.y = gridStartY + y * cellSize + cellSize / 2;
+		cell.gridX = x;
+		cell.gridY = y;
+		cell.setColor('color_white');
+		game.addChild(cell);
+		row.push(cell);
+	}
+	gridCells.push(row);
+}
+// --- PALETTE BAR ---
+var paletteBarWidth = colorPalette.length * (paletteCellSize + 24) - 24;
+var paletteBarStartX = Math.floor((2048 - paletteBarWidth) / 2);
+for (var i = 0; i < colorPalette.length; i++) {
+	var colorId = colorPalette[i];
+	var btn = new PaletteButton();
+	btn.setColor(colorId);
+	btn.x = paletteBarStartX + i * (paletteCellSize + 24) + paletteCellSize / 2;
+	btn.y = paletteStartY + paletteCellSize / 2;
+	game.addChild(btn);
+	paletteButtons.push(btn);
+}
+// --- PALETTE SELECTION INDICATOR ---
+var paletteIndicator = LK.getAsset('color_black', {
+	anchorX: 0.5,
+	anchorY: 0.5
+});
+paletteIndicator.width = paletteCellSize + 16;
+paletteIndicator.height = paletteCellSize + 16;
+paletteIndicator.alpha = 0.25;
+game.addChild(paletteIndicator);
+// --- PALETTE SELECTION LOGIC ---
+function selectColor(colorId) {
+	selectedColorId = colorId;
+	// Move indicator to selected button
+	for (var i = 0; i < paletteButtons.length; i++) {
+		if (paletteButtons[i].colorId === colorId) {
+			paletteIndicator.x = paletteButtons[i].x;
+			paletteIndicator.y = paletteButtons[i].y;
+			break;
+		}
+	}
+}
+selectColor(selectedColorId);
+// --- COMPLETION CHECK ---
+function checkIfComplete() {
+	if (isComplete) return;
+	for (var y = 0; y < gridRows; y++) {
+		for (var x = 0; x < gridCols; x++) {
+			if (gridCells[y][x].getColorId() !== spongebobReferenceColorIds[y][x]) {
+				return;
+			}
+		}
+	}
+	// All cells match!
+	isComplete = true;
+	showCompletion();
+}
+// --- COMPLETION UI ---
+function showCompletion() {
+	// Flash green
+	LK.effects.flashScreen(0x7ED957, 800);
+	// Show "You did it!" message
+	var winText = new Text2('You did it!', {
+		size: 120,
+		fill: 0x7ED957
+	});
+	winText.anchor.set(0.5, 0.5);
+	winText.x = 2048 / 2;
+	winText.y = 2732 / 2 - 100;
+	game.addChild(winText);
+	var compareText = new Text2('Your SpongeBob matches the reference!', {
+		size: 60,
+		fill: 0x222222
+	});
+	compareText.anchor.set(0.5, 0.5);
+	compareText.x = 2048 / 2;
+	compareText.y = 2732 / 2 + 40;
+	game.addChild(compareText);
+	// Animate winText
+	tween(winText, {
+		scaleX: 1.2,
+		scaleY: 1.2
+	}, {
+		duration: 400,
+		easing: tween.elasticOut,
+		onFinish: function onFinish() {
+			tween(winText, {
+				scaleX: 1,
+				scaleY: 1
+			}, {
+				duration: 300,
+				easing: tween.easeOut
+			});
+		}
+	});
+}
+// --- GAME UPDATE ---
+game.update = function () {
+	// No per-frame logic needed for this game
+};
+// --- DRAG PREVENTION ---
+// No drag logic needed; all interaction is tap/click
+// --- GUI LAYOUT ---
+// Position title and instructions
+titleText.x = 2048 / 2;
+titleText.y = 20;
+instrText.x = 2048 / 2;
+instrText.y = 120;
+// --- END OF GAME CODE ---
\ No newline at end of file