build a guessing game.

poke-app/index.html

@@ -14,6 +14,8 @@
         <router-link to="/">Home</router-link>
         <router-link to="/pokedex">Pokedex</router-link>
         <router-link to="/calculator">Calculator</router-link>
+        <router-link to="/guesser">Guesser</router-link>
+
 
         <!-- route outlet -->
         <!-- component matched by the route will render here -->

poke-app/src/main.js

@@ -5,12 +5,14 @@ import { createRouter , createWebHistory } from 'vue-router'
 import Home from './pages/Home.vue'
 import Pokedex from './pages/Pokedex.vue'
 import Calculator from './pages/Calculator.vue'
+import Guesser from './pages/Guesser.vue';
 
 
 const routes = [
     { path: '/', component: Home },
     { path: '/pokedex', component: Pokedex },
     { path: '/calculator', component: Calculator },
+    { path: '/guesser', component: Guesser}
 ]
 
 const router = createRouter({
@@ -19,6 +21,7 @@ const router = createRouter({
 
 })
 
+
 const app = createApp({});
 app.use(router)
 app.mount('#app');

poke-app/src/pages/Guesser.vue

+<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>
\ No newline at end of file