===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,295 @@
-/****
+/**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+var storage = LK.import("@upit/storage.v1");
+
+/**** 
+* Classes
+****/ 
+var ColorButton = Container.expand(function (color) {
+	var self = Container.call(this);
+	var buttonBg = self.attachAsset('buttonBg', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var colorIndicator = self.attachAsset('brush', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		scaleX: 6,
+		scaleY: 6
+	});
+	colorIndicator.tint = color;
+	self.color = color;
+	self.setSelected = function (isSelected) {
+		if (isSelected) {
+			buttonBg.tint = 0xFFFFFF;
+		} else {
+			buttonBg.tint = 0x333333;
+		}
+	};
+	self.down = function () {
+		if (currentTool === 'brush') {
+			setActiveColor(self.color);
+		}
+	};
+	return self;
+});
+var DrawingPoint = Container.expand(function () {
+	var self = Container.call(this);
+	var brushGraphics = self.attachAsset('brush', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.setColor = function (color) {
+		brushGraphics.tint = color;
+	};
+	self.setSize = function (size) {
+		brushGraphics.scale.set(size / 10);
+	};
+	return self;
+});
+var SizeButton = Container.expand(function (size) {
+	var self = Container.call(this);
+	var buttonBg = self.attachAsset('buttonBg', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var sizeIndicator = self.attachAsset('brush', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		scaleX: size / 3,
+		scaleY: size / 3
+	});
+	self.size = size;
+	self.setSelected = function (isSelected) {
+		if (isSelected) {
+			buttonBg.tint = 0xFFFFFF;
+		} else {
+			buttonBg.tint = 0x333333;
+		}
+	};
+	self.down = function () {
+		setActiveBrushSize(self.size);
+	};
+	return self;
+});
+var ToolButton = Container.expand(function (toolType, icon) {
+	var self = Container.call(this);
+	var buttonBg = self.attachAsset('buttonBg', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var iconGraphic = self.attachAsset(icon, {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		scaleX: 0.8,
+		scaleY: 0.8
+	});
+	self.toolType = toolType;
+	self.setSelected = function (isSelected) {
+		if (isSelected) {
+			buttonBg.tint = 0xFFFFFF;
+		} else {
+			buttonBg.tint = 0x333333;
+		}
+	};
+	self.down = function () {
+		setActiveTool(self.toolType);
+	};
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
-});
\ No newline at end of file
+	backgroundColor: 0xF0F0F0
+});
+
+/**** 
+* Game Code
+****/ 
+// Drawing variables
+var drawingLayer = new Container();
+var drawingPoints = [];
+var isDrawing = false;
+var lastX = 0;
+var lastY = 0;
+// UI variables
+var uiLayer = new Container();
+var colorPalette = [];
+var sizeButtons = [];
+var toolButtons = [];
+var currentColor = 0x000000;
+var currentBrushSize = 20;
+var currentTool = 'brush';
+// Setup drawing canvas
+game.addChild(drawingLayer);
+game.addChild(uiLayer);
+// Initialize the color palette
+var colors = [0x000000,
+// Black
+0xFF0000,
+// Red
+0xFF9900,
+// Orange
+0xFFFF00,
+// Yellow
+0x00FF00,
+// Green
+0x0000FF,
+// Blue
+0x9900FF,
+// Purple
+0xFFFFFF // White
+];
+// Create bottom panel
+var bottomPanel = LK.getAsset('panel', {
+	anchorX: 0,
+	anchorY: 0,
+	scaleX: 4.1,
+	// Make it span the width of the screen
+	scaleY: 1.5
+});
+bottomPanel.y = 2732 - 150; // Position at bottom of screen
+uiLayer.addChild(bottomPanel);
+// Create color buttons
+for (var i = 0; i < colors.length; i++) {
+	var colorButton = new ColorButton(colors[i]);
+	colorButton.x = 100 + i * 100;
+	colorButton.y = 2732 - 100;
+	colorPalette.push(colorButton);
+	uiLayer.addChild(colorButton);
+}
+// Create brush size buttons
+var sizes = [10, 20, 30, 40];
+for (var i = 0; i < sizes.length; i++) {
+	var sizeButton = new SizeButton(sizes[i]);
+	sizeButton.x = 100 + i * 100;
+	sizeButton.y = 2732 - 200;
+	sizeButtons.push(sizeButton);
+	uiLayer.addChild(sizeButton);
+}
+// Create eraser button
+var eraserButton = new ToolButton('eraser', 'eraserButton');
+eraserButton.x = 1800;
+eraserButton.y = 2732 - 100;
+toolButtons.push(eraserButton);
+uiLayer.addChild(eraserButton);
+// Create clear button
+var clearButton = new ToolButton('clear', 'clearButton');
+clearButton.x = 1900;
+clearButton.y = 2732 - 100;
+uiLayer.addChild(clearButton);
+// Create title text
+var titleText = new Text2("DoodleCraft", {
+	size: 40,
+	fill: 0x333333
+});
+titleText.anchor.set(0.5, 0);
+titleText.x = 2048 / 2;
+titleText.y = 20;
+LK.gui.addChild(titleText);
+// Set initial UI state
+setActiveColor(colors[0]);
+setActiveBrushSize(sizes[1]);
+setActiveTool('brush');
+// Main drawing functions
+function startDrawing(x, y) {
+	isDrawing = true;
+	lastX = x;
+	lastY = y;
+	// Add the first point
+	addDrawingPoint(x, y);
+}
+function continueDrawing(x, y) {
+	if (!isDrawing) return;
+	// Calculate distance between last point and current position
+	var dx = x - lastX;
+	var dy = y - lastY;
+	var distance = Math.sqrt(dx * dx + dy * dy);
+	// For smoother lines, add points at regular intervals
+	var step = Math.max(1, currentBrushSize / 4);
+	var numSteps = Math.ceil(distance / step);
+	if (numSteps > 1) {
+		for (var i = 1; i <= numSteps; i++) {
+			var ratio = i / numSteps;
+			var pointX = lastX + dx * ratio;
+			var pointY = lastY + dy * ratio;
+			addDrawingPoint(pointX, pointY);
+		}
+	} else {
+		addDrawingPoint(x, y);
+	}
+	lastX = x;
+	lastY = y;
+}
+function stopDrawing() {
+	isDrawing = false;
+}
+function addDrawingPoint(x, y) {
+	var point = new DrawingPoint();
+	point.x = x;
+	point.y = y;
+	if (currentTool === 'brush') {
+		point.setColor(currentColor);
+	} else if (currentTool === 'eraser') {
+		point.setColor(0xF0F0F0); // Same as background
+	}
+	point.setSize(currentBrushSize);
+	drawingLayer.addChild(point);
+	drawingPoints.push(point);
+}
+function clearCanvas() {
+	for (var i = 0; i < drawingPoints.length; i++) {
+		drawingPoints[i].destroy();
+	}
+	drawingPoints = [];
+}
+// UI state management
+function setActiveColor(color) {
+	currentColor = color;
+	// Update UI to reflect selection
+	for (var i = 0; i < colorPalette.length; i++) {
+		colorPalette[i].setSelected(colorPalette[i].color === currentColor);
+	}
+}
+function setActiveBrushSize(size) {
+	currentBrushSize = size;
+	// Update UI to reflect selection
+	for (var i = 0; i < sizeButtons.length; i++) {
+		sizeButtons[i].setSelected(sizeButtons[i].size === currentBrushSize);
+	}
+}
+function setActiveTool(tool) {
+	currentTool = tool;
+	// Handle special tool actions
+	if (tool === 'clear') {
+		clearCanvas();
+		currentTool = 'brush'; // Switch back to brush after clearing
+	}
+	// Update UI to reflect selection
+	for (var i = 0; i < toolButtons.length; i++) {
+		toolButtons[i].setSelected(toolButtons[i].toolType === currentTool);
+	}
+}
+// Event handlers
+game.down = function (x, y) {
+	// Only draw if we're above the control panel
+	if (y < bottomPanel.y) {
+		startDrawing(x, y);
+	}
+};
+game.move = function (x, y) {
+	if (y < bottomPanel.y) {
+		continueDrawing(x, y);
+	}
+};
+game.up = function () {
+	stopDrawing();
+};
+// Main update loop
+game.update = function () {
+	// Nothing needed in update for this simple drawing app
+};
\ No newline at end of file