User prompt
check if graphIndex is defined properly
User prompt
MOVE function drawNextSegment() { if (graphIndex < graphPoints.length - 1) { var pointA = graphPoints[graphIndex]; var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null; var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : 0; pointA.x = lastSegment ? lastSegmentEndX : 0; var pointB = graphPoints[graphIndex + 1]; var delay = 1; // Reduce delay if segments are moving if (!drawingInProgress) { drawingInProgress = true; drawSegment(game, graphIndex, pointA.x, pointA.y, pointB.x, pointB.y, delay); } graphIndex++; } } to the Global scope. Properly
User prompt
move the body drawNextSegment of drawGraph in the global drawNextSegment. ensure variables scope is correct.
User prompt
Fix Bug: 'ReferenceError: drawNextSegment is not defined' in this line: 'segmentDrawInterval = LK.setInterval(drawNextSegment, 1000);' Line Number: 110
User prompt
Fix Bug: 'ReferenceError: drawNextSegment is not defined' in this line: 'segmentDrawInterval = LK.setInterval(drawNextSegment, 1000);' Line Number: 110
User prompt
replace the while (index < points.length - 1) by a function + a call to this function in a tick event, every second
Code edit (3 edits merged)
Please save this source code
User prompt
replace Date.now() - sleepStartTime by a variable waitTime, update waittime in the loop
User prompt
after drawSegment call, sleep in another while loop until drawingInProgress is false (add a timeout to avoid infinite loop)
Code edit (1 edits merged)
Please save this source code
User prompt
drawSegment should be called only after the previous call ends. use a boolean not a callback
User prompt
drawSegment should be called only once per sec
User prompt
put the drawNextSegment(); call in a while loop
Code edit (1 edits merged)
Please save this source code
User prompt
switch from callback system to a while loop
User prompt
bug : segmes apear ridiculously small
User prompt
all segments should be segmentWidth
Code edit (1 edits merged)
Please save this source code
User prompt
make segments of tick loop as large as the one from drawgraph (segmentWidth)
User prompt
use the code : var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null; console.log('lastSegment ' + (graphSegments.length - 1), lastSegment); var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : 0; pointA.x = lastSegment ? lastSegmentEndX : 0; for the segments dran in the tick event
User prompt
fix: only 1st segment is visible
User prompt
segments should be drawn every sec
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
/****
* 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;
console.log('lastSegment ' + (graphSegments.length - 1), lastSegment);
var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : 0;
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);
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.