Update js/ui.js

js/ui.js

@@ -1,23 +1,71 @@
-// Update Price Text
+import { state } from './state.js';
+
+// --- FOOTPRINT / DELTA LOGIC ---
+let volBuy = 0;
+let volSell = 0;
+
+export function updateDelta(qty, isMaker) {
+    // Binance API: If isMaker (m) = true, it means Taker SOLD.
+    if(isMaker) volSell += parseFloat(qty); 
+    else volBuy += parseFloat(qty);
+}
+
+export function initFootprint() {
+    const box = document.getElementById('footprint-box');
+
+    // Every 3 seconds, push a new bar
+    setInterval(() => {
+        if (volBuy === 0 && volSell === 0) return; // No data, do nothing
+
+        const total = volBuy + volSell;
+        const buyPct = (volBuy / total) * 100;
+        const sellPct = (volSell / total) * 100;
+
+        const bar = document.createElement('div');
+        // Tailwind classes for a vertical stacked bar
+        bar.className = "w-2 h-full border-r border-gray-300 shrink-0 flex flex-col-reverse";
+        
+        bar.innerHTML = `
+            <div style="height:${buyPct}%" class="bg-[#bef264]" title="Buy: ${volBuy.toFixed(2)}"></div>
+            <div style="height:${sellPct}%" class="bg-[#fb7185]" title="Sell: ${volSell.toFixed(2)}"></div>
+        `;
+        
+        box.appendChild(bar);
+
+        // Keep list clean (remove old bars)
+        if(box.children.length > 50) {
+            box.removeChild(box.firstChild);
+        }
+
+        // Reset counters for next 3s interval
+        volBuy = 0;
+        volSell = 0;
+    }, 3000); 
+}
+
+// --- EXISTING UI FUNCTIONS (Keep these) ---
+
 export function updatePrice(price) {
-    document.getElementById('price-ticker').innerText = parseFloat(price).toFixed(2);
+    const el = document.getElementById('price-ticker');
+    if(el) el.innerText = parseFloat(price).toFixed(2);
 }
 
-// Timezone
 export function detectTimezone() {
-    document.getElementById('timezone-label').innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const el = document.getElementById('timezone-label');
+    if(el) el.innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
 
-// Status
 export function setStatus(text, type) {
     const el = document.getElementById('status-text');
+    if(!el) return;
     el.innerText = text;
     el.className = type === 'live' ? "text-green-600 blink" : "text-orange-500 font-bold";
 }
 
-// DOM Renderer
 export function renderDom(bids, asks) {
     const domBox = document.getElementById('dom-box');
+    if(!domBox) return;
+
     const cleanAsks = asks.slice(0, 8).reverse();
     const cleanBids = bids.slice(0, 8);
     
@@ -41,15 +89,16 @@ function makeRow(price, qty, type) {
             </div>`;
 }
 
-// Bubble Renderer
 export function spawnBubble(qty, isMaker) {
     const box = document.getElementById('bubble-box');
+    if(!box) return;
+
     const b = document.createElement('div');
     b.className = 'bubble';
     const size = Math.min(qty * 50 + 20, 100);
     b.style.width = size + 'px'; b.style.height = size + 'px';
     b.style.left = Math.random() * 80 + '%';
-    b.style.backgroundColor = isMaker ? '#fb7185' : '#bef264'; // Maker true = Sell
+    b.style.backgroundColor = isMaker ? '#fb7185' : '#bef264';
     b.innerHTML = `<span>${parseFloat(qty).toFixed(3)}</span>`;
     box.appendChild(b);
     setTimeout(() => b.remove(), 4000);