User prompt
Add a new background asset named FarBackground
Code edit (2 edits merged)
Please save this source code
User prompt
Add a new background asset named Board that will be placed under the current background
Code edit (4 edits merged)
Please save this source code
User prompt
Set horizontalAxis alpha to 0 when its y > game.height * 0.8 and else set it to 1
Code edit (4 edits merged)
Please save this source code
User prompt
Make buttons text a bit smaller when pressed to simulate press
Code edit (1 edits merged)
Please save this source code
User prompt
text of buttons should always be on top of buttons
User prompt
restore bigButton asset when buttons are released
Code edit (1 edits merged)
Please save this source code
User prompt
setTextureFromAsset and setTexture doesn't work, find something else
User prompt
Fix Bug: 'TypeError: buttonGraphics.setTexture is not a function' in or related to this line: 'buttonGraphics.setTexture('bigButtonPressed');' Line Number: 114
User prompt
Fix Bug: 'TypeError: buttonGraphics.setTextureFromAsset is not a function' in or related to this line: 'buttonGraphics.setTextureFromAsset('bigButtonPressed');' Line Number: 114
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'TypeError: buttonGraphics.setTexture is not a function' in or related to this line: 'buttonGraphics.setTexture('bigButtonPressed');' Line Number: 114
Code edit (1 edits merged)
Please save this source code
User prompt
when button is pressed switch button asset to bigButtonPressed
User prompt
make buttons text bold
Code edit (1 edits merged)
Please save this source code
User prompt
make Texts on buttons 5 times bigger
User prompt
change the tints of the buttons : buy = orange / sell = green
User prompt
Fix Bug: 'ReferenceError: Can't find variable: stock' in or related to this line: 'sellStock(stock); // 'stock' will need to be defined in the scope where this button is used' Line Number: 130
Code edit (1 edits merged)
Please save this source code
User prompt
Move buyButton and sellbutton init code at line 216
/****
* Classes
****/
var GraphSegment = Container.expand(function () {
var self = Container.call(this);
self.index1 = null;
self.stockValue1 = 0;
self.stockValue2 = 0;
self.x1 = 0;
self.y1 = 0;
self.x2 = 0;
self.y2 = 0;
self.isFinished = false;
var verticalSlideRatio = 1;
var interpolationSpeed = 0.5; // Adjust this value for speed
self.updateSlide = function () {
if (moveSegments) {
self.x -= slideAmount * 1;
}
if (moveSegmentsVertically) {
var currentDelta = horizontalAxis.y - game.height * 0.75;
var targetY = game.height * 0.75 - dollarToYPixelRatio * self.stockValue1 + currentDelta;
var deltaY = (targetY - self.y) * interpolationSpeed;
self.y += deltaY;
if (Math.abs(deltaY) <= 1) {
self.y = targetY;
}
}
};
var segmentGraphics = self.attachAsset('segment', {
anchorY: 0.5
});
});
// Axis class to represent the graph axes
var Axis = Container.expand(function (isVertical) {
var self = Container.call(this);
var interpolationSpeed = 0.02; // Adjust this value for speed
var lowerLimit = game.height * 0.75;
self.isVertical = isVertical; // Property to determine if the axis is vertical
self.yValue = 0; // Track the Y value of the axis for vertical movement
self.updateSlide = function () {
// Current stock value excedent over 100$ (ignore below 100$)
var stockDelta = Math.max(0, stockValuesHistory[graphIndex] - 100);
// Target = base axis + delta in pixels
var targetY = lowerLimit + stockDelta * dollarToYPixelRatio;
if (!self.isVertical) {
// Smooth interpolation
var deltaY = (targetY - self.y) * interpolationSpeed;
self.y += deltaY;
if (Math.abs(deltaY) < 1) {
self.y = targetY;
}
if (moveSegmentsVertically && self.y <= lowerLimit) {
self.y = lowerLimit;
moveSegmentsVertically = false;
}
}
};
self.drawAxis = function () {
var axisGraphics = self.addChild(LK.getAsset('axis', {
height: 4 // Thin line for the axis
}));
};
});
// 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;
};
});
var BuyButton = Container.expand(function () {
var self = Container.call(this);
var buttonGraphics = self.attachAsset('bigButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.setText = function (text) {
var buttonText = new Text2(text, {
size: 50,
fill: "#ffffff"
});
buttonText.anchor.set(0.5, 0.5);
self.addChild(buttonText);
};
self.on('down', function () {
buyStock(stock); // 'stock' will need to be defined in the scope where this button is used
});
});
var SellButton = Container.expand(function () {
var self = Container.call(this);
var buttonGraphics = self.attachAsset('bigButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.setText = function (text) {
var buttonText = new Text2(text, {
size: 50,
fill: "#ffffff"
});
buttonText.anchor.set(0.5, 0.5);
self.addChild(buttonText);
};
self.on('down', function () {
sellStock(stock); // 'stock' will need to be defined in the scope where this button is used
});
});
/****
* Initialize Game
****/
var game = new LK.Game({});
/****
* Game Code
****/
var slideAmount = 6.5;
var slideAmountVertical = 0.10; // Reduced speed for smoother vertical movement
var moveSegmentsVertically = false;
var verticalSlideThreshold = 500; // Define a global threshold for vertical sliding
var upperLimit = game.height * 0.35;
var lowerLimit = game.height * 0.75; // Define lowerLimit for use in segment positioning
var running = false;
var moveSegments = false;
var drawingInProgress = false;
// Initialize game elements
var player = new Player();
var stocks = [];
// Initialize stock values history with the first value of $10
var stockValuesHistory = [50];
// Define graphIndex and initialize to 0
var graphIndex = 0;
// Declare a global array to store graph segments
var graphSegments = [];
var graphPoints = [];
var graphWidth = game.width;
var segmentWidth = graphWidth / 5; //; / stockValuesHistory.length;
var dollarToYPixelRatio = game.height * 0.5 / 100;
var segmentDrawInterval = null;
var secondsPerSegment = 2.0;
var stockDisplay = []; // Array to hold stock display elements
/****
* UI Elements
****/
var background = game.addChild(LK.getAsset('background', {
anchorX: 0.5,
anchorY: 0.5
}));
background.x = 1024; // Center x position
background.y = 2732 * 0.80; // Center y position
// Create and draw horizontal axis
var horizontalAxis = game.addChild(new Axis(false)); // false indicates this is a horizontal axis
horizontalAxis.yValue = game.height * 0.75; // Initialize yValue for vertical movement
horizontalAxis.drawAxis();
horizontalAxis.y = horizontalAxis.yValue;
horizontalAxis.width = game.width;
horizontalAxis.height = 10;
horizontalAxis.x = 0; // Move axis to the left side of the screen
// Create and draw fixed horizontal Marker axis
var markerAxis = game.addChild(new Axis(false)); // false indicates this is a horizontal axis
markerAxis.drawAxis();
markerAxis.alpha = 0; // Set alpha to 0 to make the markerAxis transparent
markerAxis.y = game.height * 0.25; // Set y position for the marker axis
markerAxis.width = game.width;
markerAxis.height = 10;
markerAxis.x = 0; // Move axis to the left side of the screen
// Create and draw vertical axis
var verticalAxis = game.addChild(new Axis(true)); // true indicates this is a vertical axis
verticalAxis.drawAxis();
verticalAxis.rotation = Math.PI / 2; // Rotate to make it vertical
verticalAxis.x = 20; // Move axis to the left side of the screen
verticalAxis.width = game.height;
verticalAxis.height = 10;
verticalAxis.y = 0;
// Create buttons
var balanceText = new Text2('Balance: $' + player.getBalance(), {
size: 50,
fill: "#ffffff"
});
// Create a text display for the verticalSlideAmount labeled VSA
var verticalSlideAmount = 0;
var vsaText = new Text2('VSA: ' + verticalSlideAmount.toFixed(0), {
size: 50,
fill: "#ffffff"
});
vsaText.anchor.set(0, 0);
LK.gui.topLeft.addChild(vsaText);
var stockValueText = new Text2('Stock Value: $' + stockValuesHistory[stockValuesHistory.length - 1].toFixed(2), {
size: 50,
fill: "#ffffff"
});
stockValueText.anchor.set(1, 0);
LK.gui.topRight.addChild(stockValueText);
function updateStockValueText() {
if (graphIndex < stockValuesHistory.length) {
stockValueText.setText('Stock Value: $' + stockValuesHistory[graphIndex + 1].toFixed(0));
}
}
balanceText.anchor.set(0.5, 0);
LK.gui.top.addChild(balanceText);
/****
* Game Functions
****/
// 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 - 1;
if (hasFinished) {
running = false;
LK.showGameOver();
return;
}
if (!drawingInProgress) {
updateStockValueText();
var pointA = graphPoints[graphIndex];
var pointB = graphPoints[graphIndex + 1];
var nextSegmentRotation = Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x); // Calculate next segment rotation based on pointA and pointB coordinates
var distance = Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2)); // Calculate the distance between points A and B
var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null;
var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : graphPoints[graphIndex].x;
var lastSegmentEndY = lastSegment ? lastSegment.y + Math.sin(lastSegment.rotation) * lastSegment.width : graphPoints[graphIndex].y;
var pointAXMovement = lastSegmentEndX - pointA.x;
var pointAYMovement = lastSegmentEndY - pointA.y;
pointA.x = lastSegmentEndX;
pointA.y = lastSegmentEndY > lowerLimit ? lowerLimit : lastSegmentEndY;
var nextSegmentEndY = pointA.y + Math.sin(nextSegmentRotation) * distance;
// Adjust distance to ensure segment's end doesn't exceed lowerLimit
if (nextSegmentEndY > lowerLimit) {
distance = (lowerLimit - pointA.y) / Math.sin(nextSegmentRotation);
}
if (nextSegmentEndY < upperLimit || nextSegmentEndY > upperLimit && stockValuesHistory[graphIndex + 1] >= 100) {
moveSegmentsVertically = true;
}
var delay = 0.5; // Reduce delay to speed up the drawing of segments
drawingInProgress = true;
drawSegment(game, graphIndex, pointA.x, pointA.y, nextSegmentRotation, distance, delay);
}
}
function drawSegment(gameRef, index, x1, y1, rotation, width, delay) {
var segment = gameRef.addChild(new GraphSegment());
segment.index1 = index;
segment.stockValue1 = stockValuesHistory[index];
segment.stockValue2 = stockValuesHistory[index + 1];
segment.x1 = x1;
segment.y1 = y1;
segment.rotation = rotation;
segment.width = 1; // Start with a width of 1 and animate to the target width
segment.height = 20;
// Add the new segment to the global graphSegments array
graphSegments.push(segment);
console.log('new segment index=' + index + '-' + (index + 1) + " " + stockValuesHistory[index] + "-" + stockValuesHistory[index + 1] + "$", Math.floor(x1), Math.floor(y1), 'rotation=' + (rotation * (180 / Math.PI)).toFixed(2) + ' degrees', 'width=' + width);
segment.x = x1;
segment.y = y1;
var startTime = Date.now();
var endTime = startTime + delay * 1000 * secondsPerSegment;
var updateWidth = function updateWidth() {
if (!running) {
return;
}
var currentTime = Date.now();
var timeElapsed = currentTime - startTime;
var newWidth = Math.min(timeElapsed / (delay * 1000 * secondsPerSegment) * width, width);
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 !");
}
segment.isFinished = true;
graphIndex++;
drawingInProgress = false;
}
};
updateWidth();
}
function setDebugValues() {
stockValuesHistory = [];
var series = [0, 25, 50, 75, 100, 125, 150, 175, 200, 175, 150, 125, 100, 75, 50, 25, 0, 0, 0];
//series = [0, 25, 50, 75, 100, 125, 125, 125, 125, 100, 75, 50, 25, 0, 0, 0];
for (var i = 0; i < 1; i++) {
stockValuesHistory = stockValuesHistory.concat(series);
}
}
function startGame() {
// Initialize
// Generate random deltas and add to previous value for stockValuesHistory
var previousValue = stockValuesHistory[stockValuesHistory.length - 1];
for (var i = 0; i < 100; i++) {
var delta = Math.floor((Math.random() - 0.5) * 100); // Generate a delta between -50 and 50
var newValue = Math.max(0, previousValue + (previousValue == 0 ? Math.abs(delta) : delta));
stockValuesHistory.push(newValue);
previousValue = newValue;
}
//setDebugValues(); // DEBUG MODE
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 * 0.75 - stockValuesHistory[i] * dollarToYPixelRatio; // Calculate Y based on new mapping
graphPoints.push({
x: x,
y: y
});
}
running = true;
// Set up a tick event to call drawNextSegment every second
segmentDrawInterval = LK.setInterval(drawNextSegment, 20);
}
// Main game loop
LK.on('tick', function () {
if (!running) {
return;
}
// Update slide for each graph segment and the horizontal axis
graphSegments.forEach(function (segment) {
segment.updateSlide();
});
horizontalAxis.updateSlide(); // Slide the horizontal axis vertically
// Update the vertical slide amount text periodically
vsaText.setText(graphIndex + ' VSA: ' + verticalSlideAmount.toFixed(0) + " " + moveSegmentsVertically);
// 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.