Spaces:

Almaatla
/

MPTrading

Sleeping

App Files Files Community

Almaatla commited on Dec 24, 2025

Commit

13e4f52

verified ·

1 Parent(s): bef72d9

Create index.html

Browse files

Files changed (1) hide show

index.html +447 -0

index.html ADDED Viewed

	@@ -0,0 +1,447 @@

+<!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-react@0.294.0/dist/umd/lucide-react.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;
+    const Lucide = window.lucideReact;
+    const Activity = Lucide.Activity || (() => <span />);
+    const Trophy = Lucide.Trophy || (() => <span />);
+    const MousePointer = Lucide.MousePointer || (() => <span />);
+    const Pencil = Lucide.Pencil || (() => <span />);
+    const Minus = Lucide.Minus || (() => <span />);
+    const Trash2 = Lucide.Trash2 || (() => <span />);
+    // --- 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>