rocketacademy · franktakaema888 · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 
 # Dependency directories
 node_modules/
+.env
diff --git a/admin.html b/admin.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Page</title>
+
+  <link rel="stylesheet" href="./styles/login.css" /> 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.7/axios.min.js" integrity="sha512-DdX/YwF5e41Ok+AI81HI8f5/5UsoxCVT9GKYZRIzpLxb8Twz4ZwPPX+jQMwMhNQ9b5+zDEefc+dcvQoPWGNZ3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> -->
+</head>
+
+<body>
+
+  <!-- NAV Bar -->
+  <nav class="navbar">
+    <a href="index.html" class="nav-link">Home</a>
+  </nav>
+
+  <div class="container mt-5">
+    <h1 class="text-center">Admin Dashboard</h1>
+    <p class="text-center">Edit User Balance</p>
+
+    <div class="card mx-auto" style="max-width: 500px;">
+      <div class="card-body">
+        <form id="balance-form">
+            <div class="mb-3">
+              <label for="balance" class="form-label">Current Balance</label>
+              <input type="number" id="balance" class="form-control" placeholder="Loading..." disabled>
+            </div>
+            <div class="mb-3">
+              <label for="new-balance" class="form-label">New Balance</label>
+              <input type="number" id="new-balance" class="form-control" placeholder="Enter new balance" required>
+            </div>
+            <button type="submit" class="btn btn-primary w-100">Update Balance</button>
+        </form>
+        <div id="status-message" class="mt-3 text-center"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- JavaScript Files -->
+  <script src="./js/data.js"></script>
+  <script src="./js/admin.js"></script>
+</body>
+</html>
diff --git a/assets/10_of_clubs.png b/assets/10_of_clubs.png
diff --git a/assets/10_of_diamonds.png b/assets/10_of_diamonds.png
diff --git a/assets/10_of_hearts.png b/assets/10_of_hearts.png
diff --git a/assets/10_of_spades.png b/assets/10_of_spades.png
diff --git a/assets/2_of_clubs.png b/assets/2_of_clubs.png
diff --git a/assets/2_of_diamonds.png b/assets/2_of_diamonds.png
diff --git a/assets/2_of_hearts.png b/assets/2_of_hearts.png
diff --git a/assets/2_of_spades.png b/assets/2_of_spades.png
diff --git a/assets/3_of_clubs.png b/assets/3_of_clubs.png
diff --git a/assets/3_of_diamonds.png b/assets/3_of_diamonds.png
diff --git a/assets/3_of_hearts.png b/assets/3_of_hearts.png
diff --git a/assets/3_of_spades.png b/assets/3_of_spades.png
diff --git a/assets/4_of_clubs.png b/assets/4_of_clubs.png
diff --git a/assets/4_of_diamonds.png b/assets/4_of_diamonds.png
diff --git a/assets/4_of_hearts.png b/assets/4_of_hearts.png
diff --git a/assets/4_of_spades.png b/assets/4_of_spades.png
diff --git a/assets/5_of_clubs.png b/assets/5_of_clubs.png
diff --git a/assets/5_of_diamonds.png b/assets/5_of_diamonds.png
diff --git a/assets/5_of_hearts.png b/assets/5_of_hearts.png
diff --git a/assets/5_of_spades.png b/assets/5_of_spades.png
diff --git a/assets/6_of_clubs.png b/assets/6_of_clubs.png
diff --git a/assets/6_of_diamonds.png b/assets/6_of_diamonds.png
diff --git a/assets/6_of_hearts.png b/assets/6_of_hearts.png
diff --git a/assets/6_of_spades.png b/assets/6_of_spades.png
diff --git a/assets/7_of_clubs.png b/assets/7_of_clubs.png
diff --git a/assets/7_of_diamonds.png b/assets/7_of_diamonds.png
diff --git a/assets/7_of_hearts.png b/assets/7_of_hearts.png
diff --git a/assets/7_of_spades.png b/assets/7_of_spades.png
diff --git a/assets/8_of_clubs.png b/assets/8_of_clubs.png
diff --git a/assets/8_of_diamonds.png b/assets/8_of_diamonds.png
diff --git a/assets/8_of_hearts.png b/assets/8_of_hearts.png
diff --git a/assets/8_of_spades.png b/assets/8_of_spades.png
diff --git a/assets/9_of_clubs.png b/assets/9_of_clubs.png
diff --git a/assets/9_of_diamonds.png b/assets/9_of_diamonds.png
diff --git a/assets/9_of_hearts.png b/assets/9_of_hearts.png
diff --git a/assets/9_of_spades.png b/assets/9_of_spades.png
diff --git a/assets/ace_of_clubs.png b/assets/ace_of_clubs.png
diff --git a/assets/ace_of_diamonds.png b/assets/ace_of_diamonds.png
diff --git a/assets/ace_of_hearts.png b/assets/ace_of_hearts.png
diff --git a/assets/ace_of_spades.png b/assets/ace_of_spades.png
diff --git a/assets/ace_of_spades2.png b/assets/ace_of_spades2.png
diff --git a/assets/back.png b/assets/back.png
diff --git a/assets/black_joker.png b/assets/black_joker.png
diff --git a/assets/jack_of_clubs.png b/assets/jack_of_clubs.png
diff --git a/assets/jack_of_clubs2.png b/assets/jack_of_clubs2.png
diff --git a/assets/jack_of_diamonds.png b/assets/jack_of_diamonds.png
diff --git a/assets/jack_of_diamonds2.png b/assets/jack_of_diamonds2.png
diff --git a/assets/jack_of_hearts.png b/assets/jack_of_hearts.png
diff --git a/assets/jack_of_hearts2.png b/assets/jack_of_hearts2.png
diff --git a/assets/jack_of_spades.png b/assets/jack_of_spades.png
diff --git a/assets/jack_of_spades2.png b/assets/jack_of_spades2.png
diff --git a/assets/king_of_clubs.png b/assets/king_of_clubs.png
diff --git a/assets/king_of_clubs2.png b/assets/king_of_clubs2.png
diff --git a/assets/king_of_diamonds.png b/assets/king_of_diamonds.png
diff --git a/assets/king_of_diamonds2.png b/assets/king_of_diamonds2.png
diff --git a/assets/king_of_hearts.png b/assets/king_of_hearts.png
diff --git a/assets/king_of_hearts2.png b/assets/king_of_hearts2.png
diff --git a/assets/king_of_spades.png b/assets/king_of_spades.png
diff --git a/assets/king_of_spades2.png b/assets/king_of_spades2.png
diff --git a/assets/queen_of_clubs.png b/assets/queen_of_clubs.png
diff --git a/assets/queen_of_clubs2.png b/assets/queen_of_clubs2.png
diff --git a/assets/queen_of_diamonds.png b/assets/queen_of_diamonds.png
diff --git a/assets/queen_of_diamonds2.png b/assets/queen_of_diamonds2.png
diff --git a/assets/queen_of_hearts.png b/assets/queen_of_hearts.png
diff --git a/assets/queen_of_hearts2.png b/assets/queen_of_hearts2.png
diff --git a/assets/queen_of_spades.png b/assets/queen_of_spades.png
diff --git a/assets/queen_of_spades2.png b/assets/queen_of_spades2.png
diff --git a/assets/red_joker.png b/assets/red_joker.png
diff --git a/assets/table.jpg b/assets/table.jpg
diff --git a/index.html b/index.html
@@ -1,155 +1,52 @@
-
 <!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>
-
-  </head>
-
-  <body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Black Jack</title>
+
+  <link rel="stylesheet" href="./styles/index.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.7/axios.min.js" integrity="sha512-DdX/YwF5e41Ok+AI81HI8f5/5UsoxCVT9GKYZRIzpLxb8Twz4ZwPPX+jQMwMhNQ9b5+zDEefc+dcvQoPWGNZ3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+
+<body>
+  <!-- NAV Bar -->
+  <nav class="navbar">
+    <a href="login.html" class="nav-link">Admin</a>
+  </nav>
+
+  <div id="container">
     <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" />
+      <div class="tenor-gif-embed" data-postid="12130977" data-share-method="host" data-aspect-ratio="2" data-width="100%">
+        <a href="https://tenor.com/view/mel-gibson-stupid-looking-shocked-gif-12130977">Mel Gibson Stupid GIF</a>from<a href="https://tenor.com/search/mel+gibson-gifs">Mel Gibson GIFs</a>
+      </div> 
+      <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
     </h1>
-    <h1 class="header">♣️ Basics - Blackjack ♠️</h1>
-    <div id="container">
-      <p>Input:</p>
-      <input id="input-field" />
-      <br />
+    <h1 class="header">♣️ Blackjack ♠️</h1>
+    <p><strong>Current Balance: </strong>$ <span id="balance-display">Loading...</span></p> <!-- balance display -->
+    <p>Welcome to Beat That! Click submit to start the game.</p>
+    <p>The goal is to get closer to 21 than the dealer without going over.</p>
+
+    <form>
+      <p><strong>Bet:</strong></p>
+      <input id="bet-amount" />
       <button id="submit-button">Submit</button>
-      <p>Output:</p>
-      <div id="output-div"></div>
+    </form>
+
+    <div id="game-buttons">
+      <button id="hit-button">Hit</button>
+      <button id="stand-button">Stand</button>
     </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;
+    <button id="reset-button" class="reset-button">Reset Game</button> <!-- Reset Game Button -->
+
+    <p><strong>Output:</strong></p>
+    <div id="output-div">Press the Submit Button to draw the cards and start game</div>
+  </div>
 
-        // Reset input value
-        input.value = "";
-      });
-    </script>
-  </body>
-</html>
+  <!-- JavaScript Files -->
+  <script src="./js/data.js"></script>
+  <script src="./js/script.js"></script>
+  <script src="./js/button.js"></script>
+</body>
+</html>
diff --git a/js/admin.js b/js/admin.js
@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", async () => {
+    await loadCurrentBalance();
+});
+
+// Function to load and display current balance
+const loadCurrentBalance = async () => {
+    try {
+        const data = await loadUserData();
+        if (data && data.users.length > 0) {
+            const balance = data.users[0].balance;
+            document.getElementById("balance").value = balance;
+        }
+    } catch (error) {
+        console.error("Error loading balance:", error);
+        document.getElementById("status-message").textContent = "Failed to load balance";
+    }
+};
+
+// Event listener for form submission
+document.getElementById("balance-form").addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    const newBalance = document.getElementById("new-balance").value;
+    if (newBalance === "") {
+        document.getElementById("status-message").textContent = "Please enter a valid balance";
+        return;
+    }
+
+    try {
+        const data = await loadUserData();
+        if (data && data.users.length > 0) {
+            data.users[0].balance = Number(newBalance); // Update balance
+            await updateUserData(data); // Save updated data to JSONbin
+
+            document.getElementById("balance").value = newBalance;
+            document.getElementById("status-message").textContent = "Balance updated successfully!";
+            document.getElementById("status-message").classList.add("text-success");
+        }
+    } catch (error) {
+        console.error("Error updating balance:", error);
+        document.getElementById("status-message").textContent = "Failed to update balance";
+        document.getElementById("status-message").classList.add("text-danger");
+    }
+});
diff --git a/js/button.js b/js/button.js
@@ -0,0 +1,42 @@
+var gameButtons = document.querySelector("#game-buttons");
+var output = document.querySelector("#output-div");
+var submitButton = document.querySelector("#submit-button");
+var hitButton = document.querySelector("#hit-button");
+var standButton = document.querySelector("#stand-button");
+const resetButton = document.getElementById("reset-button");
+
+function updateButtonVisibility(gameOver) {
+    if (gameOver) {
+        gameButtons.style.display = 'none';
+        submitButton.style.display = 'inline-block';
+        submitButton.textContent = 'New Game';
+    } else {
+        gameButtons.style.display = 'block';
+        submitButton.style.display = 'none';
+    }
+}
+
+submitButton.addEventListener("click", async function (e) {
+    e.preventDefault();
+    var result = main('start');
+    output.innerHTML = result.output;
+    updateButtonVisibility(result.gameOver);
+});
+
+hitButton.addEventListener("click", function (){
+    console.log("Hit Button Pressed");
+    var result = main('hit');
+    output.innerHTML = result.output;
+    updateButtonVisibility(result.gameOver);
+});
+
+standButton.addEventListener("click", function () {
+    console.log("Stand Button Pressed");
+    var result = main('stand');
+    output.innerHTML = result.output;
+    updateButtonVisibility(result.gameOver);
+});
+
+resetButton.addEventListener("click", () => {
+  resetBalance();
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@

		# Dependency directories
		node_modules/
		.env