Spaces:

Almaatla
/

MPTrading

Sleeping

App Files Files Community

Almaatla commited on Dec 24, 2025

Commit

e1bf013

verified ·

1 Parent(s): 4cf70f7

Update index.html

Browse files

Files changed (1) hide show

index.html +380 -447

index.html CHANGED Viewed

@@ -1,467 +1,400 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Market Simulator v2025</title>
-  <!-- Tailwind CSS -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- React Dependencies -->
-  <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
-  <!-- Recharts Dependencies -->
-  <script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
-  <script src="https://unpkg.com/recharts@1.8.5/umd/Recharts.min.js"></script>
-  <!-- Lucide Icons -->
-  <script src="https://unpkg.com/lucide@0.294.0/dist/umd/lucide.min.js"></script>
-  <!-- Babel -->
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <style>
-    body { background-color: #030712; color: #f3f4f6; overflow: hidden; margin: 0; }
-    ::-webkit-scrollbar { width: 6px; height: 6px; }
-    ::-webkit-scrollbar-track { background: #1f2937; }
-    ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }
-    ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
   </style>
 </head>
 <body>
-  <div id="root"></div>
-  <script type="text/babel">
-    // --- SAFE GLOBALS EXTRACTION ---
-    const { useState, useEffect, useReducer, createContext, useContext, useRef, useMemo } = React;
-    const Recharts = window.Recharts;
-    const { ComposedChart, Line, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, ReferenceLine, ReferenceDot } = Recharts;
-    // Icons rendered via lucide.createElement(name)
-    const Lucide = window.lucide;
-    const Icon = ({ name, size = 16, className = "" }) => {
-      if (!Lucide || !Lucide.createElement || !Lucide.icons) return <span />;
-      // lucide icons keys are PascalCase in the bundle (e.g., "Activity", "MousePointer")
-      const iconNode = Lucide.icons[name];
-      if (!iconNode) return <span />;
-      const el = Lucide.createElement(iconNode, {
-        width: size,
-        height: size,
-        class: className
-      });
-      return <span dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
-    };
-    // Use PascalCase names here:
-    const Activity = (p) => <Icon name="Activity" {...p} />;
-    const Trophy = (p) => <Icon name="Trophy" {...p} />;
-    const MousePointer = (p) => <Icon name="MousePointer" {...p} />;
-    const Pencil = (p) => <Icon name="Pencil" {...p} />;
-    const Minus = (p) => <Icon name="Minus" {...p} />;
-    const Trash2 = (p) => <Icon name="Trash2" {...p} />;
-    // --- CONSTANTS ---
-    const INITIAL_CASH = 10000;
-    const COMMISSION = 5;
-    // --- GAME STATE REDUCER ---
-    const createLog = (day, message, type = "INFO") => ({
-      id: Math.random().toString(36).substr(2, 9),
-      day,
-      message,
-      type,
-      timestamp: Date.now()
-    });
-    const initialState = {
-      market: [],
-      currentDay: 0,
-      orders: [],
-      position: { shares: 0, avgCost: 0 },
-      account: { cash: INITIAL_CASH, equity: INITIAL_CASH, realizedPnL: 0 },
-      drawings: [],
-      logs: [],
-      leaderboard: [],
-      connected: false,           // CHANGED: used for UI + websocket state
-      wsStatus: "DISCONNECTED"    // CHANGED: DISCONNECTED | CONNECTING | CONNECTED | ERROR
-    };
-    const gameReducer = (state, action) => {
-      switch (action.type) {
-        case "INIT_MARKET":
-          return {
-            ...state,
-            market: action.payload.market || [],
-            connected: true,
-            wsStatus: "CONNECTED", // CHANGED
-            logs: [...state.logs, createLog(0, "Connected to Market Server")]
-          };
-        case "WS_STATUS": // CHANGED
-          return { ...state, wsStatus: action.payload, connected: action.payload === "CONNECTED" };
-        case "TICK": {
-          const dayIdx = action.payload.day;
-          if (!state.market?.[dayIdx]) return state;
-          const currentPrice = state.market[dayIdx].close;
-          const newEquity = state.account.cash + state.position.shares * currentPrice;
-          return {
-            ...state,
-            currentDay: dayIdx,
-            leaderboard: action.payload.leaderboard || [],
-            account: { ...state.account, equity: newEquity }
-          };
-        }
-        case "PLACE_ORDER": {
-          const { side, shares } = action.payload;
-          const price = state.market[state.currentDay]?.close;
-          if (!price || shares <= 0) return state;
-          const cost = shares * price;
-          let { cash, realizedPnL } = state.account;
-          let { shares: posShares, avgCost } = state.position;
-          if (side === "BUY") {
-            if (cash < cost + COMMISSION) return state;
-            cash -= (cost + COMMISSION);
-            const totalVal = posShares * avgCost + cost;
-            posShares += shares;
-            avgCost = posShares > 0 ? totalVal / posShares : 0;
-          } else {
-            if (posShares < shares) return state;
-            const revenue = cost - COMMISSION;
-            const profit = (price - avgCost) * shares;
-            cash += revenue;
-            posShares -= shares;
-            realizedPnL += profit;
-            if (posShares === 0) avgCost = 0;
-          }
-          const newEquity = cash + posShares * price;
-          return {
-            ...state,
-            orders: [
-              ...state.orders,
-              {
-                id: Date.now(),
-                side,
-                shares,
-                execDay: state.currentDay,
-                price,
-                status: "FILLED"
-              }
-            ],
-            account: { cash, equity: newEquity, realizedPnL },
-            position: { shares: posShares, avgCost },
-            logs: [...state.logs, createLog(state.currentDay, `${side} ${shares} @ ${price.toFixed(2)}`, "TRADE")]
-          };
-        }
-        case "ADD_DRAWING":
-          return { ...state, drawings: [...state.drawings, action.payload] };
-        case "REMOVE_DRAWING":
-          return { ...state, drawings: state.drawings.filter(d => d.id !== action.payload) };
-        default:
-          return state;
       }
     };
-    // --- CONTEXT ---
-    const GameContext = createContext(null);
-    const GameProvider = ({ children }) => {
-      const [state, dispatch] = useReducer(gameReducer, initialState);
-      const socketRef = useRef(null);
-      const clientId = useRef("user_" + Math.random().toString(36).substr(2, 5));
-      const stateRef = useRef(state);
-      useEffect(() => { stateRef.current = state; }, [state]);
-      useEffect(() => {
-        // --- FIX: correct ws/wss URL formatting for HF Spaces ---
-        const isLocalhost =
-          window.location.hostname === "localhost" ||
-          window.location.hostname === "127.0.0.1";
-        const protocol = isLocalhost ? "ws" : "wss";
-        const host = window.location.host;
-        // CHANGED: must include :// and correct path: /ws/{client_id}
-        const wsUrl = `${protocol}://${host}/ws/${clientId.current}`;
-        console.log("Attempting WS Connection:", wsUrl);
-        dispatch({ type: "WS_STATUS", payload: "CONNECTING" }); // CHANGED
-        const ws = new WebSocket(wsUrl);
-        socketRef.current = ws;
-        ws.onopen = () => {
-          console.log("WS Connected");
-          // Backend sends INIT immediately after connect; keep UI in CONNECTING until INIT
-          // dispatch({ type: "WS_STATUS", payload: "CONNECTED" });
-        };
-        ws.onerror = (e) => {
-          console.error("WS Error", e);
-          dispatch({ type: "WS_STATUS", payload: "ERROR" }); // CHANGED
-        };
-        ws.onclose = () => {
-          dispatch({ type: "WS_STATUS", payload: "DISCONNECTED" }); // CHANGED
-        };
-        ws.onmessage = (event) => {
-          try {
-            const msg = JSON.parse(event.data);
-            // CHANGED: exact message types expected from backend
-            if (msg.type === "INIT") {
-              dispatch({ type: "INIT_MARKET", payload: msg.payload });
-            } else if (msg.type === "TICK") {
-              dispatch({ type: "TICK", payload: msg.payload });
-            }
-          } catch (e) {
-            console.error("Parse Error", e);
-          }
-        };
-        // Heartbeat: report equity/roi to server
-        const hb = setInterval(() => {
-          if (ws.readyState === WebSocket.OPEN) {
-            const eq = stateRef.current.account.equity;
-            const roi = ((eq - INITIAL_CASH) / INITIAL_CASH) * 100;
-            ws.send(JSON.stringify({
-              type: "UPDATE_EQUITY", // must match backend
-              payload: {
-                name: clientId.current,
-                equity: eq,
-                roi: roi
-              }
-            }));
-          }
-        }, 1000);
-        return () => {
-          clearInterval(hb);
-          try { ws.close(); } catch (_) {}
-        };
-      }, []);
-      return (
-        <GameContext.Provider value={{ state, dispatch }}>
-          {children}
-        </GameContext.Provider>
-      );
-    };
-    // --- COMPONENTS ---
-    const ChartArea = () => {
-      const { state, dispatch } = useContext(GameContext);
-      const { market, currentDay, drawings, orders } = state;
-      const [mode, setMode] = useState("NONE");
-      const [tempPoint, setTempPoint] = useState(null);
-      if (!ComposedChart) return <div className="p-10 text-red-500">Error: Recharts library failed to load.</div>;
-      if (!market || market.length === 0) {
-        return <div className="flex h-full items-center justify-center text-blue-400 animate-pulse">Connecting to Server...</div>;
       }
-      const visibleData = market.slice(Math.max(0, currentDay - 60), currentDay + 1);
-      const handleChartClick = (e) => {
-        if (!e || !e.activePayload) return;
-        const p = { x: e.activePayload[0].payload.i, y: e.activePayload[0].payload.close };
-        if (mode === "HORIZ") {
-          dispatch({ type: "ADD_DRAWING", payload: { id: Date.now(), type: "HORIZ", points: [p], color: "#d8b4fe" } });
-          setMode("NONE");
-        } else if (mode === "TREND") {
-          if (!tempPoint) setTempPoint(p);
-          else {
-            dispatch({ type: "ADD_DRAWING", payload: { id: Date.now(), type: "TREND", points: [tempPoint, p], color: "#38bdf8" } });
-            setTempPoint(null);
-            setMode("NONE");
-          }
-        }
-      };
-      return (
-        <div className="relative w-full h-full bg-gray-900 border border-gray-800 rounded overflow-hidden group">
-          <div className="absolute top-2 left-2 z-20 flex gap-1 bg-black/60 backdrop-blur p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
-            <button onClick={() => setMode("NONE")} className={`p-1 rounded ${mode === "NONE" ? "bg-blue-600" : "hover:bg-gray-700"}`}><MousePointer size={14} /></button>
-            <button onClick={() => setMode("TREND")} className={`p-1 rounded ${mode === "TREND" ? "bg-blue-600" : "hover:bg-gray-700"}`}><Pencil size={14} /></button>
-            <button onClick={() => setMode("HORIZ")} className={`p-1 rounded ${mode === "HORIZ" ? "bg-blue-600" : "hover:bg-gray-700"}`}><Minus size={14} /></button>
-            <button onClick={() => drawings.forEach(d => dispatch({ type: "REMOVE_DRAWING", payload: d.id }))} className="p-1 rounded hover:bg-red-900/50 text-red-400"><Trash2 size={14} /></button>
-          </div>
-          <ResponsiveContainer width="100%" height="100%">
-            <ComposedChart data={visibleData} onClick={handleChartClick} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
-              <XAxis dataKey="i" hide domain={["dataMin", "dataMax"]} />
-              <YAxis orientation="right" domain={["auto", "auto"]} stroke="#4b5563" tick={{ fontSize: 10 }} />
-              <Tooltip
-                contentStyle={{ backgroundColor: "#111827", borderColor: "#374151" }}
-                itemStyle={{ color: "#fff" }}
-                labelStyle={{ display: "none" }}
-                formatter={(v) => (typeof v === "number" ? v.toFixed(2) : v)}
-                isAnimationActive={false}
-              />
-              <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
-              <Bar dataKey="close" barSize={3} fill="#3b82f6" isAnimationActive={false} />
-              {drawings.map(d => {
-                if (d.type === "HORIZ") return <ReferenceLine key={d.id} y={d.points[0].y} stroke={d.color} />;
-                if (d.type === "TREND") return <ReferenceLine key={d.id} segment={[
-                  { x: d.points[0].x, y: d.points[0].y },
-                  { x: d.points[1].x, y: d.points[1].y }
-                ]} stroke={d.color} />;
-                return null;
-              })}
-              {orders
-                .filter(o => o.execDay >= (visibleData[0]?.i ?? 0))
-                .map(o => (
-                  <ReferenceDot
-                    key={o.id}
-                    x={o.execDay}
-                    y={o.price}
-                    r={4}
-                    fill={o.side === "BUY" ? "#22c55e" : "#ef4444"}
-                    stroke="none"
-                  />
-                ))}
-            </ComposedChart>
-          </ResponsiveContainer>
-        </div>
-      );
-    };
-    const Dashboard = () => {
-      const { state, dispatch } = useContext(GameContext);
-      const [size, setSize] = useState(100);
-      const price = state.market[state.currentDay]?.close || 0;
-      return (
-        <div className="w-64 bg-gray-900 border-l border-gray-800 flex flex-col">
-          <div className="p-4 border-b border-gray-800">
-            <div className="text-2xl font-bold text-white mb-4 text-center tracking-wider">{price.toFixed(2)}</div>
-            <div className="flex gap-2 mb-4">
-              <button
-                onClick={() => dispatch({ type: "PLACE_ORDER", payload: { side: "BUY", shares: parseInt(size) } })}
-                className="flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-3 rounded transition"
-              >
-                BUY
-              </button>
-              <button
-                onClick={() => dispatch({ type: "PLACE_ORDER", payload: { side: "SELL", shares: parseInt(size) } })}
-                className="flex-1 bg-red-600 hover:bg-red-500 text-white font-bold py-3 rounded transition"
-              >
-                SELL
-              </button>
-            </div>
-            <div className="mb-4">
-              <label className="text-xs text-gray-500 font-bold uppercase block mb-1">Quantity</label>
-              <input
-                type="number"
-                value={size}
-                onChange={(e) => setSize(e.target.value)}
-                className="w-full bg-gray-800 border border-gray-700 text-white p-2 rounded text-center font-mono"
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-2 text-xs">
-              <div className="text-gray-500">Cash</div><div className="text-right text-gray-300">{state.account.cash.toFixed(0)}</div>
-              <div className="text-gray-500">Equity</div><div className="text-right text-blue-400 font-bold">{state.account.equity.toFixed(0)}</div>
-            </div>
-          </div>
-          <div className="flex-1 flex flex-col min-h-0">
-            <div className="p-2 bg-gray-800/50 text-xs font-bold text-gray-400 uppercase flex items-center gap-2">
-              <Trophy size={12} className="text-yellow-500" />
-              Live Rankings
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              {(state.leaderboard || [])
-                .slice()
-                .sort((a, b) => b.equity - a.equity)
-                .map((p, i) => (
-                  <div key={i} className="p-2 border-b border-gray-800 flex justify-between items-center text-xs">
-                    <span className="text-gray-300 truncate w-24">{p.name}</span>
-                    <div className="text-right">
-                      <div className="text-white font-mono">{(p.equity / 1000).toFixed(1)}k</div>
-                      <div className={p.roi >= 0 ? "text-green-500" : "text-red-500"}>{p.roi.toFixed(1)}%</div>
-                    </div>
-                  </div>
-                ))}
-            </div>
-          </div>
-        </div>
-      );
-    };
-    const App = () => {
-      const { state } = useContext(GameContext);
-      const dotColor =
-        state.wsStatus === "CONNECTED" ? "bg-green-500" :
-        state.wsStatus === "CONNECTING" ? "bg-yellow-500" :
-        state.wsStatus === "ERROR" ? "bg-red-500" :
-        "bg-gray-500";
-      const label =
-        state.wsStatus === "CONNECTED" ? "Connected" :
-        state.wsStatus === "CONNECTING" ? "Connecting" :
-        state.wsStatus === "ERROR" ? "Error" :
-        "Disconnected";
-      return (
-        <div className="flex flex-col h-screen text-gray-100 font-sans">
-          <header className="h-10 bg-gray-950 border-b border-gray-800 flex items-center px-4 justify-between">
-            <div className="flex items-center gap-2 font-bold text-blue-500">
-              <Activity size={16} />
-              MarketSim
-            </div>
-            {/* CHANGED: reflect actual WS status */}
-            <div className="text-xs flex items-center gap-2">
-              <span className={`w-2 h-2 ${dotColor} rounded-full`} />
-              <span className="text-gray-300">{label}</span>
-            </div>
-          </header>
-          <div className="flex-1 flex overflow-hidden">
-            <div className="flex-1 p-1 bg-gray-950 flex flex-col">
-              <ChartArea />
-            </div>
-            <Dashboard />
-          </div>
-        </div>
-      );
     };
-    const Root = () => (
-      <GameProvider>
-        <App />
-      </GameProvider>
-    );
-    const root = ReactDOM.createRoot(document.getElementById("root"));
-    root.render(<Root />);
-  </script>
 </body>
 </html>

+<!doctype html>
 <html lang="en">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>MPTrading (Simple)</title>
   <style>
+    :root{
+      --bg:#0b1020; --panel:#111a33; --panel2:#0f1730; --text:#e7eaf3;
+      --muted:#aab2d5; --line:#233055; --green:#22c55e; --red:#ef4444; --blue:#60a5fa;
+    }
+    *{ box-sizing:border-box; }
+    body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
+    header{ height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,0.15); }
+    header .title{ font-weight:700; letter-spacing:0.3px; }
+    header .status{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
+    .dot{ width:10px; height:10px; border-radius:999px; background:#6b7280; }
+    .dot.connected{ background:var(--green); }
+    .dot.connecting{ background:#f59e0b; }
+    .dot.error{ background:var(--red); }
+    main{ display:grid; grid-template-columns: 1.2fr 1fr; gap:12px; padding:12px; height: calc(100vh - 52px); }
+    .card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
+    .card h2{ margin:0; padding:10px 12px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid var(--line); background:var(--panel2); }
+    .card .content{ padding:12px; overflow:auto; min-height:0; }
+    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
+    .kpi{ padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,0.02); }
+    .kpi .label{ color:var(--muted); font-size:12px; }
+    .kpi .value{ font-size:20px; font-weight:700; margin-top:4px; }
+    .kpi .sub{ color:var(--muted); font-size:12px; margin-top:4px; }
+    .value.green{ color:var(--green); }
+    .value.red{ color:var(--red); }
+    .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
+    input, button{
+      font:inherit; border-radius:10px; border:1px solid var(--line);
+      background:#0c1430; color:var(--text); padding:10px 12px;
+    }
+    input{ width:120px; }
+    button{ cursor:pointer; }
+    button.buy{ border-color:rgba(34,197,94,0.5); }
+    button.sell{ border-color:rgba(239,68,68,0.5); }
+    button.buy:hover{ background:rgba(34,197,94,0.12); }
+    button.sell:hover{ background:rgba(239,68,68,0.12); }
+    button.secondary:hover{ background:rgba(96,165,250,0.12); }
+    table{ width:100%; border-collapse:collapse; font-size:13px; }
+    th, td{ text-align:left; padding:8px 6px; border-bottom:1px solid rgba(35,48,85,0.6); }
+    th{ color:var(--muted); font-weight:600; }
+    td.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
+    .pill{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
+    .pill.buy{ color:var(--green); border-color:rgba(34,197,94,0.5); }
+    .pill.sell{ color:var(--red); border-color:rgba(239,68,68,0.5); }
+    .muted{ color:var(--muted); }
+    .small{ font-size:12px; color:var(--muted); }
+    .right{ text-align:right; }
   </style>
 </head>
 <body>
+<header>
+  <div class="title">MPTrading (Simple)</div>
+  <div class="status">
+    <span id="dot" class="dot"></span>
+    <span id="statusText">Disconnected</span>
+    <span class="small" id="clientIdText"></span>
+  </div>
+</header>
+<main>
+  <!-- Left: Trading / KPIs -->
+  <section class="card">
+    <h2>Account & Trading</h2>
+    <div class="content">
+      <div class="grid2">
+        <div class="kpi">
+          <div class="label">Day / Price</div>
+          <div class="value" id="kpiPrice">--</div>
+          <div class="sub"><span class="muted">Day:</span> <span id="kpiDay">--</span></div>
+        </div>
+        <div class="kpi">
+          <div class="label">Equity</div>
+          <div class="value" id="kpiEquity">--</div>
+          <div class="sub"><span class="muted">ROI:</span> <span id="kpiRoi">--</span></div>
+        </div>
+        <div class="kpi">
+          <div class="label">Cash</div>
+          <div class="value" id="kpiCash">--</div>
+          <div class="sub muted">Commission: 5 per trade</div>
+        </div>
+        <div class="kpi">
+          <div class="label">Position</div>
+          <div class="value" id="kpiPos">--</div>
+          <div class="sub"><span class="muted">Avg cost:</span> <span id="kpiAvg">--</span></div>
+        </div>
+      </div>
+      <div style="height:12px"></div>
+      <div class="row">
+        <label class="small">Qty</label>
+        <input id="qty" type="number" value="100" min="1" step="1"/>
+        <button class="buy" id="buyBtn">Buy</button>
+        <button class="sell" id="sellBtn">Sell</button>
+        <button class="secondary" id="resetBtn" title="Reset local portfolio only">Reset local</button>
+      </div>
+      <div style="height:12px"></div>
+      <div class="small muted">
+        Notes: This portfolio is computed locally in the browser and reported to the server each second via <code>UPDATE_EQUITY</code>.
+      </div>
+    </div>
+  </section>
+  <!-- Right: Orders / Leaderboard -->
+  <section class="card">
+    <h2>Orders & Leaderboard</h2>
+    <div class="content" style="display:grid; grid-template-rows: 1fr 1fr; gap:12px; min-height:0;">
+      <div class="card" style="margin:0; min-height:0;">
+        <h2 style="border-bottom:1px solid var(--line);">Current orders</h2>
+        <div class="content" style="min-height:0;">
+          <table>
+            <thead>
+              <tr>
+                <th>Side</th>
+                <th class="right">Qty</th>
+                <th class="right">Price</th>
+                <th class="right">Day</th>
+              </tr>
+            </thead>
+            <tbody id="ordersBody">
+              <tr><td colspan="4" class="muted">No orders yet.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card" style="margin:0; min-height:0;">
+        <h2 style="border-bottom:1px solid var(--line);">Leaderboard</h2>
+        <div class="content" style="min-height:0;">
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th class="right">Equity</th>
+                <th class="right">ROI %</th>
+              </tr>
+            </thead>
+            <tbody id="lbBody">
+              <tr><td colspan="3" class="muted">Waiting for ticks…</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+<script>
+  // ---- Protocol: INIT / TICK / UPDATE_EQUITY (from your FastAPI backend) ----
+  // WebSocket endpoint: /ws/{client_id}
+  // INIT payload: { market: [{i, close}, ...], startDay }
+  // TICK payload: { day, leaderboard: [{name, equity, roi}, ...] }
+  // Client sends UPDATE_EQUITY payload: { name, equity, roi }
+  const INITIAL_CASH = 10000;
+  const COMMISSION = 5;
+  const state = {
+    ws: null,
+    wsStatus: "DISCONNECTED",
+    clientId: "user_" + Math.random().toString(36).slice(2, 7),
+    market: [],
+    day: 0,
+    price: 0,
+    cash: INITIAL_CASH,
+    shares: 0,
+    avgCost: 0,
+    equity: INITIAL_CASH,
+    roi: 0,
+    orders: [],
+    leaderboard: []
+  };
+  // ---- UI helpers ----
+  const $ = (id) => document.getElementById(id);
+  function fmtMoney(x) {
+    if (!Number.isFinite(x)) return "--";
+    return x.toLocaleString(undefined, { maximumFractionDigits: 0 });
+  }
+  function fmtPrice(x) {
+    if (!Number.isFinite(x)) return "--";
+    return x.toFixed(2);
+  }
+  function fmtPct(x) {
+    if (!Number.isFinite(x)) return "--";
+    return x.toFixed(2) + "%";
+  }
+  function setStatus(status) {
+    state.wsStatus = status;
+    const dot = $("dot");
+    const txt = $("statusText");
+    dot.className = "dot";
+    if (status === "CONNECTED") dot.classList.add("connected");
+    else if (status === "CONNECTING") dot.classList.add("connecting");
+    else if (status === "ERROR") dot.classList.add("error");
+    txt.textContent = status[0] + status.slice(1).toLowerCase();
+    $("clientIdText").textContent = "· " + state.clientId;
+  }
+  function recalcEquity() {
+    state.equity = state.cash + state.shares * state.price;
+    state.roi = ((state.equity - INITIAL_CASH) / INITIAL_CASH) * 100;
+  }
+  function render() {
+    $("kpiDay").textContent = state.day;
+    $("kpiPrice").textContent = fmtPrice(state.price);
+    $("kpiCash").textContent = fmtMoney(state.cash);
+    $("kpiEquity").textContent = fmtMoney(state.equity);
+    const roiEl = $("kpiRoi");
+    roiEl.textContent = fmtPct(state.roi);
+    roiEl.className = (state.roi >= 0) ? "value green" : "value red";
+    $("kpiPos").textContent = state.shares.toLocaleString();
+    $("kpiAvg").textContent = fmtPrice(state.avgCost);
+    // Orders
+    const ob = $("ordersBody");
+    ob.innerHTML = "";
+    if (!state.orders.length) {
+      const tr = document.createElement("tr");
+      tr.innerHTML = `<td colspan="4" class="muted">No orders yet.</td>`;
+      ob.appendChild(tr);
+    } else {
+      for (const o of state.orders.slice().reverse().slice(0, 50)) {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `
+          <td><span class="pill ${o.side === "BUY" ? "buy" : "sell"}">${o.side}</span></td>
+          <td class="right mono">${o.qty}</td>
+          <td class="right mono">${fmtPrice(o.price)}</td>
+          <td class="right mono">${o.day}</td>
+        `;
+        ob.appendChild(tr);
       }
+    }
+    // Leaderboard
+    const lb = $("lbBody");
+    lb.innerHTML = "";
+    if (!state.leaderboard || !state.leaderboard.length) {
+      const tr = document.createElement("tr");
+      tr.innerHTML = `<td colspan="3" class="muted">Waiting for ticks…</td>`;
+      lb.appendChild(tr);
+    } else {
+      for (const p of state.leaderboard.slice(0, 50)) {
+        const tr = document.createElement("tr");
+        const roiClass = p.roi >= 0 ? "style='color:var(--green)'" : "style='color:var(--red)'";
+        tr.innerHTML = `
+          <td>${escapeHtml(p.name)}</td>
+          <td class="right mono">${fmtMoney(p.equity)}</td>
+          <td class="right mono" ${roiClass}>${fmtPct(p.roi)}</td>
+        `;
+        lb.appendChild(tr);
+      }
+    }
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, (c) => ({
+      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;"
+    }[c]));
+  }
+  // ---- Trading actions (local only) ----
+  function placeOrder(side, qty) {
+    qty = Math.floor(Number(qty));
+    if (!Number.isFinite(qty) || qty <= 0) return;
+    if (!Number.isFinite(state.price) || state.price <= 0) return;
+    const cost = qty * state.price;
+    if (side === "BUY") {
+      if (state.cash < cost + COMMISSION) return;
+      // Update avg cost
+      const totalVal = state.shares * state.avgCost + cost;
+      state.shares += qty;
+      state.avgCost = state.shares > 0 ? (totalVal / state.shares) : 0;
+      state.cash -= (cost + COMMISSION);
+    } else {
+      if (state.shares < qty) return;
+      state.shares -= qty;
+      state.cash += (cost - COMMISSION);
+      if (state.shares === 0) state.avgCost = 0;
+    }
+    state.orders.push({ side, qty, price: state.price, day: state.day, ts: Date.now() });
+    recalcEquity();
+    render();
+  }
+  function resetLocal() {
+    state.cash = INITIAL_CASH;
+    state.shares = 0;
+    state.avgCost = 0;
+    state.orders = [];
+    recalcEquity();
+    render();
+  }
+  // ---- WebSocket ----
+  function connectWS() {
+    const isLocalhost = (location.hostname === "localhost" || location.hostname === "127.0.0.1");
+    const protocol = isLocalhost ? "ws" : "wss";
+    const wsUrl = `${protocol}://${location.host}/ws/${state.clientId}`;
+    setStatus("CONNECTING");
+    const ws = new WebSocket(wsUrl);
+    state.ws = ws;
+    ws.onopen = () => {
+      // Server sends INIT immediately; status will flip to CONNECTED once INIT arrives.
+      // Keep it CONNECTING here.
     };
+    ws.onmessage = (ev) => {
+      let msg;
+      try { msg = JSON.parse(ev.data); } catch { return; }
+      if (msg.type === "INIT") {
+        state.market = Array.isArray(msg.payload?.market) ? msg.payload.market : [];
+        // day stays at 0 until first tick, but initialize price if available
+        state.day = Number(msg.payload?.startDay ?? 0);
+        state.price = Number(state.market?.[state.day]?.close ?? 0);
+        recalcEquity();
+        setStatus("CONNECTED");
+        render();
+        return;
       }
+      if (msg.type === "TICK") {
+        const d = Number(msg.payload?.day);
+        if (Number.isFinite(d)) state.day = d;
+        const px = Number(state.market?.[state.day]?.close ?? state.price);
+        if (Number.isFinite(px)) state.price = px;
+        state.leaderboard = Array.isArray(msg.payload?.leaderboard) ? msg.payload.leaderboard : state.leaderboard;
+        recalcEquity();
+        render();
+        return;
+      }
     };
+    ws.onerror = () => setStatus("ERROR");
+    ws.onclose = () => setStatus("DISCONNECTED");
+  }
+  // Report equity every second (if connected)
+  setInterval(() => {
+    if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+    // send local equity to server leaderboard
+    const payload = {
+      type: "UPDATE_EQUITY",
+      payload: {
+        name: state.clientId,
+        equity: state.equity,
+        roi: state.roi
+      }
+    };
+    state.ws.send(JSON.stringify(payload));
+  }, 1000);
+  // ---- Bind UI ----
+  $("buyBtn").addEventListener("click", () => placeOrder("BUY", $("qty").value));
+  $("sellBtn").addEventListener("click", () => placeOrder("SELL", $("qty").value));
+  $("resetBtn").addEventListener("click", resetLocal);
+  // Start
+  setStatus("DISCONNECTED");
+  render();
+  connectWS();
+</script>
 </body>
 </html>