Vue Transitions – Shuffle Deck of Cards

By Prosyscom
In March 9, 2018
134 Views


            
              new Vue({
  el: '#app',
  data: {
    names: ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'],
    suits: ['♥','♦','♠','♣'],
    cards: [],
    card: {
      value: 0,
      name: '',
      suit: ''
    },
    shuffleButtonActive: 1,
    shuffleSpeed: 'shuffleMedium',
    shuffleCount: 0,
    shuffledDeck: false
  },
  created() {
    this.displayInitialDeck();
  },
  methods: {
    displayInitialDeck() {
      let id = 1;
      this.cards = [];
      for( let s = 0; s < this.suits.length; s++ ) {
        for( let n = 0; n < this.names.length; n++ ) {
          this.card = {
            id: id,
            value: n + 1,
            name: this.names[n],
            suit: this.suits[s]
          }
          this.cards.push(this.card);
          id++;
        }
      }
      
      this.shuffledDeck = false;
      this.shuffleCount = 0;
      return this.cards;
    },
    selectShuffleSpeed(n) {
      this.shuffleButtonActive = n;
      
      if (n === 0) this.shuffleSpeed = 'shuffleSlow';
      if (n === 1) this.shuffleSpeed = 'shuffleMedium';
      if (n === 2) this.shuffleSpeed = 'shuffleFast';
    },
    shuffleDeck() {
      let counter = this.cards.length;
      
        while (counter > 0) {
          let randomIndex = Math.floor(Math.random() * counter);

          counter--;

          let temp = this.cards
; Vue.set(this.cards, counter, this.cards[randomIndex]); Vue.set(this.cards, randomIndex, temp); } this.shuffledDeck = true; this.shuffleCount++; } } })


!

قالب وردپرس