Fix issue with slots not reducing value / center casino games / update user currency without refresh

files/assets/css/casino.css

@@ -1,6 +1,7 @@
 .casino-games {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: center;
   justify-content: space-between;
 }
 

files/assets/js/casino.js

@@ -1,3 +1,14 @@
+// Shared
+function updatePlayerCoins(updated) {
+  if (updated.coins) {
+    document.getElementById('user-coins-amount').innerText = updated.coins;
+  }
+  
+  if (updated.procoins) {
+    document.getElementById('user-bux-amount').innerText = updated.procoins;
+  }
+}
+
 // Slots
 function pullSlots() {
   const wager = document.getElementById("casinoSlotsBet").value;
@@ -35,7 +46,7 @@ function handleSlotsResponse(xhr) {
   slotsResult.classList.remove("text-success", "text-danger");
 
   if (succeeded) {
-    const { game_state } = response;
+    const { game_state, gambler } = response;
     const state = JSON.parse(game_state);
     const reels = Array.from(document.querySelectorAll(".reel"));
     const symbols = state.symbols.split(",");
@@ -56,6 +67,8 @@ function handleSlotsResponse(xhr) {
     } else if (state.text.includes("Lost")) {
       slotsResult.classList.add("text-danger");
     }
+
+    updatePlayerCoins(gambler);
   } else {
     slotsResult.style.visibility = "visible";
     slotsResult.innerText = response.error;
@@ -318,6 +331,10 @@ function handleBlackjackResponse(xhr) {
     if (response.game_state) {
       updateBlackjack(response.game_state);
     }
+
+    if (response.gambler) {
+      updatePlayerCoins(response.gambler);
+    }
   } else {
     blackjackResult.style.visibility = "visible";
     blackjackResult.innerText = response.error;

files/helpers/slots.py

@@ -35,6 +35,7 @@ def casino_slot_pull(gambler, wager_value, currency):
         payout = determine_payout()
         reward = wager_value * payout
 
+        currency_value = getattr(gambler, currency_prop, 0)
         setattr(gambler, currency_prop, currency_value + reward)
         gambler.winnings += reward
 

files/routes/casino.py

@@ -36,7 +36,7 @@ def pull_slots(v):
     success, game_state = casino_slot_pull(v, wager, currency)
 
     if success:
-        return {"game_state": game_state}
+        return {"game_state": game_state, "gambler": { "coins": v.coins, "procoins": v.procoins }}
     else:
         return {"error": "Wager must be more than 100 {currency}."}
 
@@ -76,9 +76,9 @@ def deal_blackjack(v):
 
         if game and game.active:
             safe_state = get_safe_game_state(v)
-            return {"game_state": safe_state}
+            return {"game_state": safe_state, "gambler": { "coins": v.coins, "procoins": v.procoins }}
         else:
-            return {"game_state": game_state}
+            return {"game_state": game_state, "gambler": { "coins": v.coins, "procoins": v.procoins }}
 
     else:
         return {"error": "Wager must be more than 100 {currency}."}
@@ -113,6 +113,6 @@ def player_took_blackjack_action(v):
         state = game_state
 
     if was_successful:
-        return {"active": True, "game_state": state}
+        return {"active": True, "game_state": state, "gambler": { "coins": v.coins, "procoins": v.procoins }}
     else:
         return {"active": False, "game_state": None}

files/templates/casino.html

@@ -3,8 +3,9 @@
 <script src="/assets/js/casino.js?v=2001"></script>
 
 <!-- New -->
-<!-- Slots -->
-<div id="slots-block" class="casino-block">
+<div class="casino-games">
+  <!-- Slots -->
+  <div id="slots-block" class="casino-block">
     <div class="casino-block-title">
       Slots
       <hr style="flex: 1; margin-left: 1rem" />
@@ -25,7 +26,9 @@
                 <img src="/i/rDrama/coins.webp?v=3009" alt="coin" />
               </div>
             </div>
-          <div class="casino-slots-outcome" id="casinoSlotsResult">&nbsp;</div>
+            <div class="casino-slots-outcome" id="casinoSlotsResult">
+              &nbsp;
+            </div>
           </div>
         </div>
         <!-- Bet -->
@@ -112,10 +115,10 @@
         </div>
       </div>
     </div>
-</div>
+  </div>
 
-<!-- Blackjack -->
-<div id="blackjack-block" class="casino-block">
+  <!-- Blackjack -->
+  <div id="blackjack-block" class="casino-block">
     <div class="casino-block-title">
       Blackjack
       <hr style="flex: 1; margin-left: 1rem" />
@@ -156,7 +159,6 @@
                 class="casino-blackjack-outcome"
               ></div>
             </div>
-          
           </div>
         </div>
         <!-- Bet -->
@@ -245,7 +247,7 @@
         </div>
       </div>
     </div>
+  </div>
 </div>
-
 <div class="casino-lottery">{% include "lottery.html" %}</div>
 {% endblock %}