/**** 
* 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
var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffa500, 0x800080, 0x008000, 0x808080, 0xffffff];
var colorPalette = [];
for (var i = 0; i < colors.length; i++) {
	var colorBtn = new ColorButton(colors[i]);
	colorBtn.x = 150 + i % 6 * 150;
	colorBtn.y = 2350 + Math.floor(i / 6) * 120;
	colorBtn.scaleX = 2.2;
	colorBtn.scaleY = 2.2;
	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 = 1400 + i * 180;
	brushBtn.y = 2350;
	brushBtn.scaleX = 2.5;
	brushBtn.scaleY = 2.5;
	game.addChild(brushBtn);
	brushButtons.push(brushBtn);
}
// Tool buttons
var clearBtn = new ToolButton('Clear', function () {
	clearCanvas();
});
clearBtn.x = 1650;
clearBtn.y = 2550;
clearBtn.scaleX = 2.2;
clearBtn.scaleY = 2.2;
game.addChild(clearBtn);
var eraseBtn = new ToolButton('Erase', function () {
	toggleEraser();
});
eraseBtn.x = 1850;
eraseBtn.y = 2550;
eraseBtn.scaleX = 2.2;
eraseBtn.scaleY = 2.2;
game.addChild(eraseBtn);
var saveBtn = new ToolButton('Save', function () {
	savePainting();
});
saveBtn.x = 1450;
saveBtn.y = 2550;
saveBtn.scaleX = 2.2;
saveBtn.scaleY = 2.2;
game.addChild(saveBtn);
var newBtn = new ToolButton('New', function () {
	newPainting();
});
newBtn.x = 1250;
newBtn.y = 2550;
newBtn.scaleX = 2.2;
newBtn.scaleY = 2.2;
game.addChild(newBtn);
// Gallery button
var galleryBtn = new GalleryButton();
galleryBtn.x = 1000;
galleryBtn.y = 2550;
galleryBtn.scaleX = 2.2;
galleryBtn.scaleY = 2.2;
game.addChild(galleryBtn);
// Brush preview
var brushPreview = game.addChild(LK.getAsset('brushSmall', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1900,
	y: 2350
}));
// 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
@@ -141,12 +141,12 @@
 var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffa500, 0x800080, 0x008000, 0x808080, 0xffffff];
 var colorPalette = [];
 for (var i = 0; i < colors.length; i++) {
 	var colorBtn = new ColorButton(colors[i]);
-	colorBtn.x = 150 + i % 6 * 100;
-	colorBtn.y = 2400 + Math.floor(i / 6) * 100;
-	colorBtn.scaleX = 1.3;
-	colorBtn.scaleY = 1.3;
+	colorBtn.x = 150 + i % 6 * 150;
+	colorBtn.y = 2350 + Math.floor(i / 6) * 120;
+	colorBtn.scaleX = 2.2;
+	colorBtn.scaleY = 2.2;
 	game.addChild(colorBtn);
 	colorPalette.push(colorBtn);
 }
 // Brush size buttons
@@ -162,61 +162,61 @@
 }];
 var brushButtons = [];
 for (var i = 0; i < brushSizes.length; i++) {
 	var brushBtn = new BrushButton(brushSizes[i].size, brushSizes[i].asset);
-	brushBtn.x = 1500 + i * 150;
-	brushBtn.y = 2400;
-	brushBtn.scaleX = 1.5;
-	brushBtn.scaleY = 1.5;
+	brushBtn.x = 1400 + i * 180;
+	brushBtn.y = 2350;
+	brushBtn.scaleX = 2.5;
+	brushBtn.scaleY = 2.5;
 	game.addChild(brushBtn);
 	brushButtons.push(brushBtn);
 }
 // Tool buttons
 var clearBtn = new ToolButton('Clear', function () {
 	clearCanvas();
 });
-clearBtn.x = 1500;
+clearBtn.x = 1650;
 clearBtn.y = 2550;
-clearBtn.scaleX = 1.4;
-clearBtn.scaleY = 1.4;
+clearBtn.scaleX = 2.2;
+clearBtn.scaleY = 2.2;
 game.addChild(clearBtn);
 var eraseBtn = new ToolButton('Erase', function () {
 	toggleEraser();
 });
-eraseBtn.x = 1700;
+eraseBtn.x = 1850;
 eraseBtn.y = 2550;
-eraseBtn.scaleX = 1.4;
-eraseBtn.scaleY = 1.4;
+eraseBtn.scaleX = 2.2;
+eraseBtn.scaleY = 2.2;
 game.addChild(eraseBtn);
 var saveBtn = new ToolButton('Save', function () {
 	savePainting();
 });
-saveBtn.x = 1300;
+saveBtn.x = 1450;
 saveBtn.y = 2550;
-saveBtn.scaleX = 1.4;
-saveBtn.scaleY = 1.4;
+saveBtn.scaleX = 2.2;
+saveBtn.scaleY = 2.2;
 game.addChild(saveBtn);
 var newBtn = new ToolButton('New', function () {
 	newPainting();
 });
-newBtn.x = 1100;
+newBtn.x = 1250;
 newBtn.y = 2550;
-newBtn.scaleX = 1.4;
-newBtn.scaleY = 1.4;
+newBtn.scaleX = 2.2;
+newBtn.scaleY = 2.2;
 game.addChild(newBtn);
 // Gallery button
 var galleryBtn = new GalleryButton();
-galleryBtn.x = 900;
+galleryBtn.x = 1000;
 galleryBtn.y = 2550;
-galleryBtn.scaleX = 1.4;
-galleryBtn.scaleY = 1.4;
+galleryBtn.scaleX = 2.2;
+galleryBtn.scaleY = 2.2;
 game.addChild(galleryBtn);
 // Brush preview
 var brushPreview = game.addChild(LK.getAsset('brushSmall', {
 	anchorX: 0.5,
 	anchorY: 0.5,
 	x: 1900,
-	y: 2400
+	y: 2350
 }));
 // Gallery container
 var galleryContainer = new Container();
 game.addChild(galleryContainer);