Hugging Face's logo

Spaces:
LittleMonkeyLab
/
JoshBot
Running

App Files Community
LittleMonkeyLab commited on
Commit
41901bc
·
verified ·
1 Parent(s): e44e7cc

Delete game/trade.html

Browse files
Files changed (1) hide show
  1. game/trade.html +0 -418
game/trade.html DELETED
@@ -1,418 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Trading Game - Proof of Concept</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <style>
9
- body { font-family: 'Inter', sans-serif; }
10
- </style>
11
- </head>
12
- <body class="bg-gray-900 text-white min-h-screen">
13
- <main class="container mx-auto px-4 py-8 max-w-7xl">
14
- <h1 class="text-4xl font-bold mb-8 text-center bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
15
- Trading Game - Proof of Concept
16
- </h1>
17
-
18
- <!-- Current Scenario (Full Width) -->
19
- <div id="scenario-section" class="bg-gradient-to-r from-red-900 to-orange-900 p-6 rounded-xl mb-6 border-2 border-orange-500">
20
- <h2 class="text-2xl font-bold mb-3 text-yellow-300">⚠️ Current Market Scenario</h2>
21
- <div id="scenario-text" class="text-lg mb-4">
22
- A typhoon is seen off the coast of New Gregoria, likely impacting the Galvanium Supply Chain.
23
- This may affect logistics companies (NLN) and energy sectors (VCG).
24
- </div>
25
- <button id="next-scenario-button" class="px-4 py-2 bg-orange-600 rounded hover:bg-orange-700 text-sm">
26
- Next Scenario
27
- </button>
28
- </div>
29
-
30
- <!-- Two Column Layout -->
31
- <div class="grid lg:grid-cols-2 gap-6">
32
-
33
- <!-- LEFT SIDE: AI Advisor -->
34
- <div class="space-y-6">
35
- <!-- AI Parameter Sliders -->
36
- <div class="bg-gray-800 p-6 rounded-xl">
37
- <h2 class="text-2xl font-bold mb-4 text-blue-400">🤖 AI Advisor Settings</h2>
38
- <div class="space-y-4">
39
- <div>
40
- <label class="block text-gray-400 mb-2">
41
- Risk Tolerance: <span id="risk-value" class="text-white font-bold">5.0</span> / 10
42
- </label>
43
- <input type="range" id="risk-slider" min="0" max="10" step="0.5" value="5.0"
44
- class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
45
- <div class="flex justify-between text-xs text-gray-500 mt-1">
46
- <span>Conservative</span>
47
- <span>Moderate</span>
48
- <span>Aggressive</span>
49
- </div>
50
- </div>
51
- <div>
52
- <label class="block text-gray-400 mb-2">
53
- AI Creativity: <span id="temperature-value" class="text-white font-bold">0.7</span>
54
- </label>
55
- <input type="range" id="temperature-slider" min="0" max="2" step="0.1" value="0.7"
56
- class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
57
- <div class="flex justify-between text-xs text-gray-500 mt-1">
58
- <span>Deterministic</span>
59
- <span>Balanced</span>
60
- <span>Creative</span>
61
- </div>
62
- </div>
63
- <div>
64
- <label class="block text-gray-400 mb-2">
65
- Confidence Level: <span id="confidence-value" class="text-white font-bold">0</span>
66
- </label>
67
- <input type="range" id="confidence-slider" min="-100" max="100" step="10" value="0"
68
- class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
69
- <div class="flex justify-between text-xs text-gray-500 mt-1">
70
- <span>Cautious (-100)</span>
71
- <span>Neutral (0)</span>
72
- <span>Very Confident (+100)</span>
73
- </div>
74
- </div>
75
- </div>
76
- </div>
77
-
78
- <!-- AI Chat/Advice Section -->
79
- <div id="ai-advice-section" class="bg-gray-800 p-6 rounded-xl">
80
- <h2 class="text-2xl font-bold mb-4 text-green-400">🤖 AI Trading Advice</h2>
81
- <div id="ai-message" class="bg-gray-700 p-4 rounded-lg mb-4 text-gray-300 min-h-[200px] whitespace-pre-wrap">
82
- <p class="text-gray-500 italic">Adjust your settings above and click "Get AI Advice" below to receive trading recommendations based on the current scenario.</p>
83
- </div>
84
- <button id="get-ai-advice-button" class="w-full py-3 bg-blue-600 rounded-lg font-bold hover:bg-blue-700 mb-4">
85
- 💡 Get AI Trading Advice
86
- </button>
87
- <div id="ai-actions" class="flex gap-2" style="display: none;">
88
- <button id="follow-advice-button" class="flex-1 py-2 bg-blue-600 rounded hover:bg-blue-700 text-sm">
89
- Follow
90
- </button>
91
- <button id="ignore-advice-button" class="flex-1 py-2 bg-gray-600 rounded hover:bg-gray-700 text-sm">
92
- Ignore
93
- </button>
94
- <button id="clear-ai-button" class="flex-1 py-2 bg-red-600 rounded hover:bg-red-700 text-sm">
95
- Clear
96
- </button>
97
- </div>
98
- </div>
99
- </div>
100
-
101
- <!-- RIGHT SIDE: Trading Portfolio -->
102
- <div class="space-y-6">
103
- <!-- Portfolio Summary -->
104
- <div class="bg-gray-800 p-6 rounded-xl">
105
- <h2 class="text-2xl font-bold mb-4">Portfolio</h2>
106
- <div class="grid grid-cols-2 gap-4">
107
- <div>
108
- <p class="text-gray-400">Balance</p>
109
- <p class="text-3xl font-bold" id="balance">$50,000.00</p>
110
- </div>
111
- <div>
112
- <p class="text-gray-400">Positions</p>
113
- <p class="text-3xl font-bold" id="positions">0</p>
114
- </div>
115
- </div>
116
- </div>
117
-
118
- <!-- Trading Form -->
119
- <div class="bg-gray-800 p-6 rounded-xl">
120
- <h2 class="text-2xl font-bold mb-4">Make a Trade</h2>
121
- <div class="space-y-4 mb-4">
122
- <div>
123
- <label class="block text-gray-400 mb-2">Symbol</label>
124
- <select id="trade-symbol" class="w-full bg-gray-700 rounded p-3 text-white">
125
- <option>VCG</option>
126
- <option>CSI</option>
127
- <option>STDY</option>
128
- <option>AUBIO</option>
129
- <option>NLN</option>
130
- </select>
131
- </div>
132
- <div class="grid grid-cols-2 gap-4">
133
- <div>
134
- <label class="block text-gray-400 mb-2">Quantity</label>
135
- <input id="trade-quantity" type="number" value="10" min="1"
136
- class="w-full bg-gray-700 rounded p-3 text-white">
137
- </div>
138
- <div>
139
- <label class="block text-gray-400 mb-2">Price</label>
140
- <input id="trade-price" type="number" value="100" min="0" step="0.01"
141
- class="w-full bg-gray-700 rounded p-3 text-white" readonly>
142
- </div>
143
- </div>
144
- </div>
145
- <div class="flex gap-4">
146
- <button id="buy-button" class="flex-1 py-3 bg-green-600 rounded-lg font-bold hover:bg-green-700">
147
- Buy
148
- </button>
149
- <button id="sell-button" class="flex-1 py-3 bg-red-600 rounded-lg font-bold hover:bg-red-700">
150
- Sell
151
- </button>
152
- </div>
153
- </div>
154
-
155
- <!-- Recent Trades -->
156
- <div class="bg-gray-800 p-6 rounded-xl">
157
- <h2 class="text-2xl font-bold mb-4">Recent Trades</h2>
158
- <div id="trade-history" class="space-y-2 max-h-[400px] overflow-y-auto">
159
- <p class="text-gray-400 text-center">No trades yet</p>
160
- </div>
161
- </div>
162
- </div>
163
- </div>
164
- </main>
165
-
166
- <script src="game-api-integration.js"></script>
167
- <script>
168
- // Simple game state
169
- let gameState = {
170
- balance: 50000,
171
- positions: [],
172
- trades: [],
173
- currentScenario: {
174
- title: "Typhoon near New Gregoria",
175
- description: "A typhoon is seen off the coast of New Gregoria, likely impacting the Galvanium Supply Chain. This may affect logistics companies (NLN) and energy sectors (VCG).",
176
- affectedSymbols: ["NLN", "VCG"]
177
- }
178
- };
179
-
180
- // Scenario templates
181
- const scenarios = [
182
- {
183
- title: "Typhoon near New Gregoria",
184
- description: "A typhoon is seen off the coast of New Gregoria, likely impacting the Galvanium Supply Chain. This may affect logistics companies (NLN) and energy sectors (VCG).",
185
- affectedSymbols: ["NLN", "VCG"]
186
- },
187
- {
188
- title: "Quantum Processor Breakthrough",
189
- description: "Veridian Capital Group (VCG) announces a major quantum computing breakthrough. This could significantly impact energy and tech sectors.",
190
- affectedSymbols: ["VCG", "CSI"]
191
- },
192
- {
193
- title: "Asteroid Mining Success",
194
- description: "Stellar Dynamics Corp (STDY) successfully completes asteroid mining operations, securing rare earth minerals. Logistics and space commerce stocks may surge.",
195
- affectedSymbols: ["STDY", "NLN"]
196
- },
197
- {
198
- title: "Biosynthetics Regulatory Approval",
199
- description: "Aurora Biosynthetics (AUBIO) receives approval for commercial distribution of synthetic products, opening new markets worth 200 billion credits.",
200
- affectedSymbols: ["AUBIO"]
201
- }
202
- ];
203
-
204
- // Update slider displays
205
- document.getElementById('risk-slider').addEventListener('input', (e) => {
206
- document.getElementById('risk-value').textContent = parseFloat(e.target.value).toFixed(1);
207
- });
208
-
209
- document.getElementById('temperature-slider').addEventListener('input', (e) => {
210
- document.getElementById('temperature-value').textContent = parseFloat(e.target.value).toFixed(1);
211
- });
212
-
213
- document.getElementById('confidence-slider').addEventListener('input', (e) => {
214
- document.getElementById('confidence-value').textContent = e.target.value;
215
- });
216
-
217
- // Update price when symbol changes
218
- document.getElementById('trade-symbol').addEventListener('change', (e) => {
219
- const prices = { VCG: 150, CSI: 200, STDY: 100, AUBIO: 75, NLN: 120 };
220
- document.getElementById('trade-price').value = prices[e.target.value] || 100;
221
- });
222
-
223
- // Initialize price
224
- document.getElementById('trade-symbol').dispatchEvent(new Event('change'));
225
-
226
- // Next scenario button
227
- document.getElementById('next-scenario-button').addEventListener('click', () => {
228
- const randomScenario = scenarios[Math.floor(Math.random() * scenarios.length)];
229
- gameState.currentScenario = randomScenario;
230
- document.getElementById('scenario-text').textContent = randomScenario.description;
231
- });
232
-
233
- let pendingTrade = null;
234
-
235
- // Get AI advice button (standalone)
236
- document.getElementById('get-ai-advice-button').addEventListener('click', async () => {
237
- const symbol = document.getElementById('trade-symbol').value;
238
- const quantity = parseInt(document.getElementById('trade-quantity').value);
239
- const price = parseFloat(document.getElementById('trade-price').value);
240
-
241
- await showAIAdvice(symbol, quantity, price, 'buy');
242
- });
243
-
244
- // Buy button handler
245
- document.getElementById('buy-button').addEventListener('click', async () => {
246
- const symbol = document.getElementById('trade-symbol').value;
247
- const quantity = parseInt(document.getElementById('trade-quantity').value);
248
- const price = parseFloat(document.getElementById('trade-price').value);
249
- const total = quantity * price;
250
-
251
- if (total > gameState.balance) {
252
- alert('Insufficient balance!');
253
- return;
254
- }
255
-
256
- pendingTrade = { symbol, quantity, price, action: 'buy' };
257
- await showAIAdvice(symbol, quantity, price, 'buy');
258
- });
259
-
260
- // Sell button handler
261
- document.getElementById('sell-button').addEventListener('click', async () => {
262
- const symbol = document.getElementById('trade-symbol').value;
263
- const quantity = parseInt(document.getElementById('trade-quantity').value);
264
- const price = parseFloat(document.getElementById('trade-price').value);
265
-
266
- pendingTrade = { symbol, quantity, price, action: 'sell' };
267
- await showAIAdvice(symbol, quantity, price, 'sell');
268
- });
269
-
270
- // Show AI advice
271
- async function showAIAdvice(symbol, quantity, price, action) {
272
- const aiMessage = document.getElementById('ai-message');
273
- const aiActions = document.getElementById('ai-actions');
274
-
275
- aiMessage.textContent = 'Getting AI advice...';
276
- aiActions.style.display = 'none';
277
-
278
- try {
279
- if (window.gameAI && window.gameAI.askAI) {
280
- // Get current slider values
281
- const riskLevel = parseFloat(document.getElementById('risk-slider').value);
282
- const temperature = parseFloat(document.getElementById('temperature-slider').value);
283
- const confidence = parseFloat(document.getElementById('confidence-slider').value);
284
-
285
- // Include scenario context in the question
286
- const scenarioText = gameState.currentScenario.description;
287
- const question = `Current Market Scenario: ${scenarioText}\n\nShould I ${action} ${quantity} shares of ${symbol} at $${price.toFixed(2)}? Consider the current scenario and provide a direct recommendation based on my risk tolerance of ${riskLevel}/10.`;
288
-
289
- // Update AI parameters
290
- if (window.gameAI.updateAIParams) {
291
- window.gameAI.updateAIParams(riskLevel, temperature, confidence);
292
- }
293
-
294
- const response = await window.gameAI.askAI(question, {
295
- risk_level: riskLevel,
296
- temperature: temperature,
297
- confidence_boost: confidence
298
- });
299
-
300
- aiMessage.textContent = response.answer || 'No advice available';
301
-
302
- // Show action buttons if there's a pending trade
303
- if (pendingTrade) {
304
- aiActions.style.display = 'flex';
305
- }
306
- } else {
307
- aiMessage.textContent = 'AI service not available. Check console for errors.';
308
- }
309
- } catch (error) {
310
- console.error('AI advice error:', error);
311
- aiMessage.textContent = 'Error getting AI advice. Check console.';
312
- }
313
- }
314
-
315
- // Follow AI advice
316
- document.getElementById('follow-advice-button').addEventListener('click', async () => {
317
- if (!pendingTrade) return;
318
-
319
- executeTrade(pendingTrade, true);
320
- document.getElementById('ai-actions').style.display = 'none';
321
- pendingTrade = null;
322
- });
323
-
324
- // Ignore advice but still trade
325
- document.getElementById('ignore-advice-button').addEventListener('click', async () => {
326
- if (!pendingTrade) return;
327
-
328
- executeTrade(pendingTrade, false);
329
- document.getElementById('ai-actions').style.display = 'none';
330
- pendingTrade = null;
331
- });
332
-
333
- // Clear AI button
334
- document.getElementById('clear-ai-button').addEventListener('click', () => {
335
- document.getElementById('ai-message').innerHTML = '<p class="text-gray-500 italic">Adjust your settings above and click "Get AI Advice" to receive trading recommendations based on the current scenario.</p>';
336
- document.getElementById('ai-actions').style.display = 'none';
337
- pendingTrade = null;
338
- });
339
-
340
- // Execute trade
341
- function executeTrade(trade, followedAdvice) {
342
- const { symbol, quantity, price, action } = trade;
343
- const total = quantity * price;
344
-
345
- if (action === 'buy') {
346
- gameState.balance -= total;
347
- const existingPosition = gameState.positions.find(p => p.symbol === symbol);
348
- if (existingPosition) {
349
- existingPosition.quantity += quantity;
350
- } else {
351
- gameState.positions.push({ symbol, quantity, price });
352
- }
353
- } else { // sell
354
- gameState.balance += total;
355
- const existingPosition = gameState.positions.find(p => p.symbol === symbol);
356
- if (existingPosition) {
357
- existingPosition.quantity -= quantity;
358
- if (existingPosition.quantity <= 0) {
359
- gameState.positions = gameState.positions.filter(p => p.symbol !== symbol);
360
- }
361
- }
362
- }
363
-
364
- // Log trade
365
- gameState.trades.unshift({
366
- timestamp: new Date().toLocaleTimeString(),
367
- symbol,
368
- action,
369
- quantity,
370
- price: price.toFixed(2),
371
- total: total.toFixed(2),
372
- followedAdvice
373
- });
374
-
375
- // Update UI
376
- updateUI();
377
-
378
- // Log to backend
379
- if (window.gameAI && window.gameAI.logDecision) {
380
- window.gameAI.logDecision(symbol, action, quantity, price, followedAdvice);
381
- }
382
-
383
- // Ask for trust score
384
- const trustScore = prompt('How much did you trust the AI advice? (1-10):');
385
- if (trustScore && window.gameAI && window.gameAI.logDecision) {
386
- window.gameAI.logDecision(symbol, action, quantity, price, followedAdvice, parseFloat(trustScore));
387
- }
388
- }
389
-
390
- // Update UI
391
- function updateUI() {
392
- document.getElementById('balance').textContent = '$' + gameState.balance.toFixed(2);
393
- document.getElementById('positions').textContent = gameState.positions.length;
394
-
395
- const tradeHistory = document.getElementById('trade-history');
396
- if (gameState.trades.length === 0) {
397
- tradeHistory.innerHTML = '<p class="text-gray-400 text-center">No trades yet</p>';
398
- } else {
399
- tradeHistory.innerHTML = gameState.trades.map(trade => `
400
- <div class="bg-gray-700 p-3 rounded flex justify-between items-center">
401
- <div>
402
- <span class="font-bold ${trade.action === 'buy' ? 'text-green-400' : 'text-red-400'}">
403
- ${trade.action.toUpperCase()}
404
- </span>
405
- ${trade.quantity} ${trade.symbol} @ $${trade.price}
406
- ${trade.followedAdvice ? '✅ (Followed AI)' : '❌ (Ignored AI)'}
407
- </div>
408
- <div class="text-right">
409
- <p class="font-bold">$${trade.total}</p>
410
- <p class="text-sm text-gray-400">${trade.timestamp}</p>
411
- </div>
412
- </div>
413
- `).join('');
414
- }
415
- }
416
- </script>
417
- </body>
418
- </html>