Megatrend cards

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

let vasenk; //vasen kortti kolmesta

let keskik; //keskimmäinen kortti kolmesta

let oikeak; //oikea kortti kolmesta

​

function preload() { //ladataan kortit tiedostosta

  kortit = loadTable('https://deckard.openprocessing.org/user216392/visual867878/h244783ab194784a7704a352e23eaf446/Megatrendcards-UTF8.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>Tell a story of a future described by these developments</h1><p>You can get a new set of cards by pressing space.</br><a href=https://www.sitra.fi/en/topics/megatrends/ target=_blank>More information on the megatrends</a></p>");

  vasenk = createDiv('Vasen'); //Pätkä koodia Millalta: https://www.openprocessing.org/sketch/859133

  vasenk.id('vas');

  keskik = createDiv('Keski');

  keskik.id('kes');

  oikeak = createDiv('Oikea');

  oikeak.id('oik');

  jaa_3_korttia();

}

​

function jaa_3_korttia() {

  uusi_kortti("#vas"); 

  uusi_kortti('#kes');

  uusi_kortti('#oik');

}

​

function uusi_kortti(kortti_nimi) { //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 = select(kortti_nimi);

  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) == "Tension") { //erilainen tyyli, jos kyseessä jännite

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

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

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

  } else {

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

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

    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 === ' ') {

    jaa_3_korttia();

  } else {

  }

}

​