/**** 
* Classes
****/
var BuildableItemIcon = Container.expand(function (type, x, y) {
	var self = Container.call(this);
	self.type = type;
	self.asset = self.attachAsset(type, {
		anchorX: 0.5,
		anchorY: 0.5,
		x: x,
		y: y
	});
	self.asset.on('down', function () {
		console.log('Buildable item ' + type + ' selected.');
		// Add logic to handle the building of the selected item
	});
	self.label = new Text2(type, {
		size: 20,
		fill: '#000000',
		align: 'center'
	});
	self.label.x = self.asset.x - 50;
	self.label.y = self.asset.y + 120;
	self.addChild(self.label);
	return self;
});
// Initialize game elements
// Map class to represent the grid-based map system
var Map = Container.expand(function () {
	var self = Container.call(this);
	self.cells = [];
	self.init = function (width, height) {
		for (var x = 0; x < width; x++) {
			self.cells[x] = [];
			for (var y = 0; y < height; y++) {
				// Initialize each cell with default terrain, height, resources
				self.cells[x][y] = {
					height: 0,
					resources: null,
					terrain: null,
					asset: null,
					building: null
				};
			}
		}
	};
	self.initTerrain = function (width, height) {
		for (var x = 0; x < width; x++) {
			for (var y = 0; y < height; y++) {
				// Initialize each cell with default terrain, height, resources
				self.cells[x][y].terrain = globalTerrain[x][y] === 1 ? 'rock' : 'sand';
				self.cells[x][y].asset = globalTerrain[x][y] === 1 ? new Rock(x, y) : new Sand(x, y);
			}
		}
	};
	self.currentViewCenter = {
		x: 15,
		y: 20
	};
	// Create a Text2 object to display the currentViewCenter coordinates
	self.viewCenterText = new Text2(self.currentViewCenter.x + ', ' + self.currentViewCenter.y, {
		size: 50,
		fill: '#ffffff',
		align: 'center'
	});
	// Position the text at the top center of the screen
	LK.gui.top.addChild(self.viewCenterText);
	self.render = function () {
		// Move tiles instead of the view
		var viewSize = Math.ceil(Math.max(game.width, game.height) / 2 / 100); // Calculate viewSize based on game dimensions and tile size
		for (var x = self.currentViewCenter.x - viewSize - 1; x <= self.currentViewCenter.x + viewSize; x++) {
			for (var y = self.currentViewCenter.y - viewSize - 1; y <= self.currentViewCenter.y + viewSize; y++) {
				if (x >= 0 && x < self.cells.length && y >= 0 && y < self.cells[x].length) {
					var cell = self.cells[x][y];
					var asset = cell.asset;
					var screenX = (x - self.currentViewCenter.x + viewSize) * asset.width;
					var screenY = (y - self.currentViewCenter.y + viewSize) * asset.height;
					asset.x = screenX;
					asset.y = screenY;
					if (!asset.parent) {
						self.addChild(asset);
					}
					// Render buildings
					var building = cell.building;
					if (building) {
						building.asset.x = screenX;
						building.asset.y = screenY;
						self.addChild(building.asset);
					}
				}
			}
		}
	};
	self.getNavigationMesh = function () {
		// Create and return the navigation mesh for pathfinding
	};
	self.findPath = function (start, end) {
		// Implement A* pathfinding algorithm
		// Return the path from start to end
	};
	self.lastInputPosition = null;
	self.handleInput = function (input) {
		// Clamp the view center to the map boundaries
		self.currentViewCenter.x = Math.max(14, Math.min(input.x, mapXSize - 7));
		self.currentViewCenter.y = Math.max(14, Math.min(input.y, mapYSize - 9));
		// Update the Text2 object with the new coordinates
		self.viewCenterText.setText(self.currentViewCenter.x + ', ' + self.currentViewCenter.y);
	};
	self.checkCollisions = function () {
		// Handle collisions between units and obstacles
	};
	self.serialize = function () {
		// Serialize map data to a file
	};
	self.load = function (data) {
		// Load map data from a file
	};
});
var Sand = Container.expand(function (x, y) {
	var self = Container.call(this);
	self.asset = LK.getAsset('sand', {
		x: x * 100,
		y: y * 100
	}); // Pre-create the asset for this cell
	return self.asset;
});
var Rock = Container.expand(function (x, y) {
	var self = Container.call(this);
	self.asset = LK.getAsset('rock', {
		x: x * 100,
		y: y * 100
	}); // Pre-create the asset for this cell
	return self.asset;
});
var SelectionMarker = Container.expand(function () {
	var self = Container.call(this);
	self.asset = self.attachAsset('selectionCross', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.alpha = 0.6;
	self.visible = false;
	self.updatePosition = function (x, y) {
		console.log('SelectionMarker updated to position:', x, y);
		var viewSize = Math.ceil(Math.max(game.width, game.height) / 2 / 100);
		self.x = x - (gameMap.currentViewCenter.x - 15) * 100;
		self.y = y - (gameMap.currentViewCenter.y - 15) * 100;
		self.visible = true;
	};
	self.hide = function () {
		console.log('SelectionMarker hidden');
		self.visible = false;
	};
	return self;
});
// Base Building class
var Building = Container.expand(function (x, y, type, name, playerId, cellW, cellH, buildable) {
	var self = Container.call(this);
	self.cellX = x;
	self.cellY = y;
	self.cellW = cellW || 1; // Default to 1x1 if not specified
	self.cellH = cellH || 1; // Default to 1x1 if not specified
	self.x = x * 100;
	self.y = y * 100;
	self.type = type;
	self.playerId = playerId;
	self.name = name;
	self.buildable = buildable || []; // New property to store what the building can build
	self.asset = self.attachAsset(type, {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: getPlayerTint(playerId)
	});
	self.asset.x = self.x;
	self.asset.y = self.y;
	// Initialize building-specific properties here
	// ...
	self.asset.on('down', function () {
		currentSelection = self;
		selectionMarker.updatePosition(self.x, self.y);
		console.log("Building selected: P" + self.playerId + ' ' + self.type + " at cell " + self.cellX + "," + self.cellY);
		displayBuildableItems();
		updateActionBoard();
	});
	return self;
});
var ConstructionYard = Building.expand(function (x, y, playerId) {
	var self = Building.call(this, x, y, 'constructionYard', 'Construction Yard', playerId, 2, 2, ['windTrap']);
	// Additional properties and methods for ConstructionYard can be added here
	return self;
});
var WindTrap = Building.expand(function (x, y, playerId) {
	var self = Building.call(this, x, y, 'windTrap', 'Wind Trap', playerId, 2, 2);
	// Additional properties and methods for WindTrap can be added here
	return self;
});
// BuildableRepository class to store reference information about all buildables
var BuildableRepository = Container.expand(function () {
	var self = Container.call(this);
	self.buildables = {
		'constructionYard': {
			'name': 'Construction Yard',
			'buildable': ['windTrap']
		},
		'windTrap': {
			'name': 'Wind Trap',
			'buildable': []
		}
		// Add more buildables as needed
	};
	self.getBuildableInfo = function (type) {
		return self.buildables[type];
	};
	return self;
});
var Player = Container.expand(function (playerId, tint) {
	var self = Container.call(this);
	self.playerId = playerId;
	self.resources = 0;
	self.tint = tint;
	self.spice = 1000; // Initialize spice property with 1000
	// Initialize player-specific properties here
	// ...
	return self;
});
// Command Panel class
var CommandPanel = Container.expand(function () {
	var self = Container.call(this);
	self.graphics = self.attachAsset('boardBackground', {
		width: game.width,
		height: game.height * 0.22,
		color: 0x333333
	});
	// Set the center box position to the center of the screen
	self.x = game.width / 2 - self.graphics.width / 2;
	self.y = game.height - self.height + game.height * 0.01;
});

/**** 
* Initialize Game
****/
// Event listeners
// Instantiate and initialize the Map
var game = new LK.Game({
	backgroundColor: 0x000000 // Init game with black background
});

/**** 
* Game Code
****/
function displayBuildableItems() {
	if (!currentSelection || !currentSelection.buildable) {
		return;
	}
	var buildableItems = currentSelection.buildable;
	var iconX = commandPanel.x + 200; // Starting X position for the first icon
	var iconY = commandPanel.y + 200; // Y position for all icons
	buildableItems.forEach(function (itemType) {
		var icon = new BuildableItemIcon(itemType, iconX, iconY);
		game.addChild(icon);
		iconX += 100; // Increment X position for the next icon
	});
}
var applyCellOccupation = function applyCellOccupation(cellX, cellY) {
	var building = gameMap.cells[cellX][cellY].building;
	if (building) {
		for (var w = 0; w < building.cellW; w++) {
			for (var h = 0; h < building.cellH; h++) {
				if (cellX + w < gameMap.cells.length && cellY + h < gameMap.cells[0].length) {
					gameMap.cells[cellX + w][cellY + h].building = building;
				}
			}
		}
	}
};
var getPlayerTint = function getPlayerTint(id) {
	return player1.playerId === id ? player1.tint : player2.tint;
};
var gameIsRunning = false;
var mapXSize = 50;
var mapYSize = 30;
var gameMap = null;
var globalTerrain = null;
var player1 = null;
var player2 = null;
var currentSelection = null;
var selectionMarker = null;
// Gui
var commandPanel = null;
var player1SpiceText = null;
var currentSelectionText = null;
// Prepare the map
function prepareMap() {
	globalTerrain = new Array(mapXSize).fill(0).map(function () {
		return new Array(mapYSize).fill(0);
	});
	gameMap = new Map();
	gameMap.init(mapXSize, mapYSize); // Initialize with a 20x20 grid
	// Define a fixed rock ilot near the center left of the map
	var rockIlot1Center = {
		x: Math.floor(mapXSize * 0.15),
		y: Math.floor(mapYSize * 0.5)
	};
	var rockIlot1Radius = 4;
	for (var x = rockIlot1Center.x - rockIlot1Radius; x <= rockIlot1Center.x + rockIlot1Radius; x++) {
		for (var y = rockIlot1Center.y - rockIlot1Radius; y <= rockIlot1Center.y + rockIlot1Radius; y++) {
			if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
				globalTerrain[x][y] = 1;
			}
		}
	}
	console.log("rockIlot1Center at " + rockIlot1Center.x + ',' + rockIlot1Center.y);
	gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(rockIlot1Center.x, rockIlot1Center.y, 1);
	applyCellOccupation(rockIlot1Center.x, rockIlot1Center.y);
	// Define a fixed rock ilot near the center right of the map
	var rockIlot2Center = {
		x: Math.floor(mapXSize * 0.85),
		y: Math.floor(mapYSize * 0.5)
	};
	var rockIlot2Radius = 4;
	for (var x = rockIlot2Center.x - rockIlot2Radius; x <= rockIlot2Center.x + rockIlot2Radius; x++) {
		for (var y = rockIlot2Center.y - rockIlot2Radius; y <= rockIlot2Center.y + rockIlot2Radius; y++) {
			if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
				globalTerrain[x][y] = 1;
			}
		}
	}
	console.log("rockIlot2Center at " + rockIlot2Center.x + ',' + rockIlot2Center.y);
	gameMap.cells[rockIlot2Center.x][rockIlot2Center.y].building = new ConstructionYard(rockIlot2Center.x, rockIlot2Center.y, 2);
	applyCellOccupation(rockIlot2Center.x, rockIlot2Center.y);
	gameMap.initTerrain(mapXSize, mapYSize); // Initialize with a 20x20 grid
	console.log('ConstructionYard1 cell :', gameMap.cells[rockIlot1Center.x][rockIlot1Center.y]);
	selectionMarker = new SelectionMarker();
	// Add the map to the game
	game.addChild(gameMap);
	game.addChild(selectionMarker);
}
//#region Event listeners
var dragStart = null;
function handleDragStart(obj) {
	dragStart = obj.event.getLocalPosition(game);
}
function handleDragMove(obj) {
	if (dragStart) {
		var currentPos = obj.event.getLocalPosition(game);
		var deltaX = currentPos.x - dragStart.x;
		var deltaY = currentPos.y - dragStart.y;
		dragStart = currentPos; // Update dragStart to the current position
		var inputPosition = {
			x: gameMap.currentViewCenter.x - Math.round(deltaX / 100),
			y: gameMap.currentViewCenter.y - Math.round(deltaY / 100)
		};
		gameMap.handleInput(inputPosition);
	}
}
function handleDragEnd(obj) {
	var currentPos = obj.event.getLocalPosition(game);
	var input = {
		x: currentPos.x,
		y: currentPos.y
	};
	var cellX = Math.floor(input.x / 100) + gameMap.currentViewCenter.x - Math.ceil(game.width / 2 / 100) - 3;
	var cellY = Math.floor(input.y / 100) + gameMap.currentViewCenter.y - Math.ceil(game.height / 2 / 100);
	if (cellX >= 0 && cellX < gameMap.cells.length && cellY >= 0 && cellY < gameMap.cells[cellX].length) {
		var cell = gameMap.cells[cellX][cellY];
		if (!cell.building) {
			currentSelection = null;
			selectionMarker.hide();
			console.log("Nothing selected at " + cellX + ',' + cellY);
			updateActionBoard();
		}
	}
	dragStart = null;
}
game.on('down', handleDragStart);
game.on('move', handleDragMove);
game.on('up', handleDragEnd);
//#endregion Event listeners
// Global function to handle action board updates
var updateActionBoard = function updateActionBoard() {
	// Update logic for the action board
	// This function can be called whenever the action board needs to be updated
	currentSelectionText.setText(currentSelection ? currentSelection.name : '');
};
function initGame() {
	// Create players
	player1 = new Player(1, 0xAAAAff);
	player2 = new Player(2, 0xffAAAA);
	// Prepare the map
	prepareMap();
	// Instantiate CommandPanel
	commandPanel = game.addChild(new CommandPanel());
	// Create a Text2 object for current selection
	currentSelectionText = new Text2('', {
		size: 50,
		fill: '#000000',
		font: "'GillSans-Bold',Impact,'Arial Black',Tahoma"
	});
	currentSelectionText.anchor.set(0.5, 6.8);
	LK.gui.bottom.addChild(currentSelectionText);
	// Create a Text2 object to display player1's spice level
	player1SpiceText = new Text2(player1.spice.toString(), {
		size: 50,
		fill: '#000000',
		font: "'GillSans-Bold',Impact,'Arial Black',Tahoma"
	});
	player1SpiceText.anchor.set(1.0, 0);
	// Add the spice level text to the GUI overlay
	LK.gui.topRight.addChild(player1SpiceText);
	gameIsRunning = true;
}
// Game tick
LK.on('tick', function () {
	// Render the map each tick
	if (gameIsRunning) {
		gameMap.render();
	}
});
// Start the game
LK.setTimeout(function () {
	initGame();
}, 100);

===================================================================
--- original.js
+++ change.js
@@ -3,28 +3,25 @@
 ****/
 var BuildableItemIcon = Container.expand(function (type, x, y) {
 	var self = Container.call(this);
 	self.type = type;
-	self.asset = self.attachAsset(type + 'Icon', {
+	self.asset = self.attachAsset(type, {
 		anchorX: 0.5,
 		anchorY: 0.5,
 		x: x,
 		y: y
 	});
-	if (!self.asset) {
-		console.error('Asset type ' + type + ' is not defined.');
-	}
 	self.asset.on('down', function () {
 		console.log('Buildable item ' + type + ' selected.');
 		// Add logic to handle the building of the selected item
 	});
-	self.label = new Text2(self.type, {
+	self.label = new Text2(type, {
 		size: 20,
 		fill: '#000000',
 		align: 'center'
 	});
-	self.label.x = self.asset.x - self.label.width / 2;
-	self.label.y = self.asset.y + self.asset.height / 2 + 10;
+	self.label.x = self.asset.x - 50;
+	self.label.y = self.asset.y + 120;
 	self.addChild(self.label);
 	return self;
 });
 // Initialize game elements
@@ -196,8 +193,27 @@
 	var self = Building.call(this, x, y, 'windTrap', 'Wind Trap', playerId, 2, 2);
 	// Additional properties and methods for WindTrap can be added here
 	return self;
 });
+// BuildableRepository class to store reference information about all buildables
+var BuildableRepository = Container.expand(function () {
+	var self = Container.call(this);
+	self.buildables = {
+		'constructionYard': {
+			'name': 'Construction Yard',
+			'buildable': ['windTrap']
+		},
+		'windTrap': {
+			'name': 'Wind Trap',
+			'buildable': []
+		}
+		// Add more buildables as needed
+	};
+	self.getBuildableInfo = function (type) {
+		return self.buildables[type];
+	};
+	return self;
+});
 var Player = Container.expand(function (playerId, tint) {
 	var self = Container.call(this);
 	self.playerId = playerId;
 	self.resources = 0;
@@ -238,10 +254,10 @@
 	}
 	var buildableItems = currentSelection.buildable;
 	var iconX = commandPanel.x + 200; // Starting X position for the first icon
 	var iconY = commandPanel.y + 200; // Y position for all icons
-	buildableItems.forEach(function (item) {
-		var icon = new BuildableItemIcon(item.name, iconX, iconY);
+	buildableItems.forEach(function (itemType) {
+		var icon = new BuildableItemIcon(itemType, iconX, iconY);
 		game.addChild(icon);
 		iconX += 100; // Increment X position for the next icon
 	});
 }