let displayInitialText = true;

​

// Variable to store text that will be displayed on the black card

let blackCardText = "";

​

// Array to store white card responses

let whiteCardTexts = [];

​

// Array to store temporary white card options

let whiteCardOptions = [];

​

// Button for generating cards

let button;

​

// Flag to track if cards have been generated

let cardsGenerated = false;

​

// Dimensions of the cards and their corner radius

const cardWidth = 400; 

const cardHeight = 160; 

const whiteCardWidth = 120; 

const whiteCardHeight = 180; 

const cornerRadius = 10; // increase/decrease to give more/less rounded corners to the cards

​

function setup() {

  createCanvas(600, 600);

​

  // Load black and white cards

  loadBlackCards();

  loadWhiteCards();

​

  // Create the "Generate Cards" button

  button = createButton("Generate Cards");

  button.position(210, 300); 

  button.style('font-size', '16px');

  button.style('padding', '10px 20px');

  button.mousePressed(generateCards);

}

​

// Load black card texts from a file

function loadBlackCards() {

  blackCardTexts = loadStrings('blackcards.csv');

}

​

// Loading white card texts from a file

function loadWhiteCards() {

  whiteCardTexts = loadStrings('whitecards.csv');

}

​

// Generating random text for black/white cards

function generateCards() {

  let randomIndex = floor(random(blackCardTexts.length));

  blackCardText = blackCardTexts[randomIndex];

​

  whiteCardOptions = [];

  while (whiteCardOptions.length < 3) {

    randomIndex = floor(random(whiteCardTexts.length));

    let selectedCard = whiteCardTexts[randomIndex];

    if (selectedCard.trim() !== "" && !whiteCardOptions.includes(selectedCard)) {

      whiteCardOptions.push(selectedCard);

    }

  }

​

  cardsGenerated = true;

  displayInitialText = false; // update the variable to false to switch to displaying cards

}

​

function draw() {

  background(80, 58, 80);

​

  if (displayInitialText) {

    // Display the initial text at the beginning of program

    fill(255);

    textSize(36);

    textAlign(CENTER, CENTER);

    text("Cards Against Humanity", width / 2, height / 3);

  } else if (cardsGenerated) {

    // Display the black card 

    drawRoundedRect(width / 2 - cardWidth / 2, height / 6, cardWidth, cardHeight, cornerRadius, '#000');

    fill(255);

    textSize(20); 

    textAlign(CENTER, TOP);

​

    // Calculate text leading for wrapping

    let leading = 24; 

    textLeading(leading);

​

    // Render the black card text with wrapping

    let x = width / 2 - cardWidth / 2;

    let y = height / 3 - cardHeight / 2 + 20;

    text(blackCardText, x, y, cardWidth, cardHeight);

​

    // display the white cards at the bottom 

    textSize(15); 

    for (let i = 0; i < whiteCardOptions.length; i++) {

      x = 90 + i * 170; // horizontal spacing

      y = 400; // vertical position

      drawRoundedRect(x, y, whiteCardWidth, whiteCardHeight, cornerRadius, '#fff');

      fill(0);

      text(whiteCardOptions[i], x + 10, y + 20, whiteCardWidth - 20, whiteCardHeight - 40);

    }

  }

}

​

// Function to draw a rounded rectangle

function drawRoundedRect(x, y, w, h, r, fillColor) {

  noStroke();

  fill(fillColor);

  rect(x, y, w, h, r);

}

​

​

​

​