Commit 064c8f60 authored by cc201010's avatar cc201010
Browse files

build a guessing game.

parent 72ad60b1
......@@ -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 -->
......
......@@ -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');
<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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment