A Simple Vue Shuffler

by Katarn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div id="app" class="container pt-3">
  <transition-group
    name="flip-list"
    tag="ul"
    class="list-group mb-3"
  >
    <li
      class="list-group-item"
      v-for="(name, index) in items"
      :key="name"
    >
      <span class="badge badge-secondary mr-2">
        {{ index + 1 }}
      </span>
      {{ name }}
    </li>
  </transition-group>
  <button
    class="btn"
    :class="{
      'btn-primary': !shuffling,
      'btn-secondary': shuffling,
    }"
    @click="shuffle"
  >
    {{ shuffling ? 'Shuffling...' : 'Shuffle!' }}
  </button>
</div>

SCSS

.flip-list-move {
  transition: transform 0.15s ease-in-out;
}

.btn {
  transition: all 0.3s ease-in-out;
}

Babel + JSX

Array.prototype.shuffle = function() {
	this.sort(() => Math.random() - 0.5);
};

Math.randInt = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

window.sleep = function(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

new Vue({
	el: '#app',
  data: {
    items: [
			'Avocado',
      'Gherkin',
      'Kiwi',
      'Clementine',
      'Grapefruit',
      'Eggplant',
      'Mandrake',
      'Artichoke',
    ],
    shuffling: false,
  },

  methods: {
  	async shuffle() {
    	this.shuffling = true;
    	for(let i = 1; i < Math.randInt(10, 50); i++) {
        this.items.shuffle();
        await sleep(150);
      }
      this.shuffling = false;
    },
  },
});