|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"/> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/> |
|
|
<title>MPTrading</title> |
|
|
<style> |
|
|
:root{ |
|
|
--bg:#0b1020; --panel:#111a33; --panel2:#0f1730; --text:#e7eaf3; |
|
|
--muted:#aab2d5; --line:#233055; --green:#22c55e; --red:#ef4444; --yellow:#f59e0b; --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); |
|
|
gap:10px; |
|
|
} |
|
|
.leftHead{ display:flex; align-items:center; gap:12px; min-width: 0; } |
|
|
.title{ font-weight:800; letter-spacing:0.3px; white-space:nowrap; } |
|
|
.status{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap; } |
|
|
.dot{ width:10px; height:10px; border-radius:999px; background:#6b7280; } |
|
|
.dot.connected{ background:var(--green); } |
|
|
.dot.connecting{ background:var(--yellow); } |
|
|
.dot.error{ background:var(--red); } |
|
|
|
|
|
.tabs{ display:flex; gap:8px; flex-wrap:wrap; } |
|
|
.tabBtn{ |
|
|
font:inherit; border-radius:10px; border:1px solid var(--line); |
|
|
background:#0c1430; color:var(--text); padding:8px 10px; cursor:pointer; |
|
|
font-size:13px; |
|
|
} |
|
|
.tabBtn.active{ background:rgba(96,165,250,0.14); border-color:rgba(96,165,250,0.55); } |
|
|
|
|
|
main{ padding:12px; height: calc(100vh - 52px); } |
|
|
.tabPanel{ display:none; height:100%; } |
|
|
.tabPanel.active{ display:block; } |
|
|
|
|
|
.gridMain{ |
|
|
display:grid; |
|
|
grid-template-columns: 1.35fr 1fr; |
|
|
gap:12px; |
|
|
height:100%; |
|
|
min-height:0; |
|
|
} |
|
|
.gridSecondary{ |
|
|
display:grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap:12px; |
|
|
height:100%; |
|
|
min-height:0; |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
.content{ padding:12px; overflow:auto; min-height:0; } |
|
|
|
|
|
.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; } |
|
|
.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:18px; font-weight:800; margin-top:4px; } |
|
|
.kpi .sub{ color:var(--muted); font-size:12px; margin-top:4px; } |
|
|
|
|
|
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } |
|
|
input, button, select{ |
|
|
font:inherit; border-radius:10px; border:1px solid var(--line); |
|
|
background:#0c1430; color:var(--text); padding:10px 12px; |
|
|
} |
|
|
input{ width:130px; } |
|
|
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(255,255,255,0.06); } |
|
|
|
|
|
.warn{ border:1px solid rgba(245,158,11,0.45); background:rgba(245,158,11,0.07); border-radius:10px; padding:10px; } |
|
|
.danger{ border:1px solid rgba(239,68,68,0.55); background:rgba(239,68,68,0.07); border-radius:10px; padding:10px; } |
|
|
.muted{ color:var(--muted); } |
|
|
.small{ font-size:12px; color:var(--muted); } |
|
|
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } |
|
|
|
|
|
canvas{ width:100%; height:240px; background:rgba(0,0,0,0.10); border:1px solid rgba(35,48,85,0.8); border-radius:10px; display:block; } |
|
|
#equityCanvas{ height:240px; } |
|
|
|
|
|
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); vertical-align:top; } |
|
|
th{ color:var(--muted); font-weight:700; } |
|
|
td.right, th.right{ text-align:right; } |
|
|
.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); } |
|
|
|
|
|
@media (max-width: 1000px){ |
|
|
.gridMain{ grid-template-columns: 1fr; height:auto; } |
|
|
.gridSecondary{ grid-template-columns: 1fr; height:auto; } |
|
|
main{ height:auto; } |
|
|
canvas{ height:200px; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header> |
|
|
<div class="leftHead"> |
|
|
<div class="title">MPTrading</div> |
|
|
<div class="tabs"> |
|
|
<button class="tabBtn active" id="tabBtnTrade" type="button">Trading</button> |
|
|
<button class="tabBtn" id="tabBtnStats" type="button">Stats</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="status"> |
|
|
<span id="dot" class="dot"></span> |
|
|
<span id="statusText">Disconnected</span> |
|
|
<span class="small" id="clientIdText"></span> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section class="tabPanel active" id="tabTrade"> |
|
|
<div class="gridMain"> |
|
|
|
|
|
<div class="card"> |
|
|
<h2>Price & Chart</h2> |
|
|
<div class="content"> |
|
|
<div class="grid3"> |
|
|
<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">Indicators</div> |
|
|
<div class="sub"><span class="muted">MA20:</span> <span id="kpiMA20">--</span></div> |
|
|
<div class="sub"><span class="muted">MA50:</span> <span id="kpiMA50">--</span></div> |
|
|
<div class="sub"><span class="muted">RSI14:</span> <span id="kpiRSI">--</span></div> |
|
|
</div> |
|
|
<div class="kpi"> |
|
|
<div class="label">Latest news</div> |
|
|
<div id="newsText" class="sub">No news yet.</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="height:10px"></div> |
|
|
<canvas id="priceCanvas" width="1200" height="440"></canvas> |
|
|
<div class="small muted" style="margin-top:8px;"> |
|
|
Price (white) · MA20 (blue) · MA50 (yellow). |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2>Trading</h2> |
|
|
<div class="content"> |
|
|
<div class="grid2"> |
|
|
<div class="kpi"> |
|
|
<div class="label">Cash / Equity</div> |
|
|
<div class="sub"><span class="muted">Cash:</span> <span id="kpiCash">--</span></div> |
|
|
<div class="sub"><span class="muted">Equity:</span> <span id="kpiEquity">--</span></div> |
|
|
<div class="sub"><span class="muted">ROI:</span> <span id="kpiRoi">--</span></div> |
|
|
</div> |
|
|
|
|
|
<div class="kpi"> |
|
|
<div class="label">Position</div> |
|
|
<div class="sub"><span class="muted">Shares:</span> <span id="kpiPos">--</span></div> |
|
|
<div class="sub"><span class="muted">Avg cost:</span> <span id="kpiAvg">--</span></div> |
|
|
<div class="sub"><span class="muted">Break-even:</span> <span id="kpiBE">--</span></div> |
|
|
<div class="sub"><span class="muted">Unrealized P&L:</span> <span id="kpiUPnL">--</span></div> |
|
|
</div> |
|
|
|
|
|
<div class="kpi"> |
|
|
<div class="label">Margin</div> |
|
|
<div class="sub"><span class="muted">Max leverage:</span> <span class="mono" id="kpiLevMax">--</span></div> |
|
|
<div class="sub"><span class="muted">Used:</span> <span class="mono" id="kpiMarginUsed">--</span></div> |
|
|
<div class="sub"><span class="muted">Utilization:</span> <span class="mono" id="kpiMarginPct">--</span></div> |
|
|
<div class="sub"><span class="muted">Borrow fee (short):</span> <span class="mono" id="kpiBorrowFee">--</span></div> |
|
|
</div> |
|
|
|
|
|
<div class="kpi"> |
|
|
<div class="label">Stops</div> |
|
|
<div class="row" style="margin-top:8px;"> |
|
|
<label class="small muted">Stop</label> |
|
|
<input id="stopLoss" type="number" placeholder="price" step="0.01"/> |
|
|
<label class="small muted">TP</label> |
|
|
<input id="takeProfit" type="number" placeholder="price" step="0.01"/> |
|
|
</div> |
|
|
<div class="row" style="margin-top:8px;"> |
|
|
<button class="secondary" id="setStopsBtn" type="button">Set</button> |
|
|
<button class="secondary" id="clearStopsBtn" type="button">Clear</button> |
|
|
</div> |
|
|
<div class="sub"><span class="muted">Active SL:</span> <span id="kpiSL">--</span> · <span class="muted">TP:</span> <span id="kpiTP">--</span></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="height:12px"></div> |
|
|
|
|
|
<div id="warnBox" class="warn" style="display:none;"> |
|
|
<div class="small"><b>Margin warning</b>: utilization is high. Reduce exposure.</div> |
|
|
</div> |
|
|
<div id="liqBox" class="danger" style="display:none;"> |
|
|
<div class="small"><b>Liquidated</b>: equity is below zero. Trading disabled.</div> |
|
|
</div> |
|
|
|
|
|
<div style="height:12px"></div> |
|
|
|
|
|
<div class="row"> |
|
|
<label class="small muted">Qty</label> |
|
|
<input id="qty" type="number" value="100" min="1" step="1"/> |
|
|
<button class="buy" id="buyBtn" type="button">Buy (B)</button> |
|
|
<button class="sell" id="sellBtn" type="button">Sell (S)</button> |
|
|
<button class="secondary" id="closeBtn" type="button">Close pos (C)</button> |
|
|
<button class="secondary" id="resetBtn" type="button" title="Reset local portfolio only">Reset</button> |
|
|
</div> |
|
|
|
|
|
<div class="small muted" style="margin-top:10px;"> |
|
|
Shorting enabled. Leverage-limited. Keyboard: B/S/C, and 1..5 set quick quantities. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="tabPanel" id="tabStats"> |
|
|
<div class="gridSecondary"> |
|
|
<div class="card"> |
|
|
<h2>Leaderboard</h2> |
|
|
<div class="content"> |
|
|
<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 class="card"> |
|
|
<h2>Equity curve</h2> |
|
|
<div class="content"> |
|
|
<canvas id="equityCanvas" width="1200" height="320"></canvas> |
|
|
<div class="small muted" style="margin-top:8px;">Equity curve (last 200 points).</div> |
|
|
|
|
|
<div style="height:10px"></div> |
|
|
|
|
|
<div class="kpi"> |
|
|
<div class="label">Performance (session)</div> |
|
|
<div class="sub"><span class="muted">Trades:</span> <span id="mTrades">0</span> · <span class="muted">Win rate:</span> <span id="mWinRate">--</span></div> |
|
|
<div class="sub"><span class="muted">Avg win:</span> <span id="mAvgWin">--</span> · <span class="muted">Avg loss:</span> <span id="mAvgLoss">--</span></div> |
|
|
<div class="sub"><span class="muted">Best:</span> <span id="mBest">--</span> · <span class="muted">Worst:</span> <span id="mWorst">--</span></div> |
|
|
<div class="sub"><span class="muted">Sharpe (est):</span> <span id="mSharpe">--</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card" style="grid-column: 1 / -1;"> |
|
|
<h2>Trade history</h2> |
|
|
<div class="content"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Action</th> |
|
|
<th class="right">Qty</th> |
|
|
<th class="right">Price</th> |
|
|
<th class="right">Day</th> |
|
|
<th class="right">Realized P&L</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="tradesBody"> |
|
|
<tr><td colspan="5" class="muted">No trades yet.</td></tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
const INITIAL_CASH = 10000; |
|
|
const COMMISSION = 5; |
|
|
|
|
|
const MAX_LEVERAGE = 3.0; |
|
|
const BORROW_RATE_PER_DAY = 0.0002; |
|
|
|
|
|
const PRICE_WINDOW = 120; |
|
|
const EQUITY_WINDOW = 200; |
|
|
|
|
|
|
|
|
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, |
|
|
upnl: 0, |
|
|
|
|
|
stopLoss: null, |
|
|
takeProfit: null, |
|
|
|
|
|
equityCurve: [], |
|
|
tradeLog: [], |
|
|
openLots: [], |
|
|
|
|
|
leaderboard: [], |
|
|
|
|
|
liquidated: false, |
|
|
liquidationDay: null |
|
|
}; |
|
|
|
|
|
|
|
|
const $ = (id) => document.getElementById(id); |
|
|
|
|
|
function fmtMoney(x){ return Number.isFinite(x) ? x.toLocaleString(undefined,{maximumFractionDigits:0}) : "--"; } |
|
|
function fmtPrice(x){ return Number.isFinite(x) ? x.toFixed(2) : "--"; } |
|
|
function fmtPct(x){ return Number.isFinite(x) ? (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 escapeHtml(s){ |
|
|
return String(s).replace(/[&<>"']/g, (c) => ({ |
|
|
"&":"&","<":"<",">":">",'"':""","'":"'" |
|
|
}[c])); |
|
|
} |
|
|
|
|
|
|
|
|
function setTab(which){ |
|
|
const tTrade = $("tabTrade"), tStats = $("tabStats"); |
|
|
const bTrade = $("tabBtnTrade"), bStats = $("tabBtnStats"); |
|
|
|
|
|
if (which === "trade"){ |
|
|
tTrade.classList.add("active"); |
|
|
tStats.classList.remove("active"); |
|
|
bTrade.classList.add("active"); |
|
|
bStats.classList.remove("active"); |
|
|
} else { |
|
|
tStats.classList.add("active"); |
|
|
tTrade.classList.remove("active"); |
|
|
bStats.classList.add("active"); |
|
|
bTrade.classList.remove("active"); |
|
|
} |
|
|
} |
|
|
$("tabBtnTrade").addEventListener("click", () => setTab("trade")); |
|
|
$("tabBtnStats").addEventListener("click", () => setTab("stats")); |
|
|
|
|
|
|
|
|
function sma(values, period){ |
|
|
if (values.length < period) return null; |
|
|
let sum = 0; |
|
|
for (let i = values.length - period; i < values.length; i++) sum += values[i]; |
|
|
return sum / period; |
|
|
} |
|
|
|
|
|
function rsi14(values, period=14){ |
|
|
if (values.length < period + 1) return null; |
|
|
let gains = 0, losses = 0; |
|
|
for (let i = values.length - period; i < values.length; i++){ |
|
|
const chg = values[i] - values[i - 1]; |
|
|
if (chg >= 0) gains += chg; |
|
|
else losses -= chg; |
|
|
} |
|
|
const avgGain = gains / period; |
|
|
const avgLoss = losses / period; |
|
|
if (avgLoss === 0) return 100; |
|
|
const rs = avgGain / avgLoss; |
|
|
return 100 - (100 / (1 + rs)); |
|
|
} |
|
|
|
|
|
|
|
|
function drawLineChart(canvas, series, opts){ |
|
|
const ctx = canvas.getContext("2d"); |
|
|
const w = canvas.width, h = canvas.height; |
|
|
ctx.clearRect(0,0,w,h); |
|
|
ctx.fillStyle = "rgba(0,0,0,0.08)"; |
|
|
ctx.fillRect(0,0,w,h); |
|
|
if (!series || series.length < 2) return; |
|
|
|
|
|
const pad = 30; |
|
|
const xs = series.map(p => p.x); |
|
|
const ys = series.map(p => p.y); |
|
|
|
|
|
const xmin = Math.min(...xs), xmax = Math.max(...xs); |
|
|
const ymin = Math.min(...ys), ymax = Math.max(...ys); |
|
|
const yr = (ymax - ymin) || 1; |
|
|
const xr = (xmax - xmin) || 1; |
|
|
|
|
|
ctx.strokeStyle = "rgba(170,178,213,0.12)"; |
|
|
ctx.lineWidth = 1; |
|
|
for (let i=0;i<=5;i++){ |
|
|
const yy = pad + (h-2*pad) * (i/5); |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(pad, yy); |
|
|
ctx.lineTo(w-pad, yy); |
|
|
ctx.stroke(); |
|
|
} |
|
|
|
|
|
const toX = (x) => pad + (w-2*pad) * ((x - xmin)/xr); |
|
|
const toY = (y) => h - pad - (h-2*pad) * ((y - ymin)/yr); |
|
|
|
|
|
ctx.strokeStyle = opts.color || "#ffffff"; |
|
|
ctx.lineWidth = opts.width || 2; |
|
|
ctx.beginPath(); |
|
|
for (let i=0;i<series.length;i++){ |
|
|
const px = toX(series[i].x); |
|
|
const py = toY(series[i].y); |
|
|
if (i===0) ctx.moveTo(px,py); |
|
|
else ctx.lineTo(px,py); |
|
|
} |
|
|
ctx.stroke(); |
|
|
|
|
|
if (opts.overlays){ |
|
|
for (const ov of opts.overlays){ |
|
|
if (!ov.series || ov.series.length < 2) continue; |
|
|
ctx.strokeStyle = ov.color || "#60a5fa"; |
|
|
ctx.lineWidth = ov.width || 2; |
|
|
ctx.beginPath(); |
|
|
for (let i=0;i<ov.series.length;i++){ |
|
|
const px = toX(ov.series[i].x); |
|
|
const py = toY(ov.series[i].y); |
|
|
if (i===0) ctx.moveTo(px,py); |
|
|
else ctx.lineTo(px,py); |
|
|
} |
|
|
ctx.stroke(); |
|
|
} |
|
|
} |
|
|
|
|
|
ctx.fillStyle = "rgba(170,178,213,0.8)"; |
|
|
ctx.font = "18px ui-monospace, Menlo, Consolas"; |
|
|
ctx.fillText(opts.label || "", pad, 22); |
|
|
} |
|
|
|
|
|
|
|
|
function exposure(){ return Math.abs(state.shares) * state.price; } |
|
|
function requiredMargin(){ return exposure() / MAX_LEVERAGE; } |
|
|
function marginUtil(){ if (state.equity <= 0) return 1; return requiredMargin() / state.equity; } |
|
|
|
|
|
function applyBorrowFeeOneDay(){ |
|
|
if (state.shares < 0){ |
|
|
const fee = BORROW_RATE_PER_DAY * exposure(); |
|
|
state.cash -= fee; |
|
|
} |
|
|
} |
|
|
|
|
|
function breakEvenPrice(){ |
|
|
if (state.shares === 0) return null; |
|
|
return state.avgCost; |
|
|
} |
|
|
|
|
|
function recalc(){ |
|
|
applyBorrowFeeOneDay(); |
|
|
|
|
|
state.upnl = (state.price - state.avgCost) * state.shares; |
|
|
state.equity = state.cash + state.shares * state.price; |
|
|
state.roi = ((state.equity - INITIAL_CASH) / INITIAL_CASH) * 100; |
|
|
|
|
|
if (!state.liquidated && state.equity <= 0){ |
|
|
state.liquidated = true; |
|
|
state.liquidationDay = state.day; |
|
|
|
|
|
$("liqBox").style.display = "block"; |
|
|
$("buyBtn").disabled = true; |
|
|
$("sellBtn").disabled = true; |
|
|
$("closeBtn").disabled = true; |
|
|
$("setStopsBtn").disabled = true; |
|
|
$("clearStopsBtn").disabled = true; |
|
|
$("qty").disabled = true; |
|
|
$("stopLoss").disabled = true; |
|
|
$("takeProfit").disabled = true; |
|
|
} |
|
|
|
|
|
$("warnBox").style.display = (!state.liquidated && marginUtil() >= 0.80) ? "block" : "none"; |
|
|
|
|
|
state.equityCurve.push({ day: state.day, equity: state.equity }); |
|
|
if (state.equityCurve.length > 5000) state.equityCurve.shift(); |
|
|
|
|
|
if (!state.liquidated && state.shares !== 0){ |
|
|
if (state.stopLoss !== null){ |
|
|
if (state.shares > 0 && state.price <= state.stopLoss) closePosition("STOP"); |
|
|
if (state.shares < 0 && state.price >= state.stopLoss) closePosition("STOP"); |
|
|
} |
|
|
if (state.takeProfit !== null){ |
|
|
if (state.shares > 0 && state.price >= state.takeProfit) closePosition("TP"); |
|
|
if (state.shares < 0 && state.price <= state.takeProfit) closePosition("TP"); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addLot(qty, price){ state.openLots.push({ qty, price }); } |
|
|
|
|
|
function consumeLots(closeQty, closePrice){ |
|
|
let remaining = Math.abs(closeQty); |
|
|
let realized = 0; |
|
|
|
|
|
for (let i=0; i<state.openLots.length && remaining>0; ){ |
|
|
const lot = state.openLots[i]; |
|
|
const lotAbs = Math.abs(lot.qty); |
|
|
const take = Math.min(lotAbs, remaining); |
|
|
|
|
|
if (lot.qty > 0) realized += (closePrice - lot.price) * take; |
|
|
else realized += (lot.price - closePrice) * take; |
|
|
|
|
|
const newAbs = lotAbs - take; |
|
|
if (newAbs === 0) state.openLots.splice(i,1); |
|
|
else { |
|
|
lot.qty = (lot.qty > 0) ? newAbs : -newAbs; |
|
|
i++; |
|
|
} |
|
|
remaining -= take; |
|
|
} |
|
|
return realized; |
|
|
} |
|
|
|
|
|
|
|
|
function canPlaceTrade(tradeShares){ |
|
|
if (state.liquidated) return false; |
|
|
if (!Number.isFinite(state.price) || state.price <= 0) return false; |
|
|
|
|
|
const px = state.price; |
|
|
const newShares = state.shares + tradeShares; |
|
|
const newExposure = Math.abs(newShares) * px; |
|
|
const req = newExposure / MAX_LEVERAGE; |
|
|
|
|
|
if (state.equity <= 0) return false; |
|
|
if (state.equity < req) return false; |
|
|
return true; |
|
|
} |
|
|
|
|
|
function trade(action, qty){ |
|
|
qty = Math.floor(Number(qty)); |
|
|
if (!Number.isFinite(qty) || qty <= 0) return; |
|
|
if (state.liquidated) return; |
|
|
|
|
|
const tradeShares = (action === "BUY") ? qty : -qty; |
|
|
if (!canPlaceTrade(tradeShares)) return; |
|
|
|
|
|
const px = state.price; |
|
|
|
|
|
const cashDelta = -(tradeShares * px) - COMMISSION; |
|
|
|
|
|
let realized = 0; |
|
|
const prevShares = state.shares; |
|
|
const newShares = prevShares + tradeShares; |
|
|
const prevDir = Math.sign(prevShares); |
|
|
const tradeDir = Math.sign(tradeShares); |
|
|
|
|
|
if (prevShares !== 0 && prevDir !== tradeDir){ |
|
|
realized = consumeLots(tradeShares, px); |
|
|
} |
|
|
|
|
|
state.cash += cashDelta; |
|
|
|
|
|
if (newShares === 0){ |
|
|
state.shares = 0; |
|
|
state.avgCost = 0; |
|
|
state.openLots = []; |
|
|
} else if (prevShares === 0){ |
|
|
state.shares = newShares; |
|
|
state.avgCost = px; |
|
|
addLot(tradeShares, px); |
|
|
} else { |
|
|
const sameDir = (prevShares > 0 && newShares > 0) || (prevShares < 0 && newShares < 0); |
|
|
|
|
|
if (sameDir && prevDir === tradeDir){ |
|
|
addLot(tradeShares, px); |
|
|
const totAbs = state.openLots.reduce((s,l)=>s+Math.abs(l.qty),0); |
|
|
const wavg = state.openLots.reduce((s,l)=>s+Math.abs(l.qty)*l.price,0) / (totAbs || 1); |
|
|
state.shares = newShares; |
|
|
state.avgCost = wavg; |
|
|
} else if (!sameDir){ |
|
|
state.shares = newShares; |
|
|
|
|
|
if (Math.sign(newShares) === 0){ |
|
|
state.avgCost = 0; |
|
|
state.openLots = []; |
|
|
} else if (Math.sign(newShares) !== prevDir){ |
|
|
state.openLots = [{ qty: newShares, price: px }]; |
|
|
state.avgCost = px; |
|
|
} else { |
|
|
const totAbs = state.openLots.reduce((s,l)=>s+Math.abs(l.qty),0); |
|
|
const wavg = totAbs ? (state.openLots.reduce((s,l)=>s+Math.abs(l.qty)*l.price,0) / totAbs) : 0; |
|
|
state.avgCost = wavg; |
|
|
} |
|
|
} else { |
|
|
state.shares = newShares; |
|
|
} |
|
|
} |
|
|
|
|
|
state.tradeLog.push({ action, qty, price: px, day: state.day, realized: realized - COMMISSION }); |
|
|
if (state.tradeLog.length > 5000) state.tradeLog.shift(); |
|
|
|
|
|
recalc(); |
|
|
renderAll(); |
|
|
} |
|
|
|
|
|
function closePosition(reason="CLOSE"){ |
|
|
if (state.liquidated) return; |
|
|
if (state.shares === 0) return; |
|
|
|
|
|
const qty = Math.abs(state.shares); |
|
|
const action = (state.shares > 0) ? "SELL" : "BUY"; |
|
|
trade(action, qty); |
|
|
const last = state.tradeLog[state.tradeLog.length - 1]; |
|
|
if (last) last.action = reason; |
|
|
} |
|
|
|
|
|
|
|
|
function renderLeaderboard(){ |
|
|
const lb = $("lbBody"); |
|
|
lb.innerHTML = ""; |
|
|
if (!state.leaderboard || !state.leaderboard.length){ |
|
|
lb.innerHTML = `<tr><td colspan="3" class="muted">Waiting for ticks…</td></tr>`; |
|
|
return; |
|
|
} |
|
|
for (const p of state.leaderboard.slice(0,50)){ |
|
|
const tr = document.createElement("tr"); |
|
|
const roiStyle = 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" ${roiStyle}>${fmtPct(p.roi)}</td> |
|
|
`; |
|
|
lb.appendChild(tr); |
|
|
} |
|
|
} |
|
|
|
|
|
function renderTrades(){ |
|
|
const tb = $("tradesBody"); |
|
|
tb.innerHTML = ""; |
|
|
if (!state.tradeLog.length){ |
|
|
tb.innerHTML = `<tr><td colspan="5" class="muted">No trades yet.</td></tr>`; |
|
|
return; |
|
|
} |
|
|
for (const t of state.tradeLog.slice().reverse().slice(0,250)){ |
|
|
const tr = document.createElement("tr"); |
|
|
const side = (t.action === "BUY") ? `<span class="pill buy">BUY</span>` : |
|
|
(t.action === "SELL") ? `<span class="pill sell">SELL</span>` : |
|
|
`<span class="pill">${escapeHtml(t.action)}</span>`; |
|
|
const pnlStyle = t.realized >= 0 ? `style="color:var(--green)"` : `style="color:var(--red)"`; |
|
|
tr.innerHTML = ` |
|
|
<td>${side}</td> |
|
|
<td class="right mono">${t.qty}</td> |
|
|
<td class="right mono">${fmtPrice(t.price)}</td> |
|
|
<td class="right mono">${t.day}</td> |
|
|
<td class="right mono" ${pnlStyle}>${fmtMoney(t.realized)}</td> |
|
|
`; |
|
|
tb.appendChild(tr); |
|
|
} |
|
|
} |
|
|
|
|
|
function renderMetrics(){ |
|
|
const realized = state.tradeLog.map(t => t.realized); |
|
|
const n = realized.length; |
|
|
$("mTrades").textContent = n; |
|
|
|
|
|
if (!n){ |
|
|
$("mWinRate").textContent = "--"; |
|
|
$("mAvgWin").textContent = "--"; |
|
|
$("mAvgLoss").textContent = "--"; |
|
|
$("mBest").textContent = "--"; |
|
|
$("mWorst").textContent = "--"; |
|
|
$("mSharpe").textContent = "--"; |
|
|
return; |
|
|
} |
|
|
|
|
|
const wins = realized.filter(x => x > 0); |
|
|
const losses = realized.filter(x => x < 0); |
|
|
|
|
|
const winRate = (wins.length / n) * 100; |
|
|
const avgWin = wins.length ? wins.reduce((a,b)=>a+b,0)/wins.length : 0; |
|
|
const avgLoss = losses.length ? losses.reduce((a,b)=>a+b,0)/losses.length : 0; |
|
|
const best = Math.max(...realized); |
|
|
const worst = Math.min(...realized); |
|
|
|
|
|
$("mWinRate").textContent = fmtPct(winRate); |
|
|
$("mAvgWin").textContent = fmtMoney(avgWin); |
|
|
$("mAvgLoss").textContent = fmtMoney(avgLoss); |
|
|
$("mBest").textContent = fmtMoney(best); |
|
|
$("mWorst").textContent = fmtMoney(worst); |
|
|
|
|
|
const eq = state.equityCurve.slice(-300).map(p => p.equity); |
|
|
if (eq.length < 3){ $("mSharpe").textContent = "--"; return; } |
|
|
|
|
|
const rets = []; |
|
|
for (let i=1;i<eq.length;i++){ |
|
|
const r = (eq[i] - eq[i-1]) / Math.max(1e-9, eq[i-1]); |
|
|
rets.push(r); |
|
|
} |
|
|
const mean = rets.reduce((a,b)=>a+b,0)/rets.length; |
|
|
const varr = rets.reduce((s,x)=>s+(x-mean)*(x-mean),0)/Math.max(1, rets.length-1); |
|
|
const sd = Math.sqrt(varr); |
|
|
const sharpe = sd === 0 ? 0 : (mean / sd) * Math.sqrt(252); |
|
|
$("mSharpe").textContent = sharpe.toFixed(2); |
|
|
} |
|
|
|
|
|
function renderKPIs(){ |
|
|
$("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.style.color = (state.roi >= 0) ? "var(--green)" : "var(--red)"; |
|
|
|
|
|
$("kpiPos").textContent = state.shares.toLocaleString(); |
|
|
$("kpiAvg").textContent = fmtPrice(state.avgCost); |
|
|
|
|
|
const be = breakEvenPrice(); |
|
|
$("kpiBE").textContent = (be === null) ? "--" : fmtPrice(be); |
|
|
|
|
|
const up = $("kpiUPnL"); |
|
|
up.textContent = fmtMoney(state.upnl); |
|
|
up.style.color = (state.upnl >= 0) ? "var(--green)" : "var(--red)"; |
|
|
|
|
|
$("kpiLevMax").textContent = MAX_LEVERAGE.toFixed(1) + "x"; |
|
|
$("kpiMarginUsed").textContent = fmtMoney(requiredMargin()); |
|
|
$("kpiMarginPct").textContent = fmtPct(marginUtil() * 100); |
|
|
|
|
|
const borrowFee = (state.shares < 0) ? (BORROW_RATE_PER_DAY * exposure()) : 0; |
|
|
$("kpiBorrowFee").textContent = fmtMoney(borrowFee) + " / day"; |
|
|
|
|
|
$("kpiSL").textContent = (state.stopLoss === null) ? "--" : fmtPrice(state.stopLoss); |
|
|
$("kpiTP").textContent = (state.takeProfit === null) ? "--" : fmtPrice(state.takeProfit); |
|
|
} |
|
|
|
|
|
function renderCharts(){ |
|
|
if (!state.market.length) return; |
|
|
|
|
|
const closes = state.market.map(p => p.close); |
|
|
|
|
|
const start = Math.max(0, state.day - PRICE_WINDOW + 1); |
|
|
const end = state.day + 1; |
|
|
const windowData = state.market.slice(start, end); |
|
|
|
|
|
const priceSeries = windowData.map(p => ({ x: p.i, y: p.close })); |
|
|
|
|
|
const ma20 = []; |
|
|
const ma50 = []; |
|
|
for (let i=start;i<end;i++){ |
|
|
const slice = closes.slice(0, i+1); |
|
|
const s20 = sma(slice, 20); |
|
|
const s50 = sma(slice, 50); |
|
|
if (s20 !== null) ma20.push({ x: i, y: s20 }); |
|
|
if (s50 !== null) ma50.push({ x: i, y: s50 }); |
|
|
} |
|
|
|
|
|
drawLineChart($("priceCanvas"), priceSeries, { |
|
|
label: "PRICE", |
|
|
color: "#ffffff", |
|
|
overlays: [ |
|
|
{ series: ma20, color: "#60a5fa", width: 2 }, |
|
|
{ series: ma50, color: "#f59e0b", width: 2 } |
|
|
] |
|
|
}); |
|
|
|
|
|
const eqWin = state.equityCurve.slice(-EQUITY_WINDOW); |
|
|
const eqSeries = eqWin.map(p => ({ x: p.day, y: p.equity })); |
|
|
drawLineChart($("equityCanvas"), eqSeries, { label: "EQUITY", color: "#22c55e", overlays: [] }); |
|
|
|
|
|
const slice = closes.slice(0, state.day+1); |
|
|
const s20 = sma(slice, 20); |
|
|
const s50 = sma(slice, 50); |
|
|
const rsi = rsi14(slice, 14); |
|
|
$("kpiMA20").textContent = (s20 === null) ? "--" : fmtPrice(s20); |
|
|
$("kpiMA50").textContent = (s50 === null) ? "--" : fmtPrice(s50); |
|
|
$("kpiRSI").textContent = (rsi === null) ? "--" : rsi.toFixed(1); |
|
|
} |
|
|
|
|
|
function renderAll(){ |
|
|
renderKPIs(); |
|
|
renderCharts(); |
|
|
renderLeaderboard(); |
|
|
renderTrades(); |
|
|
renderMetrics(); |
|
|
} |
|
|
|
|
|
|
|
|
$("setStopsBtn").addEventListener("click", () => { |
|
|
if (state.liquidated) return; |
|
|
const sl = ($("stopLoss").value || "").trim(); |
|
|
const tp = ($("takeProfit").value || "").trim(); |
|
|
state.stopLoss = (sl === "") ? null : Number(sl); |
|
|
state.takeProfit = (tp === "") ? null : Number(tp); |
|
|
renderKPIs(); |
|
|
}); |
|
|
|
|
|
$("clearStopsBtn").addEventListener("click", () => { |
|
|
state.stopLoss = null; |
|
|
state.takeProfit = null; |
|
|
$("stopLoss").value = ""; |
|
|
$("takeProfit").value = ""; |
|
|
renderKPIs(); |
|
|
}); |
|
|
|
|
|
|
|
|
function qtyVal(){ return Number($("qty").value); } |
|
|
|
|
|
$("buyBtn").addEventListener("click", () => trade("BUY", qtyVal())); |
|
|
$("sellBtn").addEventListener("click", () => trade("SELL", qtyVal())); |
|
|
$("closeBtn").addEventListener("click", () => closePosition("CLOSE")); |
|
|
|
|
|
$("resetBtn").addEventListener("click", () => { |
|
|
state.cash = INITIAL_CASH; |
|
|
state.shares = 0; |
|
|
state.avgCost = 0; |
|
|
state.equity = INITIAL_CASH; |
|
|
state.roi = 0; |
|
|
state.upnl = 0; |
|
|
state.stopLoss = null; |
|
|
state.takeProfit = null; |
|
|
state.tradeLog = []; |
|
|
state.openLots = []; |
|
|
state.equityCurve = []; |
|
|
state.liquidated = false; |
|
|
state.liquidationDay = null; |
|
|
|
|
|
$("liqBox").style.display = "none"; |
|
|
$("buyBtn").disabled = false; |
|
|
$("sellBtn").disabled = false; |
|
|
$("closeBtn").disabled = false; |
|
|
$("setStopsBtn").disabled = false; |
|
|
$("clearStopsBtn").disabled = false; |
|
|
$("qty").disabled = false; |
|
|
$("stopLoss").disabled = false; |
|
|
$("takeProfit").disabled = false; |
|
|
|
|
|
$("stopLoss").value = ""; |
|
|
$("takeProfit").value = ""; |
|
|
|
|
|
recalc(); |
|
|
renderAll(); |
|
|
}); |
|
|
|
|
|
document.addEventListener("keydown", (e) => { |
|
|
if (e.target && (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")) return; |
|
|
const k = e.key.toLowerCase(); |
|
|
if (k === "b") trade("BUY", qtyVal()); |
|
|
if (k === "s") trade("SELL", qtyVal()); |
|
|
if (k === "c") closePosition("CLOSE"); |
|
|
if (k === "1") $("qty").value = "10"; |
|
|
if (k === "2") $("qty").value = "50"; |
|
|
if (k === "3") $("qty").value = "100"; |
|
|
if (k === "4") $("qty").value = "250"; |
|
|
if (k === "5") $("qty").value = "500"; |
|
|
}); |
|
|
|
|
|
$("qty").addEventListener("input", () => { |
|
|
let v = Math.floor(Number($("qty").value)); |
|
|
if (!Number.isFinite(v) || v < 1) v = 1; |
|
|
if (v > 1000000) v = 1000000; |
|
|
$("qty").value = String(v); |
|
|
}); |
|
|
|
|
|
|
|
|
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.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 : []; |
|
|
state.day = Number(msg.payload?.startDay ?? 0); |
|
|
state.price = Number(state.market?.[state.day]?.close ?? 0); |
|
|
|
|
|
recalc(); |
|
|
setStatus("CONNECTED"); |
|
|
renderAll(); |
|
|
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; |
|
|
|
|
|
recalc(); |
|
|
renderAll(); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (msg.type === "NEWS") { |
|
|
const txt = msg.payload?.text ?? ""; |
|
|
const day = msg.payload?.day ?? state.day; |
|
|
$("newsText").textContent = txt ? (`[Day ${day}] ${txt}`) : "No news yet."; |
|
|
} |
|
|
}; |
|
|
|
|
|
ws.onerror = () => setStatus("ERROR"); |
|
|
ws.onclose = () => setStatus("DISCONNECTED"); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
if (state.liquidated) return; |
|
|
if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return; |
|
|
|
|
|
state.ws.send(JSON.stringify({ |
|
|
type: "UPDATE_EQUITY", |
|
|
payload: { name: state.clientId, equity: state.equity, roi: state.roi } |
|
|
})); |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
setStatus("DISCONNECTED"); |
|
|
renderAll(); |
|
|
connectWS(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
