Code edit (1 edits merged)
Please save this source code
User prompt
put the vertical axe on the left
User prompt
draw the axes
Code edit (1 edits merged)
Please save this source code
User prompt
updateStockValueText should be call in drawNextSegment
Code edit (2 edits merged)
Please save this source code
User prompt
updateStockValueText should display current Value that is stockValuesHistory[graphIndex]
User prompt
add a text on top right that displays the current stock value. Create a dedicated updateStockValueText function and ensure variables scopes are correct
User prompt
in "new segment" console log don't display decimals
Code edit (5 edits merged)
Please save this source code
User prompt
apply the same logic of lastSegmentEndX to the lastSegmentEndY in order to avoid vertical gaps between segments
Code edit (1 edits merged)
Please save this source code
User prompt
4. **Vertical Sliding Mechanism:** : Prevents the graph from raising out of the screen by applying a vertical slide - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated via a global varibale moveSegmentsVertically when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it - the threshold is a global variable - All segments (the graph) move the same way. So the slideAmountVertical should be global like slideAmount
User prompt
4. **Vertical Sliding Mechanism:** : Prevents the graph from raising out of the screen by applying a vertical slide - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated via a global varibale moveSegmentsVertically when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it - the threshold is a global variable - All segments (the graph) move the same way
User prompt
4. **Vertical Sliding Mechanism:** - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated via a global varibale moveSegmentsVertically when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it - the threshold is a global variable - All segments (the graph) move the same way
User prompt
4. **Vertical Sliding Mechanism:** - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it
User prompt
4. **Vertical Sliding Mechanism:** - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated when the Y values of the segments exceed a predefined threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing.
User prompt
3. **Monitoring Y Values of Segments:** - As the graph is drawn and updated, you would keep track of the Y values of each graph segment. - This tracking would allow you to determine when the stock price reaches certain thresholds that may trigger buying or selling actions.
User prompt
2. **Clamping Values:** - After applying the delta to the previous stock value, you would check if the new value falls below 0. - If it does, you would clamp the value to 0 to prevent negative stock prices.
Code edit (1 edits merged)
Please save this source code
Code edit (2 edits merged)
Please save this source code
User prompt
1. **Random Deltas for Stock Values:** - Instead of assigning random values directly to the stockValuesHistory array, you would generate random deltas (changes in value). - These deltas would be added to the previous value in the stockValuesHistory to create a more realistic fluctuation in stock prices.
Code edit (1 edits merged)
Please save this source code
User prompt
Stop the game after the last graphPoint is reached
Code edit (7 edits merged)
Please save this source code
/****
* 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 = 5.0;
// Create and add background asset
var running = false;
var moveSegments = false;
var drawingInProgress = 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];
// Define graphIndex and initialize to 0
var graphIndex = 0;
// 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 = Math.min(segmentWidth * i, game.width * 0.75);
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);
}
LK.setTimeout(addNewStockValues, 1000); // Continue adding new values every second
}
var segmentDrawInterval = null;
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();
}
function drawNextSegment() {
console.log("drawNextSegment " + graphIndex + ' isDrawing = ' + drawingInProgress);
var hasFinished = graphIndex >= graphPoints.length;
if (!drawingInProgress && !hasFinished) {
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
drawingInProgress = true;
drawSegment(game, graphIndex, pointA.x, pointA.y, pointB.x, pointB.y, delay);
graphIndex++;
}
}
function drawSegment(gameRef, index, x1, y1, x2, y2, delay) {
var segment = gameRef.addChild(new GraphSegment());
// Add the new segment to the global graphSegments array
graphSegments.push(segment);
console.log('new segment index=' + index + '/' + (graphSegments.length - 1), x1, y1, x2, y2);
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);
/*console.log('segment.rotation ' + (graphSegments.length - 1), {
deltaY: deltaY,
deltaX: deltaX
}, segment.rotation);*/
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 {
if (!moveSegments && segment.x + segment.width / 2 >= game.width * 0.5) {
moveSegments = true;
console.log("Past center !");
}
drawingInProgress = false;
}
};
updateWidth();
}
function startGame() {
// Initialize and start the game logic here
running = true;
// Set up a tick event to call drawNextSegment every second
segmentDrawInterval = LK.setInterval(drawNextSegment, 100);
// Add ValueIndicator to the game and update its position
LK.setTimeout(addNewStockValues, 1000);
}
// 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();
}
});
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.