Code edit (2 edits merged)
Please save this source code
User prompt
add a new text 'currentSelectionText' at the top of the board
Code edit (1 edits merged)
Please save this source code
User prompt
in applyCellOccupation() copy the reference the building at gameMap.cells[cellX][cellY] to adjacent cells depending on building cellW and cellH
Code edit (2 edits merged)
Please save this source code
User prompt
Currently building creation is done like that : gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(rockIlot1Center.x, rockIlot1Center.y, 1); How to make this 2x2 buliding occupy 2x2 cells ?
Code edit (4 edits merged)
Please save this source code
User prompt
but I'm a developper and I don't see the variable, here is the function: 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); } } else { if (asset && asset.parent) { self.removeChild(asset); } } } } };
Code edit (6 edits merged)
Please save this source code
User prompt
Bulding should occupy cellW cells horizontally and cellH cells vertically, so when user clicks on a 2x2 building it should select the buiding when he clicks at at (x,y) (x+1,y), (x,y+1) and (x+1,y+1)
User prompt
when drawing a building at x,y, x,y should be the top left corner
Code edit (1 edits merged)
Please save this source code
Code edit (4 edits merged)
Please save this source code
User prompt
in handleDragEnd add to cellX and cellY the offset due to currentViewCenter
Code edit (5 edits merged)
Please save this source code
User prompt
add cellW and cellH properties to buildings, constructionYard is 2x2
User prompt
add cellX and cellY propeties to buildings
Code edit (4 edits merged)
Please save this source code
User prompt
Fix Bug: 'TypeError: Cannot read properties of null (reading 'x')' in or related to this line: 'var deltaX = currentPos.x - dragStart.x;' Line Number: 280
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'Timeout.tick error: Cannot read properties of null (reading 'playerId')' in or related to this line: 'return player1.playerId === id ? player1.tint : player2.tint;' Line Number: 205
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'Uncaught ReferenceError: global is not defined' in or related to this line: 'global.updateActionBoard = function () {' Line Number: 284
User prompt
Add a global function to handle the action board update
Code edit (1 edits merged)
Please save this source code
/**** 
* 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: 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) {
						//if (!building.parent) {
						//self.addChild(building.asset);
						//building.x = screenX;
						//building.y = screenY;
						building.asset.x = screenX;
						building.asset.y = screenY;
						//if (!building.asset.parent)
						{
							self.addChild(building.asset);
						}
						//console.log("Building at " + x + ',' + y, building);
					}
				} 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) {
		/*var cellX = Math.floor(input.x / 100);
		var cellY = Math.floor(input.y / 100);
		if (cellX >= 0 && cellX < self.cells.length && cellY >= 0 && cellY < self.cells[cellX].length) {
		var cell = self.cells[cellX][cellY];
		if (!cell.building) {
		currentSelection = null;
		console.log("Nothing selected");
		}
		}*/
		console.log("Clicked " + input.x + ',' + input.y);
		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
	};
});
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, playerId) {
	var self = Container.call(this);
	self.cellX = x;
	self.cellY = y;
	self.x = x * 100;
	self.y = y * 100;
	self.type = type;
	self.playerId = playerId;
	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;
		console.log("Building selected: P" + self.playerId + ' ' + self.type + " at cell " + self.cellX + "," + self.cellY);
	});
	return self;
});
var ConstructionYard = Building.expand(function (x, y, playerId) {
	var self = Building.call(this, x, y, 'constructionYard', playerId);
	// Additional properties and methods for ConstructionYard can be added here
	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
****/
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;
// Gui
var player1SpiceText = 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("rockIlot2Center at " + rockIlot1Center.x + ',' + rockIlot1Center.y);
	gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(rockIlot1Center.x, rockIlot1Center.y, 1);
	// 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);
	console.log('ConstructionYard cell :', gameMap.cells[rockIlot2Center.x][rockIlot2Center.y]);
	gameMap.initTerrain(mapXSize, mapYSize); // Initialize with a 20x20 grid
	// Add the map to the game
	game.addChild(gameMap);
}
//#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);
	var cellY = Math.floor(input.y / 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;
			console.log("Nothing selected at " + cellX + ',' + cellY);
		}
	}
	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
};
function initGame() {
	// Create players
	player1 = new Player(1, 0xAAAAff);
	player2 = new Player(2, 0xffAAAA);
	// Prepare the map
	prepareMap();
	// Instantiate CommandPanel
	var commandPanel = game.addChild(new CommandPanel());
	// 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();
}, 1000); ===================================================================
--- original.js
+++ change.js
@@ -97,8 +97,9 @@
 		currentSelection = null;
 		console.log("Nothing selected");
 		}
 		}*/
+		console.log("Clicked " + input.x + ',' + input.y);
 		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));
@@ -134,12 +135,15 @@
 });
 // Base Building class
 var Building = Container.expand(function (x, y, type, playerId) {
 	var self = Container.call(this);
+	self.cellX = x;
+	self.cellY = y;
 	self.x = x * 100;
 	self.y = y * 100;
 	self.type = type;
-	self.playerId = playerId, self.asset = self.attachAsset(type, {
+	self.playerId = playerId;
+	self.asset = self.attachAsset(type, {
 		anchorX: 0.5,
 		anchorY: 0.5,
 		tint: getPlayerTint(playerId)
 	});
@@ -148,9 +152,9 @@
 	// Initialize building-specific properties here
 	// ...
 	self.asset.on('down', function () {
 		currentSelection = self;
-		console.log("Building selected: P" + self.playerId + ' ' + self.type);
+		console.log("Building selected: P" + self.playerId + ' ' + self.type + " at cell " + self.cellX + "," + self.cellY);
 	});
 	return self;
 });
 var ConstructionYard = Building.expand(function (x, y, playerId) {
@@ -267,24 +271,19 @@
 	}
 }
 function handleDragEnd(obj) {
 	var currentPos = obj.event.getLocalPosition(game);
-	if (dragStart) {
-		var deltaX = currentPos.x - dragStart.x;
-		var deltaY = currentPos.y - dragStart.y;
-		dragStart = currentPos; // Update dragStart to the current position
-	}
 	var input = {
-		x: gameMap.currentViewCenter.x - Math.round(deltaX / 100),
-		y: gameMap.currentViewCenter.y - Math.round(deltaY / 100)
+		x: currentPos.x,
+		y: currentPos.y
 	};
 	var cellX = Math.floor(input.x / 100);
 	var cellY = Math.floor(input.y / 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;
-			console.log("Nothing selected");
+			console.log("Nothing selected at " + cellX + ',' + cellY);
 		}
 	}
 	dragStart = null;
 }
:quality(85)/https://cdn.frvr.ai/65bf9b2ac10ed5ddaec99bb7.png%3F3) 
 :quality(85)/https://cdn.frvr.ai/65bf9e2dc10ed5ddaec99bc7.png%3F3) 
 a tileable sand terrain tile.
:quality(85)/https://cdn.frvr.ai/65bfb45ec10ed5ddaec99c02.png%3F3) 
 A square tileable rock terrain tile WITHOUT BBORDER. Single Game Texture. In-Game asset. 2d. No shadows. No Border
:quality(85)/https://cdn.frvr.ai/65bff843c10ed5ddaec99dd1.png%3F3) 
 :quality(85)/https://cdn.frvr.ai/65c14ae1fc3df84f65ed5adc.png%3F3) 
 Zenith view of Dune's Wind Trap power facility square fence. Ressembles a bit to Sydney's Opera. Zenith view Directly from above.
:quality(85)/https://cdn.frvr.ai/65c3fcc3fc3df84f65ed60d6.png%3F3) 
 :quality(85)/https://cdn.frvr.ai/65c547c707ae736c088fad03.png%3F3) 
 grey cancel icon. UI
:quality(85)/https://cdn.frvr.ai/65c566ba07ae736c088fad99.png%3F3) 
 thin white circle empty.
:quality(85)/https://cdn.frvr.ai/65c56ba507ae736c088fadb6.png%3F3) 
 0x5e86ff
:quality(85)/https://cdn.frvr.ai/65c6651b07ae736c088fb0a8.png%3F3) 
 Zenith view of a white rectangular Harvester shape of a garbage truck with a triangular head. Harvesting on sand, with flowing spice in the back. inside a square fence. Zenith view. Directly overhead. Plumb view.
:quality(85)/https://cdn.frvr.ai/65c66abd07ae736c088fb0f2.png%3F3) 
 Minimal Ui icon of an right sign aside with an icon of a target. sand background
:quality(85)/https://cdn.frvr.ai/65c66f0507ae736c088fb19d.png%3F3) 
 Minimal icon of a home with direction icon pointing to the home. sand background
:quality(85)/https://cdn.frvr.ai/65c744a9fc3df84f65ed688a.png%3F3) 
 3 white flat isometric concentric circles like a target.
:quality(85)/https://cdn.frvr.ai/65c9466b63eecf378e78cbd9.png%3F3) 
 Remove background
:quality(85)/https://cdn.frvr.ai/65db729ccfd2bc39a2010629.png%3F3) 
 Gray background
:quality(85)/https://cdn.frvr.ai/65df9c99a5cbb70b7a1e04be.png%3F3) 
 Minimal Ui icon of target sign on a fire icon.. sand background
:quality(85)/https://cdn.frvr.ai/65dfd060c0074ce0cf5a63c6.png%3F3) 
 top view of an explosion effect.
:quality(85)/https://cdn.frvr.ai/65e067a9c0074ce0cf5a653b.png%3F3) 
 Simple heavy army tank factory buiding a tank with a crane. Square fence... Zenith view Directly overhead. Plumb view.
:quality(85)/https://cdn.frvr.ai/6612c73902cc0ae7da393a80.png%3F3) 
 an empty black popup UI. UI