Guesser.vue 2.39 KB
Newer Older
cc201010's avatar
cc201010 committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<script>

//import { createStore } from 'vuex';

const API = "https://deckofcardsapi.com/api/deck/new/shuffle/"

// Cardsymbol switch
function cardSymbol(card) {
  switch (card.suit) {
    case 'CLUBS':
      return '♣️';
    case 'SPADES':
      return '♠️';
    case 'DIAMONDS':
      return '♦️';
    case 'HEARTS':
      return '♥️';
    default:
      break;
  }
}

function validateGuess(card, nextGuess) {
  const colors = {
    'SPADES': 'black',
    'HEARTS': 'red',
    'CLUBS': 'black',
    'DIAMONDS': 'red',
  }

  const cardColor = colors[card.suit];
  return cardColor == nextGuess;
}

export default {
  data() {
    return {
      deckId: undefined,
      cards: [],
      nextGuess: undefined,
      guesses: 0,
      points: 0,
    }
  },
  computed: {
    cardAPI() {
      return `https://deckofcardsapi.com/api/deck/${this.deckId}/draw/?count=1`
    },
  },
  methods: {
    async getDeck() {
      const {deck_id} = await fetch(API).then((r) => r.json());
      this.deckId = deck_id
    },

    guessCard(color) {
      this.nextGuess = color
    },

    async drawCard() {
      const {cards} = await fetch(this.cardAPI).then(r => r.json());

      //+1 the guess counter
      this.guesses++

      //+1 the point counter if you guessed correctly
      if (validateGuess(cards[0], this.nextGuess)) {
        this.points++
      }
      this.cards.push(cards[0])
      // const cleanCard = {
      //   value: cards[0].value,
      //   symbol: cardSymbol(cards[0]),
      //   image: cards[0].image
      // }
    },
  },
}
</script>

<template>
  <h1>Guesser Game</h1>

  <section>
    <button @click="getDeck">Get a new Deck</button>

    <div v-if="deckId">
      <div class="mt-3 justify-content-center d-flex flex-row">
        <button @click="guessCard('red')">Guess Red</button>
        <br>
        <button @click="guessCard('black')">Guess Black</button>
        <button @click="drawCard">Draw a card</button>

      </div>
      <br>
      <div class="">
        <p>Guesses:{{ guesses }}</p>
        <p>Points:{{ points }}</p>
      </div>
      <p>Your next guess:{{ nextGuess }}</p>


      <div v-for="card in cards">
        <span>{{ card.value }} of {{ card.suit }}</span>
        <img :src="card.image" :alt="card.value">
      </div>
      <!--    {{nextGuess}}-->
    </div>

    <div v-else>Please draw a new deck!</div>
  </section>
</template>


<style>
img {
  width: 100px;
}
</style>