/**** 
* Classes
****/
// 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: globalTerrain[x][y] === 1 ? 'rock' : 'sand',
					asset: globalTerrain[x][y] === 1 ? new Rock(x, y) : new Sand(x, y),
					building: null
				};
			}
		}
	};
	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;
					if (!asset.parent) {
						self.addChild(asset);
					}
					asset.x = screenX;
					asset.y = screenY;
					// Render buildings
					var building = cell.building;
					if (x == 7 && y == 15) {
						//console.log("Render " + x + ',' + y);
					}
					if (building) {
						//console.log("Building at " + x + ',' + y);
						if (!building.parent) {
							self.addChild(building.asset);
						}
						building.x = screenX;
						building.y = screenY;
					}
				} else {
					if (asset && asset.parent) {
						self.removeChild(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) {
		self.currentViewCenter.x = input.x;
		self.currentViewCenter.y = input.y;
		// Clamp the view center to the map boundaries
		self.currentViewCenter.x = Math.max(14, Math.min(self.currentViewCenter.x, self.cells.length - 7));
		self.currentViewCenter.y = Math.max(14, Math.min(self.currentViewCenter.y, self.cells[0].length - 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
	};
});
// 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;
});
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;
});
// Base Building class
var Building = Container.expand(function (x, y, type) {
	var self = Container.call(this);
	self.x = x * 100;
	self.y = y * 100;
	self.type = type;
	self.asset = self.attachAsset(type, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.asset.x = self.x;
	self.asset.y = self.y;
	// Initialize building-specific properties here
	// ...
	return self;
});
var ConstructionYard = Building.expand(function (x, y) {
	var self = Building.call(this, x, y, 'constructionYard');
	// Additional properties and methods for ConstructionYard can be added here
	// ...
	return self;
});

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

/**** 
* Game Code
****/
// Initialize assets used in this game.
// Event listeners
// Event listeners
// Instantiate and initialize the Map
var mapXSize = 50;
var mapYSize = 30;
var globalTerrain = new Array(mapXSize).fill(0).map(function () {
	return new Array(mapYSize).fill(0);
});
// 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;
		}
	}
}
var gameMap = new Map();
gameMap.init(mapXSize, mapYSize); // Initialize with a 20x20 grid
console.log("rockIlot1Center at " + rockIlot1Center.x + ',' + rockIlot1Center.y);
gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(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);
//var gameMap = new Map();
//gameMap.init(mapXSize, mapYSize); // Initialize with a 20x20 grid
// Add the map to the game
// This should be done after the map is fully initialized and ready to render
game.addChild(gameMap);
var isPressing = false;
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) {
	dragStart = null;
}
game.on('down', handleDragStart);
game.on('move', handleDragMove);
game.on('up', handleDragEnd);
// Instantiate CommandPanel
var commandPanel = game.addChild(new CommandPanel());
// Game tick
LK.on('tick', function () {
	// Render the map each tick
	gameMap.render();
});

===================================================================
--- original.js
+++ change.js
@@ -55,9 +55,9 @@
 					}
 					if (building) {
 						//console.log("Building at " + x + ',' + y);
 						if (!building.parent) {
-							self.addChild(building);
+							self.addChild(building.asset);
 						}
 						building.x = screenX;
 						building.y = screenY;
 					}