UI

Games/Taash Game/index.html

@@ -15,7 +15,7 @@
       <h1>Taash Game</h1>
       <h3><span id="blackjack-result">Let's Play </span></h3>
 
-      <div class="flex-blackjack-row-2">
+      <div class="flex flex-col rounded-full justify-center items-center" id="board">
         <div id="your-box">
           <h2>You: <span id="your-blackjack-result"> 0</span></h2>
         </div>

Games/Taash Game/script.js

@@ -1,3 +1,4 @@
+let count=0
 let blackjackGame = {
   you: {
     scoreSpan: "#your-blackjack-result",
@@ -65,24 +66,28 @@ document
   .addEventListener("click", blackjackRestart);
 
 function blackjackHit() {
+  count+=1
   if (blackjackGame["isStand"] === false) {
     let card = randomCard();
-    showCard(card, YOU);
+    showCard('your-box',card, YOU,count);
     updateScore(card, YOU);
     showScore(YOU);
   }
 }
-
 function randomCard() {
   let randomIndex = Math.floor(Math.random() * 13);
   return blackjackGame["cards"][randomIndex];
 }
 
-function showCard(card, activePlayer) {
+function showCard(player,card, activePlayer,counting) {
   if (activePlayer["score"] <= 21) {
     let cardImage = document.createElement("img");
     cardImage.src = `images/${card}.png`;
-    cardImage.style = `width:${widthSize()}; height:${heightSize()};`;
+    if(counting>1){
+    let your_BOX=document.getElementById(player).children[counting-1]
+      your_BOX.id=counting===2?'right':counting===3?"center":"left"
+    }
+    cardImage.style = `height:${heightSize()};object-fit: contain;`;
     document.querySelector(activePlayer["div"]).appendChild(cardImage);
     hitSound.play();
   }
@@ -98,12 +103,7 @@ function widthSize() {
 }
 
 function heightSize() {
-  if (windowHeight > 700) {
-    let newHeightSize = window.screen.height * 0.18;
-    return newHeightSize;
-  } else {
-    return window.screen.height * 0.15;
-  }
+  return 150+'px'
 }
 
 function updateScore(card, activePlayer) {
@@ -117,12 +117,13 @@ function updateScore(card, activePlayer) {
     activePlayer["score"] += blackjackGame["cardsMap"][card];
   }
 
-  console.log(activePlayer["score"]);
 }
 
 function showScore(activePlayer) {
   //Bust logic if score is over 21
   if (activePlayer["score"] > 21) {
+    let Bust=document.querySelector(activePlayer.div).lastElementChild
+    Bust.id="Bust"
     document.querySelector(activePlayer["scoreSpan"]).textContent = "BUST!";
     document.querySelector(activePlayer["scoreSpan"]).style.color = "red";
   } else {
@@ -132,6 +133,7 @@ function showScore(activePlayer) {
 }
 
 function blackjackStand() {
+  count=0
   if (blackjackGame.pressOnce === false) {
     blackjackGame["isStand"] = true;
     let yourImages = document
@@ -140,7 +142,7 @@ function blackjackStand() {
 
     for (let i = 0; i < yourImages.length; i++) {
       let card = randomCard();
-      showCard(card, DEALER);
+      showCard("dealer-box",card, DEALER,i+1);
       updateScore(card, DEALER);
       showScore(DEALER);
     }
@@ -203,6 +205,7 @@ function showWinner(winner) {
 }
 
 function blackjackDeal() {
+  count=0
   if (blackjackGame["isTurnsOver"] === true) {
     // Select all the images in both the user and dealer box
     let yourImages = document
@@ -239,6 +242,7 @@ function blackjackDeal() {
 }
 
 function blackjackRestart() {
+  count=0
   blackjackDeal();
   document.querySelector("#wins").textContent = 0;
   document.querySelector("#losses").textContent = 0;

Games/Taash Game/style.css

@@ -1,5 +1,5 @@
 body {
-  background: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
+  background: url("https://cdn.vectorstock.com/i/500p/34/82/green-casino-poker-table-texture-game-background-vector-47533482.jpg");
   background-repeat: no-repeat;
   background-size: cover;
 
@@ -12,9 +12,15 @@ body {
   text-align: center;
   color: white;
     width:75%;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 
 }
-
+#board{background-color: purple;border-radius: 247px;padding: 2rem;box-shadow: 1px 2px 2px 12px rgb(211 164 18 / 70%);}
+#your-box,#dealer-box{min-height: 200px;}
+#your-box{border-top-right-radius: 247px;border-top-left-radius: 247px;box-shadow: inset 0 10px 12px rgb(253 253 253 / 48%);position: relative;min-width: 600px;}
+#dealer-box{border-bottom-left-radius: 247px;border-bottom-right-radius: 247px;box-shadow: inset 0 -10px 12px rgb(253 253 253 / 48%);position: relative;min-width: 600px;}
 .flex-blackjack-row-1,
 .flex-blackjack-row-2,
 .flex-blackjack-row-3 {
@@ -37,7 +43,28 @@ body {
 .flex-blackjack-row-2 div img {
   padding: 10px;
 }
-
+img{position: relative;z-index: 2;}
+#right{
+  height: 150px;
+  object-fit: contain;
+  position: relative;
+  right: -61px;
+  box-sizing: border-box;
+  rotate: 166deg;
+  top: 3px;
+  z-index: 1;
+}
+#left{
+  height: 150px;
+  object-fit: contain;
+  position: relative;
+  left: -61px;
+  box-sizing: border-box;
+  rotate: -166deg;
+  top: 3px;
+  z-index: 1;
+}
+#center{position: relative;z-index: 2;}
 table {
     border: 3px solid black;
     border-collapse: collapse;
@@ -63,3 +90,22 @@ table td {
   background-image: url(https://i.stack.imgur.com/q02th.jpg);
   border: 3px solid black;
 }
+@media (max-width:950px) {
+  #board{min-width: 80%;}
+  #your-box,#dealer-box{
+    min-width: 90%;
+    min-height: 300px;
+  }
+}
+@media (max-width:650px) {
+  .container{width: 100%;}
+}
+@media (max-width:470px) {
+  #center,#left,#right{
+  left: 0px;
+  box-sizing: border-box;
+  rotate:0deg;
+  top: 0px;
+  z-index: 1;
+  }
+}