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

/**** 
* Classes
****/ 
// Pattern class: a container for a randomly generated pattern at a given position.
var Pattern = Container.expand(function () {
	var self = Container.call(this);
	// Generate a random pattern on creation
	// Patterns: single shape, cluster, or overlay
	function randomColor() {
		// Expanded palette: all visually distinct, vibrant, and basic colors
		// Turkish color names: beyaz, sarı, turuncu, kırmızı, mor, mavi, yeşil, kahverengi, gri, siyah, pembe, bej, turkuaz, lacivert, bordo, altın, gümüş, bronz, mercan, zeytin yeşili, füme, lila, eflatun, krem, ten rengi, haki, camgöbeği, magenta, çivit mavisi, vişne çürüğü, kobalt mavisi, nane yeşili, lavanta
		// Full Turkish color palette, all unique and vibrant, including all requested names
		var colors = [0xffffff,
		// beyaz
		0xffff00,
		// sarı
		0xffa500,
		// turuncu
		0xff0000,
		// kırmızı
		0x800080,
		// mor
		0x0000ff,
		// mavi
		0x008000,
		// yeşil
		0x8b4513,
		// kahverengi
		0x808080,
		// gri
		0x000000,
		// siyah
		0xffb6c1,
		// pembe
		0xf5f5dc,
		// bej
		0x40e0d0,
		// turkuaz
		0x191970,
		// lacivert
		0x800000,
		// bordo
		0xffd700,
		// altın
		0xc0c0c0,
		// gümüş
		0xcd7f32,
		// bronz
		0xff7f50,
		// mercan
		0x808000,
		// zeytin yeşili
		0x545454,
		// füme
		0xb57edc,
		// lila
		0x8f00ff,
		// eflatun
		0xfffdd0,
		// krem
		0xffdab9,
		// ten rengi (peachpuff)
		0x808000,
		// haki
		0x00ced1,
		// camgöbeği
		0xff00ff,
		// magenta
		0x00416a,
		// çivit mavisi
		0x70193d,
		// vişne çürüğü
		0x0047ab,
		// kobalt mavisi
		0x98ff98,
		// nane yeşili
		0xe6e6fa,
		// lavanta
		// Extra vibrant and pastel tones for more variety
		0xff5e5b, 0xffc857, 0x4ecdc4, 0x3a86ff, 0xffbe0b, 0xfb5607, 0x8338ec, 0xff006e, 0x06d6a0, 0x00ff00, 0x00ffff, 0xff1493, 0x00bfff, 0x9932cc, 0x8b0000, 0x2e8b57, 0xff6347, 0x9acd32, 0x6495ed, 0xdda0dd, 0xb0e0e6, 0xf5deb3, 0xf0e68c, 0xe9967a, 0x48d1cc, 0x9400d3, 0x00ff7f, 0x7b68ee, 0x6a5acd, 0x5f9ea0, 0x8b008b, 0x556b2f, 0x228b22, 0xd2691e, 0xb22222, 0x00008b, 0x008b8b, 0xb8860b, 0xa9a9a9, 0x006400, 0xbdb76b, 0xff8c00, 0x8fbc8f, 0x483d8b, 0x2f4f4f, 0x696969, 0xfffaf0, 0xdcdcdc, 0xf8f8ff, 0xdaa520, 0xadff2f, 0xf0fff0, 0xff69b4, 0xcd5c5c, 0x4b0082, 0xfffff0, 0xfff0f5, 0xfffacd, 0xadd8e6, 0xf08080, 0xe0ffff, 0xfafad2, 0xd3d3d3, 0x90ee90, 0xffa07a, 0x20b2aa, 0x87cefa, 0x778899, 0xb0c4de, 0xffffe0, 0x32cd32, 0xfaf0e6, 0x66cdaa, 0x0000cd, 0xba55d3, 0x9370db, 0x3cb371, 0x00fa9a, 0xc71585, 0xf5fffa, 0xffe4e1, 0xffe4b5, 0xffdead, 0x000080, 0xfdf5e6, 0x6b8e23, 0xff4500, 0xda70d6, 0xeee8aa, 0x98fb98, 0xafeeee, 0xdb7093, 0xffefd5, 0xcd853f, 0xffc0cb, 0x4169e1, 0xfa8072, 0xf4a460, 0xfff5ee, 0xa0522d, 0x87ceeb, 0x708090, 0xfffafa, 0xd2b48c, 0xd8bfd8, 0xee82ee, 0xf5f5f5, 0x9acd32];
		// Simulate a gradient by returning an array of two colors sometimes
		if (Math.random() < 0.3) {
			var c1 = colors[Math.floor(Math.random() * colors.length)];
			var c2 = colors[Math.floor(Math.random() * colors.length)];
			return [c1, c2];
		}
		return colors[Math.floor(Math.random() * colors.length)];
	}
	function randomShape() {
		// Return 'box' or 'ellipse'
		return Math.random() < 0.5 ? 'box' : 'ellipse';
	}
	function randomSize() {
		// Return a size between 120 and 400 px
		return 120 + Math.floor(Math.random() * 280);
	}
	function randomRotation() {
		// Return a random rotation in radians
		return Math.random() * Math.PI * 2;
	}
	function randomAlpha() {
		// Return a random alpha between 0.7 and 1
		return 0.7 + Math.random() * 0.3;
	}
	function randomPatternType() {
		// 0: single, 1: cluster, 2: overlay
		var r = Math.random();
		if (r < 0.5) return 0;
		if (r < 0.8) return 1;
		return 2;
	}
	// Generate the pattern
	function generatePattern() {
		var type = randomPatternType();
		if (type === 0) {
			// Single shape
			var w = randomSize();
			var h = randomSize();
			var shape = randomShape();
			var color = randomColor();
			if (Array.isArray(color)) {
				// Simulate a gradient by overlaying two shapes with different colors and alpha
				var asset1 = self.attachAsset({
					shape: shape,
					width: w,
					height: h,
					color: color[0],
					anchorX: 0.5,
					anchorY: 0.5,
					fill: color[0]
				}, {});
				asset1.rotation = randomRotation();
				asset1.alpha = randomAlpha();
				var asset2 = self.attachAsset({
					shape: shape,
					width: w,
					height: h,
					color: color[1],
					anchorX: 0.5,
					anchorY: 0.5,
					fill: color[1]
				}, {});
				asset2.rotation = randomRotation();
				asset2.alpha = 0.5 + Math.random() * 0.3;
			} else {
				var asset = self.attachAsset({
					shape: shape,
					width: w,
					height: h,
					color: color,
					anchorX: 0.5,
					anchorY: 0.5,
					fill: color
				}, {});
				asset.rotation = randomRotation();
				asset.alpha = randomAlpha();
			}
		} else if (type === 1) {
			// Cluster: 3-6 shapes in a circle
			var count = 3 + Math.floor(Math.random() * 4);
			var radius = 80 + Math.random() * 120;
			for (var i = 0; i < count; i++) {
				var angle = Math.PI * 2 / count * i + Math.random() * 0.3;
				var w = randomSize() * (0.5 + Math.random() * 0.7);
				var h = randomSize() * (0.5 + Math.random() * 0.7);
				var shape = randomShape();
				var color = randomColor();
				if (Array.isArray(color)) {
					// Simulate a gradient by overlaying two shapes
					var asset1 = self.attachAsset({
						shape: shape,
						width: w,
						height: h,
						color: color[0],
						anchorX: 0.5,
						anchorY: 0.5,
						fill: color[0]
					}, {});
					asset1.x = Math.cos(angle) * radius;
					asset1.y = Math.sin(angle) * radius;
					asset1.rotation = randomRotation();
					asset1.alpha = randomAlpha();
					var asset2 = self.attachAsset({
						shape: shape,
						width: w,
						height: h,
						color: color[1],
						anchorX: 0.5,
						anchorY: 0.5,
						fill: color[1]
					}, {});
					asset2.x = Math.cos(angle) * radius;
					asset2.y = Math.sin(angle) * radius;
					asset2.rotation = randomRotation();
					asset2.alpha = 0.5 + Math.random() * 0.3;
				} else {
					var asset = self.attachAsset({
						shape: shape,
						width: w,
						height: h,
						color: color,
						anchorX: 0.5,
						anchorY: 0.5,
						fill: color
					}, {});
					asset.x = Math.cos(angle) * radius;
					asset.y = Math.sin(angle) * radius;
					asset.rotation = randomRotation();
					asset.alpha = randomAlpha();
				}
			}
		} else {
			// Overlay: 2-3 shapes stacked with different rotations
			var overlays = 2 + Math.floor(Math.random() * 2);
			for (var j = 0; j < overlays; j++) {
				var w = randomSize() * (0.7 + Math.random() * 0.5);
				var h = randomSize() * (0.7 + Math.random() * 0.5);
				var shape = randomShape();
				var color = randomColor();
				if (Array.isArray(color)) {
					var asset1 = self.attachAsset({
						shape: shape,
						width: w,
						height: h,
						color: color[0],
						anchorX: 0.5,
						anchorY: 0.5,
						fill: color[0]
					}, {});
					asset1.rotation = randomRotation();
					asset1.alpha = 0.5 + Math.random() * 0.5;
					var asset2 = self.attachAsset({
						shape: shape,
						width: w,
						height: h,
						color: color[1],
						anchorX: 0.5,
						anchorY: 0.5,
						fill: color[1]
					}, {});
					asset2.rotation = randomRotation();
					asset2.alpha = 0.3 + Math.random() * 0.3;
				} else {
					var asset = self.attachAsset({
						shape: shape,
						width: w,
						height: h,
						color: color,
						anchorX: 0.5,
						anchorY: 0.5,
						fill: color
					}, {});
					asset.rotation = randomRotation();
					asset.alpha = 0.5 + Math.random() * 0.5;
				}
			}
		}
	}
	generatePattern();
	// Pop-in animation
	self.scale.set(0.2, 0.2);
	tween(self.scale, {
		x: 1,
		y: 1
	}, {
		duration: 350,
		easing: tween.elasticOut
	});
	// Sparkle and glow effect: animate alpha and scale for shimmer
	function sparkleEffect(target) {
		// Animate alpha up and down for shimmer
		var _sparkleTween = function sparkleTween() {
			tween(target, {
				alpha: 1
			}, {
				duration: 180 + Math.random() * 120,
				easing: tween.sineIn,
				onComplete: function onComplete() {
					tween(target, {
						alpha: 0.7 + Math.random() * 0.3
					}, {
						duration: 180 + Math.random() * 120,
						easing: tween.sineOut,
						onComplete: _sparkleTween
					});
				}
			});
		};
		_sparkleTween();
		// Animate scale for a pulsing glow
		var _pulseTween = function pulseTween() {
			tween(target.scale, {
				x: 1.08,
				y: 1.08
			}, {
				duration: 320 + Math.random() * 120,
				easing: tween.sineIn,
				onComplete: function onComplete() {
					tween(target.scale, {
						x: 1,
						y: 1
					}, {
						duration: 320 + Math.random() * 120,
						easing: tween.sineOut,
						onComplete: _pulseTween
					});
				}
			});
		};
		_pulseTween();
	}
	// Apply sparkle effect to all children (shapes) of the pattern
	for (var i = 0; i < self.children.length; i++) {
		sparkleEffect(self.children[i]);
	}
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xffffff // White background for a clean canvas
});

/**** 
* Game Code
****/ 
// We'll use the tween plugin for simple pop-in animations.
/*
We will use only shapes for patterns, with random colors and sizes.
No need to predefine assets, as LK will auto-create them as needed.
*/
// No score, no timer, no GUI overlays
// Store the current name and pattern containers
var currentNameGroup = null;
var currentPatterns = [];
// "Tap Me" colorful text at the start
var tapMeText = new Text2("Tap Me", {
	size: 220,
	fill: 0xFFFFFF,
	font: "Arial Black"
});
tapMeText.anchor.set(0.5, 0.5);
tapMeText.x = 2048 / 2;
tapMeText.y = 2732 / 2 - 100;
tapMeText.alpha = 1;
game.addChild(tapMeText);
// Animate the "Tap Me" text with color cycling and pulsing
var tapMeColors = ["#ff5e5b", "#ffc857", "#4ecdc4", "#3a86ff", "#ffbe0b", "#fb5607", "#8338ec", "#ff006e", "#06d6a0", "#ff0099"];
var tapMeColorIdx = 0;
var tapMePulseUp = true;
var tapMePulseVal = 1;
var tapMePulseSpeed = 0.012;
game.update = function () {
	// Color cycle
	if (LK.ticks % 18 === 0 && tapMeText && tapMeText.setStyle) {
		tapMeColorIdx = (tapMeColorIdx + 1) % tapMeColors.length;
		tapMeText.setStyle({
			fill: tapMeColors[tapMeColorIdx]
		});
	}
	// Pulse
	if (tapMeText) {
		if (tapMePulseUp) {
			tapMePulseVal += tapMePulseSpeed;
			if (tapMePulseVal > 1.13) tapMePulseUp = false;
		} else {
			tapMePulseVal -= tapMePulseSpeed;
			if (tapMePulseVal < 0.87) tapMePulseUp = true;
		}
		tapMeText.scale.set(tapMePulseVal, tapMePulseVal);
	}
};
// Helper: don't allow patterns in the top-left 100x100 px (menu area)
function isInMenuArea(x, y) {
	return x < 100 && y < 100;
}
// List of fun, random, vibrant names
var nameList = ["LUNA", "PIXEL", "NOVA", "SPARK", "BLAZE", "AURA", "VIVID", "ZEST", "GLOW", "TWIST", "DREAM", "FLASH", "PRISM", "BUBBLE", "SHINE", "VIBE", "JAZZ", "BLOSSOM", "BOLT", "WAVE"];
// Helper: pick a random name
function getRandomName() {
	return nameList[Math.floor(Math.random() * nameList.length)];
}
// Helper: get a vibrant color for text
function getVibrantColor() {
	var colors = ["#ff5e5b", "#ffc857", "#4ecdc4", "#3a86ff", "#ffbe0b", "#fb5607", "#8338ec", "#ff006e", "#06d6a0", "#ff0099"];
	return colors[Math.floor(Math.random() * colors.length)];
}
// Create the "Clear" button (Text2 object)
var clearBtn = new Text2("Clear", {
	size: 100,
	fill: "#222",
	font: "Arial Black"
});
clearBtn.anchor.set(0.5, 0.5);
// Place the button at the top right, with margin
clearBtn.x = 2048 - 200;
clearBtn.y = 120;
clearBtn.interactive = true;
clearBtn.buttonMode = true;
game.addChild(clearBtn);
// On tap/click anywhere, show a new large name made of patterns at that location (removing the previous one)
game.down = function (x, y, obj) {
	// Don't allow patterns in menu area or on the clear button
	if (isInMenuArea(x, y)) return;
	// If tap is on the clear button, ignore (handled separately)
	var btnBounds = clearBtn.getBounds();
	if (x >= clearBtn.x + btnBounds.x && x <= clearBtn.x + btnBounds.x + btnBounds.width && y >= clearBtn.y + btnBounds.y && y <= clearBtn.y + btnBounds.y + btnBounds.height) {
		return;
	}
	// Remove "Tap Me" text if present
	if (tapMeText) {
		tapMeText.destroy();
		tapMeText = null;
	}
	// Remove previous patterns and name if exist
	if (currentPatterns && currentPatterns.length) {
		for (var i = 0; i < currentPatterns.length; i++) {
			currentPatterns[i].destroy();
		}
		currentPatterns = [];
	}
	if (currentNameGroup) {
		currentNameGroup.destroy();
		currentNameGroup = null;
	}
	// Pick a random name
	var name = getRandomName();
	// Create a group container for the name
	var group = new Container();
	// Instead of overlaying text, create a single large pattern for the name, and arrange smaller patterns to form a loose "name shape"
	// We'll use the number of letters to determine the number of patterns, but not show the text itself
	var patternCount = name.length;
	var patternSize = 340 + Math.random() * 120; // Make the main pattern very large
	var groupWidth = patternCount * patternSize * 0.7;
	var startX = -groupWidth / 2 + patternSize / 2;
	// Main large pattern in the center
	var mainPattern = new Pattern();
	mainPattern.scale.set(2.2 + Math.random() * 0.7, 2.2 + Math.random() * 0.7);
	mainPattern.x = 0;
	mainPattern.y = 0;
	group.addChild(mainPattern);
	currentPatterns.push(mainPattern);
	// Arrange smaller patterns around the main one, in a loose arc or cluster
	for (var i = 0; i < patternCount; i++) {
		var angle = Math.PI * 0.7 * (i / (patternCount - 1) - 0.5); // spread in an arc
		var radius = patternSize * (1.1 + Math.random() * 0.5);
		var pattern = new Pattern();
		var scale = 0.7 + Math.random() * 0.5;
		pattern.scale.set(scale, scale);
		pattern.x = Math.cos(angle) * radius;
		pattern.y = Math.sin(angle) * radius;
		group.addChild(pattern);
		currentPatterns.push(pattern);
	}
	// Center the group at the tap location
	group.x = x;
	group.y = y;
	currentNameGroup = group;
	game.addChild(group);
};
// Handle "Clear" button tap: remove the patterns and name
clearBtn.down = function (x, y, obj) {
	if (currentPatterns && currentPatterns.length) {
		for (var i = 0; i < currentPatterns.length; i++) {
			currentPatterns[i].destroy();
		}
		currentPatterns = [];
	}
	if (currentNameGroup) {
		currentNameGroup.destroy();
		currentNameGroup = null;
	}
};
// No dragging or move/up handlers needed, as only one name is shown at a time;

===================================================================
--- original.js
+++ change.js
@@ -130,9 +130,10 @@
 					width: w,
 					height: h,
 					color: color[0],
 					anchorX: 0.5,
-					anchorY: 0.5
+					anchorY: 0.5,
+					fill: color[0]
 				}, {});
 				asset1.rotation = randomRotation();
 				asset1.alpha = randomAlpha();
 				var asset2 = self.attachAsset({
@@ -140,9 +141,10 @@
 					width: w,
 					height: h,
 					color: color[1],
 					anchorX: 0.5,
-					anchorY: 0.5
+					anchorY: 0.5,
+					fill: color[1]
 				}, {});
 				asset2.rotation = randomRotation();
 				asset2.alpha = 0.5 + Math.random() * 0.3;
 			} else {
@@ -151,9 +153,10 @@
 					width: w,
 					height: h,
 					color: color,
 					anchorX: 0.5,
-					anchorY: 0.5
+					anchorY: 0.5,
+					fill: color
 				}, {});
 				asset.rotation = randomRotation();
 				asset.alpha = randomAlpha();
 			}
@@ -174,9 +177,10 @@
 						width: w,
 						height: h,
 						color: color[0],
 						anchorX: 0.5,
-						anchorY: 0.5
+						anchorY: 0.5,
+						fill: color[0]
 					}, {});
 					asset1.x = Math.cos(angle) * radius;
 					asset1.y = Math.sin(angle) * radius;
 					asset1.rotation = randomRotation();
@@ -186,9 +190,10 @@
 						width: w,
 						height: h,
 						color: color[1],
 						anchorX: 0.5,
-						anchorY: 0.5
+						anchorY: 0.5,
+						fill: color[1]
 					}, {});
 					asset2.x = Math.cos(angle) * radius;
 					asset2.y = Math.sin(angle) * radius;
 					asset2.rotation = randomRotation();
@@ -199,9 +204,10 @@
 						width: w,
 						height: h,
 						color: color,
 						anchorX: 0.5,
-						anchorY: 0.5
+						anchorY: 0.5,
+						fill: color
 					}, {});
 					asset.x = Math.cos(angle) * radius;
 					asset.y = Math.sin(angle) * radius;
 					asset.rotation = randomRotation();
@@ -222,9 +228,10 @@
 						width: w,
 						height: h,
 						color: color[0],
 						anchorX: 0.5,
-						anchorY: 0.5
+						anchorY: 0.5,
+						fill: color[0]
 					}, {});
 					asset1.rotation = randomRotation();
 					asset1.alpha = 0.5 + Math.random() * 0.5;
 					var asset2 = self.attachAsset({
@@ -232,9 +239,10 @@
 						width: w,
 						height: h,
 						color: color[1],
 						anchorX: 0.5,
-						anchorY: 0.5
+						anchorY: 0.5,
+						fill: color[1]
 					}, {});
 					asset2.rotation = randomRotation();
 					asset2.alpha = 0.3 + Math.random() * 0.3;
 				} else {
@@ -243,9 +251,10 @@
 						width: w,
 						height: h,
 						color: color,
 						anchorX: 0.5,
-						anchorY: 0.5
+						anchorY: 0.5,
+						fill: color
 					}, {});
 					asset.rotation = randomRotation();
 					asset.alpha = 0.5 + Math.random() * 0.5;
 				}