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

/**** 
* Classes
****/ 
// BackgroundImage class to represent the background image
var BackgroundImage = Container.expand(function () {
	var self = Container.call(this);
	// Asset Attachments
	var backgroundGraphics = self.attachAsset('gradientBackground', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: centerX,
		y: centerY
	});
	return self;
});
/***********************************************************************************************/ 
/******************************************* ASSETS CLASSES ************************************/
/***********************************************************************************************/ 
// HexTile class to represent each tile on the board
var HexTile = Container.expand(function (value, col, row, levelData, levelBoardOffsetX, levelBoardOffsetY) {
	var self = Container.call(this);
	// Constants
	var interTileOffsetX = -2;
	var interTileOffsetY = -0; // relative to interTileOffsetX 
	var tileSize = LK.getAsset('hexTile', {}).width + interTileOffsetX;
	var tileOffsetX = tileSize;
	var tileOffsetY = tileSize * 0.75 - interTileOffsetY;
	// Properties
	self.value = value;
	self.originalValue = value;
	self.col = col;
	self.row = row;
	self.neighbors = [];
	var tileX = col * tileOffsetX - (levelData ? levelData.tiles.length : 0) * (tileSize / 2) + (row % 2 === 1 ? -tileSize / 2 : 0);
	var tileY = row * tileOffsetY - (levelData ? levelData.tiles.length : 0) * (tileSize / 2);
	self.x = levelBoardOffsetX + tileX;
	self.y = levelBoardOffsetY + tileY;
	// Asset Attachments
	var tileGraphicsShadow = self.attachAsset('hexTile', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 7,
		y: 5,
		tint: 0x000000,
		alpha: 0.70
	});
	var tileGraphics = self.attachAsset('hexTile', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		//levelBoardOffsetX + tileX,
		y: 0,
		//levelBoardOffsetY + tileY,
		tint: tileColors[self.value],
		alpha: 0.9
	});
	// Value text shadow
	var valueTextShadow = new Text2(self.value.toString(), {
		size: tileSize * 0.5,
		fill: 0x000000,
		//fill: tileColors[self.value],
		weight: 1000
	});
	valueTextShadow.anchor.set(0.5, 0.5);
	valueTextShadow.alpha = 0.1;
	valueTextShadow.x = tileGraphics.x + 12;
	valueTextShadow.y = tileGraphics.y - tileSize * 0.01 + 12;
	self.valueTextShadow = self.addChild(valueTextShadow);
	// Value Text
	var valueText = new Text2(self.value.toString(), {
		size: tileSize * 0.5,
		fill: 0xEAEEE8,
		dropShadow: false
	});
	valueText.anchor.set(0.5, 0.5);
	valueText.x = tileGraphics.x;
	valueText.y = tileGraphics.y - tileSize * 0.01;
	self.valueText = self.addChild(valueText);
	// Functions
	self.playOperationEffect = function () {
		// Play operation animation
	};
	self.setValue = function (newValue) {
		self.value = newValue;
		self.valueText.setText(self.value.toString());
		self.valueTextShadow.setText(self.value.toString());
		// Animate color change
		tween(tileGraphics, {
			tint: tileColors[self.value]
		}, {
			duration: 500,
			easing: tween.easeOut
		});
	};
	return self;
});
// OperationButton class to represent each operation button
var OperationButton = Container.expand(function (type, uses) {
	var self = Container.call(this);
	// Properties
	self.type = type;
	self.remainingUses = uses;
	self.baseX = 0; // Initialize baseX to store initial x position
	self.baseY = 0; // Initialize baseY to store initial y position
	var buttonSize = LK.getAsset('operationButton', {}).width;
	// Asset Attachments
	var buttonGraphicsShadow = self.attachAsset('operationButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 10,
		y: 10,
		tint: 0x000000,
		alpha: 0.7
	});
	var buttonGraphics = self.attachAsset('operationButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	// Value Text
	var valueText = new Text2(self.type, {
		size: buttonSize * 0.45,
		fill: tileColors[1],
		dropShadow: false,
		weight: 1000
	});
	valueText.anchor.set(0.5, 0.5);
	valueText.x = buttonGraphics.x;
	valueText.y = buttonGraphics.y;
	self.valueText = self.addChild(valueText);
	// Functions
	self.setBasePosition = function (x, y) {
		self.x = x;
		self.y = y;
		self.baseX = x;
		self.baseY = y;
	};
	self.updateUses = function () {
		// Update the display or logic related to remaining uses
		log("Remaining uses updated: ", self.remainingUses);
	};
	return self;
});
// StartButton class to represent the start button
var StartButton = Container.expand(function () {
	var self = Container.call(this);
	// Asset Attachments
	var buttonGraphics = self.attachAsset('startButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	return self;
});

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

/**** 
* Game Code
****/ 
/************************************* GAME OBJECTS CLASSES ************************************/
/***********************************************************************************************/ 
function PuzzleManager(game) {
	var self = this;
	// Properties
	self.game = game;
	self.levelBoardOffsetX = 0; // Initialize levelBoardOffsetX
	self.levelBoardOffsetY = 0; // Initialize levelBoardOffsetY
	self.currentLevel = 1;
	self.board = [];
	self.operations = [];
	self.isAnimating = false;
	self.selectedOperation = null;
	self.moveCount = 0;
	self.levelData = null;
	// Core Functions
	self.initPuzzle = function () {
		self.loadLevel(self.currentLevel);
	};
	self.reset = function () {
		self.loadLevel(self.currentLevel);
	};
	self.loadLevel = function (levelNumber) {
		// Load level configuration
		self.levelData = levelConfigs[levelNumber] || {
			tiles: [],
			operations: []
		};
		self.createBoard();
		self.createOperations();
	};
	self.createBoard = function () {
		self.board = [];
		// Update levelBoardOffsets depending on level 
		self.levelBoardOffsetX = 100;
		self.levelBoardOffsetY = 100;
		for (var row = 0; row < self.levelData.tiles.length; row++) {
			for (var col = 0; col < self.levelData.tiles[row].length; col++) {
				var value = self.levelData.tiles[row][col];
				if (value !== "") {
					var tile = new HexTile(value, col, row, self.levelData, self.levelBoardOffsetX, self.levelBoardOffsetY);
					self.board.push(tile);
					boardContainer.addChild(tile);
				}
			}
		}
	};
	self.createOperations = function () {
		self.operations = [];
		for (var i = 0; i < self.levelData.operations.length; i++) {
			var opData = self.levelData.operations[i];
			var operation = new OperationButton(opData.type, opData.uses);
			self.operations.push(operation);
			operation.setBasePosition(centerX + 600 + (i - (self.levelData.operations.length - 1) / 2) * 250, 2600); // Space buttons evenly and position near the bottom
			self.game.addChild(operation);
		}
	};
	self.applyOperation = function (operation, tile) {
		if (operation.remainingUses > 0) {
			self.propagateOperation(operation, tile);
			operation.remainingUses--;
			operation.updateUses();
			self.checkWinCondition();
		}
	};
	self.propagateOperation = function (operation, startTile) {
		var visited = [];
		var toProcess = [startTile];
		var targetValue = startTile.value;
		while (toProcess.length > 0) {
			var currentTile = toProcess.pop();
			if (visited.includes(currentTile)) {
				continue;
			}
			visited.push(currentTile);
			// Apply operation
			currentTile.setValue(currentTile.value + parseInt(operation.type));
			currentTile.playOperationEffect();
			// Check neighbors
			var _iterator = _createForOfIteratorHelper(currentTile.neighbors),
				_step;
			try {
				for (_iterator.s(); !(_step = _iterator.n()).done;) {
					var neighbor = _step.value;
					if (neighbor.value === targetValue && !visited.includes(neighbor)) {
						toProcess.push(neighbor);
					}
				}
			} catch (err) {
				_iterator.e(err);
			} finally {
				_iterator.f();
			}
		}
	};
	self.checkWinCondition = function () {
		var _iterator2 = _createForOfIteratorHelper(self.board),
			_step2;
		try {
			for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
				var tile = _step2.value;
				if (tile.value !== 0) {
					return false;
				}
			}
		} catch (err) {
			_iterator2.e(err);
		} finally {
			_iterator2.f();
		}
		self.playVictoryAnimation();
		return true;
	};
	// Animation Functions
	self.playVictoryAnimation = function () {
		// Play level complete animation
	};
}
/***********************************************************************************************/ 
/************************************* UTILITY FUNCTIONS ************************************/
/***********************************************************************************************/ 
function log() {
	if (debug) {
		console.log.apply(console, arguments);
	}
}
function _createForOfIteratorHelper(r, e) {
	var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
	if (!t) {
		if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
			t && (r = t);
			var _n = 0,
				F = function F() {};
			return {
				s: F,
				n: function n() {
					return _n >= r.length ? {
						done: !0
					} : {
						done: !1,
						value: r[_n++]
					};
				},
				e: function e(r) {
					throw r;
				},
				f: F
			};
		}
		throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
	}
	var o,
		a = !0,
		u = !1;
	return {
		s: function s() {
			t = t.call(r);
		},
		n: function n() {
			var r = t.next();
			return a = r.done, r;
		},
		e: function e(r) {
			u = !0, o = r;
		},
		f: function f() {
			try {
				a || null == t["return"] || t["return"]();
			} finally {
				if (u) {
					throw o;
				}
			}
		}
	};
}
function _unsupportedIterableToArray(r, a) {
	if (r) {
		if ("string" == typeof r) {
			return _arrayLikeToArray(r, a);
		}
		var t = {}.toString.call(r).slice(8, -1);
		return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
	}
}
function _arrayLikeToArray(r, a) {
	(null == a || a > r.length) && (a = r.length);
	for (var e = 0, n = Array(a); e < a; e++) {
		n[e] = r[e];
	}
	return n;
}
/***********************************************************************************************/ 
/************************************* GAME STATE MANAGEMENT ************************************/
/***********************************************************************************************/ 
function initMenuState() {
	// Initialize the game state for MENU
	log("Initializing MENU State");
	startButton.visible = true;
	if (debug) {
		changeGameState(GAME_STATE.NEW_ROUND);
	}
}
function handleMenuLoop() {
	// Handle the game loop for MENU state
	log("Handling MENU Loop");
}
function cleanMenuState() {
	// Clean up the game state for MENU
	log("Cleaning MENU State");
	startButton.visible = false;
}
function initNewRoundState() {
	// Initialize the game state for NEW_ROUND
	log("Initializing NEW_ROUND State");
	puzzleManager.initPuzzle();
	if (debug) {
		changeGameState(GAME_STATE.PLAYING);
	}
}
function handleNewRoundLoop() {
	// Handle the game loop for NEW_ROUND state
	log("Handling NEW_ROUND Loop");
}
function cleanNewRoundState() {
	// Clean up the game state for NEW_ROUND
	log("Cleaning NEW_ROUND State");
}
function initPlayingState() {
	// Initialize the game state for PLAYING
	log("Initializing PLAYING State");
}
function handlePlayingLoop() {
	// Handle the game loop for PLAYING state
	log("Handling PLAYING Loop");
}
function cleanPlayingState() {
	// Clean up the game state for PLAYING
	log("Cleaning PLAYING State");
}
function initScoreState() {
	// Initialize the game state for SCORE
	log("Initializing SCORE State");
}
function handleScoreLoop() {
	// Handle the game loop for SCORE state
	log("Handling SCORE Loop");
}
function cleanScoreState() {
	// Clean up the game state for SCORE
	log("Cleaning SCORE State");
}
function changeGameState(newState) {
	log("Changing game state from", currentState, "to", newState);
	// Clean up the current state
	switch (currentState) {
		case GAME_STATE.INIT:
			// Do nothing
			break;
		case GAME_STATE.MENU:
			cleanMenuState();
			break;
		case GAME_STATE.NEW_ROUND:
			cleanNewRoundState();
			break;
		case GAME_STATE.PLAYING:
			cleanPlayingState();
			break;
		case GAME_STATE.SCORE:
			cleanScoreState();
			break;
		default:
			log("Unknown state:", currentState);
	}
	// Set the new state
	currentState = newState;
	// Initialize the new state
	switch (newState) {
		case GAME_STATE.MENU:
			initMenuState();
			break;
		case GAME_STATE.NEW_ROUND:
			initNewRoundState();
			break;
		case GAME_STATE.PLAYING:
			initPlayingState();
			break;
		case GAME_STATE.SCORE:
			initScoreState();
			break;
		default:
			log("Unknown state:", newState);
	}
}
/***********************************************************************************************/ 
/****************************************** EVENT HANDLERS *************************************/
/***********************************************************************************************/ 
game.down = function (x, y, obj) {
	switch (currentState) {
		case GAME_STATE.MENU:
			handleMenuStateDown(x, y, obj);
			break;
		case GAME_STATE.PLAYING:
			handlePlayingStateDown(x, y, obj);
			break;
		case GAME_STATE.SCORE:
			handleScoreStateDown(x, y, obj);
			break;
		default:
			log("Unknown state:", currentState);
	}
};
game.move = function (x, y, obj) {
	switch (currentState) {
		case GAME_STATE.MENU:
			handleMenuStateMove(x, y, obj);
			break;
		case GAME_STATE.PLAYING:
			handlePlayingStateMove(x, y, obj);
			break;
		case GAME_STATE.SCORE:
			handleScoreStateMove(x, y, obj);
			break;
		default:
			log("Unknown state:", currentState);
	}
};
game.up = function (x, y, obj) {
	switch (currentState) {
		case GAME_STATE.MENU:
			handleMenuStateUp(x, y, obj);
			break;
		case GAME_STATE.PLAYING:
			handlePlayingStateUp(x, y, obj);
			break;
		case GAME_STATE.SCORE:
			handleScoreStateUp(x, y, obj);
			break;
		default:
			log("Unknown state:", currentState);
	}
};
// Menu State Handlers
function handleMenuStateDown(x, y, obj) {
	// Implement logic for handling down event in MENU state
	log("Handling down event in MENU state");
	changeGameState(GAME_STATE.NEW_ROUND);
}
function handleMenuStateMove(x, y, obj) {
	// Implement logic for handling move event in MENU state
	//log("Handling move event in MENU state");
}
function handleMenuStateUp(x, y, obj) {
	// Implement logic for handling up event in MENU state
	log("Handling up event in MENU state");
}
// Playing State Handlers
function handlePlayingStateDown(x, y, obj) {
	// Implement logic for handling down event in PLAYING state
	log("Handling down event in PLAYING state", obj);
	puzzleManager.operations.forEach(function (operation) {
		if (x >= operation.x - operation.width / 2 && x <= operation.x + operation.width / 2 && y >= operation.y - operation.height / 2 && y <= operation.y + operation.height / 2) {
			dragNode = operation;
			return;
		}
	});
}
function handlePlayingStateMove(x, y, obj) {
	//log("Handling move event in PLAYING state", dragNode);
	if (dragNode) {
		dragNode.x = x;
		dragNode.y = y;
	}
	//log("Handling move event in PLAYING state");
}
function handlePlayingStateUp(x, y, obj) {
	// Implement logic for handling up event in PLAYING state
	log("Handling up event in PLAYING state");
	if (dragNode) {
		// Check if the operation button is above a tile
		var tileFound = false;
		log("Operation dropped at ", x, y);
		log("boardContainer at ", boardContainer.x, boardContainer.y);
		puzzleManager.board.forEach(function (tile) {
			log("Checking tile at position:", tile.x, tile.y); // Log tile position
			if (x >= boardContainer.x + tile.x - tile.width / 2 && x <= boardContainer.x + tile.x + tile.width / 2 && y >= boardContainer.y + tile.y - tile.height / 2 && y <= boardContainer.y + tile.y + tile.height / 2) {
				log("Operation button is above tile at position:", tile.x, tile.y); // Log when operation button is above a tile
				puzzleManager.applyOperation(dragNode, tile);
				tileFound = true;
				tween(dragNode, {
					alpha: 0
				}, {
					duration: 500,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						if (dragNode) {
							dragNode.destroy();
						}
					}
				});
			} else {
				log("Operation button is NOT above tile at position:", tile.x, tile.y); // Log when operation button is not above a tile
			}
		});
		if (!tileFound) {
			log("Operation button not above any tile");
			tween(dragNode, {
				x: dragNode.baseX,
				y: dragNode.baseY
			}, {
				duration: 500,
				easing: tween.easeOut
			});
		}
		dragNode = null;
	}
}
// Score State Handlers
function handleScoreStateDown(x, y, obj) {
	// Implement logic for handling down event in SCORE state
	log("Handling down event in SCORE state");
}
function handleScoreStateMove(x, y, obj) {
	// Implement logic for handling move event in SCORE state
	//log("Handling move event in SCORE state");
}
function handleScoreStateUp(x, y, obj) {
	// Implement logic for handling up event in SCORE state
	log("Handling up event in SCORE state");
}
// Initialize PuzzleManager
//<Assets used in the game will automatically appear here>
//<Write imports for supported plugins here>
/***********************************************************************************************/ 
/****************************************** GLOBAL VARIABLES ***********************************/
/***********************************************************************************************/ 
var debug = true;
var isPlaying = false;
var GAME_STATE = {
	INIT: 'INIT',
	MENU: 'MENU',
	NEW_ROUND: 'NEW_ROUND',
	PLAYING: 'PLAYING',
	SCORE: 'SCORE'
};
var currentState = GAME_STATE.INIT;
var boardContainer;
var puzzleManager;
var startButton;
var backgroundLayer;
var middleLayer;
var foregroundLayer;
var backgroundImage;
var centerX = 1024;
var centerY = 1366;
var dragNode = null;
var tileColors = {
	0: 0x16C47F,
	// Bright Green
	1: 0xF93827,
	// Bright Yellow
	2: 0x1E90FF,
	// Bright Orange
	3: 0xFFD65A,
	// Bright Red
	4: 0xFF9D23 // Bright Blue
};
var levelConfigs = {
	1: {
		tiles: [[1, 1, 1], ["", 2, 2], ["", 1, ""]],
		operations: [{
			type: '+1',
			uses: 3
		}, {
			type: '-1',
			uses: 2
		}]
	},
	2: {
		tiles: [[2, 2, 2], ["", 3, 3], ["", 2, ""]],
		operations: [{
			type: '+1',
			uses: 2
		}, {
			type: '-1',
			uses: 3
		}]
	}
}; // Example configuration for two levels 
/***********************************************************************************************/ 
/***************************************** GAME INITIALISATION *********************************/
/***********************************************************************************************/ 
function initializeGame() {
	backgroundLayer = new Container();
	middleLayer = new Container();
	foregroundLayer = new Container();
	backgroundImage = new BackgroundImage();
	backgroundLayer.addChild(backgroundImage);
	game.addChild(backgroundLayer);
	game.addChild(middleLayer);
	game.addChild(foregroundLayer);
	boardContainer = new Container();
	middleLayer.addChild(boardContainer);
	boardContainer.x = centerX;
	boardContainer.y = centerY;
	puzzleManager = new PuzzleManager(game);
	startButton = new StartButton();
	startButton.x = centerX; // Center horizontally
	startButton.y = centerY; // Center vertically
	game.addChild(startButton);
	startButton.visible = false;
	// Transition to menu state
	changeGameState(GAME_STATE.MENU);
}
initializeGame();

===================================================================
--- original.js
+++ change.js
@@ -88,8 +88,15 @@
 	self.setValue = function (newValue) {
 		self.value = newValue;
 		self.valueText.setText(self.value.toString());
 		self.valueTextShadow.setText(self.value.toString());
+		// Animate color change
+		tween(tileGraphics, {
+			tint: tileColors[self.value]
+		}, {
+			duration: 500,
+			easing: tween.easeOut
+		});
 	};
 	return self;
 });
 // OperationButton class to represent each operation button