Update js/socket.js

js/socket.js

@@ -1,6 +1,7 @@
 import { state } from './state.js';
 import { getSeries } from './chart.js';
-import { updatePrice, renderDom, spawnBubble, setStatus } from './ui.js';
+// IMPORANT: Add updateDelta here
+import { updatePrice, renderDom, spawnBubble, setStatus, updateDelta } from './ui.js';
 
 export function startSocket() {
     if(state.isReplay) return;
@@ -15,7 +16,7 @@ export function startSocket() {
 
         const data = JSON.parse(e.data);
 
-        // Kline (Candle)
+        // Kline
         if(data.e === 'kline') {
             const k = data.k;
             const candle = { 
@@ -29,9 +30,14 @@ export function startSocket() {
             updatePrice(candle.close);
         }
 
-        // Trade Bubble
+        // Trades (This is where we fix the footprint)
         if(data.e === 'aggTrade') {
             const qty = parseFloat(data.q);
+            
+            // 1. Update Delta/Footprint Numbers
+            updateDelta(qty, data.m);
+
+            // 2. Spawn Bubble (only big ones to reduce lag)
             if(qty > 0.02) spawnBubble(qty, data.m);
         }