-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
272 lines (255 loc) · 17.3 KB
/
test.html
File metadata and controls
272 lines (255 loc) · 17.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<title>Strategy Arena - Monte Carlo Trading Strategy Stress Test Simulator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
<meta name="description" content="Strategy Arena is a Monte Carlo trading strategy stress-testing simulator that compares survivability, drawdown, expectancy, risk of ruin, and regime adaptability across multiple trading strategies in real simulated market conditions.">
<meta name="author" content="Michael Schwartz">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Strategy Arena - Monte Carlo Trading Strategy Stress Test Simulator">
<meta name="theme-color" content="#13171f">
<meta name="apple-mobile-web-app-title" content="Strategy Arena - Monte Carlo Trading Strategy Stress Test Simulator">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="./index.html">
<meta name="msapplication-navbutton-color" content="#13171f">
<meta property="og:url" content="https://michaelsboost.com/StrategyArena" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Strategy Arena - Monte Carlo Trading Strategy Stress Test Simulator" />
<meta property="og:description" content="Strategy Arena is a Monte Carlo trading strategy stress-testing simulator that compares survivability, drawdown, expectancy, risk of ruin, and regime adaptability across multiple trading strategies in real simulated market conditions." />
<link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
<link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
<link rel="apple-touch-icon" href="imgs/logo.svg">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div x-data="arenaApp()" x-init="init()" class="antialiased max-w-7xl mx-auto px-3 md:px-6 py-2">
<!-- ============================================================
STICKY HEADER / COMMAND MENU
============================================================
This header remains fixed at the top during scroll.
Contains: App title, subtitle, and action buttons.
All buttons trigger methods defined in the arenaApp component.
-->
<div class="sticky top-0 z-50 backdrop-blur-md bg-black/70 border-b border-orange-500/30 rounded-b-2xl mb-6 p-3 flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-col">
<h1 class="text-2xl md:text-3xl font-black tracking-wider bg-gradient-to-r from-orange-400 to-amber-500 bg-clip-text text-transparent">⚔️ STRATEGY ARENA</h1>
<p class="text-xs text-orange-300/70 font-mono">Monte Carlo Strategy Stress Testing · No Mock Data</p>
</div>
<div class="flex flex-wrap gap-2">
<!-- Primary action: run the full Monte Carlo simulation across all enabled strategies and regimes -->
<button @click="runFullArena()" class="bg-orange-600 hover:bg-orange-500 px-4 py-2 rounded-xl font-bold flex items-center gap-2 shadow-xl transition-all">
🏟️ ENTER THE ARENA
</button>
<!-- Share button: uses native Web Share API if available, falls back to clipboard -->
<button @click="shareApp()" class="bg-gray-800 hover:bg-gray-700 px-3 py-2 rounded-xl text-sm font-semibold">🔗 Share App</button>
<!-- Donation link - opens in new tab for user support -->
<a href="https://michaelsboost.com/donate/" target="_blank" class="bg-amber-800/80 hover:bg-amber-700 px-3 py-3 rounded-xl text-sm font-semibold flex gap-1">💛 Donate</a>
<!-- Reset button: restores all strategies and regimes to default settings -->
<button @click="resetAllToDefault()" class="bg-zinc-800 hover:bg-zinc-700 px-3 py-2 rounded-xl text-sm">⟳ Reset</button>
</div>
</div>
<!-- ============================================================
SIMULATION MODE & CONTROLS PANEL
============================================================
Allows user to select simulation intensity:
- Quick: 100 trades, 250 paths (fast, low accuracy)
- Standard: 300 trades, 1000 paths (balanced)
- Deep: 500 trades, 2500 paths (heavy, most accurate but slower)
Educational note: Win rate is always an OUTPUT from simulation,
never a user input - this ensures realistic stress testing.
-->
<div class="arena-card rounded-2xl p-4 mb-6 flex flex-wrap justify-between items-center gap-3">
<div class="flex gap-3 items-center flex-wrap">
<select x-model="simMode" class="bg-black/60 border border-orange-500/40 rounded-lg px-3 py-2 text-sm">
<option value="quick">⚡ QUICK (100 trades, 250 paths)</option>
<option value="standard">🔁 STANDARD (300 trades, 1000 paths)</option>
<option value="deep">🐉 DEEP (500 trades, 2500 paths) *heavy</option>
</select>
<span class="text-xs bg-orange-900/40 px-3 py-1 rounded-full">Win Rate = OUTPUT (simulated)</span>
</div>
<div class="text-xs text-amber-400/80">🏆 survivability beats hype · real monte carlo engine</div>
</div>
<!-- ============================================================
STRATEGY GRID - 10 TRADING ARCHETYPES WITH NO-CODE EDITORS
============================================================
Each strategy card includes:
- Enable/disable toggle (checkbox)
- Strategy name and best regime indicator
- Short description
- Expandable editor panel with sliders for tuning:
* Signal strictness (how selective the strategy is)
* Risk/reward target (profit factor)
* Discipline level (psychological consistency)
* Revenge trading tendency (emotional response to losses)
* Slippage sensitivity (execution cost impact)
* Risk per trade (% of account)
* Commission cost per trade
All strategy DNA parameters influence the Monte Carlo simulation
outcomes. Users can tweak these to see how behavior changes.
-->
<div class="mb-8">
<h2 class="text-xl font-bold flex items-center gap-2 mb-3"><span class="text-orange-400">📋</span> STRATEGY LOADOUTS <span class="text-xs text-gray-400">( enable / edit DNA )</span></h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<template x-for="(strat, idx) in strategies" :key="strat.id">
<div class="arena-card rounded-xl p-3" :class="!strat.enabled ? 'opacity-70' : ''">
<div class="flex justify-between items-start">
<div class="flex gap-2 items-center">
<input type="checkbox" x-model="strat.enabled" class="w-4 h-4 accent-orange-500">
<span class="font-bold" x-text="strat.name"></span>
<span class="text-[10px] bg-orange-950/60 px-2 rounded-full" x-text="strat.bestRegime"></span>
</div>
<button @click="strat.expanded = !strat.expanded" class="text-xs text-orange-300">⚙️ edit</button>
</div>
<p class="text-xs text-gray-300 mt-1" x-text="strat.shortDesc"></p>
<!-- Expandable editor panel - hidden until user clicks edit -->
<div x-show="strat.expanded" x-collapse="" class="mt-3 space-y-2 text-xs border-t border-orange-500/20 pt-2">
<div><span class="text-amber-400">signal strictness</span> <input type="range" x-model="strat.params.signalStrictness" min="0" max="1" step="0.02" class="w-full"><span x-text="strat.params.signalStrictness.toFixed(2)"></span></div>
<div><span>risk/reward target</span> <input type="range" x-model="strat.params.riskReward" min="0.8" max="3.5" step="0.05" class="w-full"><span x-text="strat.params.riskReward.toFixed(2)"></span></div>
<div><span>discipline level</span> <input type="range" x-model="strat.params.discipline" min="0.2" max="1" step="0.02" class="w-full"><span x-text="strat.params.discipline.toFixed(2)"></span></div>
<div><span>revenge trading</span> <input type="range" x-model="strat.params.revengeTendency" min="0" max="1" step="0.02" class="w-full"><span x-text="strat.params.revengeTendency.toFixed(2)"></span></div>
<div><span>slippage sensitivity</span> <input type="range" x-model="strat.params.slippageSensitivity" min="0" max="1" step="0.02" class="w-full"><span x-text="strat.params.slippageSensitivity.toFixed(2)"></span></div>
<div><span>risk per trade (%)</span> <input type="range" x-model="strat.params.riskPerTrade" min="0.5" max="4" step="0.1" class="w-full"><span x-text="strat.params.riskPerTrade.toFixed(1)"></span>%</div>
<div><span>commission ($ per trade)</span> <input type="range" x-model="strat.params.commission" min="0" max="15" step="0.5"><span x-text="strat.params.commission"></span></div>
</div>
</div>
</template>
</div>
</div>
<!-- ============================================================
MARKET REGIME SELECTION
============================================================
Users can enable/disable any of the 8 market regimes.
Each regime has unique properties (volatility, trend coefficient,
chop factor, fakeout probability) that affect strategy performance.
The simulation tests every enabled strategy against every enabled
regime to provide comprehensive stress testing.
-->
<div class="arena-card rounded-2xl p-4 mb-6">
<h3 class="font-bold flex gap-2">🌍 MARKET REGIMES (enable/disable) <span class="text-orange-400">affects survivor stats</span></h3>
<div class="flex flex-wrap gap-3 mt-2">
<template x-for="reg in regimes">
<label class="flex items-center gap-1 bg-black/40 px-2 py-1 rounded-full text-xs">
<input type="checkbox" x-model="reg.enabled" class="accent-orange-500"> <span x-text="reg.name"></span>
</label>
</template>
</div>
</div>
<!-- ============================================================
LOADING OVERLAY - DURING MONTE CARLO SIMULATION
============================================================
Displays a full-screen modal with progress bar and status messages.
Shows real-time feedback about which strategy-regime combination
is currently being simulated.
-->
<div x-show="simulating" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm" x-cloak="">
<div class="arena-card p-6 w-80 text-center">
<div class="animate-pulse text-orange-400 font-bold">⚔️ MONTE CARLO BATTLE ⚔️</div>
<div class="sim-progress w-full h-2 bg-gray-700 mt-3"><div class="h-full bg-orange-500 transition-all duration-200" :style="{width: progressPercent+'%'}"></div></div>
<p class="text-xs mt-2" x-text="progressMsg"></p>
<p class="text-[10px] text-gray-400 mt-2">Simulating thousands of trades • no mock data</p>
</div>
</div>
<!-- ============================================================
RESULTS SECTION - SHOWN ONLY AFTER SIMULATION COMPLETES
============================================================
Includes:
1. Arena Champion Card - top-performing strategy with key metrics
2. Leaderboard Table - all strategies ranked by survivability
3. Verdicts Section - detailed analysis of winners/losers
4. Interactive Charts - real data visualizations
-->
<div x-show="!simulating && leaderboard.length > 0" x-transition="">
<!-- CHAMPION CARD - displays the highest ranked strategy -->
<div class="arena-card rounded-2xl p-5 mb-6 bg-gradient-to-r from-orange-900/20 to-amber-900/20 border-orange-500">
<div class="flex flex-wrap justify-between items-center">
<div>
<span class="text-3xl">🏆 ARENA CHAMPION</span>
<div class="text-xl font-black text-orange-400" x-text="champion?.name || '—'"></div>
<div class="text-sm" x-text="champion?.verdictShort || champion?.verdictText || 'Arena Survivor'"></div>
</div>
<div class="grid grid-cols-2 gap-3 text-right text-sm">
<div>Survivability: <span x-text="champion?.survivabilityScore?.toFixed(1)"></span></div>
<div>Win Rate: <span x-text="champion?.observedWinRate?.toFixed(1)"></span>%</div>
<div>Max DD: <span x-text="champion?.maxDrawdown?.toFixed(1)"></span>%</div>
<div>Risk of Ruin: <span x-text="champion?.riskOfRuin?.toFixed(1)"></span>%</div>
</div>
</div>
</div>
<!-- LEADERBOARD TABLE - full ranking with grades and metrics -->
<div class="overflow-x-auto arena-card rounded-2xl p-2 mb-6">
<h3 class="font-bold p-2">📊 SURVIVAL LEADERBOARD</h3>
<table class="w-full text-xs md:text-sm">
<thead class="border-b border-orange-500/30">
<tr>
<th>Rank</th><th>Strategy</th><th>Grade</th><th>Survival</th><th>WinRate</th>
<th>Expectancy</th><th>MaxDD%</th><th>RiskRuin%</th><th>Best Regime</th><th>Verdict</th>
</tr>
</thead>
<tbody>
<template x-for="(row, i) in leaderboard" :key="row.id">
<tr class="leaderboard-row">
<td class="p-2" x-text="i+1"></td>
<td class="font-mono" x-text="row.name"></td>
<td><span class="badge-grade" :class="{'text-yellow-300':row.grade=='S','text-orange-400':row.grade=='A'}" x-text="row.grade"></span></td>
<td x-text="row.survivabilityScore?.toFixed(1)"></td>
<td x-text="row.observedWinRate?.toFixed(1)"></td>
<td x-text="row.expectancy?.toFixed(2)"></td>
<td x-text="row.maxDrawdown?.toFixed(1)"></td>
<td x-text="row.riskOfRuin?.toFixed(1)"></td>
<td x-text="row.bestRegime"></td>
<td class="text-orange-300 text-[11px]" x-text="row.verdictShort"></td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- VERDICT SECTION - intelligent analysis of simulation results -->
<div class="arena-card rounded-2xl p-4 mb-6">
<h3 class="font-bold">⚖️ ARENA VERDICTS & POST-MORTEM</h3>
<div class="grid md:grid-cols-2 gap-3 mt-2 text-sm">
<div>🥇 Best Overall: <span x-text="verdicts.bestOverall" class="text-orange-300"></span></div>
<div>🛡️ Safest: <span x-text="verdicts.safest" class="text-emerald-300"></span></div>
<div>💰 Highest Return: <span x-text="verdicts.highestReturn"></span></div>
<div>💀 Most Dangerous: <span x-text="verdicts.mostDangerous"></span></div>
<div>🎓 Beginner Friendly: <span x-text="verdicts.beginnerFriendly"></span></div>
<div>⚠️ Regime-dependent: <span x-text="verdicts.regimeDependent"></span></div>
<div>🧠 Most Psych Difficult: <span x-text="verdicts.psychBrutal"></span></div>
<div>❌ Worst Overall: <span x-text="verdicts.worstOverall"></span></div>
</div>
<div class="border-t border-orange-500/20 mt-3 pt-2 text-xs text-gray-400 italic" x-text="analysisReason"></div>
</div>
<!-- CHARTS SECTION - 6 interactive Plotly visualizations -->
<div class="grid lg:grid-cols-2 gap-6 mb-10">
<!-- Survivor Bar Chart -->
<div class="arena-card p-2 rounded-2xl"><div id="survivorChart" class="h-80"></div><p class="text-center text-xs">Who Survived Best? (real survivability)</p></div>
<!-- Risk vs Reward Scatter Plot -->
<div class="arena-card p-2 rounded-2xl"><div id="riskRewardMap" class="h-80"></div><p class="text-center text-xs">Risk vs Reward (real maxDD/return)</p></div>
<!-- Regime Heatmap (full width) -->
<div class="arena-card p-2 rounded-2xl col-span-1 lg:col-span-2"><div id="regimeHeatmap" class="h-96"></div><p class="text-center text-xs">🔥 REAL regime survivability heatmap</p></div>
<!-- Champion Equity Curve -->
<div class="arena-card p-2 rounded-2xl"><div id="equityCurve" class="h-72"></div><p class="text-center text-xs">Champion Median Equity Curve</p></div>
<!-- Champion Drawdown Curve -->
<div class="arena-card p-2 rounded-2xl"><div id="drawdownCurve" class="h-72"></div><p class="text-center text-xs">Champion Drawdown Pain</p></div>
<!-- Champion DNA Radar Chart -->
<div class="arena-card p-2 rounded-2xl"><div id="radarChart" class="h-72"></div><p class="text-center text-xs">Champion DNA Radar (sim-derived)</p></div>
</div>
</div>
<!-- EMPTY STATE - shown before first simulation -->
<div x-show="!simulating && leaderboard.length === 0" class="text-center py-20 arena-card rounded-2xl">
⚔️ Press "ENTER THE ARENA" to run Monte Carlo stress tests. Real data only. No placeholders.
</div>
<!-- FOOTER with donation and open source links -->
<div class="text-center text-xs text-gray-500 border-t border-orange-500/20 pt-6 mt-8">
Strategy Arena is free and <a href="https://github.com/michaelsboost/StrategyArena" class="text-amber-400 underline" target="_blank">open source</a>.
If this helped you, <a href="https://michaelsboost.com/donate/" target="_blank" class="text-amber-400 underline">consider supporting development 💛</a> ·
win rate is calculated, not guessed · survivability beats hype
</div>
</div>
<script src="https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.js"></script>
<script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
<script src="dist/script.js"></script>
</body>
</html>