Flavortown Generator

by khamer

HTML

<main>
  <div id="app" v-if="show">

      
      <pick :values="adjectives" :max="2"></pick>
      <pick :values="flavors"></pick>
      <pick :values="foods"></pick>
      <pick :values="dish"></pick>
      
      <pick :values="verbInclude"></pick>

      <pick :values="adjectives" :max="2"></pick>
      <pick :values="flavors"></pick>
      <pick :values="foods"></pick>
      <pick :values="dish"></pick>
      
      <pick :values="verbPresentation"></pick>
      a <pick :values="presentationFormat"></pick>
      of
      <pick :values="adjectives" :max="3"></pick>
      <pick :values="foods" :max="2" :and="true"></pick>.
      
      <pick :values="catchphrase"></pick>
      
      
      <button @click="refresh">Give me another flavah, brotha!</button>
  </div>
</main>

SCSS

main {
    font-size: 2rem;
}

Vue

Vue.component('pick', {
  template: `<span v-text="value"/>`,
  props: {
    values: Array,
    min: {type: Number, default: 1},
    max: {type: Number, default: 1},
    and: Boolean,
  },
  data: () => ({
    value: null,
  }),
  mounted() {
    let values = [];
    if (this.min > this.max) {
      this.max = this.min;
    }
    const numValues = this.min + Math.floor((this.max - this.min + 1) * Math.random());
    for (let i = 0; i < numValues; i++) {
      let newVal = this.values[Math.floor(this.values.length * Math.random())];
      if (this.values.includes(newVal)) {
        newVal = this.values[Math.floor(this.values.length * Math.random())];
      }
      values.push(newVal);
    }
    if (this.and && values.length > 1) {
      this.value = values.slice(0,-1).join(', ') + ' and ' + values.slice(-1)[0]
    } else {
      this.value = values.join(', ')
    }
  },
});
new Vue({
  el: '#app',
  methods: {
    refresh() {
      this.show = false;
      requestAnimationFrame(() => this.show = true);
    },
  },
  data: {
    show: true,
    seed: null,
    adjectives: [
    	'gangsta',
        'bomb-dot-com',
        'tasty',
        'righteous',
        'trash can',
        'hot',
        'chili',
        'smothered',
        'dragon',
        'double-barrel',
        'tatted-up',
        "mega-",
        'shroomin\'',
        'seven-layer',
        'old skool',
        'off-da-hook',
        'illegal',
        'fireball whiskey'
    ],
    verbInclude: [
    	'mixed with',
        'loaded up with',
        'tossed with',
        'on top of',
        'with a side of',
        'served alongside',
        'filled with',
        'loaded into',
        'with generous sides of',
    ],
    verbPresentation: [
    	'served on',
        'piled high on',
        'finished with',
        'crammed with',
        'finished off with',
        'kicked up on',
        'dipped in',
        'floating on',
    ],
    presentationFormat: [
    	'bed',
        'mound',
       ...