Flavortown Generator

by khamer

HTML

<main>
  <div id="app" v-if="show">
  
    <pick :values="character"></pick>'s'
    <pick :values="relationship"></pick>
    <pick :values="relation"></pick>,
    <pick :values="actor"></pick>,
    <pick :values="role"></pick>
    <pick :values="roleStory"></pick>.
    <pick :values="event"></pick>, they
    <pick :values="baddieMove"></pick>
    <pick :values="baddie"></pick> played by
    <pick :values="actor"></pick>, who is
    <pick :values="plot"></pick>.
    <pick :values="character"></pick>
    <pick :values="plan"></pick>
    <pick :values="objective"></pick>
    <pick :values="using"></pick>, but they
    <pick :values="discover"></pick> that the
    <pick :values="answer"></pick> is family.

      
    
      <button @click="refresh">Give me another flavah, brotha!</button>
  </div>
</main>

SCSS

main {
    font-size: 2rem;
}

Vue

const character = [
	'Dominic Toretto', 'Luke Hobbs', 'Deckard Shaw', 'Letty Ortiz', 'Roman Pearce', 'Mia Toretto', 'Tej Parker', 'Jakob Toretto', 'Han Lue', 'Cipher', 'Brixton Lore', 'Otto',
]

const relationship = [
	'long lost', 'new', 'childhood', 'former', 'rival', 'competing', 'new competition', 'gang member',
]

const relation = [
	'sibling', 'parent', 'grandparent', 'roommate', 'business partner', 'rival', 'cellmate', 'nemesis', 'cousin', 'child', 'au pair', 'nanny', 'mechanic', 'parts dealer',
]

const actor = ['Clint Eastwood', 'Sylvester Stallone', 'Pierce Brosnan', 'Rob Gronkowski', 'Danny Glover', 'Donald Glover', 'Liam Neeson', 'Chuck Norris', 'Chris Pratt', 'Melissa McCarthy', 'Sandra Bullock', 'Kristen Wiig', 'Milla Jovovich', 'Michelle Yeoh', 'Scarlet Johansson', 'Zoe Saldana', 'Florence Pugh', 'Penelope Cruz', 'Miley Cyrus', 'Demi Lovato',]

const role = ['an ex-police officer', 'an FBI agent', 'a US senator', 'a nuclear scientist', 'a paleobotnist', 'a former astronaut', 'a high school gym teacher', 'a celebrity chef', 'a professional body guard', 'a professional assassin', 'a political refugee',]

const roleStory = ['who\'s down on their luck', 'that\'s in trouble with loan sharks', 'who has thinking about selling their grandfather\'s camero', 'who run out of cash', 'who is running for their life', 'that has been hiding from the Yakuza', 'that runs a local garage', 'who has gotten over their head in underground racing', 'who\'s gambling addiction is out of control']

const event = ['While surfing in Hawaii', 'During a high stakes race', 'After a night of wild partying in Vegas', 'After crossing paths', 'After a tense confrontation', 'After a heart-warming dinner together']

const baddieMove = [
	'encounter', 'are taken hostage by', 'are trapped', 'are betrayed by', 'are double-crossed by', 'learn about', 'see',
]

const baddie = ['Kurt Dangerwood', 'cyber-criminal LoXX', 'Sam Toretto', 'Penelope Pearce', 'Maggie Lindemann', 'Lucy Loone',...