Megatrendikortit

let kortit; //taulukko, jossa kaikki kortit

let kortti_otsikko; //kortin otsikko

let kortti_sis; //kortin sisällys

let kortit_max; //korttien määrä

let k; //arvotun kortin indeksi

let leveys; //kortin leveys

​

function preload() { //ladataan kortit tiedostosta

  kortit = loadTable('https://deckard.openprocessing.org/user216392/visual858824/h091b34ceef382ede46655f4eb2a6a8c4/Megatrendikortit2020_tab.txt', 'tsv', 'header');

}

​

function setup() {

  kortit_max = kortit.getRowCount(); //megatrendikorttien maksimimäärä

  leveys = 300;

  let ohjeistus = createDiv(''); //luodaan ohjeistuslaatikko ja määritellään sen tyyli ja sisältö

  ohjeistus.size(windowWidth);

  ohjeistus.style('text-align', 'center');

  ohjeistus.style('font-family', 'Arial, Helvetica, sans-serif');

  ohjeistus.html("<h1>Millainen olisi seuraavien trendien kuvaama tulevaisuus?</h1><p>Saat lisää kortteja painamalla välilyöntiä</p>");

  uusi_kortti(); //arvotaan kolme korttia

  uusi_kortti();

  uusi_kortti();

}

​

​

function uusi_kortti() { //korttien arpomiseen käytetty funktio, lisää sivulle yhden laatikon, jossa kortti

  k = int(random(0,kortit_max)); //arvotaan indeksi

  kortti_otsikko = kortit.getString(k,1); //haetaan kortin otsikko

  kortti_sis = kortit.getString(k,2); //haetaan kortin kuvaus

  let korttidiv = createDiv(''); //luodaan laatikko ja määritellään sen tyyli ja sisältö

  korttidiv.size(leveys,leveys*1.5);

  korttidiv.style('float', 'left');

  korttidiv.style('margin', '10px');

  korttidiv.style('border-radius', '25px');

  korttidiv.style('padding', '20px');

  korttidiv.style('font-family', 'Arial, Helvetica, sans-serif');

  if(kortit.getString(k,0) == "Jännite") { //erilainen tyyli, jos kyseessä jännite

    korttidiv.style('background', '#000000');

    korttidiv.style('color', '#ffffff');

    korttidiv.html("<p><b>Jännite</b></p><h1>"+kortti_otsikko+"</h1>"+"<p>"+kortti_sis+"</p>");

  } else {

    korttidiv.style('background', '#ffe000');

    korttidiv.html("<h1>"+kortti_otsikko+"</h1>"+"<p>"+kortti_sis+"</p>");

  }

}

​

function draw() {

}

​

function keyTyped() { //kun painetaan välilyöntiä, lisätään uusi kortti

  if (key === ' ') {

    uusi_kortti();

  } else {

  }

}

​