From 675caf220ff82503e4cabb6c00260ca55767fc15 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Wed, 24 Dec 2025 19:31:46 -0500
Subject: [PATCH] fix payment modal

---
 html/index.html         | 15 ++++-----------
 html/js/ui/paymentUI.js |  1 +
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/html/index.html b/html/index.html
index 2997e30..bd260e4 100644
--- a/html/index.html
+++ b/html/index.html
@@ -110,22 +110,15 @@
         </div>
         
         <!-- Payment System UI -->
-        <div id="payment-ui" class="payment-section" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2000; background: rgba(0,20,0,0.95); border: 2px solid #0f0; padding: 20px; color: #0f0; min-width: 400px; box-shadow: 0 0 20px rgba(0,255,0,0.2);">
+        <div id="payment-ui" class="payment-section" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2000; background: rgba(0,20,0,0.95); border: 2px solid #0f0; padding: 20px; color: #0f0; min-width: 400px; max-width: 500px; box-shadow: 0 0 20px rgba(0,255,0,0.2);">
             <div class="payment-header">
-                <strong>🎮 Game Mode Selection</strong>
+                <strong>🎮 Choose How to Play</strong>
                 <button id="close-payment" style="float: right; background: #500; color: #f00; border: 1px solid #f00; padding: 2px 6px; cursor: pointer;">✕</button>
             </div>
             
+            <!-- Dynamic game mode options populated by PaymentUI.js -->
             <div class="game-modes" style="margin: 15px 0;">
-                <div class="mode-option" data-mode="FREE" style="padding: 10px; margin: 5px 0; border: 1px solid #555; cursor: pointer; background: rgba(0,0,0,0.5);">
-                    <strong>🆓 FREE PLAY</strong> - No cost, no rewards
-                </div>
-                <div class="mode-option" data-mode="PAID_SINGLE" style="padding: 10px; margin: 5px 0; border: 1px solid #555; cursor: pointer; background: rgba(0,0,0,0.5);">
-                    <strong>💰 PAID SINGLE</strong> - 0.005 WOW per game, 2x payout for escape, 3x with treasure
-                </div>
-                <div class="mode-option" data-mode="PAID_CREDITS" style="padding: 10px; margin: 5px 0; border: 1px solid #555; cursor: pointer; background: rgba(0,0,0,0.5);">
-                    <strong>🎫 CREDITS PACKAGE</strong> - 0.03 WOW for 10 games, no payouts
-                </div>
+                <div style="color: #888; text-align: center; padding: 20px;">Loading payment options...</div>
             </div>
             
             <div id="credits-display" style="margin: 10px 0; display: none;">
diff --git a/html/js/ui/paymentUI.js b/html/js/ui/paymentUI.js
index 72016c1..dfedd27 100644
--- a/html/js/ui/paymentUI.js
+++ b/html/js/ui/paymentUI.js
@@ -344,6 +344,7 @@ const PaymentUI = {
     },
     
     show: function() {
+        this.render(); // Ensure options are up-to-date with current config
         $('#payment-ui').show();
         $('.game-modes').show();
         $('#payment-details').hide();