/**** 
* Plugins
****/ 
var storage = LK.import("@upit/storage.v1");

/**** 
* Classes
****/ 
var BrushButton = Container.expand(function (size, asset) {
	var self = Container.call(this);
	var button = self.attachAsset(asset, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.size = size;
	self.down = function () {
		currentBrushSize = self.size;
		updateBrushPreview();
	};
	return self;
});
var ColorButton = Container.expand(function (color) {
	var self = Container.call(this);
	var button = self.attachAsset('colorButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	button.tint = color;
	self.color = color;
	self.down = function () {
		currentColor = self.color;
		updateBrushPreview();
	};
	return self;
});
var GalleryButton = Container.expand(function () {
	var self = Container.call(this);
	var button = self.attachAsset('galleryButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var text = new Text2('Gallery', {
		size: 28,
		fill: 0xFFFFFF
	});
	text.anchor.set(0.5, 0.5);
	self.addChild(text);
	self.down = function () {
		showGallery();
	};
	return self;
});
var PaintDot = Container.expand(function (color, size) {
	var self = Container.call(this);
	var dot = self.attachAsset('paintDot', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: size / 20,
		scaleY: size / 20
	});
	dot.tint = color;
	return self;
});
var PaintingThumbnail = Container.expand(function (paintingData, index) {
	var self = Container.call(this);
	var thumbnail = self.attachAsset('canvas', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.3,
		scaleY: 0.3
	});
	self.paintingData = paintingData;
	self.index = index;
	// Recreate dots on thumbnail
	if (paintingData && paintingData.dots) {
		for (var i = 0; i < paintingData.dots.length; i++) {
			var dotData = paintingData.dots[i];
			var dot = new PaintDot(dotData.color, dotData.size);
			dot.x = dotData.x * 0.3;
			dot.y = dotData.y * 0.3;
			self.addChild(dot);
		}
	}
	self.down = function () {
		loadPainting(self.paintingData);
		hideGallery();
	};
	return self;
});
var ToolButton = Container.expand(function (label, action) {
	var self = Container.call(this);
	var button = self.attachAsset('toolButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var text = new Text2(label, {
		size: 24,
		fill: 0xFFFFFF
	});
	text.anchor.set(0.5, 0.5);
	self.addChild(text);
	self.action = action;
	self.down = function () {
		self.action();
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Initialize storage
if (!storage.paintings) {
	storage.paintings = [];
}
// Game state
var isPainting = false;
var currentColor = 0x000000;
var currentBrushSize = 20;
var paintingMode = true;
var isErasing = false;
var currentPaintingDots = [];
var showingGallery = false;
var lastPaintX = null;
var lastPaintY = null;
// Canvas setup
var canvas = game.addChild(LK.getAsset('canvas', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1024,
	y: 900
}));
// Color palette with more unique colors
var colors = [0x000000,
// Black
0xffffff,
// White
0xff0000,
// Red
0x00ff00,
// Green
0x0000ff,
// Blue
0xffff00,
// Yellow
0xff00ff,
// Magenta
0x00ffff,
// Cyan
0xffa500,
// Orange
0x800080,
// Purple
0x008000,
// Dark Green
0x808080,
// Gray
0x964B00,
// Brown
0xffc0cb,
// Pink
0x800000,
// Maroon
0x008080,
// Teal
0x000080,
// Navy
0x808000 // Olive
];
var colorPalette = [];
var colorsPerRow = 6;
var totalRows = Math.ceil(colors.length / colorsPerRow);
var startX = 1024 - (colorsPerRow - 1) * 140; // Center horizontally
for (var i = 0; i < colors.length; i++) {
	var colorBtn = new ColorButton(colors[i]);
	colorBtn.x = startX + i % colorsPerRow * 280;
	colorBtn.y = 1900 + Math.floor(i / colorsPerRow) * 200;
	colorBtn.scaleX = 3.0;
	colorBtn.scaleY = 3.0;
	game.addChild(colorBtn);
	colorPalette.push(colorBtn);
}
// Brush size buttons
var brushSizes = [{
	size: 15,
	asset: 'brushSmall'
}, {
	size: 30,
	asset: 'brushMedium'
}, {
	size: 45,
	asset: 'brushLarge'
}];
var brushButtons = [];
for (var i = 0; i < brushSizes.length; i++) {
	var brushBtn = new BrushButton(brushSizes[i].size, brushSizes[i].asset);
	brushBtn.x = 1024 + (i - 1) * 250;
	brushBtn.y = 1700;
	brushBtn.scaleX = 3.5;
	brushBtn.scaleY = 3.5;
	game.addChild(brushBtn);
	brushButtons.push(brushBtn);
}
// Individual tool buttons - separated with more spacing
var buttonSpacing = 300;
var totalButtons = 5;
var totalWidth = (totalButtons - 1) * buttonSpacing;
var startX = 1024 - totalWidth / 2;
// Gallery button
var galleryBtn = new ToolButton('Gallery', function () {
	showGallery();
});
galleryBtn.x = startX + 0 * buttonSpacing;
galleryBtn.y = 2580;
galleryBtn.scaleX = 3.0;
galleryBtn.scaleY = 3.0;
game.addChild(galleryBtn);
// New button
var newBtn = new ToolButton('New', function () {
	newPainting();
});
newBtn.x = startX + 1 * buttonSpacing;
newBtn.y = 2580;
newBtn.scaleX = 3.0;
newBtn.scaleY = 3.0;
game.addChild(newBtn);
// Save button
var saveBtn = new ToolButton('Save', function () {
	savePainting();
});
saveBtn.x = startX + 2 * buttonSpacing;
saveBtn.y = 2580;
saveBtn.scaleX = 3.0;
saveBtn.scaleY = 3.0;
game.addChild(saveBtn);
// Clear button
var clearBtn = new ToolButton('Clear', function () {
	clearCanvas();
});
clearBtn.x = startX + 3 * buttonSpacing;
clearBtn.y = 2580;
clearBtn.scaleX = 3.0;
clearBtn.scaleY = 3.0;
game.addChild(clearBtn);
// Erase button
var eraseBtn = new ToolButton('Erase', function () {
	toggleEraser();
});
eraseBtn.x = startX + 4 * buttonSpacing;
eraseBtn.y = 2580;
eraseBtn.scaleX = 3.0;
eraseBtn.scaleY = 3.0;
game.addChild(eraseBtn);
// Brush preview
var brushPreview = game.addChild(LK.getAsset('brushSmall', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1900,
	y: 2200
}));
// Gallery container
var galleryContainer = new Container();
game.addChild(galleryContainer);
galleryContainer.visible = false;
// Gallery background
var galleryBg = galleryContainer.addChild(LK.getAsset('canvas', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1024,
	y: 1366,
	scaleX: 1.2,
	scaleY: 2.0
}));
galleryBg.tint = 0x222222;
// Gallery title
var galleryTitle = new Text2('Gallery', {
	size: 48,
	fill: 0xFFFFFF
});
galleryTitle.anchor.set(0.5, 0.5);
galleryTitle.x = 1024;
galleryTitle.y = 200;
galleryContainer.addChild(galleryTitle);
// Gallery close button
var closeGalleryBtn = new ToolButton('Close', function () {
	hideGallery();
});
closeGalleryBtn.x = 1024;
closeGalleryBtn.y = 2500;
galleryContainer.addChild(closeGalleryBtn);
// Gallery thumbnails container
var thumbnailsContainer = new Container();
galleryContainer.addChild(thumbnailsContainer);
function updateBrushPreview() {
	brushPreview.tint = isErasing ? 0xff0000 : currentColor;
	brushPreview.scaleX = currentBrushSize / 20;
	brushPreview.scaleY = currentBrushSize / 20;
}
function clearCanvas() {
	// Remove all paint dots from canvas
	for (var i = canvas.children.length - 1; i >= 0; i--) {
		var child = canvas.children[i];
		if (child instanceof PaintDot) {
			canvas.removeChild(child);
		}
	}
	currentPaintingDots = [];
}
function toggleEraser() {
	isErasing = !isErasing;
	updateBrushPreview();
}
function savePainting() {
	if (currentPaintingDots.length === 0) {
		return;
	}
	var paintingData = {
		dots: currentPaintingDots.slice(),
		timestamp: Date.now()
	};
	storage.paintings.push(paintingData);
	updateGalleryThumbnails();
}
function newPainting() {
	clearCanvas();
	currentPaintingDots = [];
}
function showGallery() {
	galleryContainer.visible = true;
	showingGallery = true;
	updateGalleryThumbnails();
}
function hideGallery() {
	galleryContainer.visible = false;
	showingGallery = false;
}
function updateGalleryThumbnails() {
	// Clear existing thumbnails
	for (var i = thumbnailsContainer.children.length - 1; i >= 0; i--) {
		thumbnailsContainer.removeChild(thumbnailsContainer.children[i]);
	}
	// Create new thumbnails
	var paintings = storage.paintings || [];
	for (var i = 0; i < paintings.length; i++) {
		var thumbnail = new PaintingThumbnail(paintings[i], i);
		thumbnail.x = 300 + i % 3 * 400;
		thumbnail.y = 400 + Math.floor(i / 3) * 350;
		thumbnailsContainer.addChild(thumbnail);
	}
}
function loadPainting(paintingData) {
	clearCanvas();
	currentPaintingDots = [];
	if (paintingData && paintingData.dots) {
		for (var i = 0; i < paintingData.dots.length; i++) {
			var dotData = paintingData.dots[i];
			var dot = new PaintDot(dotData.color, dotData.size);
			dot.x = dotData.x;
			dot.y = dotData.y;
			canvas.addChild(dot);
			currentPaintingDots.push({
				x: dotData.x,
				y: dotData.y,
				color: dotData.color,
				size: dotData.size
			});
		}
	}
}
function paintAt(x, y) {
	if (showingGallery) {
		return;
	}
	var localPos = canvas.toLocal({
		x: x,
		y: y
	});
	// Check if within canvas bounds
	if (localPos.x < -900 || localPos.x > 900 || localPos.y < -700 || localPos.y > 700) {
		return;
	}
	if (isErasing) {
		// Remove dots near the eraser position
		for (var i = canvas.children.length - 1; i >= 0; i--) {
			var child = canvas.children[i];
			if (child instanceof PaintDot) {
				var dx = child.x - localPos.x;
				var dy = child.y - localPos.y;
				var distance = Math.sqrt(dx * dx + dy * dy);
				if (distance < currentBrushSize) {
					canvas.removeChild(child);
					// Remove from currentPaintingDots array
					for (var j = currentPaintingDots.length - 1; j >= 0; j--) {
						var dot = currentPaintingDots[j];
						if (Math.abs(dot.x - localPos.x) < 5 && Math.abs(dot.y - localPos.y) < 5) {
							currentPaintingDots.splice(j, 1);
							break;
						}
					}
				}
			}
		}
	} else {
		// Draw line from last position to current position
		if (lastPaintX !== null && lastPaintY !== null) {
			// Calculate distance between points
			var dx = localPos.x - lastPaintX;
			var dy = localPos.y - lastPaintY;
			var distance = Math.sqrt(dx * dx + dy * dy);
			// Draw dots along the line to create smooth stroke
			var steps = Math.max(1, Math.floor(distance / (currentBrushSize * 0.3)));
			for (var i = 0; i <= steps; i++) {
				var t = i / steps;
				var x = lastPaintX + dx * t;
				var y = lastPaintY + dy * t;
				var dot = new PaintDot(currentColor, currentBrushSize);
				dot.x = x;
				dot.y = y;
				canvas.addChild(dot);
				currentPaintingDots.push({
					x: x,
					y: y,
					color: currentColor,
					size: currentBrushSize
				});
			}
		} else {
			// First dot
			var dot = new PaintDot(currentColor, currentBrushSize);
			dot.x = localPos.x;
			dot.y = localPos.y;
			canvas.addChild(dot);
			currentPaintingDots.push({
				x: localPos.x,
				y: localPos.y,
				color: currentColor,
				size: currentBrushSize
			});
		}
		// Update last paint position
		lastPaintX = localPos.x;
		lastPaintY = localPos.y;
	}
}
// Initialize brush preview
updateBrushPreview();
game.down = function (x, y, obj) {
	if (showingGallery) {
		return;
	}
	isPainting = true;
	lastPaintX = null;
	lastPaintY = null;
	paintAt(x, y);
};
game.up = function (x, y, obj) {
	isPainting = false;
	lastPaintX = null;
	lastPaintY = null;
};
game.move = function (x, y, obj) {
	if (isPainting) {
		paintAt(x, y);
	}
};
game.update = function () {
	// Game loop - nothing specific needed for painting
};

===================================================================
--- original.js
+++ change.js
@@ -213,9 +213,11 @@
 var totalButtons = 5;
 var totalWidth = (totalButtons - 1) * buttonSpacing;
 var startX = 1024 - totalWidth / 2;
 // Gallery button
-var galleryBtn = new GalleryButton();
+var galleryBtn = new ToolButton('Gallery', function () {
+	showGallery();
+});
 galleryBtn.x = startX + 0 * buttonSpacing;
 galleryBtn.y = 2580;
 galleryBtn.scaleX = 3.0;
 galleryBtn.scaleY = 3.0;