rocketacademy · LAOBANSANTA · Feb 22, 2024
diff --git a/images/aceOfClubs.jpg b/images/aceOfClubs.jpg
diff --git a/images/aceOfDiamonds.jpg b/images/aceOfDiamonds.jpg
diff --git a/images/aceOfHearts.jpg b/images/aceOfHearts.jpg
diff --git a/images/aceOfSpades.jpg b/images/aceOfSpades.jpg
diff --git a/images/chip.png b/images/chip.png
diff --git a/images/eightOfClubs.jpg b/images/eightOfClubs.jpg
diff --git a/images/eightOfDiamonds.jpg b/images/eightOfDiamonds.jpg
diff --git a/images/eightOfHearts.jpg b/images/eightOfHearts.jpg
diff --git a/images/eightOfSpades.jpg b/images/eightOfSpades.jpg
diff --git a/images/fiveOfClubs.jpg b/images/fiveOfClubs.jpg
diff --git a/images/fiveOfDiamonds.jpg b/images/fiveOfDiamonds.jpg
diff --git a/images/fiveOfHearts.jpg b/images/fiveOfHearts.jpg
diff --git a/images/fiveOfSpades.jpg b/images/fiveOfSpades.jpg
diff --git a/images/fourOfClubs.jpg b/images/fourOfClubs.jpg
diff --git a/images/fourOfDiamonds.jpg b/images/fourOfDiamonds.jpg
diff --git a/images/fourOfHearts.jpg b/images/fourOfHearts.jpg
diff --git a/images/fourOfSpades.jpg b/images/fourOfSpades.jpg
diff --git a/images/jackOfClubs.jpg b/images/jackOfClubs.jpg
diff --git a/images/jackOfDiamonds.jpg b/images/jackOfDiamonds.jpg
diff --git a/images/jackOfHearts.jpg b/images/jackOfHearts.jpg
diff --git a/images/jackOfSpades.jpg b/images/jackOfSpades.jpg
diff --git a/images/kingOfDiamonds.jpg b/images/kingOfDiamonds.jpg
diff --git a/images/kingOfHearts.jpg b/images/kingOfHearts.jpg
diff --git a/images/kingOfSpades.jpg b/images/kingOfSpades.jpg
diff --git a/images/kingofClubs.jpg b/images/kingofClubs.jpg
diff --git a/images/nineOfClubs.jpg b/images/nineOfClubs.jpg
diff --git a/images/nineOfDiamonds.jpg b/images/nineOfDiamonds.jpg
diff --git a/images/nineOfHearts.jpg b/images/nineOfHearts.jpg
diff --git a/images/nineOfSpades.jpg b/images/nineOfSpades.jpg
diff --git a/images/queenOfClubs.jpg b/images/queenOfClubs.jpg
diff --git a/images/queenOfDiamonds.jpg b/images/queenOfDiamonds.jpg
diff --git a/images/queenOfHearts.jpg b/images/queenOfHearts.jpg
diff --git a/images/queenOfSpades.jpg b/images/queenOfSpades.jpg
diff --git a/images/sevenOfClubs.jpg b/images/sevenOfClubs.jpg
diff --git a/images/sevenOfDiamonds.jpg b/images/sevenOfDiamonds.jpg
diff --git a/images/sevenOfHearts.jpg b/images/sevenOfHearts.jpg
diff --git a/images/sevenOfSpades.jpg b/images/sevenOfSpades.jpg
diff --git a/images/sixOfClubs.jpg b/images/sixOfClubs.jpg
diff --git a/images/sixOfDiamonds.jpg b/images/sixOfDiamonds.jpg
diff --git a/images/sixOfHearts.jpg b/images/sixOfHearts.jpg
diff --git a/images/sixOfSpades.jpg b/images/sixOfSpades.jpg
diff --git a/images/tenOfClubs.jpg b/images/tenOfClubs.jpg
diff --git a/images/tenOfDiamonds.jpg b/images/tenOfDiamonds.jpg
diff --git a/images/tenOfHearts.jpg b/images/tenOfHearts.jpg
diff --git a/images/tenOfSpades.jpg b/images/tenOfSpades.jpg
diff --git a/images/threeOfClubs.jpg b/images/threeOfClubs.jpg
diff --git a/images/threeOfDiamonds.jpg b/images/threeOfDiamonds.jpg
diff --git a/images/threeOfHearts.jpg b/images/threeOfHearts.jpg
diff --git a/images/threeOfSpades.jpg b/images/threeOfSpades.jpg
diff --git a/images/twoOfClubs.jpg b/images/twoOfClubs.jpg
diff --git a/images/twoOfDiamonds.jpg b/images/twoOfDiamonds.jpg
diff --git a/images/twoOfHearts.jpg b/images/twoOfHearts.jpg
diff --git a/images/twoOfSpades.jpg b/images/twoOfSpades.jpg
diff --git a/index.html b/index.html
@@ -1,155 +1,28 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Page setup configurations -->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <!-- Favicon configuration -->
-    <link rel="apple-touch-icon" sizes="180x180" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2">
-    <link rel="manifest" href="/site.webmanifest?v=2">
-    <link rel="mask-icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2" color="#e73c3e">
-    <link rel="shortcut icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2">
-    <meta name="apple-mobile-web-app-title" content="Rocket Academy">
-    <meta name="application-name" content="Rocket Academy">
-    <meta name="msapplication-TileColor" content="#2b5797">
-    <meta name="theme-color" content="#ffffff">
-
-    <!-- sharing configuration -->
-    <!-- Primary Meta Tags -->
-    <title>Blackjack - Basics - Rocket Academy</title>
-    <meta name="title" content="YOURNAME's BlackJack Game!">
-    <meta name="description" content="A fun card game I made myself! 😄💪🌈">
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta property="og:title" content="YOURNAME's BlackJack Game!">
-    <meta property="og:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta property="og:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta name="twitter:title" content="YOURNAME's BlackJack Game!">
-    <meta name="twitter:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta name="twitter:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-    <meta name="twitter:site" content="@rocketacademyco">
-    <meta name="twitter:creator" content="@rocketacademyco">
-
-    <!-- fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
-
-    <!-- CSS -->
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family: 'Open Sans', sans-serif;
-        margin-left: 30px;
-        margin-right: 30px;
-        background-color:white;
-        color: black; /* sets the font color */
-        background-image: url(""); /* The image used */
-        background-position: center; /* Center the image */
-        background-repeat: no-repeat; /* Do not repeat the image */
-        background-size: cover; /* Resize the background image to cover the entire container */
-      }
-
-      #output-div img{
-        display:block;
-        max-width:100%;
-        max-height:200px;
-      }
-      .header {
-        text-align: center;
-        font-size: 1.1rem;
-        margin-bottom: 3rem;
-      }
-
-      #container {
-        background-color: pink;
-        margin: 40px auto;
-        max-width: 800px;
-        padding: 38px 31px;
-      }
-
-      input {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 9px;
-        width: 100%;
-      }
-
-      button {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 6px;
-      }
-
-      #output-div {
-        background-color: lightgrey;
-        margin: 20px auto;
-        padding: 20px;
-        width: 100%;
-      }
-
-      .logo-img {
-        height: 49px;
-        position: relative;
-        top: 22px;
-      }
-
-      /* increase header font size on wider screens */
-      @media screen and (min-width: 600px) {
-        .header {
-          font-size: 2rem;
-        }
-      }
-    </style>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
 
+    <title>Black JACK😅</title>
   </head>
-
   <body>
-    <h1 class="header">
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-      Rocket Academy
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-    </h1>
-    <h1 class="header">♣️ Basics - Blackjack ♠️</h1>
-    <div id="container">
-      <p>Input:</p>
-      <input id="input-field" />
-      <br />
-      <button id="submit-button">Submit</button>
-      <p>Output:</p>
-      <div id="output-div"></div>
+    <h1>BlackJack</h1>
+    <div id="table">
+      <div id="player1Cards">
+        <p>Player 1</p>
+        <p id="player1score">SCORE : 0</p>
+      </div>
+      <div id="player2Cards">
+        <p>Player 2</p>
+        <p id="player2score">SCORE : 0</p>
+      </div>
     </div>
-    <!-- Import program logic -->
-    <script src="script.js"></script>
-    <!-- Define button click functionality -->
-    <script>
-      var button = document.querySelector("#submit-button");
-      button.addEventListener("click", function () {
-        // Set result to input value
-        var input = document.querySelector("#input-field");
-        var result = main(input.value);
 
-        // Display result in output element
-        var output = document.querySelector("#output-div");
-        output.innerHTML = result;
-
-        // Reset input value
-        input.value = "";
-      });
-    </script>
+    <p id="myOutputvalue">Who WON ?</p>
+    <button id="reset-button">RESET the game!</button>
+    <button id="deal-button">Deal!</button>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,4 +1,194 @@
-var main = function (input) {
-  var myOutputValue = 'hello world';
-  return myOutputValue;
+var player1Cards = document.getElementById("player1Cards");
+var player2Cards = document.getElementById("player2Cards");
+var dealButton = document.getElementById("deal-button");
+var myOutputvalue = document.getElementById("myOutputvalue");
+var resetgameButton = document.getElementById("reset-button");
+var player1scoreHolder = document.getElementById("player1score");
+var player2scoreHolder = document.getElementById("player2score");
+var nums = [
+  "ace",
+  "two",
+  "three",
+  "four",
+  "five",
+  "six",
+  "seven",
+  "eight",
+  "nine",
+  "ten",
+  "jack",
+  "queen",
+  "king",
+];
+var suitsholder = ["Diamonds", "Hearts", "Clubs", "Spades"];
+var imgholder = [];
+for (let i = 0; i < 13; i += 1) {
+  imgholder.push([]);
+  for (let j = 0; j < 4; j += 1) {
+    imgholder[i].push(`images/${nums[i]}Of${suitsholder[j]}.jpg`);
+  }
+}
+// creating a deck of cards
+const makeDeck = () => {
+  var newDeck = [];
+  for (let i = 1; i <= 13; i += 1) {
+    var suits = ["♦", "♥", "♣", "♠"];
+    for (let j = 0; j < suits.length; j += 1) {
+      var name = `${i}`;
+      if (name === "1") {
+        name = "A";
+      } else if (name === "11") {
+        name = "J";
+      } else if (name === "12") {
+        name = "Q";
+      } else if (name === "13") {
+        name = "K";
+      }
+      var card = {
+        value: i,
+        suit: suits[j],
+        img: imgholder[i - 1][j],
+        name,
+      };
+      newDeck.push(card);
+    }
+  }
+  return newDeck;
 };
+// Get a random index ranging from 0 (inclusive) to max (exclusive).
+const getRandomIndex = (max) => Math.floor(Math.random() * max);
+// Shuffle an array of cards
+const shuffleCards = (deck) => {
+  // Loop over the card deck array once
+  for (let currentIndex = 0; currentIndex < deck.length; currentIndex += 1) {
+    // Select a random index in the deck
+    const randomIndex = getRandomIndex(deck.length);
+    // Select the card that corresponds to randomIndex
+    const randomCard = deck[randomIndex];
+    // Select the card that corresponds to currentIndex
+    const currentCard = deck[currentIndex];
+    // Swap positions of randomCard and currentCard in the deck
+    deck[currentIndex] = randomCard;
+    deck[randomIndex] = currentCard;
+  }
+  // Return the shuffled deck
+  return deck;
+};
+var deck = makeDeck();
+var shuffledDeck = shuffleCards(deck);
+function dealCard(card, player) {
+  var cardImage = document.createElement("img");
+  // change src of cardImage
+  cardImage.src = card.img;
+  cardImage.classList.add("card");
+  console.log(card.img);
+  // append the cardImage
+  player.appendChild(cardImage);
+}
+var counter = 0;
+var turn = "player1";
+var threshold = 21;
+var player1Hand = [];
+var player2Hand = [];
+function getHandValue(hand) {
+  var sum = 0;
+  //new stuff
+  var aceCount = 0;
+  for (var i = 0; i < hand.length; i++) {
+    if (hand[i].value !== 1) {
+      // adding some new stuff
+      sum += hand[i].value;
+    } else {
+      aceCount++;
+    }
+  }
+
+  for (var j = 0; j < aceCount; j++) {
+    if (sum + 11 <= threshold - aceCount + 1) {
+      sum += 11;
+    } else {
+      sum += 1;
+    }
+  }
+
+  //
+  return sum;
+}
+
+// ...
+
+// ...
+
+function resetgame() {
+  counter = 0;
+  turn = "player1";
+  player1Hand = [];
+  player2Hand = [];
+  myOutputvalue.textContent = "";
+
+  // playerscore.textContent = "SCORE : 0";
+
+  // Clear card displays
+  player1Cards.innerHTML = "";
+  player2Cards.innerHTML = "";
+
+  // Update player titles (if needed)
+  document.getElementById("player1Cards").innerHTML = "<p>Player 1</p>";
+  document.getElementById("player2Cards").innerHTML = "<p>Player 2</p>";
+
+  player1scoreHolder.textContent = "SCORE: " + getHandValue(player1Hand);
+  player2scoreHolder.textContent = "SCORE: " + getHandValue(player2Hand);
+  // Shuffle the deck and update the shuffledDeck variable
+  shuffledDeck = shuffleCards(makeDeck());
+}
+
+// ...
+
+dealButton.addEventListener("click", () => {
+  // getting the score for the players when they click the deal button
+  if (getHandValue(player1Hand) <= 21 && getHandValue(player2Hand) <= 21) {
+    var card = shuffledDeck.pop();
+    if (counter == 0) {
+      if (getHandValue(player1Hand) + card.value <= 21) {
+        dealCard(card, player1Cards);
+        player1Hand.push(card);
+      }
+      counter = 1;
+    } else {
+      if (getHandValue(player2Hand) + card.value <= 21) {
+        dealCard(card, player2Cards);
+        player2Hand.push(card);
+      }
+      counter = 0;
+    }
+  }
+
+  // showing the winner of the rounds
+
+  if (
+    getHandValue(player1Hand) == 21 ||
+    (getHandValue(player1Hand) > getHandValue(player2Hand) &&
+      getHandValue(player1Hand) > 15)
+  ) {
+    myOutputvalue.textContent = "player 1 win";
+  } else if (
+    getHandValue(player2Hand) == 21 ||
+    (getHandValue(player2Hand) > getHandValue(player1Hand) &&
+      getHandValue(player2Hand) > 15)
+  ) {
+    myOutputvalue.textContent = "player 2 win";
+  } else if (getHandValue(player1Hand) === getHandValue(player2Hand)) {
+    myOutputvalue.textContent = "It is a tie";
+  } else {
+    myOutputvalue.textContent = "Who won?";
+  }
+
+  player1scoreHolder.textContent = "score: " + getHandValue(player1Hand);
+  player2scoreHolder.textContent = "score: " + getHandValue(player2Hand);
+
+  return myOutputvalue;
+});
+
+resetgameButton.addEventListener("click", () => {
+  resetgame();
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,3 @@
+.card {
+  size: 50px;
+}