/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
	scores: []
});

/**** 
* Classes
****/ 
var GridCell = Container.expand(function (gridX, gridY) {
	var self = Container.call(this);
	self.gridX = gridX;
	self.gridY = gridY;
	self.value = 0;
	self.isHighlighted = false;
	var borderBg = self.attachAsset('gridBorder', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	borderBg.alpha = 1; // Ensure border is fully visible
	borderBg.tint = 0xffffff; // Ensure white color
	var cellBg = self.attachAsset('gridCell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var highlightBg = self.attachAsset('gridCellHighlight', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0
	});
	self.valueText = new Text2('', {
		size: 60,
		fill: 0xFFFFFF
	});
	self.valueText.anchor.set(0.5, 0.5);
	self.addChild(self.valueText);
	self.highlight = function () {
		if (!self.isHighlighted) {
			self.isHighlighted = true;
			tween(highlightBg, {
				alpha: 0.7
			}, {
				duration: 200
			});
		}
	};
	self.unhighlight = function () {
		if (self.isHighlighted) {
			self.isHighlighted = false;
			tween(highlightBg, {
				alpha: 0
			}, {
				duration: 200
			});
		}
	};
	self.setValue = function (newValue) {
		self.value = newValue;
		if (self.value > 0) {
			self.valueText.setText(self.value.toString());
		} else {
			self.valueText.setText('');
		}
	};
	self.down = function (x, y, obj) {
		if (gameState === 'playing') {
			handleCellClick(self.gridX, self.gridY);
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Create space background with stars, nebulas, planets and asteroids
for (var i = 0; i < 300; i++) {
	var star = game.addChild(LK.getAsset('star', {
		anchorX: 0.5,
		anchorY: 0.5
	}));
	star.x = Math.random() * 2048;
	star.y = Math.random() * 2732;
	star.alpha = Math.random() * 0.8 + 0.2;
}
// Add nebulas for depth
for (var i = 0; i < 15; i++) {
	var nebula = game.addChild(LK.getAsset('nebula', {
		anchorX: 0.5,
		anchorY: 0.5
	}));
	nebula.x = Math.random() * 2048;
	nebula.y = Math.random() * 2732;
	nebula.alpha = Math.random() * 0.3 + 0.1;
	nebula.scaleX = Math.random() * 2 + 0.5;
	nebula.scaleY = Math.random() * 2 + 0.5;
	var colors = [0x4B0082, 0x8A2BE2, 0x9932CC, 0x483D8B];
	nebula.tint = colors[Math.floor(Math.random() * colors.length)];
}
// Add distant planets
for (var i = 0; i < 8; i++) {
	var planet = game.addChild(LK.getAsset('planet', {
		anchorX: 0.5,
		anchorY: 0.5
	}));
	planet.x = Math.random() * 2048;
	planet.y = Math.random() * 2732;
	planet.alpha = Math.random() * 0.6 + 0.3;
	planet.scaleX = Math.random() * 1.5 + 0.5;
	planet.scaleY = Math.random() * 1.5 + 0.5;
	var planetColors = [0x8B4513, 0xFF4500, 0x32CD32, 0x4169E1, 0xDC143C];
	planet.tint = planetColors[Math.floor(Math.random() * planetColors.length)];
}
// Add floating asteroids
for (var i = 0; i < 25; i++) {
	var asteroid = game.addChild(LK.getAsset('asteroid', {
		anchorX: 0.5,
		anchorY: 0.5
	}));
	asteroid.x = Math.random() * 2048;
	asteroid.y = Math.random() * 2732;
	asteroid.alpha = Math.random() * 0.7 + 0.2;
	asteroid.scaleX = Math.random() * 1.2 + 0.3;
	asteroid.scaleY = Math.random() * 1.2 + 0.3;
	asteroid.rotation = Math.random() * Math.PI * 2;
}
// Game state
var gameState = 'playing'; // 'playing', 'won', 'lost'
var playerX = 0;
var playerY = 0;
var totalSum = 0;
var moveCount = 0;
var maxMoves = 100;
// Grid setup
var gridSize = 10;
var cellSize = 180;
var gridStartX = (2048 - gridSize * cellSize) / 2;
var gridStartY = 200;
var grid = [];
// UI elements
var totalText = new Text2('Total: 0', {
	size: 80,
	fill: 0xFFFFFF
});
totalText.anchor.set(0.5, 0);
totalText.x = 2048 / 2;
totalText.y = 50;
game.addChild(totalText);
var movesText = new Text2('Moves: 0/100', {
	size: 60,
	fill: 0xFFFFFF
});
movesText.anchor.set(0.5, 0);
movesText.x = 2048 / 2;
movesText.y = 2600;
game.addChild(movesText);
var instructionText = new Text2('Click to move! Reach 100 moves to win!', {
	size: 50,
	fill: 0xFFFF00
});
instructionText.anchor.set(0.5, 1);
instructionText.x = 2048 / 2;
instructionText.y = 2700;
game.addChild(instructionText);
// Create grid
for (var x = 0; x < gridSize; x++) {
	grid[x] = [];
	for (var y = 0; y < gridSize; y++) {
		var cell = new GridCell(x, y);
		cell.x = gridStartX + x * cellSize + cellSize / 2;
		cell.y = gridStartY + y * cellSize + cellSize / 2;
		grid[x][y] = cell;
		game.addChild(cell);
		// Ensure border is always on top and visible
		cell.children[0].alpha = 1;
		cell.children[0].tint = 0xffffff;
	}
}
// Player indicator
var playerIndicator = game.addChild(LK.getAsset('playerIndicator', {
	anchorX: 0.5,
	anchorY: 0.5
}));
function updatePlayerPosition() {
	playerIndicator.x = grid[playerX][playerY].x;
	playerIndicator.y = grid[playerX][playerY].y - 60;
}
function updateValidMoves() {
	// Clear all highlights
	for (var x = 0; x < gridSize; x++) {
		for (var y = 0; y < gridSize; y++) {
			grid[x][y].unhighlight();
		}
	}
	// If this is the first move (moveCount is 0), highlight all empty cells
	if (moveCount === 0) {
		for (var x = 0; x < gridSize; x++) {
			for (var y = 0; y < gridSize; y++) {
				if (grid[x][y].value === 0) {
					grid[x][y].highlight();
				}
			}
		}
	} else {
		// Highlight valid moves from current position, but only if they are empty (value === 0)
		var validMoves = getValidMoves(playerX, playerY);
		for (var i = 0; i < validMoves.length; i++) {
			var move = validMoves[i];
			if (grid[move.x][move.y].value === 0) {
				grid[move.x][move.y].highlight();
			}
		}
	}
}
function getValidMoves(x, y) {
	var moves = [];
	// 3 squares orthogonal moves
	var orthogonalMoves = [{
		x: x + 3,
		y: y
	},
	// right 3
	{
		x: x - 3,
		y: y
	},
	// left 3
	{
		x: x,
		y: y + 3
	},
	// down 3
	{
		x: x,
		y: y - 3
	} // up 3
	];
	// 2 square diagonal moves
	var diagonalMoves = [{
		x: x + 2,
		y: y + 2
	},
	// down-right
	{
		x: x + 2,
		y: y - 2
	},
	// up-right
	{
		x: x - 2,
		y: y + 2
	},
	// down-left
	{
		x: x - 2,
		y: y - 2
	} // up-left
	];
	var allMoves = orthogonalMoves.concat(diagonalMoves);
	for (var i = 0; i < allMoves.length; i++) {
		var move = allMoves[i];
		if (move.x >= 0 && move.x < gridSize && move.y >= 0 && move.y < gridSize) {
			moves.push(move);
		}
	}
	return moves;
}
function isValidMove(fromX, fromY, toX, toY) {
	var validMoves = getValidMoves(fromX, fromY);
	for (var i = 0; i < validMoves.length; i++) {
		var move = validMoves[i];
		if (move.x === toX && move.y === toY) {
			return true;
		}
	}
	return false;
}
function handleCellClick(clickX, clickY) {
	if (gameState !== 'playing') return;
	// Check if cell has already been clicked (has a value)
	if (grid[clickX][clickY].value > 0) {
		// Cell already clicked, play invalid sound and flash red
		LK.getSound('invalid').play();
		LK.effects.flashObject(grid[clickX][clickY], 0xff0000, 500);
		return;
	}
	if (moveCount === 0 || isValidMove(playerX, playerY, clickX, clickY)) {
		// Valid move
		LK.getSound('move').play();
		playerX = clickX;
		playerY = clickY;
		moveCount++;
		// Set the cell value to the current move count (1, 2, 3...100)
		grid[clickX][clickY].setValue(moveCount);
		// Update total
		totalSum = 0;
		for (var x = 0; x < gridSize; x++) {
			for (var y = 0; y < gridSize; y++) {
				totalSum += grid[x][y].value;
			}
		}
		updatePlayerPosition();
		updateValidMoves();
		updateUI();
		// Check win condition
		if (moveCount >= 100) {
			gameState = 'won';
			saveScore();
			LK.showYouWin();
		} else {
			// Check if there are any valid moves left (empty cells that can be reached)
			var validMoves = getValidMoves(playerX, playerY);
			var hasValidMoves = false;
			for (var i = 0; i < validMoves.length; i++) {
				if (grid[validMoves[i].x][validMoves[i].y].value === 0) {
					hasValidMoves = true;
					break;
				}
			}
			if (moveCount >= maxMoves || !hasValidMoves) {
				gameState = 'lost';
				saveScore();
				showFinalScore();
			}
		}
	} else {
		// Invalid move
		LK.getSound('invalid').play();
		LK.effects.flashObject(grid[clickX][clickY], 0xff0000, 500);
	}
}
function updateUI() {
	totalText.setText('Total: ' + totalSum);
	movesText.setText('Moves: ' + moveCount + '/' + maxMoves);
	if (moveCount >= 100) {
		totalText.fill = 0x00ff00;
	} else if (moveCount >= maxMoves * 0.8) {
		movesText.style = {
			fill: 0xff6600
		};
	}
}
function saveScore() {
	var scores = storage.scores || [];
	var newScore = {
		score: totalSum,
		moves: moveCount,
		timestamp: Date.now()
	};
	scores.push(newScore);
	// Sort by score (descending)
	scores.sort(function (a, b) {
		return b.score - a.score;
	});
	// Keep only top 10
	if (scores.length > 10) {
		scores = scores.slice(0, 10);
	}
	storage.scores = scores;
}
function showFinalScore() {
	// Create final score display positioned over the center of the grid
	var finalScoreContainer = new Container();
	finalScoreContainer.x = 2048 / 2;
	finalScoreContainer.y = gridStartY + gridSize * cellSize / 2;
	// Add white background - make it bigger for leaderboard
	var background = finalScoreContainer.attachAsset('finalScoreBackground', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 1.5,
		scaleY: 2
	});
	// Get scores from storage for leaderboard
	var scores = storage.scores || [];
	var currentScore = totalSum;
	var playerRank = scores.length + 1;
	// Find player's rank
	for (var i = 0; i < scores.length; i++) {
		if (currentScore > scores[i].score) {
			playerRank = i + 1;
			break;
		}
	}
	// Congratulations title
	var congratsText = new Text2('Congratulations!', {
		size: 80,
		fill: 0x000000,
		font: "'Arial', sans-serif"
	});
	congratsText.anchor.set(0.5, 0.5);
	congratsText.y = -350;
	finalScoreContainer.addChild(congratsText);
	// Game completion message
	var completionText = new Text2("You've completed the game, but there are no more valid moves left.", {
		size: 40,
		fill: 0x000000,
		font: "'Arial', sans-serif"
	});
	completionText.anchor.set(0.5, 0.5);
	completionText.y = -280;
	finalScoreContainer.addChild(completionText);
	// Final score message
	var finalScoreText = new Text2('Your final score is ' + currentScore + '.', {
		size: 50,
		fill: 0x000000,
		font: "'Arial', sans-serif"
	});
	finalScoreText.anchor.set(0.5, 0.5);
	finalScoreText.y = -220;
	finalScoreContainer.addChild(finalScoreText);
	// Leaderboard title
	var leaderboardTitle = new Text2("Here's how you rank among other players:", {
		size: 45,
		fill: 0x000000,
		font: "'Arial', sans-serif"
	});
	leaderboardTitle.anchor.set(0.5, 0.5);
	leaderboardTitle.y = -150;
	finalScoreContainer.addChild(leaderboardTitle);
	// Display top scores
	var yOffset = -80;
	for (var i = 0; i < Math.min(5, scores.length); i++) {
		var scoreText = new Text2('Player ' + (i + 1) + ' – ' + scores[i].score, {
			size: 35,
			fill: 0x000000,
			font: "'Arial', sans-serif"
		});
		scoreText.anchor.set(0.5, 0.5);
		scoreText.y = yOffset;
		finalScoreContainer.addChild(scoreText);
		yOffset += 40;
	}
	// Player rank
	var rankText = new Text2('Your position: ' + playerRank, {
		size: 45,
		fill: 0xff0000,
		font: "'Arial', sans-serif"
	});
	rankText.anchor.set(0.5, 0.5);
	rankText.y = yOffset + 40;
	finalScoreContainer.addChild(rankText);
	// Display the highest number reached prominently with hand-drawn style effect
	var highestNumberText = new Text2(moveCount.toString(), {
		size: 200,
		fill: 0x000000,
		font: "'Courier New', monospace"
	});
	highestNumberText.anchor.set(0.5, 0.5);
	highestNumberText.y = 250;
	// Create hand-drawn pencil effect by adding multiple slightly offset copies
	var offsetsX = [-3, 2, -1, 1, -2, 0, 1, -1];
	var offsetsY = [1, -2, 2, -1, 0, 1, -1, 2];
	var alphas = [0.3, 0.4, 0.3, 0.4, 0.3, 0.4, 0.3, 0.4];
	for (var i = 0; i < offsetsX.length; i++) {
		var shadowText = new Text2(moveCount.toString(), {
			size: 200,
			fill: 0x000000,
			font: "'Courier New', monospace"
		});
		shadowText.anchor.set(0.5, 0.5);
		shadowText.x = offsetsX[i];
		shadowText.y = 250 + offsetsY[i];
		shadowText.alpha = alphas[i];
		finalScoreContainer.addChild(shadowText);
	}
	// Add the main text on top
	finalScoreContainer.addChild(highestNumberText);
	// Add some rotation for hand-drawn effect
	finalScoreContainer.rotation = (Math.random() - 0.5) * 0.1;
	game.addChild(finalScoreContainer);
	// Auto trigger game over after showing the leaderboard
	LK.setTimeout(function () {
		LK.showGameOver();
	}, 8000);
}
// Initialize game
updatePlayerPosition();
updateValidMoves();
updateUI();

===================================================================
--- original.js
+++ change.js
@@ -1,9 +1,11 @@
 /**** 
 * Plugins
 ****/ 
 var tween = LK.import("@upit/tween.v1");
-var storage = LK.import("@upit/storage.v1");
+var storage = LK.import("@upit/storage.v1", {
+	scores: []
+});
 
 /**** 
 * Classes
 ****/