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

/**** 
* Classes
****/ 
var CelebrationStar = Container.expand(function () {
	var self = Container.call(this);
	var starGraphic = self.attachAsset('star', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.startAnimation = function () {
		self.alpha = 1;
		self.scaleX = 0.1;
		self.scaleY = 0.1;
		tween(self, {
			scaleX: 1.5,
			scaleY: 1.5
		}, {
			duration: 500,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self, {
					alpha: 0,
					scaleX: 0.5,
					scaleY: 0.5
				}, {
					duration: 500,
					easing: tween.easeIn,
					onFinish: function onFinish() {
						self.destroy();
					}
				});
			}
		});
	};
	return self;
});
var MathProblem = Container.expand(function () {
	var self = Container.call(this);
	self.num1 = 0;
	self.num2 = 0;
	self.operation = '+';
	self.answer = 0;
	self.difficulty = 1;
	self.generateProblem = function () {
		var maxNum = Math.min(10, 5 + self.difficulty * 2);
		self.num1 = Math.floor(Math.random() * maxNum) + 1;
		self.num2 = Math.floor(Math.random() * maxNum) + 1;
		var operations = ['+', '-'];
		if (self.difficulty > 3) {
			operations.push('×');
		}
		if (self.difficulty > 5) {
			operations.push('÷');
		}
		self.operation = operations[Math.floor(Math.random() * operations.length)];
		if (self.operation === '-' && self.num1 < self.num2) {
			var temp = self.num1;
			self.num1 = self.num2;
			self.num2 = temp;
		}
		if (self.operation === '÷') {
			self.answer = Math.floor(Math.random() * 10) + 1;
			self.num1 = self.answer * self.num2;
		}
		switch (self.operation) {
			case '+':
				self.answer = self.num1 + self.num2;
				break;
			case '-':
				self.answer = self.num1 - self.num2;
				break;
			case '×':
				self.answer = self.num1 * self.num2;
				break;
			case '÷':
				break;
		}
	};
	self.getProblemText = function () {
		return self.num1 + ' ' + self.operation + ' ' + self.num2 + ' = ?';
	};
	return self;
});
var WritingArea = Container.expand(function () {
	var self = Container.call(this);
	var areaBackground = self.attachAsset('writingArea', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.drawingPath = [];
	self.isDrawing = false;
	self.writtenAnswer = '';
	self.startDrawing = function (x, y) {
		self.isDrawing = true;
		self.drawingPath = [];
		var localPos = self.toLocal({
			x: x,
			y: y
		});
		self.drawingPath.push({
			x: localPos.x,
			y: localPos.y
		});
		self.addDrawingDot(localPos.x, localPos.y);
		// Show text bar when writing starts
		textBar.alpha = 1;
	};
	self.continueDrawing = function (x, y) {
		if (self.isDrawing) {
			var localPos = self.toLocal({
				x: x,
				y: y
			});
			self.drawingPath.push({
				x: localPos.x,
				y: localPos.y
			});
			self.addDrawingDot(localPos.x, localPos.y);
		}
	};
	self.stopDrawing = function () {
		self.isDrawing = false;
		self.recognizeNumber();
	};
	self.addDrawingDot = function (x, y) {
		var dot = self.addChild(LK.getAsset('drawingDot', {
			anchorX: 0.5,
			anchorY: 0.5
		}));
		dot.x = x;
		dot.y = y;
	};
	self.recognizeNumber = function () {
		if (self.drawingPath.length > 3) {
			var bounds = self.getDrawingBounds();
			var recognizedChar = self.simpleNumberRecognition(bounds);
			if (recognizedChar !== null) {
				self.writtenAnswer += recognizedChar; // Append characters to build text
				answerText.setText(self.writtenAnswer);
				// Show text bar when text is recognized
				textBar.alpha = 1;
				// Clear the drawing path after recognition to prepare for next character
				self.clearCurrentDrawing();
			}
		}
	};
	self.getDrawingBounds = function () {
		if (self.drawingPath.length === 0) return null;
		var minX = self.drawingPath[0].x;
		var maxX = self.drawingPath[0].x;
		var minY = self.drawingPath[0].y;
		var maxY = self.drawingPath[0].y;
		for (var i = 1; i < self.drawingPath.length; i++) {
			var point = self.drawingPath[i];
			minX = Math.min(minX, point.x);
			maxX = Math.max(maxX, point.x);
			minY = Math.min(minY, point.y);
			maxY = Math.max(maxY, point.y);
		}
		return {
			minX: minX,
			maxX: maxX,
			minY: minY,
			maxY: maxY,
			width: maxX - minX,
			height: maxY - minY
		};
	};
	self.simpleNumberRecognition = function (bounds) {
		if (!bounds || bounds.width < 10 || bounds.height < 10) {
			feedbackText.setText('Draw bigger');
			feedbackText.tint = 0xFFA500;
			LK.setTimeout(function () {
				feedbackText.setText('');
			}, 1000);
			return null;
		}
		var aspectRatio = bounds.width / bounds.height;
		var pathLength = self.drawingPath.length;
		var recognizedChar = null;
		// Numbers - more lenient recognition
		if (aspectRatio > 2.0 || aspectRatio < 0.8 && pathLength > 20) recognizedChar = '1';else if (aspectRatio > 0.7 && aspectRatio < 1.3 && pathLength > 25) recognizedChar = '0';else if (pathLength > 20 && pathLength < 55 && aspectRatio > 0.5) recognizedChar = '2';else if (pathLength > 15 && pathLength < 45 && aspectRatio > 0.6) recognizedChar = '3';else if (pathLength > 10 && pathLength < 40) recognizedChar = '4';else if (pathLength > 20 && pathLength < 60 && aspectRatio > 0.5) recognizedChar = '5';else if (pathLength > 25 && pathLength < 65 && aspectRatio > 0.6) recognizedChar = '6';else if (pathLength > 10 && pathLength < 35 && aspectRatio > 0.4) recognizedChar = '7';else if (pathLength > 30 && pathLength < 75) recognizedChar = '8';else if (pathLength > 25 && pathLength < 70 && aspectRatio > 0.5) recognizedChar = '9';
		if (recognizedChar) {
			feedbackText.setText('Recognized: ' + recognizedChar);
			feedbackText.tint = 0x32CD32;
			LK.setTimeout(function () {
				feedbackText.setText('');
			}, 500);
			return recognizedChar;
		}
		// Fallback - show a hint about drawing more clearly
		feedbackText.setText('Draw more clearly');
		feedbackText.tint = 0xFFA500;
		LK.setTimeout(function () {
			feedbackText.setText('');
		}, 1000);
		return null;
	};
	self.clearCurrentDrawing = function () {
		for (var i = self.children.length - 1; i >= 0; i--) {
			var child = self.children[i];
			if (child !== areaBackground) {
				child.destroy();
			}
		}
		self.drawingPath = [];
	};
	self.clearDrawing = function () {
		for (var i = self.children.length - 1; i >= 0; i--) {
			var child = self.children[i];
			if (child !== areaBackground) {
				child.destroy();
			}
		}
		self.drawingPath = [];
		self.writtenAnswer = '';
		answerText.setText('');
		// Hide text bar when clearing
		textBar.alpha = 0;
	};
	self.backspace = function () {
		if (self.writtenAnswer.length > 0) {
			self.writtenAnswer = self.writtenAnswer.slice(0, -1);
			answerText.setText(self.writtenAnswer);
			// Hide text bar if no text remains
			if (self.writtenAnswer.length === 0) {
				textBar.alpha = 0;
			}
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
var currentProblem = new MathProblem();
var writingArea = new WritingArea();
var gameState = 'playing';
var correctAnswers = 0;
var level = storage.level || 1;
var celebrationStars = [];
currentProblem.difficulty = level;
currentProblem.generateProblem();
var background = game.addChild(LK.getAsset('background', {
	anchorX: 0,
	anchorY: 0
}));
var problemBox = game.addChild(LK.getAsset('problemBox', {
	anchorX: 0.5,
	anchorY: 0.5
}));
problemBox.x = 1024;
problemBox.y = 600;
var problemText = new Text2(currentProblem.getProblemText(), {
	size: 120,
	fill: 0x333333
});
problemText.anchor.set(0.5, 0.5);
problemText.x = 1024;
problemText.y = 600;
game.addChild(problemText);
writingArea.x = 1024;
writingArea.y = 1200;
game.addChild(writingArea);
var instructionText = new Text2('Write your answer below:', {
	size: 80,
	fill: 0x444444
});
instructionText.anchor.set(0.5, 0.5);
instructionText.x = 1024;
instructionText.y = 950;
game.addChild(instructionText);
var textBar = game.addChild(LK.getAsset('writingArea', {
	anchorX: 0.5,
	anchorY: 0.5
}));
textBar.x = 1024;
textBar.y = 1450;
textBar.alpha = 0;
textBar.tint = 0xE6F3FF;
var answerText = new Text2('', {
	size: 150,
	fill: 0x000000
});
answerText.anchor.set(0.5, 0.5);
answerText.x = 1024;
answerText.y = 1450;
game.addChild(answerText);
var submitButton = game.addChild(LK.getAsset('submitButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
submitButton.x = 800;
submitButton.y = 1600;
var submitButtonText = new Text2('Check', {
	size: 60,
	fill: 0xFFFFFF
});
submitButtonText.anchor.set(0.5, 0.5);
submitButtonText.x = 800;
submitButtonText.y = 1600;
game.addChild(submitButtonText);
var clearButton = game.addChild(LK.getAsset('submitButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
clearButton.x = 1150;
clearButton.y = 1600;
clearButton.tint = 0xFF6B6B;
var clearButtonText = new Text2('Clear', {
	size: 60,
	fill: 0xFFFFFF
});
clearButtonText.anchor.set(0.5, 0.5);
clearButtonText.x = 1150;
clearButtonText.y = 1600;
game.addChild(clearButtonText);
var backspaceButton = game.addChild(LK.getAsset('submitButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
backspaceButton.x = 1350;
backspaceButton.y = 1600;
backspaceButton.tint = 0xFF8C00;
var backspaceButtonText = new Text2('←', {
	size: 60,
	fill: 0xFFFFFF
});
backspaceButtonText.anchor.set(0.5, 0.5);
backspaceButtonText.x = 1350;
backspaceButtonText.y = 1600;
game.addChild(backspaceButtonText);
// Number keyboard
var numberButtons = [];
var numberButtonTexts = [];
for (var i = 1; i <= 9; i++) {
	var button = game.addChild(LK.getAsset('submitButton', {
		anchorX: 0.5,
		anchorY: 0.5
	}));
	button.tint = 0x4169E1;
	var row = Math.floor((i - 1) / 5);
	var col = (i - 1) % 5;
	button.x = 400 + col * 100;
	button.y = 2000 + row * 100;
	var buttonText = new Text2(i.toString(), {
		size: 60,
		fill: 0xFFFFFF
	});
	buttonText.anchor.set(0.5, 0.5);
	buttonText.x = button.x;
	buttonText.y = button.y;
	game.addChild(buttonText);
	numberButtons.push(button);
	numberButtonTexts.push(buttonText);
}
// Add 0 button
var zeroButton = game.addChild(LK.getAsset('submitButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
zeroButton.tint = 0x4169E1;
zeroButton.x = 400;
zeroButton.y = 2200;
var zeroButtonText = new Text2('0', {
	size: 60,
	fill: 0xFFFFFF
});
zeroButtonText.anchor.set(0.5, 0.5);
zeroButtonText.x = zeroButton.x;
zeroButtonText.y = zeroButton.y;
game.addChild(zeroButtonText);
numberButtons.push(zeroButton);
numberButtonTexts.push(zeroButtonText);
var nextButton = game.addChild(LK.getAsset('nextButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
nextButton.x = 1024;
nextButton.y = 1900;
nextButton.alpha = 0;
var nextButtonText = new Text2('Next Problem', {
	size: 60,
	fill: 0xFFFFFF
});
nextButtonText.anchor.set(0.5, 0.5);
nextButtonText.x = 1024;
nextButtonText.y = 1900;
nextButtonText.alpha = 0;
game.addChild(nextButtonText);
var feedbackText = new Text2('', {
	size: 80,
	fill: 0x32CD32
});
feedbackText.anchor.set(0.5, 0.5);
feedbackText.x = 1024;
feedbackText.y = 1750;
game.addChild(feedbackText);
var scoreText = new Text2('Score: 0', {
	size: 60,
	fill: 0xFFFFFF
});
scoreText.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreText);
var levelText = new Text2('Level: ' + level, {
	size: 60,
	fill: 0xFFFFFF
});
levelText.anchor.set(1, 0);
LK.gui.topRight.addChild(levelText);
levelText.x = -120;
var howToReadButton = game.addChild(LK.getAsset('howToReadButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
howToReadButton.x = 1600;
howToReadButton.y = 1600;
var howToReadButtonText = new Text2('How to Read', {
	size: 50,
	fill: 0xFFFFFF
});
howToReadButtonText.anchor.set(0.5, 0.5);
howToReadButtonText.x = 1600;
howToReadButtonText.y = 1600;
game.addChild(howToReadButtonText);
var instructionPanel = game.addChild(LK.getAsset('instructionPanel', {
	anchorX: 0.5,
	anchorY: 0.5
}));
instructionPanel.x = 1024;
instructionPanel.y = 1366;
instructionPanel.alpha = 0;
var instructionTitle = new Text2('How to Read Math Problems', {
	size: 100,
	fill: 0x333333
});
instructionTitle.anchor.set(0.5, 0.5);
instructionTitle.x = 1024;
instructionTitle.y = 900;
instructionTitle.alpha = 0;
game.addChild(instructionTitle);
var instructionContent = new Text2('• Look at the math problem carefully\n• Read each number and symbol from left to right\n• + means add the numbers together\n• - means subtract the second from the first\n• × means multiply the numbers\n• ÷ means divide the first by the second\n• = means "equals" - find what number comes after\n• Practice reading math problems out loud', {
	size: 70,
	fill: 0x444444
});
instructionContent.anchor.set(0.5, 0.5);
instructionContent.x = 1024;
instructionContent.y = 1300;
instructionContent.alpha = 0;
game.addChild(instructionContent);
var closeButton = game.addChild(LK.getAsset('closeButton', {
	anchorX: 0.5,
	anchorY: 0.5
}));
closeButton.x = 1024;
closeButton.y = 1700;
closeButton.alpha = 0;
var closeButtonText = new Text2('Close', {
	size: 50,
	fill: 0xFFFFFF
});
closeButtonText.anchor.set(0.5, 0.5);
closeButtonText.x = 1024;
closeButtonText.y = 1700;
closeButtonText.alpha = 0;
game.addChild(closeButtonText);
var showingInstructions = false;
function checkAnswer() {
	var userAnswer = writingArea.writtenAnswer.trim();
	var correctAnswer = currentProblem.answer.toString();
	if (userAnswer === correctAnswer) {
		feedbackText.setText('Correct! Great job!');
		feedbackText.tint = 0x32CD32;
		LK.getSound('correct').play();
		correctAnswers++;
		LK.setScore(LK.getScore() + 10 * level);
		scoreText.setText('Score: ' + LK.getScore());
		createCelebrationStars();
		nextButton.alpha = 1;
		nextButtonText.alpha = 1;
		gameState = 'correct';
		if (correctAnswers >= 5) {
			level++;
			storage.level = level;
			levelText.setText('Level: ' + level);
			currentProblem.difficulty = level;
			correctAnswers = 0;
			LK.setTimeout(function () {
				feedbackText.setText('Level Up! Well done!');
				LK.getSound('celebration').play();
			}, 1000);
		}
	} else {
		feedbackText.setText('Try again! The answer is ' + correctAnswer);
		feedbackText.tint = 0xFF6B6B;
		LK.getSound('incorrect').play();
		LK.setTimeout(function () {
			feedbackText.setText('');
			writingArea.clearDrawing();
		}, 2000);
	}
}
function createCelebrationStars() {
	for (var i = 0; i < 5; i++) {
		var star = new CelebrationStar();
		star.x = 1024 + (Math.random() - 0.5) * 600;
		star.y = 1200 + (Math.random() - 0.5) * 400;
		celebrationStars.push(star);
		game.addChild(star);
		LK.setTimeout(function (starToAnimate) {
			return function () {
				starToAnimate.startAnimation();
			};
		}(star), i * 100);
	}
}
function nextProblem() {
	currentProblem.generateProblem();
	problemText.setText(currentProblem.getProblemText());
	writingArea.clearDrawing();
	feedbackText.setText('');
	nextButton.alpha = 0;
	nextButtonText.alpha = 0;
	gameState = 'playing';
}
game.down = function (x, y, obj) {
	if (gameState === 'playing') {
		// Check if touch is within writing area bounds using proper coordinate system
		var areaX = writingArea.x - 800; // writingArea width is 1600, so half is 800
		var areaY = writingArea.y - 200; // writingArea height is 400, so half is 200
		var areaWidth = 1600;
		var areaHeight = 400;
		if (x >= areaX && x <= areaX + areaWidth && y >= areaY && y <= areaY + areaHeight) {
			writingArea.startDrawing(x, y);
		}
	}
};
game.move = function (x, y, obj) {
	if (gameState === 'playing') {
		writingArea.continueDrawing(x, y);
	}
};
game.up = function (x, y, obj) {
	if (gameState === 'playing') {
		writingArea.stopDrawing();
	}
};
submitButton.down = function (x, y, obj) {
	if (gameState === 'playing' && writingArea.writtenAnswer !== '') {
		checkAnswer();
	}
};
clearButton.down = function (x, y, obj) {
	if (gameState === 'playing') {
		writingArea.clearDrawing();
		feedbackText.setText('');
	}
};
backspaceButton.down = function (x, y, obj) {
	if (gameState === 'playing') {
		writingArea.backspace();
		feedbackText.setText('');
	}
};
nextButton.down = function (x, y, obj) {
	if (gameState === 'correct') {
		nextProblem();
	}
};
howToReadButton.down = function (x, y, obj) {
	if (!showingInstructions) {
		showingInstructions = true;
		instructionPanel.alpha = 1;
		instructionTitle.alpha = 1;
		instructionContent.alpha = 1;
		closeButton.alpha = 1;
		closeButtonText.alpha = 1;
	}
};
closeButton.down = function (x, y, obj) {
	if (showingInstructions) {
		showingInstructions = false;
		instructionPanel.alpha = 0;
		instructionTitle.alpha = 0;
		instructionContent.alpha = 0;
		closeButton.alpha = 0;
		closeButtonText.alpha = 0;
	}
};
// Number button handlers
for (var i = 0; i < numberButtons.length; i++) {
	(function (num) {
		numberButtons[num].down = function (x, y, obj) {
			if (gameState === 'playing') {
				if (num < 9) {
					writingArea.writtenAnswer += (num + 1).toString();
				} else {
					writingArea.writtenAnswer += '0';
				}
				answerText.setText(writingArea.writtenAnswer);
				textBar.alpha = 1;
			}
		};
	})(i);
}
game.update = function () {
	for (var i = celebrationStars.length - 1; i >= 0; i--) {
		var star = celebrationStars[i];
		if (star.alpha <= 0) {
			celebrationStars.splice(i, 1);
		}
	}
};

===================================================================
--- original.js
+++ change.js
@@ -367,8 +367,26 @@
 	game.addChild(buttonText);
 	numberButtons.push(button);
 	numberButtonTexts.push(buttonText);
 }
+// Add 0 button
+var zeroButton = game.addChild(LK.getAsset('submitButton', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
+zeroButton.tint = 0x4169E1;
+zeroButton.x = 400;
+zeroButton.y = 2200;
+var zeroButtonText = new Text2('0', {
+	size: 60,
+	fill: 0xFFFFFF
+});
+zeroButtonText.anchor.set(0.5, 0.5);
+zeroButtonText.x = zeroButton.x;
+zeroButtonText.y = zeroButton.y;
+game.addChild(zeroButtonText);
+numberButtons.push(zeroButton);
+numberButtonTexts.push(zeroButtonText);
 var nextButton = game.addChild(LK.getAsset('nextButton', {
 	anchorX: 0.5,
 	anchorY: 0.5
 }));
@@ -587,9 +605,13 @@
 for (var i = 0; i < numberButtons.length; i++) {
 	(function (num) {
 		numberButtons[num].down = function (x, y, obj) {
 			if (gameState === 'playing') {
-				writingArea.writtenAnswer += (num + 1).toString();
+				if (num < 9) {
+					writingArea.writtenAnswer += (num + 1).toString();
+				} else {
+					writingArea.writtenAnswer += '0';
+				}
 				answerText.setText(writingArea.writtenAnswer);
 				textBar.alpha = 1;
 			}
 		};