Skip to content
GitLab
Commit 879e6e8f authored by cc201010's avatar cc201010
Browse files

writing better JS "Clean code"

parent 73dbe4fa
Expand all Show whitespace changes
Inline Side-by-side
poke-app/package-lock.json
View file @ 879e6e8f
This diff is collapsed.
poke-app/package.json
View file @ 879e6e8f
......@@ -7,8 +7,9 @@
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.16",
"vue-router": "^4.0.12"
"vue": "^3.2.23",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
......
poke-app/src/lib/game.js 0 → 100644
View file @ 879e6e8f
function cardSymbol(suit) {
switch (suit) {
case 'CLUBS':
return '♣️';
case 'SPADES':
return '♠️';
case 'DIAMONDS':
return '♦️';
case 'HEARTS':
return '♥️';
default:
break;
}
}
export function createCleanCard({ value, suit, image }) {
// Here's a clean card object that has a nice symbol
return {
value,
image,
symbol: cardSymbol(suit),
};
}
export function validateGuess(card, nextGuess) {
const colors = {
SPADES: 'black',
HEARTS: 'red',
CLUBS: 'black',
DIAMONDS: 'red',
};
const cardColor = colors[card.suit];
return cardColor == nextGuess;
}
const API = 'https://deckofcardsapi.com/api/deck/new/shuffle/';
export function getDeckAPI() {
return API;
}
export function getCardAPI(deckId) {
return `https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`;
}
poke-app/src/lib/router.js 0 → 100644
View file @ 879e6e8f
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 },
];
// Here we create our own Vue Router Instance
// and define the paths we can then use.
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
poke-app/src/lib/store/actions.js 0 → 100644
View file @ 879e6e8f
import {
validateGuess,
createCleanCard,
getCardAPI,
getDeckAPI,
} from '@/lib/game';
export default {
setNextGuess({ commit }, color) {
commit('setNextGuess', color);
},
async getDeck({ commit }) {
const { deck_id } = await fetch(getDeckAPI()).then((r) => r.json());
commit('setDeckId', deck_id);
},
async drawCard({ state, commit, getters }) {
const { cards } = await fetch(getCardAPI(state.guesser.deckId)).then((r) =>
r.json()
);
const card = cards[0];
// +1 the guess counter
commit('incrementGuesses');
// +1 the point counter if you guessed correctly
if (validateGuess(card, state.guesser.nextGuess)) {
commit('incrementPoints');
}
commit('pushNewCard', createCleanCard(card));
},
};
poke-app/src/lib/store/index.js 0 → 100644
View file @ 879e6e8f
import { createStore } from 'vuex';
import mutations from './mutations';
import actions from './actions';
const store = createStore({
state() {
return {
guesser: {
deckId: undefined,
cards: [],
points: 0,
guesses: 0,
nextGuess: undefined,
},
};
},
mutations,
actions,
});
export default store;
poke-app/src/lib/store/mutations.js 0 → 100644
View file @ 879e6e8f
export default {
incrementPoints(state) {
state.guesser.points++;
},
incrementGuesses(state) {
state.guesser.guesses++;
},
setDeckId(state, deckId) {
state.guesser.deckId = deckId;
},
setNextGuess(state, color) {
state.guesser.nextGuess = color;
},
pushNewCard(state, newCard) {
state.guesser.cards.push(newCard);
},
};
poke-app/src/main.js
View file @ 879e6e8f
import { createApp } from 'vue'
//import App from './App.vue'
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({
history: createWebHistory(),
routes,
})
import { createApp } from 'vue';
import router from './lib/router';
import store from './lib/store';
const app = createApp({});
app.use(router)
app.use(router);
app.use(store);
app.mount('#app');
poke-app/src/pages/Guesser.vue
View file @ 879e6e8f
<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;
}
import { mapState, mapActions, mapMutations } from 'vuex';
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
...mapState(['guesser']),
},
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
// }
},
methods: {
...mapActions(['getDeck', 'setNextGuess', 'drawCard']),
},
}
};
</script>
<template>
<h1>Guesser Game</h1>
<h1>The great 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-if="guesser.deckId">
<button @click="setNextGuess('red')">Guess Red</button>
<br />
<button @click="setNextGuess('black')">Guess Black</button>
<br />
<button v-if="guesser.nextGuess" @click="drawCard">Draw a card</button>
<h1>Guesses: {{ guesser.guesses }}</h1>
<h1>Points: {{ guesser.points }}</h1>
<h2>Your next guess is: {{ guesser.nextGuess }}</h2>
<div v-for="card in cards">
<span>{{ card.value }} of {{ card.suit }}</span>
<img :src="card.image" :alt="card.value">
<div v-for="(card, index) in guesser.cards" :key="index">
{{ card.value }} of {{ card.symbol }}
<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;
......
poke-app/src/pages/Home.vue
View file @ 879e6e8f
<script>
export default {
}
</script>
<template>
<h1>Home Page</h1>
</template>
\ No newline at end of file
poke-app/vite.config.js
View file @ 879e6e8f
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
// https://vitejs.dev/config/
// vite.config.js
export default defineConfig({
define: { 'process.env': {} },
plugins: [vue()],
resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' } }
})
// We alias vue references to a seperate vue build to make sure Vue-Router is working
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
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