User prompt
Switch to Another way to chain `drawSegment` calls without using a callback system is to use a game loop or a tick function that is called at a regular interval by the game engine. Since the LK game engine operates at 60 frames per second, you can leverage the `LK.on('tick', function() {...})` event to schedule and control the drawing of segments.
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'Timeout.tick error: Cannot read properties of null (reading 'x')' in this line: 'var lastSegmentEndX = lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width;' Line Number: 195
Code edit (1 edits merged)
Please save this source code
User prompt
(!lastSegment || typeof lastSegment.rotation !== 'number') blocks first segment creation
User prompt
Fix rotation is Nan starting from segment index 4. 1. Verify that the `lastSegment` object has been properly initialized with all necessary properties before attempting to calculate its rotation. 2. Check the values of `deltaY` and `deltaX` used in the rotation calculation to ensure they are both valid numbers and that `deltaX` is not zero, as `Math.atan2(0, 0)` would result in an undefined rotation. 3. Trace back to where `deltaY` and `deltaX` are derived from, ensuring that the points or coordinates used in their calculation are correctly set and represent the actual positions of the segments.
Code edit (2 edits merged)
Please save this source code
User prompt
fix pointA.X is still Nan after passing the center
User prompt
fix pointA.X is sometimes Nan
Code edit (7 edits merged)
Please save this source code
User prompt
lastSegmentEndX should take rotation into account
Code edit (1 edits merged)
Please save this source code
User prompt
Fix position of pointA & pointB in drawNextSegment when moveSegments = true : new segments pointA x exeeds previous segment end
User prompt
position of pointA & pointB in drawNextSegment are wrong when moveSegments = true, maybe the slideAmount should be cummulative
User prompt
remove useless code like initSlide
User prompt
remove everything related to ValueIndicator. clean the code
User prompt
remove ValueIndicator without altering segments algorithm
Code edit (1 edits merged)
Please save this source code
User prompt
when moveSegments is true, take into account the slide in drawsegment
User prompt
Ensure the linkage between segments. adjuste to account for the distance that the existing segments have already moved to the left. This would ensure that the new segment is connected to the end of the last segment after it has slid, rather than where it was before sliding.
User prompt
Fix new segments not visible when moveSegments is true
User prompt
maintain the linkage between segments, the starting position of the new segment (`x1`, `y1`) need to be adjusted to account for the distance that the existing segments have already moved to the left. This would ensure that the new segment is connected to the end of the last segment after it has slid, rather than where it was before sliding.
Code edit (2 edits merged)
Please save this source code
User prompt
when moveSegments = true continuously add new stockValuesHistory & graphPoints values
User prompt
continuously add new stockValuesHistory & graphPoints values
/**** * Classes ****/ var GraphSegment = Container.expand(function () { var self = Container.call(this); self.updateSlide = function () { if (moveSegments) { self.x -= slideAmount; self.distanceToSlide -= slideAmount; if (self.distanceToSlide <= 0) { self.distanceToSlide = null; } } }; var segmentGraphics = self.createAsset('segment', 'Graph Segment', 0, 0.5); // Function to slide the segment to the left }); // ValueIndicator class to represent the current value of the stock on the graph // Player class to represent the player's portfolio var Player = Container.expand(function () { var self = Container.call(this); self.balance = 100; // Start with $100 self.stocks = {}; // Object to hold stocks and quantities self.buyStock = function (stock, quantity) { var cost = stock.getPrice() * quantity; if (self.balance >= cost) { self.balance -= cost; if (!self.stocks[stock]) { self.stocks[stock] = 0; } self.stocks[stock] += quantity; } }; self.sellStock = function (stock, quantity) { if (self.stocks[stock] && self.stocks[stock] >= quantity) { self.balance += stock.getPrice() * quantity; self.stocks[stock] -= quantity; if (self.stocks[stock] === 0) { delete self.stocks[stock]; } } }; self.getBalance = function () { return self.balance; }; self.getPortfolio = function () { return self.stocks; }; }); /**** * Initialize Game ****/ var game = new LK.Game({ // No need to set backgroundColor since we are adding a background asset }); /**** * Game Code ****/ var slideAmount = 4.0; // Create and add background asset var running = false; var moveSegments = false; var background = game.addChild(LK.getAsset('background', 'Game background', 0.5, 0.5)); background.x = 1024; // Center x position background.y = 2732 - background.height / 2; // Center y position // Initialize game elements var player = new Player(); var stocks = []; // Initialize stock values history with the first value of $10 var stockValuesHistory = [10]; // Declare a global array to store graph segments var graphSegments = []; // Add 10 other random stock values for (var i = 0; i < 100; i++) { stockValuesHistory.push(Math.floor(Math.random() * 100) + 1); } var graphPoints = []; var graphWidth = game.width; var segmentWidth = graphWidth / 6; //; / stockValuesHistory.length; var x, y; // Compute the coordinates for the graph based on stockValuesHistory for (var i = 0; i < stockValuesHistory.length; i++) { x = segmentWidth * i; y = game.height / 2 - stockValuesHistory[i] * 10; // Scale the stock value for display graphPoints.push({ x: x, y: y }); } function addNewStockValues() { if (moveSegments) { var newStockValue = Math.floor(Math.random() * 100) + 1; stockValuesHistory.push(newStockValue); var totalSlideDistance = graphSegments.length > 0 ? graphSegments[0].startX - graphSegments[0].x : 0; var newGraphPoint = { x: graphPoints[graphPoints.length - 1].x + segmentWidth - totalSlideDistance, y: game.height / 2 - newStockValue * 10 }; graphPoints.push(newGraphPoint); drawSegment(game, graphPoints[graphPoints.length - 2].x, graphPoints[graphPoints.length - 2].y, newGraphPoint.x, newGraphPoint.y, 0.5); } LK.setTimeout(addNewStockValues, 1000); // Continue adding new values every second } // Start the continuous addition of new stock values and graph points addNewStockValues(); var stockDisplay = []; // Array to hold stock display elements var balanceText = new Text2('Balance: $' + player.getBalance(), { size: 50, fill: "#ffffff" }); balanceText.anchor.set(0.5, 0); LK.gui.top.addChild(balanceText); // Update the player's balance display function updateBalanceDisplay() { balanceText.setText('Balance: $' + player.getBalance().toFixed(2)); } // Function to handle buying stocks function buyStock(stock) { player.buyStock(stock, 1); // Buy 1 stock for simplicity updateBalanceDisplay(); } // Function to handle selling stocks function sellStock(stock) { player.sellStock(stock, 1); // Sell 1 stock for simplicity updateBalanceDisplay(); } // Main game loop LK.on('tick', function () { if (!running) { return; } // Update slide for each graph segment graphSegments.forEach(function (segment) { segment.updateSlide(); }); // Check for game over conditions (e.g., player runs out of money) if (player.getBalance() <= 0) { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); } }); function drawSegment(gameRef, x1, y1, x2, y2, delay, callback) { var segment = gameRef.addChild(new GraphSegment()); // Add the new segment to the global graphSegments array graphSegments.push(segment); segment.x = x1; segment.y = y1; segment.width = 1; segment.height = 20; var deltaX = x2 - x1; var deltaY = y2 - y1; if (deltaX === 0 && deltaY === 0) { console.error('Invalid deltaX and deltaY for rotation calculation.'); return; } var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); segment.rotation = Math.atan2(deltaY, deltaX); var startTime = Date.now(); var endTime = startTime + delay * 1000; var updateWidth = function updateWidth() { if (!running) { return; } var currentTime = Date.now(); var timeElapsed = currentTime - startTime; var newWidth = Math.min(timeElapsed / (delay * 1000) * distance, distance); segment.width = newWidth; if (currentTime < endTime) { LK.setTimeout(updateWidth, 16); } else { console.log("Past center ? " + (segment.x + segment.width / 2 >= game.width / 2)); if (!moveSegments && segment.x + segment.width / 2 >= game.width * 0.5) { moveSegments = true; } if (typeof callback === 'function') { callback(); } } }; updateWidth(); } function drawGraph(gameRef, points) { console.log('Starting to draw graph'); if (points.length < 2) { console.log('Not enough points to draw a graph segment.'); return; } // Need at least two points to draw a segment function drawNextSegment(index) { if (index < points.length - 1) { var pointA = points[index]; var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null; if (!lastSegment || typeof lastSegment.rotation !== 'number') { console.error('Invalid lastSegment or rotation is not a number.'); return; } console.log('lastSegment ' + (graphSegments.length - 1), lastSegment); var lastSegmentEndX = lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width; pointA.x = lastSegment ? lastSegmentEndX : 0; var pointB = points[index + 1]; /*if (moveSegments) { var lastSegmentEndX = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1].x + graphSegments[graphSegments.length - 1].width : 0; pointA.x = lastSegmentEndX; pointB.x = pointA.x + segmentWidth; }*/ console.log('Drawing segment from', { x: Math.round(pointA.x), y: Math.round(1366 - pointA.y) }, 'to', { x: Math.round(pointB.x), y: Math.round(1366 - pointB.y) }); var delay = 1; // Reduce delay if segments are moving drawSegment(gameRef, pointA.x, pointA.y, pointB.x, pointB.y, delay, function () { /*console.log('Segment drawn from', { x: Math.round(pointA.x), y: Math.round(pointA.y) }, 'to', { x: Math.round(pointB.x), y: Math.round(pointB.y) });*/ drawNextSegment(index + 1); }); } else { console.log('Finished drawing graph'); } } drawNextSegment(0); } function startGame() { // Initialize and start the game logic here running = true; // Pass the series of points to drawGraph drawGraph(game, graphPoints); // Add ValueIndicator to the game and update its position } LK.setTimeout(function () { startGame(); }, 1000);
===================================================================
--- original.js
+++ change.js
@@ -150,8 +150,12 @@
segment.width = 1;
segment.height = 20;
var deltaX = x2 - x1;
var deltaY = y2 - y1;
+ if (deltaX === 0 && deltaY === 0) {
+ console.error('Invalid deltaX and deltaY for rotation calculation.');
+ return;
+ }
var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
segment.rotation = Math.atan2(deltaY, deltaX);
var startTime = Date.now();
var endTime = startTime + delay * 1000;
@@ -186,10 +190,14 @@
function drawNextSegment(index) {
if (index < points.length - 1) {
var pointA = points[index];
var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null;
+ if (!lastSegment || typeof lastSegment.rotation !== 'number') {
+ console.error('Invalid lastSegment or rotation is not a number.');
+ return;
+ }
console.log('lastSegment ' + (graphSegments.length - 1), lastSegment);
- var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : 0;
+ var lastSegmentEndX = lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width;
pointA.x = lastSegment ? lastSegmentEndX : 0;
var pointB = points[index + 1];
/*if (moveSegments) {
var lastSegmentEndX = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1].x + graphSegments[graphSegments.length - 1].width : 0;
A Technical dark background. Nothing just a gradiant of colors from black to dark blue. Theme : stock market. background
A modern clean empty rectangular button without borders. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
without shadow
a basic empty ui popup with a black background. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.