/**** 
* 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() {
		// Return a random bright color, sometimes as a gradient (simulated by overlaying two colors)
		var colors = [0xff5e5b, 0xffc857, 0x4ecdc4, 0x556270, 0x3a86ff, 0xffbe0b, 0xfb5607, 0x8338ec, 0xff006e, 0x06d6a0];
		if (Math.random() < 0.3) {
			// Simulate a gradient by returning an array of two colors
			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({
					anchorX: 0.5,
					anchorY: 0.5
				}, {});
				asset1.tint = color[0];
				asset1.rotation = randomRotation();
				asset1.alpha = randomAlpha();
				var asset2 = self.attachAsset({
					anchorX: 0.5,
					anchorY: 0.5
				}, {});
				asset2.tint = color[1];
				asset2.rotation = randomRotation();
				asset2.alpha = 0.5 + Math.random() * 0.3;
			} else {
				var asset = self.attachAsset({
					anchorX: 0.5,
					anchorY: 0.5
				}, {});
				asset.tint = 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({
						anchorX: 0.5,
						anchorY: 0.5
					}, {});
					asset1.tint = color[0];
					asset1.x = Math.cos(angle) * radius;
					asset1.y = Math.sin(angle) * radius;
					asset1.rotation = randomRotation();
					asset1.alpha = randomAlpha();
					var asset2 = self.attachAsset({
						anchorX: 0.5,
						anchorY: 0.5
					}, {});
					asset2.tint = 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({
						anchorX: 0.5,
						anchorY: 0.5
					}, {});
					asset.tint = 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({
						anchorX: 0.5,
						anchorY: 0.5
					}, {});
					asset1.tint = color[0];
					asset1.rotation = randomRotation();
					asset1.alpha = 0.5 + Math.random() * 0.5;
					var asset2 = self.attachAsset({
						anchorX: 0.5,
						anchorY: 0.5
					}, {});
					asset2.tint = color[1];
					asset2.rotation = randomRotation();
					asset2.alpha = 0.3 + Math.random() * 0.3;
				} else {
					var asset = self.attachAsset({
						anchorX: 0.5,
						anchorY: 0.5
					}, {});
					asset.tint = 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 pattern (only one at a time)
var currentPattern = null;
// Helper: don't allow patterns in the top-left 100x100 px (menu area)
function isInMenuArea(x, y) {
	return x < 100 && y < 100;
}
// 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 pattern 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 previous pattern if exists
	if (currentPattern) {
		currentPattern.destroy();
		currentPattern = null;
	}
	// Create a new extremely large pattern
	var pattern = new Pattern();
	// Center the pattern so it fills the screen, but keep the tap as the center
	pattern.x = x;
	pattern.y = y;
	// Calculate scale so the pattern fills most of the screen (90% of min dimension)
	var minScreen = Math.min(2048, 2732);
	var targetSize = minScreen * 0.9;
	// Estimate pattern's largest child size (since pattern is a container of shapes)
	var maxChild = 0;
	for (var i = 0; i < pattern.children.length; i++) {
		var ch = pattern.children[i];
		if (ch.width > maxChild) maxChild = ch.width;
		if (ch.height > maxChild) maxChild = ch.height;
	}
	var scale = 1;
	if (maxChild > 0) {
		scale = targetSize / maxChild;
		// Clamp to a reasonable max
		if (scale > 8) scale = 8;
	}
	pattern.scale.set(scale, scale);
	currentPattern = pattern;
	game.addChild(pattern);
};
// Handle "Clear" button tap: remove the pattern
clearBtn.down = function (x, y, obj) {
	if (currentPattern) {
		currentPattern.destroy();
		currentPattern = null;
	}
};
// No dragging or move/up handlers needed, as only one pattern is shown at a time