/**** 
* 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: 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 = Math.floor(2048 / GRID_SIZE); // Make sure grid fits and is square
var GRID_MARGIN = Math.floor((2048 - GRID_SIZE * PIXEL_SIZE) / 2); // Center horizontally
var GRID_TOP = Math.floor((2048 - GRID_SIZE * PIXEL_SIZE) / 2) + 220; // Center vertically with space for palette at top
// Palette colors (assetId, color)
// Add eraser as a special palette entry at the end (color: null)
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
}, {
	assetId: 'palette_gray',
	color: 0x888888
}, {
	assetId: 'palette_pink',
	color: 0xff2d55
},
// Eraser tool (special entry)
{
	assetId: 'palette_white',
	// visually white, but will be drawn with eraser icon
	color: null // null means eraser
}];
// --- 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;
	}
}
// --- Draw grid lines (semi-transparent black) ---
var gridLineColor = 0x000000;
var gridLineAlpha = 0.18; // semi-transparent
// Vertical lines
for (var gx = 0; gx <= GRID_SIZE; gx++) {
	var line = LK.getAsset('pixel', {
		anchorX: 0,
		anchorY: 0,
		width: 2,
		height: GRID_SIZE * PIXEL_SIZE,
		color: gridLineColor,
		alpha: gridLineAlpha
	});
	line.x = GRID_MARGIN + gx * PIXEL_SIZE - 1;
	line.y = GRID_TOP;
	game.addChild(line);
}
// --- Add a bigger frame below the grid (centered horizontally) ---
var frameBigWidth = 256;
var frameBigHeight = 256;
var frameBigAsset = LK.getAsset('canvas_frame', {
	anchorX: 0.5,
	anchorY: 0,
	width: frameBigWidth,
	height: frameBigHeight
});
frameBigAsset.x = Math.floor(2048 / 2);
frameBigAsset.y = Math.floor(GRID_TOP + GRID_SIZE * PIXEL_SIZE + 32); // 32px below grid
game.addChild(frameBigAsset);
for (var gy = 0; gy <= GRID_SIZE; gy++) {
	var line = LK.getAsset('pixel', {
		anchorX: 0,
		anchorY: 0,
		width: GRID_SIZE * PIXEL_SIZE,
		height: 2,
		color: gridLineColor,
		alpha: gridLineAlpha
	});
	line.x = GRID_MARGIN;
	line.y = GRID_TOP + gy * PIXEL_SIZE - 1;
	game.addChild(line);
}
// --- Create palette ---
var paletteY = 90; // Top margin for palette
var paletteSpacing = 150;
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;
	// If this is the eraser, draw an eraser icon (simple X)
	if (PALETTE[i].color === null) {
		// Draw a simple "X" using two lines (using Text2 for simplicity)
		var eraserTxt = new Text2('🧹', {
			size: 60,
			fill: 0x888888
		});
		eraserTxt.anchor.set(0.5, 0.5);
		eraserTxt.x = 0;
		eraserTxt.y = 0;
		pal.addChild(eraserTxt);
	}
	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 or eraser
		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++;
		if (PALETTE[selectedPaletteIdx].color === null) {
			// Eraser: set to white
			px.setColor(0xffffff);
		} else {
			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) {
			if (PALETTE[selectedPaletteIdx].color === null) {
				// Eraser: set to white
				px.setColor(0xffffff);
			} else {
				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) */

===================================================================
--- original.js
+++ change.js
@@ -179,9 +179,20 @@
 	line.x = GRID_MARGIN + gx * PIXEL_SIZE - 1;
 	line.y = GRID_TOP;
 	game.addChild(line);
 }
-// Horizontal lines
+// --- Add a bigger frame below the grid (centered horizontally) ---
+var frameBigWidth = 256;
+var frameBigHeight = 256;
+var frameBigAsset = LK.getAsset('canvas_frame', {
+	anchorX: 0.5,
+	anchorY: 0,
+	width: frameBigWidth,
+	height: frameBigHeight
+});
+frameBigAsset.x = Math.floor(2048 / 2);
+frameBigAsset.y = Math.floor(GRID_TOP + GRID_SIZE * PIXEL_SIZE + 32); // 32px below grid
+game.addChild(frameBigAsset);
 for (var gy = 0; gy <= GRID_SIZE; gy++) {
 	var line = LK.getAsset('pixel', {
 		anchorX: 0,
 		anchorY: 0,
@@ -193,20 +204,8 @@
 	line.x = GRID_MARGIN;
 	line.y = GRID_TOP + gy * PIXEL_SIZE - 1;
 	game.addChild(line);
 }
-// --- Add a small 16x16 frame below the grid (centered horizontally) ---
-var frame16Width = 64;
-var frame16Height = 64;
-var frame16Asset = LK.getAsset('canvas_frame', {
-	anchorX: 0.5,
-	anchorY: 0,
-	width: frame16Width,
-	height: frame16Height
-});
-frame16Asset.x = Math.floor(2048 / 2);
-frame16Asset.y = Math.floor(GRID_TOP + GRID_SIZE * PIXEL_SIZE + 32); // 32px below grid
-game.addChild(frame16Asset);
 // --- Create palette ---
 var paletteY = 90; // Top margin for palette
 var paletteSpacing = 150;
 var paletteStartX = Math.floor((2048 - PALETTE.length * paletteSpacing) / 2) + paletteSpacing / 2;