From 4e2ee10468b5429639a3edfdc0ae280bb77ac8bd Mon Sep 17 00:00:00 2001
From: sharma-shray <sharma.shray92@gmail.com>
Date: Mon, 25 Mar 2024 11:18:59 +0200
Subject: [PATCH] customizations

---
 src/css/style.css |  8 ++++++++
 src/index.html    |  9 ++++++++-
 src/js/Reel.js    |  2 +-
 src/js/index.js   | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 2 deletions(-)
diff --git a/src/css/style.css b/src/css/style.css
index 20dc25a..ea35207 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -16,6 +16,10 @@ body {
   }
 }
 
+#balance {
+  color: rgb(233, 192, 192);
+}
+
 #reels {
   display: flex;
   width: 100vw;
@@ -53,6 +57,10 @@ body {
   padding: 5px 30px;
 }
 
+#controls button {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  width: 120px;
+}
 #controls label {
   display: flex;
   align-items: center;
diff --git a/src/index.html b/src/index.html
index 9b2d295..4a489d1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,9 @@
   </head>
   <body>
     <div id="slot">
-      <div id="jackpot">Jackpot: <span id="jp">5.555.555</span></div>
+      <div id="balance">Balance: <span id="bl">10.000$</span></div>
+
+      <div id="jackpot">Jackpot: <span id="jp">0</span></div>
       <div id="reels">
         <div class="reel"></div>
         <div class="reel"></div>
@@ -19,6 +21,11 @@
       </div>
       <div id="controls">
         <button type="button" id="spin">SPIN</button>
+        <h3>Bet:</h3>
+        <button type="button" id="bt_10">10%</button>
+        <button type="button" id="bt_25">25%</button>
+        <button type="button" id="bt_50">50%</button>
+        <button type="button" id="bt_100">100%</button>
         <label>
           <input type="checkbox" name="autoplay" id="autoplay" />
           Autoplay
diff --git a/src/js/Reel.js b/src/js/Reel.js
index d6bd427..6554d21 100644
--- a/src/js/Reel.js
+++ b/src/js/Reel.js
@@ -36,7 +36,7 @@ export default class Reel {
   }
 
   get factor() {
-    return 1 + Math.pow(this.idx / 2, 2);
+    return 1 + Math.pow(this.idx / 1.5, 2);
   }
 
   renderSymbols(nextSymbols) {
diff --git a/src/js/index.js b/src/js/index.js
index 7e9d43e..f9f7452 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -10,4 +10,39 @@ const config = {
   },
 };
 
+let INIT_BALANCE = 500;
+let CURRENT_BET = 0;
+
+const balanceElement = document.querySelector("#balance #bl");
+balanceElement.innerHTML = INIT_BALANCE;
+
+function initValue() {
+  const buttons = document.querySelectorAll("button");
+
+  // Add click event listener to each button
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      console.log("Button clicked:", button.id);
+
+      switch (button.id) {
+        case "bt_10":
+          CURRENT_BET = INIT_BALANCE * 0.1;
+          break;
+        case "bt_25":
+          CURRENT_BET = (INIT_BALANCE * 25) / 100;
+          break;
+        case "bt_50":
+          CURRENT_BET = INIT_BALANCE / 2;
+          break;
+        case "bt_100":
+          CURRENT_BET = INIT_BALANCE;
+          break;
+      }
+      console.log("current bet: ", CURRENT_BET);
+    });
+  });
+}
+
+initValue();
+
 const slot = new Slot(document.getElementById("slot"), config);
