let slider

​

async function setup() {

  createCanvas(250, 350);

​

  cards = await csvData("data/cards.csv")

  slider = createSlider(0, cards.rows.length-1, 0)

  slider.style('width', '250px')

  slider.position(0, height+20)

  slider.input(update)

  update()

}

​

function update(){

  let idx = slider.value()

  let card = cards.rows[idx]

  drawCard(card)

}

​

function drawCard(card){

  background('white')

  textAlign(CENTER)

  if (card.suit=='Hearts' || card.suit=='Diamonds'){

    fill('red')

  }else{

    fill('black')

  }

  let symbol

  if (card.suit=='Hearts'){

    symbol = "♥"

  }else if (card.suit=='Diamonds'){

    symbol = "♦"

  }else if (card.suit=='Clubs'){

    symbol = "♣"   

  }else if (card.suit=='Spades'){

    symbol = "♠"

  }

​

  textSize(120)

  text(symbol, width/2, height*.55)

  textSize(80)

  text(card.name, width/2, height - 50)

}