Advanced Js project , 2nd Version

poke-app/src/pages/BlackJack.vue

@@ -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>