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

/**** 
* Classes
****/ 
// Palette button class
var PaletteButton = Container.expand(function () {
	var self = Container.call(this);
	self.colorId = null;
	self.block = self.attachAsset('color_white', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.block.width = paletteCellSize;
	self.block.height = paletteCellSize;
	self.setColor = function (colorId) {
		self.colorId = colorId;
		self.removeChild(self.block);
		self.block = self.attachAsset(colorId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.block.width = paletteCellSize;
		self.block.height = paletteCellSize;
	};
	// Touch event
	self.down = function (x, y, obj) {
		selectColor(self.colorId);
	};
	return self;
});
// Pixel cell class for the drawing grid
var PixelCell = Container.expand(function () {
	var self = Container.call(this);
	self.colorId = null; // Current color id (e.g. 'color_yellow')
	self.gridX = 0;
	self.gridY = 0;
	// The colored block
	self.block = self.attachAsset('color_white', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.block.width = cellSize;
	self.block.height = cellSize;
	// Draws the cell with the given color id
	self.setColor = function (colorId) {
		self.colorId = colorId;
		self.removeChild(self.block);
		self.block = self.attachAsset(colorId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.block.width = cellSize;
		self.block.height = cellSize;
	};
	// For checking if the cell is filled with the correct color
	self.getColorId = function () {
		return self.colorId;
	};
	// Touch event
	self.down = function (x, y, obj) {
		if (selectedColorId) {
			self.setColor(selectedColorId);
			checkIfComplete();
		}
	};
	return self;
});
// Reference cell class (non-interactive, just for showing the reference)
var ReferenceCell = Container.expand(function () {
	var self = Container.call(this);
	self.block = self.attachAsset('color_white', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.block.width = cellSize;
	self.block.height = cellSize;
	self.setColor = function (colorId) {
		self.removeChild(self.block);
		self.block = self.attachAsset(colorId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.block.width = cellSize;
		self.block.height = cellSize;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Reference image: We'll use a grid of colored blocks as a reference (not an actual image asset, but a grid rendered in-game).
// Define color palette for SpongeBob pixel art (approximate colors)
// --- CONFIGURATION ---
// This block is moved to ensure correct data initialization.
var gridCols = 12;
var gridRows = 16;
var cellSize = 90; // px, for main grid
var paletteCellSize = 80; // px, for palette
// Center the grid
var gridStartX = Math.floor((2048 - gridCols * cellSize) / 2);
var gridStartY = 350;
// Reference grid (smaller, at top)
var refCellSize = 40;
var refGridStartX = Math.floor((2048 - gridCols * refCellSize) / 2);
var refGridStartY = 120;
// Palette bar
var paletteStartY = 2732 - 220;
// Color palette (order matters for palette bar)
var colorPalette = ['color_yellow', 'color_white', 'color_black', 'color_brown', 'color_blue', 'color_red', 'color_pink', 'color_green'];
// Map colorId to color name for display
var colorNames = {
	'color_yellow': 'Yellow',
	'color_white': 'White',
	'color_black': 'Black',
	'color_brown': 'Brown',
	'color_blue': 'Blue',
	'color_red': 'Red',
	'color_pink': 'Pink',
	'color_green': 'Green'
};
// The reference pixel art for SpongeBob (12x16 grid, using colorPalette indices)
// 0: yellow, 1: white, 2: black, 3: brown, 4: blue, 5: red, 6: pink, 7: green
// Improved SpongeBob reference pixel art (12x16 grid)
// 0: yellow, 1: white, 2: black, 3: brown, 4: blue, 5: red, 6: pink, 7: green
var spongebobReference = [[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2], [2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 2], [2, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 2], [2, 0, 3, 0, 0, 0, 0, 0, 0, 3, 0, 2], [2, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 2], [2, 0, 4, 4, 1, 1, 1, 1, 4, 4, 0, 2], [2, 0, 4, 4, 1, 1, 1, 1, 4, 4, 0, 2], [2, 0, 0, 0, 5, 5, 5, 5, 0, 0, 0, 2], [2, 0, 0, 7, 7, 0, 0, 7, 7, 0, 0, 2], [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]];
// Convert indices to colorIds for easier comparison
function getColorIdByIndex(idx) {
	return colorPalette[idx];
}
var spongebobReferenceColorIds = [];
for (var y = 0; y < gridRows; y++) {
	var row = [];
	for (var x = 0; x < gridCols; x++) {
		row.push(getColorIdByIndex(spongebobReference[y][x]));
	}
	spongebobReferenceColorIds.push(row);
}
// spongebobReferenceColorIds array creation moved after spongebobReference definition is finalized.
// --- STATE ---
var gridCells = []; // 2D array of PixelCell
var selectedColorId = colorPalette[0]; // Default selected color
var paletteButtons = [];
var isComplete = false;
// --- UI ---
// Title
var titleText = new Text2('SpongeBob Pixel Art', {
	size: 90,
	fill: 0x222222
});
titleText.anchor.set(0.5, 0);
LK.gui.top.addChild(titleText);
// Instructions
var instrText = new Text2('Tap a color, then tap the grid to fill. Try to match the reference above!', {
	size: 48,
	fill: 0x444444
});
instrText.anchor.set(0.5, 0);
LK.gui.top.addChild(instrText);
instrText.y = 110;
// --- REFERENCE GRID ---
var referenceCells = [];
for (var y = 0; y < gridRows; y++) {
	var row = [];
	for (var x = 0; x < gridCols; x++) {
		var refCell = new ReferenceCell();
		refCell.setColor(spongebobReferenceColorIds[y][x]);
		refCell.x = refGridStartX + x * refCellSize + refCellSize / 2;
		refCell.y = refGridStartY + y * refCellSize + refCellSize / 2;
		game.addChild(refCell);
		row.push(refCell);
	}
	referenceCells.push(row);
}
// --- MAIN DRAWING GRID ---
for (var y = 0; y < gridRows; y++) {
	var row = [];
	for (var x = 0; x < gridCols; x++) {
		var cell = new PixelCell();
		cell.x = gridStartX + x * cellSize + cellSize / 2;
		cell.y = gridStartY + y * cellSize + cellSize / 2;
		cell.gridX = x;
		cell.gridY = y;
		cell.setColor('color_white');
		game.addChild(cell);
		row.push(cell);
	}
	gridCells.push(row);
}
// --- PALETTE BAR ---
var paletteBarWidth = colorPalette.length * (paletteCellSize + 24) - 24;
var paletteBarStartX = Math.floor((2048 - paletteBarWidth) / 2);
for (var i = 0; i < colorPalette.length; i++) {
	var colorId = colorPalette[i];
	var btn = new PaletteButton();
	btn.setColor(colorId);
	btn.x = paletteBarStartX + i * (paletteCellSize + 24) + paletteCellSize / 2;
	btn.y = paletteStartY + paletteCellSize / 2;
	game.addChild(btn);
	paletteButtons.push(btn);
}
// --- PALETTE SELECTION INDICATOR ---
var paletteIndicator = LK.getAsset('color_black', {
	anchorX: 0.5,
	anchorY: 0.5
});
paletteIndicator.width = paletteCellSize + 16;
paletteIndicator.height = paletteCellSize + 16;
paletteIndicator.alpha = 0.25;
game.addChild(paletteIndicator);
// --- MINI SPONGEBOB REFERENCE AT BOTTOM ---
// Use the SpongeBobReference image asset at the bottom center as a reference
// Set the mini reference image to be a square aspect ratio
var miniRefImageSize = 384; // Make it a square, same as previous height
var miniRefGridMarginAbovePalette = 40; // Margin between top of palette and bottom of mini-grid
var miniRefImageBottomY = paletteStartY - miniRefGridMarginAbovePalette;
var miniRefImageStartX = Math.floor((2048 - miniRefImageSize) / 2);
var miniRefImageStartY = miniRefImageBottomY - miniRefImageSize;
// Add the reference image asset as a square
var miniRefImage = LK.getAsset('SpongeBobReference', {
	anchorX: 0,
	anchorY: 0,
	x: miniRefImageStartX,
	y: miniRefImageStartY,
	width: miniRefImageSize,
	height: miniRefImageSize,
	alpha: 0.95
});
game.addChild(miniRefImage);
// --- PALETTE SELECTION LOGIC ---
// Play and loop the music asset named Music on first user interaction (to comply with browser autoplay policies)
var musicStarted = false;
function startMusicIfNeeded() {
	if (!musicStarted) {
		LK.playMusic('Music', {
			loop: true
		});
		musicStarted = true;
	}
}
// Listen for first interaction to start music
game.down = function (x, y, obj) {
	startMusicIfNeeded();
	// If a palette button or grid cell is pressed, their own .down will also be called
};
function selectColor(colorId) {
	selectedColorId = colorId;
	// Move indicator to selected button
	for (var i = 0; i < paletteButtons.length; i++) {
		if (paletteButtons[i].colorId === colorId) {
			paletteIndicator.x = paletteButtons[i].x;
			paletteIndicator.y = paletteButtons[i].y;
			break;
		}
	}
}
selectColor(selectedColorId);
// --- COMPLETION CHECK ---
function checkIfComplete() {
	if (isComplete) return;
	for (var y = 0; y < gridRows; y++) {
		for (var x = 0; x < gridCols; x++) {
			if (gridCells[y][x].getColorId() !== spongebobReferenceColorIds[y][x]) {
				return;
			}
		}
	}
	// All cells match!
	isComplete = true;
	showCompletion();
}
// --- COMPLETION UI ---
function showCompletion() {
	// Flash green
	LK.effects.flashScreen(0x7ED957, 800);
	// Show "You did it!" message
	var winText = new Text2('You did it!', {
		size: 120,
		fill: 0x7ED957
	});
	winText.anchor.set(0.5, 0.5);
	winText.x = 2048 / 2;
	winText.y = 2732 / 2 - 100;
	game.addChild(winText);
	var compareText = new Text2('Your SpongeBob matches the reference!', {
		size: 60,
		fill: 0x222222
	});
	compareText.anchor.set(0.5, 0.5);
	compareText.x = 2048 / 2;
	compareText.y = 2732 / 2 + 40;
	game.addChild(compareText);
	// Animate winText
	tween(winText, {
		scaleX: 1.2,
		scaleY: 1.2
	}, {
		duration: 400,
		easing: tween.elasticOut,
		onFinish: function onFinish() {
			tween(winText, {
				scaleX: 1,
				scaleY: 1
			}, {
				duration: 300,
				easing: tween.easeOut
			});
		}
	});
}
// --- GAME UPDATE ---
game.update = function () {
	// No per-frame logic needed for this game
};
// --- DRAG PREVENTION ---
// No drag logic needed; all interaction is tap/click
// --- GUI LAYOUT ---
// Position title and instructions
titleText.x = 2048 / 2;
titleText.y = 20;
instrText.x = 2048 / 2;
instrText.y = 120;
// --- END OF GAME CODE ---

===================================================================
--- original.js
+++ change.js
@@ -99,12 +99,12 @@
 
 /**** 
 * Game Code
 ****/ 
-// This block is moved to ensure correct data initialization.
-// --- CONFIGURATION ---
-// Define color palette for SpongeBob pixel art (approximate colors)
 // Reference image: We'll use a grid of colored blocks as a reference (not an actual image asset, but a grid rendered in-game).
+// Define color palette for SpongeBob pixel art (approximate colors)
+// --- CONFIGURATION ---
+// This block is moved to ensure correct data initialization.
 var gridCols = 12;
 var gridRows = 16;
 var cellSize = 90; // px, for main grid
 var paletteCellSize = 80; // px, for palette
@@ -236,13 +236,25 @@
 	width: miniRefImageSize,
 	height: miniRefImageSize,
 	alpha: 0.95
 });
+game.addChild(miniRefImage);
 // --- PALETTE SELECTION LOGIC ---
-// Play and loop the music asset named Music after game is initialized
-LK.playMusic('Music', {
-	loop: true
-});
+// Play and loop the music asset named Music on first user interaction (to comply with browser autoplay policies)
+var musicStarted = false;
+function startMusicIfNeeded() {
+	if (!musicStarted) {
+		LK.playMusic('Music', {
+			loop: true
+		});
+		musicStarted = true;
+	}
+}
+// Listen for first interaction to start music
+game.down = function (x, y, obj) {
+	startMusicIfNeeded();
+	// If a palette button or grid cell is pressed, their own .down will also be called
+};
 function selectColor(colorId) {
 	selectedColorId = colorId;
 	// Move indicator to selected button
 	for (var i = 0; i < paletteButtons.length; i++) {