Upit | Learn about creating the game Sand Wars

===================================================================
--- original.js
+++ change.js
@@ -153,10 +153,10 @@
 	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.x = x * tileSize;
+	self.y = y * tileSize;
 	self.type = type;
 	self.isBuilding = true;
 	self.playerId = playerId;
 	self.name = name;
@@ -327,16 +327,23 @@
 	LK.gui.top.addChild(self.viewCenterText);
 	self.render = function () {
 		self.removeChildren();
 		// Move tiles instead of the view
+		//console.log("viewPort ", viewPort);
 		for (var x = viewPort.wCellX; x < viewPort.wCellX + viewPort.cellW; x++) {
 			for (var y = viewPort.wCellY; y < viewPort.wCellY + viewPort.cellH; 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 coord = worldCellToScreenCell(x, y);
-					var screenX = coord.cellX;
-					var screenY = coord.cellY;
+					var screenX = coord.cellX * 100;
+					var screenY = coord.cellY * 100;
+					*/
+					//console.log("cell " + x, ',' + y + " =>" + screenX, screenY);
+					var screenCoord = worldCellToScreenCoord(x, y);
+					var screenX = screenCoord.x;
+					var screenY = screenCoord.y;
 					asset.x = screenX;
 					asset.y = screenY;
 					if (!asset.parent) {
 						self.addChild(asset);
@@ -482,17 +489,26 @@
 	}
 	self.lastInputPosition = null;
 	self.handleDrag = function (input) {
 		// Clamp the view center to the map boundaries
-		var targetX = Math.max(11, Math.min(self.currentViewCenter.x + input.x, mapXSize - 4));
+		/*var targetX = Math.max(11, Math.min(self.currentViewCenter.x + input.x, mapXSize - 4));
 		var targetY = Math.max(14, Math.min(self.currentViewCenter.y + input.y, mapYSize - 9));
 		self.currentViewCenter.x = Math.round(self.currentViewCenter.x + (targetX - self.currentViewCenter.x) * dragSpeed);
 		self.currentViewCenter.y = Math.round(self.currentViewCenter.y + (targetY - self.currentViewCenter.y) * dragSpeed);
+		*/
+		/*
 		viewPort.wX = Math.max(0, Math.min(mapXSize - viewPort.cellW, viewPort.wX + input.x));
 		viewPort.wY = Math.max(0, Math.min(mapYSize - viewPort.cellH, viewPort.wY + input.y));
+		viewPort.wCellX = Math.max(0, Math.min(mapXSize - viewPort.cellW, viewPort.wX + input.x));
+		viewPort.wCellY = Math.max(0, Math.min(mapYSize - viewPort.cellH, viewPort.wY + input.y));
+		*/
+		viewPort.wCellX = Math.max(0, Math.min(mapXSize - viewPort.cellW, viewPort.wCellX + input.x));
+		viewPort.wCellY = Math.max(0, Math.min(mapYSize - viewPort.cellH, viewPort.wCellY + input.y));
+		viewPort.wX = viewPort.wCellX * tileSize;
+		viewPort.wY = viewPort.wCellY * tileSize;
 		console.log("handling drag...", input, input.x, input.y);
 		// Update the Text2 object with the new coordinates
-		self.viewCenterText.setText(self.currentViewCenter.x + ', ' + self.currentViewCenter.y);
+		self.viewCenterText.setText(self.currentViewCenter.x + ', ' + self.currentViewCenter.y + '\r\n' + viewPort.wCellX + ',' + viewPort.wCellY);
 		//selectionMarker.setOnElement(currentSelection);
 	};
 	self.checkCollisions = function () {
 		// Handle collisions between units and obstacles
@@ -1082,8 +1098,9 @@
 	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) {
+					console.log("applyCellOccupation", cellX, cellY, " to ", cellX + w, cellY + h);
 					gameMap.cells[cellX + w][cellY + h].building = building;
 				}
 			}
 		}
@@ -1100,8 +1117,10 @@
 var viewSize = Math.ceil(Math.max(game.width, game.height) / 2 / 100);
 var viewPort = {
 	wX: 0,
 	wY: 0,
+	wCellX: 0,
+	wCellY: 0,
 	cellW: Math.floor(game.width / tileSize),
 	// ~20
 	cellH: Math.floor(mapHeight / tileSize) // ~21
 };
@@ -1328,11 +1347,13 @@
 		highlightBorder();
 		currentUserActionState = UserActionState.NAVIGATING;
 		dragStart = null;
 	} else {
-		// Existing code for handling drag end without a building placement
-		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);
+		// Normal click
+		var clickCell = screenCoordToWorldCell(input.x, input.y);
+		var cellX = clickCell.wCellX;
+		var cellY = clickCell.wCellY;
+		console.log("Click at cell " + cellX + ',' + cellY);
 		var deltaToSelection = 99;
 		if (currentSelection && currentSelection.isUnit) {
 			var selCell = getCellForUnit(currentSelection);
 			console.log("currentSelection = " + currentSelection.name + "  at " + selCell.cellX + ',' + selCell.cellY);
@@ -1454,17 +1475,17 @@
 		x: x,
 		y: y
 	};
 };
-var worldCellToScreenCell = function worldCoordToScreenCell(wCellX, wCellY) {
+var worldCellToScreenCell = function worldCellToScreenCell(wCellX, wCellY) {
 	var cellX = wCellX - viewPort.wCellX;
 	var cellY = wCellY - viewPort.wCellY;
 	return {
 		cellX: cellX,
 		cellY: cellY
 	};
 };
-var worldCellToScreenCoord = function worldCoordToScreenCoord(wCellX, wCellY) {
+var worldCellToScreenCoord = function worldCellToScreenCoord(wCellX, wCellY) {
 	var x = wCellX * tileSize - viewPort.wX;
 	var y = wCellY * tileSize - viewPort.wY;
 	return {
 		x: x,
@@ -1634,14 +1655,21 @@
 	/*var cellCoord = convertCoordsToCell(x, y);
 	if (game.mouseCoordsText) {
 	game.mouseCoordsText.setText(Math.floor(x) + ',' + Math.floor(y) + '\r\n' + cellCoord.cellX + ',' + cellCoord.cellY);
 	}*/
+	/*
 	var wCellCoords = getScreenToWorldCell(x, y);
 	var wCoordCoords = getScreenToWorldCoord(x, y);
 	if (game.mouseCoordsText) {
-		game.mouseCoordsText.setText("S:" + Math.floor(x) + ',' + Math.floor(y) + '\r\n' + Math.floor(x / tileSize) + ',' + Math.floor(y / tileSize) + '\r\nW:' + Math.floor(wCellCoords.wCellX) + ',' + Math.floor(wCellCoords.wCellY) + '\r\n' + Math.floor(wCoordCoords.wX) + ',' + Math.floor(wCoordCoords.wY));
+	game.mouseCoordsText.setText("S:" + Math.floor(x) + ',' + Math.floor(y) 
+			+ '\r\n' + Math.floor(x / tileSize) + ',' + Math.floor(y / tileSize) + '\r\nW:' + Math.floor(wCellCoords.wCellX) + ',' + Math.floor(wCellCoords.wCellY) + '\r\n' + Math.floor(wCoordCoords.wX) + ',' + Math.floor(wCoordCoords.wY));
 	}
-	gameMap.viewCenterText.setText(gameMap.currentViewCenter.x + ', ' + gameMap.currentViewCenter.y + '\r\n' + viewPort.wX + ',' + viewPort.wY);
+	*/
+	var wCell = screenCoordToWorldCell(x, y);
+	if (game.mouseCoordsText) {
+		game.mouseCoordsText.setText("S:" + Math.floor(x) + ',' + Math.floor(y) + '\r\n' + Math.floor(x / tileSize) + ',' + Math.floor(y / tileSize) + '\r\nW:' + Math.floor(wCell.wCellX) + ',' + Math.floor(wCell.wCellY));
+	}
+	gameMap.viewCenterText.setText(gameMap.currentViewCenter.x + ', ' + gameMap.currentViewCenter.y + '\r\n' + viewPort.wCellX + ',' + viewPort.wCellY);
 };
 // Global function to update base info text
 var updateBaseInfo = function updateBaseInfo() {
 	player1SpiceText.setText('| ' + player1.spice.toString());
Creation History

Images
