Added Cashout Mechanic

PelajarPalingArif · Aug 12, 2024 · f505051 · f505051
1 parent baec3f8
commit f505051
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,11 @@
 </head>
 
 <body>
+    <div class="navbar">
+        <div class="money-wrap">
+            <span id="currency">RM</span><span id="money">0.00</span>
+        </div>
+    </div>
     <div class="dock">
         <div class="container">
             <div class="box" id="1"></div>
@@ -55,7 +60,7 @@
         <div class="control">
             <div class="amount-wrap">
                 <label for="amountInput">Amount</label>
-                <input type="number" id="amountInput" value="2">
+                <input type="number" id="amountInput">
             </div>
             <div class="risk-wrap">
                 <label for="riskInput">Risk</label>

diff --git a/script.js b/script.js
@@ -2,7 +2,15 @@ let squareTiles = document.querySelectorAll(".box");
 let playButton = document.querySelector("#play-button");
 let cashOutButton = document.querySelector("#cashOut-button");
 let riskSelect = document.querySelector("#risk");
-let betAmount = document.querySelector("#amountInput");
+let betInput = document.querySelector("#amountInput");
+let betMoney;
+let accountMoney = document.querySelector("#money");
+let moneyTrack = 0;
+let probHappening = 1;
+let cashOut = 0;
+
+let edge = 0.13;
+let winCount = 0;
 
 let bombsAmount = 10;
 let isPlaying = false;
@@ -15,14 +23,16 @@ squareTiles.forEach((squareTile) => {
     squareTile.addEventListener("click", () => {
 
         if (isPlaying) {
-            console.log(`WIN CHANCE : ${Math.round((1 - bombsAmount / tilesAmounts) * 100, 2)}, LOSE CHANCE : ${Math.round(100 - (1 - bombsAmount / tilesAmounts) * 100, 2)} , TA : ${tilesAmounts}, BA : ${bombsAmount} `);
+            let currentWinChance = (1 - bombsAmount / tilesAmounts);   
+            console.log(`WIN CHANCE : ${currentWinChance}, LOSE CHANCE : ${1 - currentWinChance} , TA : ${tilesAmounts}, BA : ${bombsAmount} `);
             squareTile.style["backgroundColor"] = "rgb(87, 87, 87)";
             if (!squareTile.classList.contains("clicked")) {
                 squareTile.classList.add("clicked");
                 if (Math.random() < bombsAmount / tilesAmounts) {
                     isPlaying = false;
                     playButton.disabled = false;
                     cashOutButton.disabled = true;
+                    cashOutButton.textContent = "Cash Out";
                     // LOSE
                     squareTile.innerHTML = `<img src="bombedit.png" alt="" srcset="">`;
                     // squareTile.style["outline"] = "3px solid red"; 
@@ -49,6 +59,15 @@ squareTiles.forEach((squareTile) => {
                     // WIN
                     // squareTile.style["outline"] = "3px solid blue";
                     squareTile.innerHTML = `<img src="diamondedit.png" alt="">`;
+
+                    winCount++;
+
+                    probHappening = probHappening * currentWinChance;
+                    cashOut = (1 / probHappening) - (edge * winCount);
+                    console.log("Probability Happening : " + probHappening);
+                    console.log("Cashout : " + cashOut);
+                    cashOutButton.textContent = (cashOut * betMoney).toFixed(2);
+
                 }
             } else {
                 console.log("ALREADY CLICKED");
@@ -62,10 +81,17 @@ squareTiles.forEach((squareTile) => {
 
 playButton.addEventListener("click", () => {
     tilesAmounts = squareTiles.length;
+    probHappening = 1;
+    winCount = 0;
+    cashOut = 0;
     console.log("TA : " + tilesAmounts + " BA : " + bombsAmount);
-    if (betAmount.value < 0 || betAmount.value == "") {
+    if (betInput.value < 0 || betInput.value == "") {
         console.log("Invalid Bet");
     } else {
+        betMoney = betInput.value;
+        console.log("AM : " + parseFloat(accountMoney.textContent) + " BM : " + parseFloat(betMoney));    
+        moneyTrack = (parseFloat(accountMoney.textContent) - parseFloat(betMoney)).toFixed(2);
+        accountMoney.textContent = moneyTrack;
         playButton.disabled = true;
         cashOutButton.disabled = false;
         squareTiles.forEach((squareTile) => {
@@ -78,10 +104,15 @@ playButton.addEventListener("click", () => {
 });
 
 cashOutButton.addEventListener("click", () => {
-    console.log("Cashed Out");
+
+
+    moneyTrack = parseFloat(moneyTrack) + (cashOut * betMoney);
+    console.log("Money Track 1 : " + moneyTrack);
+    accountMoney.textContent = moneyTrack.toFixed(2);
     isPlaying = false;
     cashOutButton.disabled = true;
     playButton.disabled = false;
+    cashOutButton.textContent = "Cash Out";
     squareTiles.forEach((squareTile) => {
         squareTile.classList.remove("clicked");
         squareTile.textContent = "";

diff --git a/style.css b/style.css
@@ -13,6 +13,48 @@ body {
     align-items: center;
     background-color: black;
     font-family: 'Dosis Bold';
+    flex-direction: column;
+    gap:20px;
+    margin: 0;
+    padding: 0;
+    overscroll-behavior: none;
+}
+
+.navbar {
+    background-color: white;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0 10px 0;
+    background-color: rgb(57, 24, 88);
+}
+
+.money-wrap {  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    border-radius: 10px;
+    width: 200px;
+
+}
+
+.money-wrap > #money {
+    display: flex;
+    justify-content: end;
+    background-color: grey;
+    width: 200px;
+    padding: 10px 13px 10px 0px;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+.money-wrap > #currency {
+    background-color: rgb(75, 74, 74);
+    padding: 10px 20px 10px 20px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+
 }
 
 .container {