invest in CORBUN does weird webs (game)

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont('monospace');

  // Initialize history with a flat line
  for (let i = 0; i < maxHistory; i++) {
    priceHistory.push(price);
  }

  createUI();
}

function draw() {
  background(12, 12, 20);

  // Update price at a slower rate (about 6 times per second)
  if (frameCount % 10 === 0) {
    updatePrice();
  }

  drawChart();
  drawHUD();
}

function updatePrice() {
  // Random walk with a tiny upward drift
  const randomShock = randomGaussian(0, 1);    // normal distribution
  const drift = 0.0005;                        // small bias upwards
  const volatility = 0.01;                     // overall volatility

  const changeFactor = 1 + drift + randomShock * volatility * 0.2;
  price *= changeFactor;

  // Floor price so it never goes to zero
  if (price < 1) price = 1;

  priceHistory.push(price);
  if (priceHistory.length > maxHistory) {
    priceHistory.shift();
  }
}

function buyShares(n) {
  const cost = price * n;
  if (cost <= cash) {
    cash -= cost;
    shares += n;
  }
}

function sellShares(n) {
  if (n <= shares) {
    const proceeds = price * n;
    shares -= n;
    cash += proceeds;
  }
}

function buyMax() {
  const maxShares = floor(cash / price);
  if (maxShares > 0) {
    buyShares(maxShares);
  }
}

function sellAll() {
  if (shares > 0) {
    sellShares(shares);
  }
}

function portfolioValue() {
  return cash + shares * price;
}

function createUI() {
  buy1Btn = createButton('Buy 1 share');
  buy1Btn.mousePressed(() => buyShares(1));

  sell1Btn = createButton('Sell 1 share');
  sell1Btn.mousePressed(() => sellShares(1));

  // CHANGED LABEL HERE
  buyMaxBtn = createButton('Buy Max');
  buyMaxBtn.mousePressed(buyMax);

  sellAllBtn = createButton('Panic Sell All');
  sellAllBtn.mousePressed(sellAll);

  // Basic button styling via p5.Element.style()
  const buttons = [buy1Btn, sell1Btn, buyMaxBtn, sellAllBtn];
  for (let b of buttons) {
    b.style('font-family', 'monospace');
    b.style('font-size', '13px');
    b.style('padding', '6px 10px');
    b.style('border-radius', '4px');
    b.style('border', '1px solid #444');
    b.style('background-color', '#1e1e2a');
    b.style('color', '#e0e0ff');
    b.style('cursor', 'pointer');
  }

  layoutUI();
}

function layoutUI() {
  const margin = 16;
  const btnWidth = 140;
  const btnHeight = 28;

  const row1Y = height - btnHeight - margin;           // bottom row
  const row2Y = row1Y - btnHeight - 8;                 // row above

  buy1Btn.size(btnWidth, btnHeight);
  sell1Btn.size(btnWidth, btnHeight);
  buyMaxBtn.size(btnWidth, btnHeight);
  sellAllBtn.size(btnWidth, btnHeight);

  // Row 2 (top of the two rows)
  buy1Btn.position(margin, row2Y);
  sell1Btn.position(margin + btnWidth + 8, row2Y);

  // Row 1 (bottom)
  buyMaxBtn.position(margin, row1Y);
  sellAllBtn.position(margin + btnWidth + 8, row1Y);
}

function drawChart() {
  const left = 60;
  const right = width - 20;
  const top = 60;
  const bottom = height - 160; // leave room for text + buttons

  // Frame for the chart
  push();
  stroke(60);
  strokeWeight(1);
  noFill();
  rect(left, top, right - left, bottom - top, 6);
  pop();

  if (priceHistory.length < 2) return;

  // Find min & max in history to scale chart
  let minPrice = Infinity;
  let maxPrice = -Infinity;
  for (let p of priceHistory) {
    if (p < minPrice) minPrice = p;
    if (p > maxPrice) maxPrice = p;
  }
  if (minPrice === maxPrice) {
    minPrice *= 0.9;
    maxPrice *= 1.1;
  }

  // Horizontal grid lines (3)
  push();
  stroke(40);
  strokeWeight(1);
  for (let i = 0; i <= 3; i++) {
    const y = lerp(bottom, top, i / 3);
    line(left, y, right, y);
  }
  pop();

  // Price line: green when price goes up, red when it goes down
  push();
  strokeWeight(2);
  noFill();

  for (let i = 1; i < priceHistory.length; i++) {
    const x1 = map(i - 1, 0, priceHistory.length - 1, left, right);
    const x2 = map(i, 0, priceHistory.length - 1, left, right);

    const norm1 = (priceHistory[i - 1] - minPrice) / (maxPrice - minPrice);
    const norm2 = (priceHistory[i] - minPrice) / (maxPrice - minPrice);

    const y1 = lerp(bottom, top, norm1);
    const y2 = lerp(bottom, top, norm2);

    if (priceHistory[i] >= priceHistory[i - 1]) {
      // Up move → green
      stroke(80, 220, 150);
    } else {
      // Down move → red
      stroke(255, 80, 120);
    }
    line(x1, y1, x2, y2);
  }

  // Last point highlight, same color as last move
  const lastIndex = priceHistory.length - 1;
  const prevIndex = lastIndex - 1;

  const lastX = map(lastIndex, 0, priceHistory.length - 1, left, right);
  const lastNorm = (priceHistory[lastIndex] - minPrice) / (maxPrice - minPrice);
  const lastY = lerp(bottom, top, lastNorm);

  if (priceHistory[lastIndex] < priceHistory[prevIndex]) {
    fill(255, 80, 120); // red if last move was down
  } else {
    fill(80, 220, 150); // green otherwise
  }
  noStroke();
  circle(lastX, lastY, 8);

  pop();
}

function drawHUD() {
  push();
  fill(230);
  noStroke();
  textAlign(LEFT, TOP);

  // Only show price and cash
  textSize(20);
  text(`Price: ${price.toFixed(2)}`, 20, 20);
  text(`Cash:  ${cash.toFixed(2)}`, 20, 50);

  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  layoutUI();
}