===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,277 @@
-/****
+/**** 
+* Classes
+****/ 
+// ClearButton class
+var ClearButton = Container.expand(function () {
+	var self = Container.call(this);
+	var btnAsset = self.attachAsset('clear_btn', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	// Add text label
+	var txt = new Text2('Clear', {
+		size: 48,
+		fill: 0x222222
+	});
+	txt.anchor.set(0.5, 0.5);
+	txt.x = 0;
+	txt.y = 0;
+	self.addChild(txt);
+	// Visual feedback
+	self.setPressed = function (pressed) {
+		btnAsset.tint = pressed ? 0xaaaaaa : 0xcccccc;
+	};
+	return self;
+});
+// PaletteColor class: represents a color in the palette
+var PaletteColor = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach the color asset, anchor at 0.5,0.5 (center)
+	var colorId = self.colorId; // will be set after creation
+	var assetId = self.assetId; // will be set after creation
+	var colorAsset = null;
+	// Set color and asset after creation
+	self.setColorAsset = function (assetId, colorId) {
+		self.assetId = assetId;
+		self.colorId = colorId;
+		colorAsset = self.attachAsset(assetId, {
+			anchorX: 0.5,
+			anchorY: 0.5
+		});
+	};
+	// Show selection border
+	self.setSelected = function (selected) {
+		if (selected) {
+			colorAsset.width = 120;
+			colorAsset.height = 120;
+		} else {
+			colorAsset.width = 100;
+			colorAsset.height = 100;
+		}
+	};
+	return self;
+});
+// No plugins needed for MVP
+// Pixel class: represents a single cell in the grid
+var Pixel = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach the pixel asset, anchor at 0,0 (top-left)
+	var pixelAsset = self.attachAsset('pixel', {
+		anchorX: 0,
+		anchorY: 0
+	});
+	// Store color (as 0xRRGGBB)
+	self.color = 0xffffff;
+	// Set color
+	self.setColor = function (newColor) {
+		self.color = newColor;
+		pixelAsset.color = newColor;
+		pixelAsset.tint = newColor;
+	};
+	// For hit detection, store grid position
+	self.gridX = 0;
+	self.gridY = 0;
+	// For drag fill, track if this pixel was already filled in this drag
+	self.lastFillDragId = -1;
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
-});
\ No newline at end of file
+	backgroundColor: 0xf8f8f8
+});
+
+/**** 
+* Game Code
+****/ 
+// Clear button
+// Palette colors: We'll use 10 basic colors for the palette
+// 56x56 so 32*56=1792, fits well in 2048 width with margin
+// 32x32 grid, each cell is a square. We'll use a single shape asset for the pixel, and color it as needed.
+// --- Constants ---
+var GRID_SIZE = 32;
+var PIXEL_SIZE = 56; // 32*56=1792, fits in 2048 with margin
+var GRID_MARGIN = Math.floor((2048 - GRID_SIZE * PIXEL_SIZE) / 2); // Center horizontally
+var GRID_TOP = 220; // Leave space for palette at top
+// Palette colors (assetId, color)
+var PALETTE = [{
+	assetId: 'palette_red',
+	color: 0xff3b30
+}, {
+	assetId: 'palette_orange',
+	color: 0xff9500
+}, {
+	assetId: 'palette_yellow',
+	color: 0xffcc00
+}, {
+	assetId: 'palette_green',
+	color: 0x34c759
+}, {
+	assetId: 'palette_cyan',
+	color: 0x5ac8fa
+}, {
+	assetId: 'palette_blue',
+	color: 0x007aff
+}, {
+	assetId: 'palette_purple',
+	color: 0xaf52de
+}, {
+	assetId: 'palette_brown',
+	color: 0xa2845e
+}, {
+	assetId: 'palette_black',
+	color: 0x222222
+}, {
+	assetId: 'palette_white',
+	color: 0xffffff
+}];
+// --- State ---
+var pixels = []; // 2D array [y][x] of Pixel
+var paletteColors = []; // Array of PaletteColor
+var selectedColor = PALETTE[0].color; // Default: red
+var selectedPaletteIdx = 0;
+var clearBtn = null;
+var dragFilling = false;
+var dragFillId = 0; // Incremented for each drag to avoid double-filling
+var lastDragPixel = null;
+// --- Create grid ---
+for (var y = 0; y < GRID_SIZE; y++) {
+	pixels[y] = [];
+	for (var x = 0; x < GRID_SIZE; x++) {
+		var px = new Pixel();
+		px.x = GRID_MARGIN + x * PIXEL_SIZE;
+		px.y = GRID_TOP + y * PIXEL_SIZE;
+		px.gridX = x;
+		px.gridY = y;
+		px.setColor(0xffffff); // Start as white
+		game.addChild(px);
+		pixels[y][x] = px;
+	}
+}
+// --- Create palette ---
+var paletteY = 90; // Top margin for palette
+var paletteSpacing = 180;
+var paletteStartX = Math.floor((2048 - PALETTE.length * paletteSpacing) / 2) + paletteSpacing / 2;
+for (var i = 0; i < PALETTE.length; i++) {
+	var pal = new PaletteColor();
+	pal.setColorAsset(PALETTE[i].assetId, PALETTE[i].color);
+	pal.x = paletteStartX + i * paletteSpacing;
+	pal.y = paletteY;
+	pal.setSelected(i === selectedPaletteIdx);
+	// Store index for event handler
+	pal.paletteIdx = i;
+	paletteColors.push(pal);
+	game.addChild(pal);
+}
+// --- Create clear button ---
+clearBtn = new ClearButton();
+clearBtn.x = 2048 - 200;
+clearBtn.y = paletteY;
+game.addChild(clearBtn);
+// --- GUI: Title ---
+var titleTxt = new Text2('Pixel Painter 32x32', {
+	size: 80,
+	fill: 0x333333
+});
+titleTxt.anchor.set(0.5, 0);
+LK.gui.top.addChild(titleTxt);
+// --- Helper: get pixel at game coordinates (x, y) ---
+function getPixelAt(x, y) {
+	// Convert to grid coordinates
+	var gx = Math.floor((x - GRID_MARGIN) / PIXEL_SIZE);
+	var gy = Math.floor((y - GRID_TOP) / PIXEL_SIZE);
+	if (gx >= 0 && gx < GRID_SIZE && gy >= 0 && gy < GRID_SIZE) {
+		return pixels[gy][gx];
+	}
+	return null;
+}
+// --- Helper: get palette index at (x, y) ---
+function getPaletteIdxAt(x, y) {
+	for (var i = 0; i < paletteColors.length; i++) {
+		var pal = paletteColors[i];
+		var px = pal.x;
+		var py = pal.y;
+		// Palette color is 100x100, anchor 0.5,0.5
+		if (x >= px - 50 && x <= px + 50 && y >= py - 50 && y <= py + 50) {
+			return i;
+		}
+	}
+	return -1;
+}
+// --- Helper: is clear button at (x, y) ---
+function isClearBtnAt(x, y) {
+	var px = clearBtn.x;
+	var py = clearBtn.y;
+	// Button is 180x100, anchor 0.5,0.5
+	return x >= px - 90 && x <= px + 90 && y >= py - 50 && y <= py + 50;
+}
+// --- Event handlers ---
+game.down = function (x, y, obj) {
+	// Check palette
+	var palIdx = getPaletteIdxAt(x, y);
+	if (palIdx !== -1) {
+		// Select color
+		paletteColors[selectedPaletteIdx].setSelected(false);
+		selectedPaletteIdx = palIdx;
+		selectedColor = PALETTE[palIdx].color;
+		paletteColors[selectedPaletteIdx].setSelected(true);
+		dragFilling = false;
+		return;
+	}
+	// Check clear button
+	if (isClearBtnAt(x, y)) {
+		clearBtn.setPressed(true);
+		dragFilling = false;
+		return;
+	}
+	// Check grid
+	var px = getPixelAt(x, y);
+	if (px) {
+		dragFilling = true;
+		dragFillId++;
+		px.setColor(selectedColor);
+		px.lastFillDragId = dragFillId;
+		lastDragPixel = px;
+		return;
+	}
+	dragFilling = false;
+};
+game.move = function (x, y, obj) {
+	// If dragging to fill
+	if (dragFilling) {
+		var px = getPixelAt(x, y);
+		if (px && px.lastFillDragId !== dragFillId) {
+			px.setColor(selectedColor);
+			px.lastFillDragId = dragFillId;
+			lastDragPixel = px;
+		}
+	}
+};
+game.up = function (x, y, obj) {
+	// If released on clear button, clear grid
+	if (isClearBtnAt(x, y)) {
+		clearBtn.setPressed(false);
+		// Clear all pixels
+		for (var y2 = 0; y2 < GRID_SIZE; y2++) {
+			for (var x2 = 0; x2 < GRID_SIZE; x2++) {
+				pixels[y2][x2].setColor(0xffffff);
+			}
+		}
+		dragFilling = false;
+		return;
+	}
+	dragFilling = false;
+	lastDragPixel = null;
+};
+// --- Visual feedback for clear button ---
+clearBtn.down = function (x, y, obj) {
+	clearBtn.setPressed(true);
+};
+clearBtn.up = function (x, y, obj) {
+	clearBtn.setPressed(false);
+};
+// --- No update loop needed for MVP ---
+// --- Prevent elements in top-left 100x100 (menu area) ---
+/* All elements are placed away from (0,0)-(100,100) */
\ No newline at end of file