===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,502 @@
-/****
+/**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+
+/**** 
+* Classes
+****/ 
+var ColorPalette = Container.expand(function () {
+	var self = Container.call(this);
+	var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFA500, 0x800080, 0xFFC0CB, 0x8B4513, 0x000000, 0xFFFFFF];
+	var colorButtons = [];
+	for (var i = 0; i < colors.length; i++) {
+		var button = LK.getAsset('colorButton', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: i % 6 * 100,
+			y: Math.floor(i / 6) * 100
+		});
+		button.tint = colors[i];
+		button.colorValue = colors[i];
+		colorButtons.push(button);
+		self.addChild(button);
+	}
+	self.colorButtons = colorButtons;
+	return self;
+});
+var DrawingCanvas = Container.expand(function () {
+	var self = Container.call(this);
+	var border = self.attachAsset('canvasBorder', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var canvas = self.attachAsset('canvas', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var strokes = [];
+	var templateElements = [];
+	self.addStroke = function (x, y, color) {
+		var stroke = LK.getAsset('brushStroke', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: x,
+			y: y
+		});
+		stroke.tint = color;
+		strokes.push(stroke);
+		self.addChild(stroke);
+	};
+	self.clearCanvas = function () {
+		for (var i = 0; i < strokes.length; i++) {
+			strokes[i].destroy();
+		}
+		strokes = [];
+		for (var j = 0; j < templateElements.length; j++) {
+			templateElements[j].destroy();
+		}
+		templateElements = [];
+	};
+	self.addTemplate = function (templateType) {
+		self.clearCanvas();
+		if (templateType === 'house') {
+			var house = LK.getAsset('houseTemplate', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: 0,
+				y: 50
+			});
+			var roof = LK.getAsset('roofTemplate', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: 0,
+				y: -20
+			});
+			templateElements.push(house);
+			templateElements.push(roof);
+			self.addChild(house);
+			self.addChild(roof);
+		} else if (templateType === 'nature') {
+			var sun = LK.getAsset('sunTemplate', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: -200,
+				y: -200
+			});
+			var tree = LK.getAsset('treeTemplate', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: 100,
+				y: 100
+			});
+			var cloud1 = LK.getAsset('cloudTemplate', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: 0,
+				y: -300
+			});
+			var cloud2 = LK.getAsset('cloudTemplate', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: 150,
+				y: -280
+			});
+			templateElements.push(sun);
+			templateElements.push(tree);
+			templateElements.push(cloud1);
+			templateElements.push(cloud2);
+			self.addChild(sun);
+			self.addChild(tree);
+			self.addChild(cloud1);
+			self.addChild(cloud2);
+		}
+	};
+	return self;
+});
+var Pango = Container.expand(function () {
+	var self = Container.call(this);
+	var body = self.attachAsset('pangoBody', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var head = self.attachAsset('pangoHead', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: -40
+	});
+	var leftEar = self.attachAsset('pangoEar', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -20,
+		y: -60
+	});
+	var rightEar = self.attachAsset('pangoEar', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 20,
+		y: -60
+	});
+	var leftEye = self.attachAsset('pangoEye', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -15,
+		y: -45
+	});
+	var rightEye = self.attachAsset('pangoEye', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 15,
+		y: -45
+	});
+	var leftPupil = self.attachAsset('pangoPupil', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -15,
+		y: -45
+	});
+	var rightPupil = self.attachAsset('pangoPupil', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 15,
+		y: -45
+	});
+	var nose = self.attachAsset('pangoNose', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: -35
+	});
+	var stripe1 = self.attachAsset('pangoStripe', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: -10
+	});
+	var stripe2 = self.attachAsset('pangoStripe', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: 10
+	});
+	self.wave = function () {
+		tween(self, {
+			rotation: 0.1
+		}, {
+			duration: 500,
+			easing: tween.easeInOut,
+			onFinish: function onFinish() {
+				tween(self, {
+					rotation: -0.1
+				}, {
+					duration: 500,
+					easing: tween.easeInOut,
+					onFinish: function onFinish() {
+						tween(self, {
+							rotation: 0
+						}, {
+							duration: 500,
+							easing: tween.easeInOut
+						});
+					}
+				});
+			}
+		});
+	};
+	return self;
+});
+var Rabbit = Container.expand(function () {
+	var self = Container.call(this);
+	var body = self.attachAsset('rabbitBody', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var head = self.attachAsset('rabbitHead', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: -35
+	});
+	var leftEar = self.attachAsset('rabbitEar', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -12,
+		y: -55
+	});
+	var rightEar = self.attachAsset('rabbitEar', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 12,
+		y: -55
+	});
+	var leftEye = self.attachAsset('rabbitEye', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -10,
+		y: -40
+	});
+	var rightEye = self.attachAsset('rabbitEye', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 10,
+		y: -40
+	});
+	var nose = self.attachAsset('rabbitNose', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: -30
+	});
+	return self;
+});
+var TemplateSelector = Container.expand(function () {
+	var self = Container.call(this);
+	var blankBorder = self.attachAsset('templateBorder', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -120,
+		y: 0
+	});
+	var blankButton = self.attachAsset('templateButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -120,
+		y: 0
+	});
+	var blankText = new Text2('Blank', {
+		size: 24,
+		fill: '#000000'
+	});
+	blankText.anchor.set(0.5, 0.5);
+	blankText.x = -120;
+	blankText.y = 0;
+	self.addChild(blankText);
+	var houseBorder = self.attachAsset('templateBorder', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 120,
+		y: 0
+	});
+	var houseButton = self.attachAsset('templateButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 120,
+		y: 0
+	});
+	var houseText = new Text2('House', {
+		size: 24,
+		fill: '#000000'
+	});
+	houseText.anchor.set(0.5, 0.5);
+	houseText.x = 120;
+	houseText.y = 0;
+	self.addChild(houseText);
+	var natureBorder = self.attachAsset('templateBorder', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: 200
+	});
+	var natureButton = self.attachAsset('templateButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 0,
+		y: 200
+	});
+	var natureText = new Text2('Nature', {
+		size: 24,
+		fill: '#000000'
+	});
+	natureText.anchor.set(0.5, 0.5);
+	natureText.x = 0;
+	natureText.y = 200;
+	self.addChild(natureText);
+	self.blankButton = blankButton;
+	self.houseButton = houseButton;
+	self.natureButton = natureButton;
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
-});
\ No newline at end of file
+	backgroundColor: 0x87CEEB
+});
+
+/**** 
+* Game Code
+****/ 
+var gameState = 'template_selection';
+var selectedColor = 0xFF0000;
+var isDrawing = false;
+var lastDrawX = 0;
+var lastDrawY = 0;
+var pango = new Pango();
+pango.x = 200;
+pango.y = 400;
+game.addChild(pango);
+var rabbit = new Rabbit();
+rabbit.x = 1800;
+rabbit.y = 400;
+game.addChild(rabbit);
+var templateSelector = new TemplateSelector();
+templateSelector.x = 1024;
+templateSelector.y = 1200;
+game.addChild(templateSelector);
+var drawingCanvas = new DrawingCanvas();
+drawingCanvas.x = 1024;
+drawingCanvas.y = 800;
+drawingCanvas.visible = false;
+game.addChild(drawingCanvas);
+var colorPalette = new ColorPalette();
+colorPalette.x = 200;
+colorPalette.y = 1400;
+colorPalette.visible = false;
+game.addChild(colorPalette);
+var titleText = new Text2('Choose a Canvas!', {
+	size: 80,
+	fill: '#FFFFFF'
+});
+titleText.anchor.set(0.5, 0.5);
+titleText.x = 1024;
+titleText.y = 300;
+game.addChild(titleText);
+var instructionText = new Text2('Tap to select a template', {
+	size: 40,
+	fill: '#FFFFFF'
+});
+instructionText.anchor.set(0.5, 0.5);
+instructionText.x = 1024;
+instructionText.y = 400;
+game.addChild(instructionText);
+var eraserButton = LK.getAsset('colorButton', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	x: 200,
+	y: 1600
+});
+eraserButton.tint = 0xFFFFFF;
+eraserButton.visible = false;
+game.addChild(eraserButton);
+var eraserText = new Text2('Eraser', {
+	size: 24,
+	fill: '#000000'
+});
+eraserText.anchor.set(0.5, 0.5);
+eraserText.x = 200;
+eraserText.y = 1600;
+eraserText.visible = false;
+game.addChild(eraserText);
+function startDrawingMode(templateType) {
+	gameState = 'drawing';
+	templateSelector.visible = false;
+	titleText.visible = false;
+	instructionText.visible = false;
+	drawingCanvas.visible = true;
+	colorPalette.visible = true;
+	eraserButton.visible = true;
+	eraserText.visible = true;
+	if (templateType !== 'blank') {
+		drawingCanvas.addTemplate(templateType);
+	}
+	titleText.setText('Start Coloring!');
+	titleText.visible = true;
+	titleText.y = 150;
+	pango.wave();
+	LK.getSound('templateSelect').play();
+}
+function handleMove(x, y, obj) {
+	if (gameState === 'drawing' && isDrawing) {
+		var canvasPos = drawingCanvas.toLocal({
+			x: x,
+			y: y
+		});
+		if (Math.abs(canvasPos.x) <= 700 && Math.abs(canvasPos.y) <= 500) {
+			var distance = Math.sqrt(Math.pow(canvasPos.x - lastDrawX, 2) + Math.pow(canvasPos.y - lastDrawY, 2));
+			if (distance > 15) {
+				drawingCanvas.addStroke(canvasPos.x, canvasPos.y, selectedColor);
+				lastDrawX = canvasPos.x;
+				lastDrawY = canvasPos.y;
+				LK.getSound('brushStroke').play();
+			}
+		}
+	}
+}
+game.move = handleMove;
+game.down = function (x, y, obj) {
+	if (gameState === 'template_selection') {
+		var localPos = templateSelector.toLocal({
+			x: x,
+			y: y
+		});
+		if (Math.abs(localPos.x + 120) <= 100 && Math.abs(localPos.y) <= 75) {
+			startDrawingMode('blank');
+		} else if (Math.abs(localPos.x - 120) <= 100 && Math.abs(localPos.y) <= 75) {
+			startDrawingMode('house');
+		} else if (Math.abs(localPos.x) <= 100 && Math.abs(localPos.y - 200) <= 75) {
+			startDrawingMode('nature');
+		}
+	} else if (gameState === 'drawing') {
+		var canvasPos = drawingCanvas.toLocal({
+			x: x,
+			y: y
+		});
+		if (Math.abs(canvasPos.x) <= 700 && Math.abs(canvasPos.y) <= 500) {
+			isDrawing = true;
+			lastDrawX = canvasPos.x;
+			lastDrawY = canvasPos.y;
+			drawingCanvas.addStroke(canvasPos.x, canvasPos.y, selectedColor);
+			LK.getSound('brushStroke').play();
+		}
+		for (var i = 0; i < colorPalette.colorButtons.length; i++) {
+			var button = colorPalette.colorButtons[i];
+			var buttonPos = colorPalette.toLocal({
+				x: x,
+				y: y
+			});
+			var buttonLocalX = buttonPos.x - button.x;
+			var buttonLocalY = buttonPos.y - button.y;
+			if (Math.abs(buttonLocalX) <= 40 && Math.abs(buttonLocalY) <= 40) {
+				selectedColor = button.colorValue;
+				LK.getSound('colorSelect').play();
+				break;
+			}
+		}
+		var eraserPos = game.toLocal({
+			x: x,
+			y: y
+		});
+		if (Math.abs(eraserPos.x - 200) <= 40 && Math.abs(eraserPos.y - 1600) <= 40) {
+			selectedColor = 0xFFFFFF;
+			LK.getSound('colorSelect').play();
+		}
+	}
+};
+game.up = function (x, y, obj) {
+	if (gameState === 'drawing') {
+		isDrawing = false;
+	}
+};
+game.update = function () {
+	if (LK.ticks % 300 === 0 && gameState === 'template_selection') {
+		pango.wave();
+	}
+	if (LK.ticks % 400 === 0 && gameState === 'drawing') {
+		tween(rabbit, {
+			y: rabbit.y - 10
+		}, {
+			duration: 200,
+			easing: tween.easeInOut,
+			onFinish: function onFinish() {
+				tween(rabbit, {
+					y: rabbit.y + 10
+				}, {
+					duration: 200,
+					easing: tween.easeInOut
+				});
+			}
+		});
+	}
+};
\ No newline at end of file