const characters = [
    {
name: "Alex",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Alex.png",
description:"A beacon of diversity on the board, Alex is arguably the only trans character."
   },
      {
name: "Alfred",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Alfred.png",
description:"This dude just woke up after pounding pre-prohibition cocktails."
   },
      {
name: "Anita",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Anita.png",
description:"This Golden Girl looks ready to do an experiment by the Kinsey Institute."
   },
      {
name: "Anne",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Anne.png",
description:"Nobody clips coupons better than this sassy mama."
   },
      {
name: "Bernard",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Bernard.png",
description:"No one can rival his joy in finding someone his age at the porn theater."
   },
      {
name: "Bill",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Bill.png",
description:"He’s got a profile pic of himself as a court jester at a local Renaissance fair."
   },
      {
name: "Charles",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Charles.png",
description:"Just discovered the shower wall mount attachment for the Fleshlight."
   },
      {
name: "Claire",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Claire.png",
description:"Her collection of hand-knitted sweaters are only rivaled by her cats."
   },
      {
name: "David",
url:"https://fullbellylaughs.com/uploads/landingpageimages/David.png",
description:"He uses his music composition degree to make sick Cock Hero videos."
   },
      {
name: "Eric",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Eric.png",
description:"His 15 minutes so fame came from cutting Styrofoam cups with his face."
   },
      {
name: "Frans",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Frans.png",
description:"A nice guy but unable to look you in the eye when shaking your hand."
   },
      {
name: "George",
url:"https://fullbellylaughs.com/uploads/landingpageimages/George.png",
description:"This Caddyshack villian just finished a cool 18 holes at the country club."
   },
      {
name: "Herman",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Herman.png",
description:"He love alphabetizing deck registration sheets as much as he loves foils."
   },
      {
name: "Joe",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Joe.png",
description:"Every year he reprises his role as Flattop in a local production of Dick Tracy."
   },
      {
name: "Maria",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Maria.png",
description:"She corrects your grammar while wishing she was actually French."
   },
      {
name: "Max",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Max.png",
description:"He’s short order cook, but on the weekend gives people cement shoes."
   },
      {
name: "Paul",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Paul.png",
description:"If the Holiday Yule Log could be a person, it would be this pop-pop."
   },
      {
name: "Peter",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Peter.png",
description:"The movie Shampoo with Warren Beatty was based on this guy’s life."
   },
      {
name: "Philip",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Phillip.png",
description:"As a civil war reenactor, he takes on the prestigious role of Abe Lincoln."
   },
      {
name: "Richard",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Richard.png",
description:"His knowledge is impressive, but the fact that he works at the cafe is sad."
   },
      {
name: "Robert",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Robert.png",
description:"He just got done dropping his daughters off at soccer practice."
   },
      {
name: "Sam",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Sam.png",
description:"He looks like Bernie Sanders because he is the disappearing middle class."
   },
      {
name: "Susan",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Susan.png",
description:"She works the make-up counter at Macy’s, and loves Real Housewives."
   },
      {
name: "Tom",
url:"https://fullbellylaughs.com/uploads/landingpageimages/Tom.png",
description:"He has a secret cave in a field where he chills with Saorise Ronan."
   },
  ];
const containerEl = document.querySelector(".characters");

tween(10);


/*
  Below is where the work happens.
*/
function buildCharacterDom ({name, url, description}) {
  return `
    <div class="character">
      <img src="${url}" alt="" width="200" height="290" />
      <h2>${name}</h2>
      <p class="description">${description}</p>
    </div>
  `;
}

function popuplate (container, characters) {
  let domString = "";
  container.innerHTML = "";
  
  characters.forEach((character) => domString += buildCharacterDom(character));
  
  container.innerHTML = domString;
}

function getRandomInteger (max) {
  return Math.floor(Math.random() * max);
}

function getRandomCharacters (array, total) {
  const srcArray = [...array];
  const randomCharacters = [];
  
  while(total > 0) {
    const randomIndex = getRandomInteger(srcArray.length);
    const chosenCharacter = srcArray.splice(randomIndex, 1)[0]
    randomCharacters.push(chosenCharacter)
    total--;
  }
  
  return randomCharacters;
}

function tween (total = 3) {
  popuplate(containerEl, getRandomCharacters(characters, total));

  gsap.from(".character", {
    autoAlpha: 0,
    stagger: {
      each: 0.05,
      from: "random"
    },
    repeat: 1,
    yoyo: true,
    repeatDelay: 1,
    onComplete: () => {
      gsap.delayedCall(1, () => {
        tween(getRandomInteger(characters.length / 2));
      })
    }
  });
}