Commit 30192356 authored by cc201010's avatar cc201010
Browse files

Advanced Js project , 2nd Version

parent d589ba2b
......@@ -82,7 +82,7 @@ export default {
// Generating cards ,output eg."2C,10H,etc.."
generateCard() {
const colors = ['S', 'H', 'D', 'C'];
const values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'A', 'J', 'Q', 'K'];
const values = ['2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'J', 'Q', 'K'];
const pool = [];
values.map(v => {
colors.map(c => {
......@@ -103,7 +103,10 @@ export default {
v = 1
} else if (Number.isNaN(parseInt(v))) {
v = 10
}else {
}else if(v === '0'){
v = 10
}
else {
v = parseInt(v)
}
value += v
......@@ -111,18 +114,29 @@ export default {
return value
},
dealCard() {
let index;
index = Math.floor(Math.random() * 52);
const card = this.deck[index];
this.cardSwitch[index] = true;
return card;
// let index;
// do{
// index = Math.floor(Math.random() * 52);
// }while (this.cardSwitch[index]){
// const card = this.deck[index];
// this.cardSwitch[index] = true;
// return card;
// }
let index;
index = Math.floor(Math.random() * 52);
const card = this.deck[index];
this.cardSwitch[index] = true;
return card;
},
// Get cards images source
getSource(card) {
//API didnt work
//return `https://deckofcardsapi.com/static/img/${card}.png`
return `src/assets/cards_png_zip/PNG/${card}.png`
//Using API
if(card === 'AD'){
return `https://deckofcardsapi.com/static/img/aceDiamonds.png`
}else{
return `https://deckofcardsapi.com/static/img/${card}.png`
}
},
// Game instructions
howToPlay(){
......@@ -177,21 +191,21 @@ export default {
<div class="flex flex-col md:flex-row mt-10">
<!--Dealer container "Points + Cards" -->
<div class="flex flex-col text-center align-items-center flex-1">
<div class="flex flex-col text-center flex-1">
<!--Dealer Points-->
<h1 class="text-xl font-bold">Dealer : {{ isGameEnded ? dealerPoints : '??' }}</h1>
<!--Dealer cards container -->
<div class="p-2">
<!--UnFlipped dealer card -->
<div class="flex flex-row flex-wrap justify-center" v-if="isGameEnded">
<img class="mx-1 mt-2 w-24" v-for="card in dealerHand" :src="getSource(card)" alt="">
<div class="flex flex-row flex-wrap justify-center border p-2" v-if="isGameEnded">
<img class="mx-1 mt-2 w-28" v-for="card in dealerHand" :src="getSource(card)" alt="">
</div>
<!--Flipped dealer card -->
<div class="flex flex-row flex-wrap justify-center" v-else>
<img class="mx-1 mt-2 w-24 " v-for="(card,index) in dealerHand"
:src="index ===0 ? 'src/assets/cards_png_zip/PNG/gray_back.png' :getSource(card)" alt="">
<!--UnFlipped dealer card -->
<div class="flex flex-row flex-wrap justify-center border p-2 " v-else>
<img class="mx-1 mt-2 w-28" v-for="(card,index) in dealerHand"
:src="index ===0 ? 'src/assets/defaultcard.png' :getSource(card)" alt="">
</div>
</div>
</div>
<!--MainPlayer container "Points + Cards" -->
......@@ -199,8 +213,8 @@ export default {
<!--MainPlayer Points-->
<h1 class="text-xl font-bold">You : {{ playerPoints }}</h1>
<!--MainPlayer cards container-->
<div class="flex flex-row justify-center flex-wrap p-2">
<img class="mx-1 mt-2 w-24" :src="getSource(card)" alt="" v-for="card in playerHand">
<div class="flex flex-row flex-wrap justify-center border p-2">
<img class="mx-1 mt-2 w-28" :src="getSource(card)" alt="" v-for="card in playerHand">
</div>
</div>
</div>
......@@ -226,3 +240,10 @@ export default {
</section>
</main>
</template>
<style>
.testimg{
width: 226px;
height: 314px;
}
</style>
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