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
User prompt
I don't see the log : console.log("Building selected", self); when 1 click on a building
Code edit (1 edits merged)
Please save this source code
User prompt
when an empty cell of the map is clicked currentSelection is set back to null
User prompt
Now can you handle the UI system ? set a currentSelection global variable, when a building is clicked, set this variable
Code edit (18 edits merged)
Please save this source code
User prompt
Do you have a more 'royal' font for player1SpiceText ?
Code edit (1 edits merged)
Please save this source code
Code edit (3 edits merged)
Please save this source code
User prompt
add anchors to player1SpiceText
Code edit (6 edits merged)
Please save this source code
User prompt
add a black text at the top right with player1 spice level
User prompt
This game is Dune 2, so the objective is to harvest spice. add a 'spice' property to Player class with a value of 1000
/**** 
* 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, cellW, cellH) {
	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.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, 2, 2);
	// 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();
}, 100); ===================================================================
--- original.js
+++ change.js
@@ -326,5 +326,5 @@
 });
 // Start the game
 LK.setTimeout(function () {
 	initGame();
-}, 1000);
\ No newline at end of file
+}, 100);
\ No newline at end of file
: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