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

/**** 
* Classes
****/ 
var GridCell = Container.expand(function () {
	var self = Container.call(this);
	var border = self.attachAsset('gridBorder', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var cell = self.attachAsset('gridCell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	return self;
});
var Player = Container.expand(function () {
	var self = Container.call(this);
	var playerBorder = self.attachAsset('playerBorder', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var playerInner = self.attachAsset('playerInner', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.gridX = 5; // Center position (0-indexed)
	self.gridY = 5; // Center position (0-indexed)
	self.isFlashing = false;
	self.flashTimer = 0;
	self.update = function () {
		// Handle flashing animation
		self.flashTimer++;
		if (self.flashTimer >= 30) {
			// Flash every 30 frames (0.5 seconds at 60fps)
			self.flashTimer = 0;
			self.isFlashing = !self.isFlashing;
			playerBorder.alpha = self.isFlashing ? 0.3 : 1.0;
			playerInner.alpha = self.isFlashing ? 0.3 : 1.0;
		}
	};
	self.moveToGridPosition = function () {
		var cellSize = 164;
		var gridStartX = 2048 / 2 - 11 * cellSize / 2 + cellSize / 2;
		var gridStartY = 2732 / 2 - 11 * cellSize / 2 + cellSize / 2;
		self.x = gridStartX + self.gridX * cellSize;
		self.y = gridStartY + self.gridY * cellSize;
	};
	return self;
});
var Pot = Container.expand(function () {
	var self = Container.call(this);
	var potBase = self.attachAsset('pot', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var rim = self.attachAsset('potRim', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	rim.y = -200;
	return self;
});
var Spoon = Container.expand(function () {
	var self = Container.call(this);
	var handle = self.attachAsset('spoonHandle', {
		anchorX: 0.5,
		anchorY: 1.0
	});
	var bowl = self.attachAsset('spoonBowl', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	bowl.y = -360;
	self.isDragging = false;
	self.isInPot = false;
	self.lastIsInPot = false;
	self.isCollidingWithPot = false;
	self.lastIsCollidingWithPot = false;
	self.isStirring = false;
	self.stirAngle = 0;
	self.originalBowlTint = bowl.tint;
	self.down = function (x, y, obj) {
		self.isDragging = true;
		draggedSpoon = self;
		// Flip spoon upside down when dragging starts
		tween(self, {
			rotation: Math.PI
		}, {
			duration: 200,
			easing: tween.easeOut
		});
	};
	self.up = function (x, y, obj) {
		self.isDragging = false;
		self.isStirring = false;
		draggedSpoon = null;
		// Flip spoon back to normal when drag ends
		tween(self, {
			rotation: 0
		}, {
			duration: 200,
			easing: tween.easeOut
		});
	};
	self.update = function () {
		// Check if spoon bowl is in pot
		var potCenterX = 2048 / 2;
		var potCenterY = 2150;
		var bowlWorldX = self.x;
		var bowlWorldY = self.y - 360; // Bowl offset
		var distanceToPot = Math.sqrt(Math.pow(bowlWorldX - potCenterX, 2) + Math.pow(bowlWorldY - potCenterY, 2));
		// Update collision detection state
		self.lastIsCollidingWithPot = self.isCollidingWithPot;
		// Collision detection - spoon is hitting the pot outline (ellipse perimeter)
		var potOuterRadius = 300; // Pot ellipse outer boundary (width/2 = 600/2)
		var potHeightRadius = 250; // Pot ellipse height boundary (height/2 = 500/2)
		var potLineThickness = 10; // Thickness of the pot outline
		// Calculate elliptical distance for pot outline collision
		var normalizedX = (bowlWorldX - potCenterX) / potOuterRadius;
		var normalizedY = (bowlWorldY - potCenterY) / potHeightRadius;
		var ellipticalDistance = Math.sqrt(normalizedX * normalizedX + normalizedY * normalizedY);
		// Check if spoon is hitting the pot outline (within line thickness of the ellipse perimeter)
		var innerBoundary = (potOuterRadius - potLineThickness) / potOuterRadius;
		self.isCollidingWithPot = ellipticalDistance >= innerBoundary && ellipticalDistance <= 1.0;
		// Update pot state - check if inside the pot ellipse
		self.lastIsInPot = self.isInPot;
		var inPotNormalizedX = (bowlWorldX - potCenterX) / 290; // Slightly smaller than pot outline
		var inPotNormalizedY = (bowlWorldY - potCenterY) / 240; // Slightly smaller than pot outline
		var inPotEllipticalDistance = Math.sqrt(inPotNormalizedX * inPotNormalizedX + inPotNormalizedY * inPotNormalizedY);
		self.isInPot = inPotEllipticalDistance <= 1.0; // Inside pot for stirring
		// Handle collision feedback
		if (!self.lastIsCollidingWithPot && self.isCollidingWithPot) {
			// Just started colliding with pot edge
			tween(self, {
				scaleX: 0.95,
				scaleY: 0.95
			}, {
				duration: 150,
				easing: tween.easeOut,
				onFinish: function onFinish() {
					tween(self, {
						scaleX: 1.0,
						scaleY: 1.0
					}, {
						duration: 150,
						easing: tween.easeIn
					});
				}
			});
		}
		// Visual feedback when entering/leaving pot
		if (!self.lastIsInPot && self.isInPot) {
			// Just entered pot - tint spoon darker
			tween(bowl, {
				tint: 0x4A2C17
			}, {
				duration: 300
			});
			tween(handle, {
				tint: 0x4A2C17
			}, {
				duration: 300
			});
		} else if (self.lastIsInPot && !self.isInPot) {
			// Just left pot - restore original color
			tween(bowl, {
				tint: 0x654321
			}, {
				duration: 300
			});
			tween(handle, {
				tint: 0x654321
			}, {
				duration: 300
			});
		}
		// Handle depth when in pot
		if (self.isInPot) {
			// Make bowl appear to dip into pot using elliptical distance
			var depthFactor = Math.max(0, 1 - inPotEllipticalDistance);
			bowl.y = -360 + depthFactor * 60; // Bowl sinks up to 60 pixels
			// Adjust handle visibility based on depth
			handle.alpha = Math.max(0.3, 1 - depthFactor * 0.7);
		} else {
			// Restore normal position when outside pot
			bowl.y = -360;
			handle.alpha = 1.0;
		}
	};
	return self;
});
var Table = Container.expand(function () {
	var self = Container.call(this);
	var tabletop = self.attachAsset('table', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var leg1 = self.attachAsset('tableLeg1', {
		anchorX: 0.5,
		anchorY: 0
	});
	leg1.x = -500;
	leg1.y = 40;
	var leg2 = self.attachAsset('tableLeg2', {
		anchorX: 0.5,
		anchorY: 0
	});
	leg2.x = 500;
	leg2.y = 40;
	var leg3 = self.attachAsset('tableLeg3', {
		anchorX: 0.5,
		anchorY: 0
	});
	leg3.x = -500;
	leg3.y = 40;
	var leg4 = self.attachAsset('tableLeg4', {
		anchorX: 0.5,
		anchorY: 0
	});
	leg4.x = 500;
	leg4.y = 40;
	return self;
});

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

/**** 
* Game Code
****/ 
var gridSize = 11;
var cellSize = 164;
var gridCells = [];
var player;
// Game state management
var gameState = 'grid'; // 'grid' or 'cursor'
var gridScreen;
var cursorScreen;
// Create screen containers
gridScreen = new Container();
cursorScreen = new Container();
game.addChild(gridScreen);
game.addChild(cursorScreen);
// Create the grid
var gridStartX = 2048 / 2 - gridSize * cellSize / 2 + cellSize / 2;
var gridStartY = 2732 / 2 - gridSize * cellSize / 2 + cellSize / 2;
for (var row = 0; row < gridSize; row++) {
	gridCells[row] = [];
	for (var col = 0; col < gridSize; col++) {
		var cell = new GridCell();
		cell.x = gridStartX + col * cellSize;
		cell.y = gridStartY + row * cellSize;
		gridCells[row][col] = cell;
		gridScreen.addChild(cell);
	}
}
// Add text labels to specific grid cells
var voidLabel = new Text2('Void', {
	size: 40,
	fill: 0xFFFFFF
});
voidLabel.anchor.set(0.5, 0.5);
voidLabel.x = gridStartX + 5 * cellSize; // Center column (5)
voidLabel.y = gridStartY + 5 * cellSize; // Center row (5)
gridScreen.addChild(voidLabel);
var earthLabel = new Text2('Earth', {
	size: 40,
	fill: 0xFFFFFF
});
earthLabel.anchor.set(0.5, 0.5);
earthLabel.x = gridStartX + 3 * cellSize; // 2 squares left from center (5-2=3)
earthLabel.y = gridStartY + 7 * cellSize; // 2 squares down from center (5+2=7)
gridScreen.addChild(earthLabel);
// Create player
player = gridScreen.addChild(new Player());
player.moveToGridPosition();
// Input handling for WASD keys
var keyStates = {
	w: false,
	a: false,
	s: false,
	d: false
};
var lastKeyStates = {
	w: false,
	a: false,
	s: false,
	d: false
};
// Simulate keyboard input through touch controls
var controlButtons = [];
var buttonSize = 120;
var buttonSpacing = 140;
// Create virtual WASD buttons
var wButton = gridScreen.addChild(LK.getAsset('gridCell', {
	anchorX: 0.5,
	anchorY: 0.5,
	width: buttonSize,
	height: buttonSize
}));
wButton.x = 2048 - 200;
wButton.y = 2732 - 400;
var aButton = gridScreen.addChild(LK.getAsset('gridCell', {
	anchorX: 0.5,
	anchorY: 0.5,
	width: buttonSize,
	height: buttonSize
}));
aButton.x = 2048 - 340;
aButton.y = 2732 - 260;
var sButton = gridScreen.addChild(LK.getAsset('gridCell', {
	anchorX: 0.5,
	anchorY: 0.5,
	width: buttonSize,
	height: buttonSize
}));
sButton.x = 2048 - 200;
sButton.y = 2732 - 260;
var dButton = gridScreen.addChild(LK.getAsset('gridCell', {
	anchorX: 0.5,
	anchorY: 0.5,
	width: buttonSize,
	height: buttonSize
}));
dButton.x = 2048 - 60;
dButton.y = 2732 - 260;
// Add labels to buttons
var wLabel = new Text2('W', {
	size: 60,
	fill: 0xFFFFFF
});
wLabel.anchor.set(0.5, 0.5);
wLabel.x = wButton.x;
wLabel.y = wButton.y;
gridScreen.addChild(wLabel);
var aLabel = new Text2('A', {
	size: 60,
	fill: 0xFFFFFF
});
aLabel.anchor.set(0.5, 0.5);
aLabel.x = aButton.x;
aLabel.y = aButton.y;
gridScreen.addChild(aLabel);
var sLabel = new Text2('S', {
	size: 60,
	fill: 0xFFFFFF
});
sLabel.anchor.set(0.5, 0.5);
sLabel.x = sButton.x;
sLabel.y = sButton.y;
gridScreen.addChild(sLabel);
var dLabel = new Text2('D', {
	size: 60,
	fill: 0xFFFFFF
});
dLabel.anchor.set(0.5, 0.5);
dLabel.x = dButton.x;
dLabel.y = dButton.y;
gridScreen.addChild(dLabel);
// Button event handlers
wButton.down = function () {
	keyStates.w = true;
};
wButton.up = function () {
	keyStates.w = false;
};
aButton.down = function () {
	keyStates.a = true;
};
aButton.up = function () {
	keyStates.a = false;
};
sButton.down = function () {
	keyStates.s = true;
};
sButton.up = function () {
	keyStates.s = false;
};
dButton.down = function () {
	keyStates.d = true;
};
dButton.up = function () {
	keyStates.d = false;
};
// Create white background for cursor screen
var whiteBackground = cursorScreen.addChild(LK.getAsset('gridCell', {
	anchorX: 0,
	anchorY: 0,
	width: 2048,
	height: 2732
}));
whiteBackground.tint = 0xFFFFFF;
whiteBackground.x = 0;
whiteBackground.y = 0;
// Create cursor screen content
var cursorTitle = new Text2('Medieval Kitchen', {
	size: 80,
	fill: 0x000000
});
cursorTitle.anchor.set(0.5, 0.5);
cursorTitle.x = 2048 / 2;
cursorTitle.y = 400;
cursorScreen.addChild(cursorTitle);
// Create table
var table = cursorScreen.addChild(new Table());
table.x = 2048 / 2;
table.y = 2400;
// Create pot
var pot = cursorScreen.addChild(new Pot());
pot.x = 2048 / 2;
pot.y = 2150;
// Create spoon
var spoon = cursorScreen.addChild(new Spoon());
spoon.x = 2048 / 2 + 300;
spoon.y = 2360; // Position on table surface (table.y - table.height/2 = 2400 - 40)
var draggedSpoon = null;
// Create switch button for both screens
var switchButton = game.addChild(LK.getAsset('gridCell', {
	anchorX: 0.5,
	anchorY: 0.5,
	width: 200,
	height: 80
}));
switchButton.x = 2048 / 2;
switchButton.y = 200;
var switchLabel = new Text2('Switch Screen', {
	size: 30,
	fill: 0xFFFFFF
});
switchLabel.anchor.set(0.5, 0.5);
switchLabel.x = switchButton.x;
switchLabel.y = switchButton.y;
game.addChild(switchLabel);
// Switch button functionality
switchButton.down = function () {
	if (gameState === 'grid') {
		gameState = 'cursor';
		gridScreen.visible = false;
		cursorScreen.visible = true;
	} else {
		gameState = 'grid';
		gridScreen.visible = true;
		cursorScreen.visible = false;
	}
};
// Cursor screen interaction
cursorScreen.move = function (x, y, obj) {
	if (draggedSpoon && gameState === 'cursor') {
		var potCenterX = 2048 / 2;
		var potCenterY = 2150;
		// Position spoon hanging from cursor when dragging (bowl at cursor position)
		var newX = x;
		var newY = y + 360; // Offset so bowl hangs at cursor position
		// Collision detection - prevent going through the pot wall
		var bowlWorldX = newX;
		var bowlWorldY = newY - 360; // Bowl offset
		var potOuterRadius = 300; // Pot ellipse outer boundary (width/2 = 600/2)
		var potHeightRadius = 250; // Pot ellipse height boundary (height/2 = 500/2)
		var potLineThickness = 15; // Thickness of the pot outline (increased for better collision)
		var spoonBowlRadius = 60; // Account for spoon bowl size (width/2 = 120/2)
		// Get current spoon position
		var currentBowlX = draggedSpoon.x;
		var currentBowlY = draggedSpoon.y - 360;
		// Calculate elliptical distances for both current and new positions
		var currentNormalizedX = (currentBowlX - potCenterX) / potOuterRadius;
		var currentNormalizedY = (currentBowlY - potCenterY) / potHeightRadius;
		var currentEllipticalDistance = Math.sqrt(currentNormalizedX * currentNormalizedX + currentNormalizedY * currentNormalizedY);
		var newNormalizedX = (bowlWorldX - potCenterX) / potOuterRadius;
		var newNormalizedY = (bowlWorldY - potCenterY) / potHeightRadius;
		var newEllipticalDistance = Math.sqrt(newNormalizedX * newNormalizedX + newNormalizedY * newNormalizedY);
		// Calculate boundaries accounting for spoon bowl size
		var spoonRadiusFactorX = spoonBowlRadius / potOuterRadius;
		var spoonRadiusFactorY = spoonBowlRadius / potHeightRadius;
		var spoonRadiusFactor = Math.max(spoonRadiusFactorX, spoonRadiusFactorY);
		var innerBoundary = (potOuterRadius - potLineThickness) / potOuterRadius + spoonRadiusFactor;
		var outerBoundary = 1.0 + spoonRadiusFactor;
		// Prevent movement through pot wall
		var wouldCollide = false;
		// If spoon is currently outside pot
		if (currentEllipticalDistance >= outerBoundary) {
			// Only allow movement that stays outside or goes to inside (not into wall)
			if (newEllipticalDistance > innerBoundary && newEllipticalDistance < outerBoundary) {
				wouldCollide = true;
			}
		}
		// If spoon is currently inside pot
		else if (currentEllipticalDistance <= innerBoundary) {
			// Only allow movement that stays inside or goes to outside (not into wall)
			if (newEllipticalDistance > innerBoundary && newEllipticalDistance < outerBoundary) {
				wouldCollide = true;
			}
		}
		// If spoon is currently in wall area, don't allow it to stay there
		else {
			// Force movement to either inside or outside
			if (newEllipticalDistance > innerBoundary && newEllipticalDistance < outerBoundary) {
				// Try to push to the nearest valid area
				if (currentEllipticalDistance < (innerBoundary + outerBoundary) / 2) {
					// Closer to inside, push inside
					var pushDirection = -1;
				} else {
					// Closer to outside, push outside
					var pushDirection = 1;
				}
				// Calculate push position
				var pushFactor = pushDirection > 0 ? outerBoundary + 0.01 : innerBoundary - 0.01;
				var pushX = potCenterX + (bowlWorldX - potCenterX) * (pushFactor / newEllipticalDistance);
				var pushY = potCenterY + (bowlWorldY - potCenterY) * (pushFactor / newEllipticalDistance);
				newX = pushX;
				newY = pushY + 360; // Add handle offset back
				wouldCollide = false; // Allow this corrected movement
			} else {
				wouldCollide = false; // Allow movement to valid area
			}
		}
		if (wouldCollide) {
			// Don't allow the movement - keep spoon at current position
			return;
		}
		// Allow all other movements - spoon can freely move in and out of pot
		draggedSpoon.x = newX;
		draggedSpoon.y = newY;
		// Enhanced stirring mechanics - only when spoon is in pot
		var potCenterX = 2048 / 2;
		var potCenterY = 2150;
		// Manual stirring when in pot and moving
		if (draggedSpoon.isInPot && draggedSpoon.isDragging) {
			// Calculate angle for stirring effect but keep the flipped orientation
			var angle = Math.atan2(y - potCenterY, x - potCenterX);
			draggedSpoon.rotation = Math.PI + angle + Math.PI / 4;
			// Create stirring particles effect using tween
			if (LK.ticks % 10 === 0) {
				// Every 10 frames
				// Animate pot slightly to show stirring effect
				tween(pot, {
					scaleX: 1.05,
					scaleY: 1.05
				}, {
					duration: 100,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						tween(pot, {
							scaleX: 1.0,
							scaleY: 1.0
						}, {
							duration: 100,
							easing: tween.easeIn
						});
					}
				});
			}
		}
	}
};
// Initialize screen visibility
gridScreen.visible = true;
cursorScreen.visible = false;
function movePlayer(direction) {
	var newX = player.gridX;
	var newY = player.gridY;
	switch (direction) {
		case 'w':
			// Up
			newY = Math.max(0, player.gridY - 1);
			break;
		case 's':
			// Down
			newY = Math.min(gridSize - 1, player.gridY + 1);
			break;
		case 'a':
			// Left
			newX = Math.max(0, player.gridX - 1);
			break;
		case 'd':
			// Right
			newX = Math.min(gridSize - 1, player.gridX + 1);
			break;
	}
	// Only move if position changed
	if (newX !== player.gridX || newY !== player.gridY) {
		player.gridX = newX;
		player.gridY = newY;
		player.moveToGridPosition();
	}
}
game.update = function () {
	// Only handle grid controls when on grid screen
	if (gameState === 'grid') {
		// Check for key press transitions (just pressed)
		if (!lastKeyStates.w && keyStates.w) {
			movePlayer('w');
		}
		if (!lastKeyStates.a && keyStates.a) {
			movePlayer('a');
		}
		if (!lastKeyStates.s && keyStates.s) {
			movePlayer('s');
		}
		if (!lastKeyStates.d && keyStates.d) {
			movePlayer('d');
		}
		// Update last key states
		lastKeyStates.w = keyStates.w;
		lastKeyStates.a = keyStates.a;
		lastKeyStates.s = keyStates.s;
		lastKeyStates.d = keyStates.d;
	}
};

===================================================================
--- original.js
+++ change.js
@@ -156,26 +156,26 @@
 		// Visual feedback when entering/leaving pot
 		if (!self.lastIsInPot && self.isInPot) {
 			// Just entered pot - tint spoon darker
 			tween(bowl, {
-				tint: 0x654321
+				tint: 0x4A2C17
 			}, {
 				duration: 300
 			});
 			tween(handle, {
-				tint: 0x654321
+				tint: 0x4A2C17
 			}, {
 				duration: 300
 			});
 		} else if (self.lastIsInPot && !self.isInPot) {
 			// Just left pot - restore original color
 			tween(bowl, {
-				tint: 0x8b4513
+				tint: 0x654321
 			}, {
 				duration: 300
 			});
 			tween(handle, {
-				tint: 0x8b4513
+				tint: 0x654321
 			}, {
 				duration: 300
 			});
 		}