From 1a714fd69d46012ee8ea691d0265f83c361a7ef5 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Fri, 20 Feb 2026 09:36:55 -0500
Subject: [PATCH] fix credits display

---
 html/index.html                   |  1 +
 html/js/network/socketHandlers.js | 34 +++++++++++++++----------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/html/index.html b/html/index.html
index f888ecb..146c4c1 100644
--- a/html/index.html
+++ b/html/index.html
@@ -89,6 +89,7 @@
         <div class="status">
             <div id="blockHeight">Block Height: <span id="heightValue">Loading...</span></div>
             <div id="connectionStatus">Status: <span id="statusValue">Connecting...</span></div>
+            <div id="creditsDisplay" style="display:none; margin-top:4px; font-size:13px; font-family:monospace; color:#0f0; background:#001a00; padding:4px 8px; border:1px solid #0a0; border-radius:4px; font-weight:bold;"></div>
             <button id="startButton" style="background: #0a5c0a; color: #ff0; border: 2px solid #0f0; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; display: none;">
                 🎮 START GAME
             </button>
diff --git a/html/js/network/socketHandlers.js b/html/js/network/socketHandlers.js
index db945f1..657bcf8 100644
--- a/html/js/network/socketHandlers.js
+++ b/html/js/network/socketHandlers.js
@@ -228,26 +228,24 @@ const SocketHandlers = {
         if (creditsPerGame && creditsPerGame > 0) {
             SocketHandlers._creditsPerGame = creditsPerGame;
         }
-        
-        let el = document.getElementById('creditsDisplay');
-        if (!el) {
-            // Create a small unobtrusive badge in header if not present
-            const header = document.getElementById('header') || document.body;
-            el = document.createElement('div');
-            el.id = 'creditsDisplay';
-            el.style.cssText = 'position:absolute;top:4px;right:8px;font-size:12px;font-family:monospace;color:#0af;background:#111;padding:2px 6px;border:1px solid #044;border-radius:4px;';
-            header.appendChild(el);
-        }
-        
+
+        var el = document.getElementById('creditsDisplay');
+        if (!el) return;
+
         // Calculate games remaining
-        const perGame = SocketHandlers._creditsPerGame || 1;
-        const gamesRemaining = Math.floor(balance / perGame);
-        
-        // Show credits and games remaining
-        if (gamesRemaining > 0) {
-            el.textContent = 'Credits: ' + balance + ' (' + gamesRemaining + ' game' + (gamesRemaining !== 1 ? 's' : '') + ')';
+        var perGame = SocketHandlers._creditsPerGame || 1;
+        var gamesRemaining = Math.floor(balance / perGame);
+
+        // Show/hide based on balance
+        if (balance > 0) {
+            el.style.display = 'block';
+            if (gamesRemaining > 0) {
+                el.textContent = 'Credits: ' + balance + ' (' + gamesRemaining + ' game' + (gamesRemaining !== 1 ? 's' : '') + ')';
+            } else {
+                el.textContent = 'Credits: ' + balance;
+            }
         } else {
-            el.textContent = 'Credits: ' + balance;
+            el.style.display = 'none';
         }
     },