Commit 30192356 authored by cc201010's avatar cc201010
Browse files

Advanced Js project , 2nd Version

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