Hugging Face's logo

Spaces:
LittleMonkeyLab
/
JoshBot
Running

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

Upload trade.html

Browse files
Files changed (1) hide show
  1. trade.html +587 -0
trade.html ADDED
@@ -0,0 +1,587 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Section -->
79
+ <div id="ai-advice-section" class="bg-gray-800 p-6 rounded-xl flex flex-col" style="height: 600px;">
80
+ <h2 class="text-2xl font-bold mb-4 text-green-400">🤖 AI Trading Advisor</h2>
81
+
82
+ <!-- Chat Messages Container -->
83
+ <div id="chat-messages" class="flex-1 bg-gray-900 rounded-lg p-4 mb-4 overflow-y-auto space-y-3">
84
+ <div class="flex justify-start">
85
+ <div class="bg-blue-600 text-white rounded-lg p-3 max-w-[80%]">
86
+ <p class="text-sm font-semibold mb-1">AI Assistant</p>
87
+ <p class="text-sm">Welcome! I'm your AI trading advisor. I can help you with trading decisions, market analysis, and portfolio advice. Ask me anything or try one of the suggested questions below!</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Pre-populated Query Suggestions -->
93
+ <div id="query-suggestions" class="mb-3 flex flex-wrap gap-2">
94
+ <button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
95
+ onclick="sendQuickQuery('What are the best stocks to trade right now?')">
96
+ 📈 Best stocks now?
97
+ </button>
98
+ <button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
99
+ onclick="sendQuickQuery('Explain the current market scenario')">
100
+ 📊 Market scenario
101
+ </button>
102
+ <button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
103
+ onclick="sendQuickQuery('What is my risk profile?')">
104
+ ⚖️ My risk profile
105
+ </button>
106
+ <button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
107
+ onclick="const sym = document.getElementById('trade-symbol').value; sendQuickQuery(`Should I buy ${sym}?`)">
108
+ 💰 Trade advice
109
+ </button>
110
+ </div>
111
+
112
+ <!-- Chat Input -->
113
+ <div class="flex gap-2">
114
+ <input type="text" id="chat-input" placeholder="Ask me anything about trading..."
115
+ class="flex-1 bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
116
+ onkeypress="if(event.key === 'Enter') sendChatMessage()">
117
+ <button id="send-chat-button" onclick="sendChatMessage()"
118
+ class="px-6 py-2 bg-blue-600 rounded-lg font-bold hover:bg-blue-700">
119
+ Send
120
+ </button>
121
+ </div>
122
+
123
+ <!-- Trade Action Buttons (shown when trade advice is given) -->
124
+ <div id="ai-actions" class="flex gap-2 mt-3" style="display: none;">
125
+ <button id="follow-advice-button" class="flex-1 py-2 bg-green-600 rounded hover:bg-green-700 text-sm font-semibold">
126
+ ✅ Follow Advice
127
+ </button>
128
+ <button id="ignore-advice-button" class="flex-1 py-2 bg-gray-600 rounded hover:bg-gray-700 text-sm">
129
+ Ignore & Trade
130
+ </button>
131
+ <button id="clear-chat-button" class="px-3 py-2 bg-red-600 rounded hover:bg-red-700 text-sm">
132
+ Clear
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- RIGHT SIDE: Trading Portfolio -->
139
+ <div class="space-y-6">
140
+ <!-- Portfolio Summary -->
141
+ <div class="bg-gray-800 p-6 rounded-xl">
142
+ <h2 class="text-2xl font-bold mb-4">Portfolio</h2>
143
+ <div class="grid grid-cols-2 gap-4">
144
+ <div>
145
+ <p class="text-gray-400">Balance</p>
146
+ <p class="text-3xl font-bold" id="balance">$50,000.00</p>
147
+ </div>
148
+ <div>
149
+ <p class="text-gray-400">Positions</p>
150
+ <p class="text-3xl font-bold" id="positions">0</p>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Trading Form -->
156
+ <div class="bg-gray-800 p-6 rounded-xl">
157
+ <h2 class="text-2xl font-bold mb-4">Make a Trade</h2>
158
+ <div class="space-y-4 mb-4">
159
+ <div>
160
+ <label class="block text-gray-400 mb-2">Symbol</label>
161
+ <select id="trade-symbol" class="w-full bg-gray-700 rounded p-3 text-white">
162
+ <option>VCG</option>
163
+ <option>CSI</option>
164
+ <option>STDY</option>
165
+ <option>AUBIO</option>
166
+ <option>NLN</option>
167
+ </select>
168
+ </div>
169
+ <div class="grid grid-cols-2 gap-4">
170
+ <div>
171
+ <label class="block text-gray-400 mb-2">Quantity</label>
172
+ <input id="trade-quantity" type="number" value="10" min="1"
173
+ class="w-full bg-gray-700 rounded p-3 text-white">
174
+ </div>
175
+ <div>
176
+ <label class="block text-gray-400 mb-2">Price</label>
177
+ <input id="trade-price" type="number" value="100" min="0" step="0.01"
178
+ class="w-full bg-gray-700 rounded p-3 text-white" readonly>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="flex gap-4">
183
+ <button id="buy-button" class="flex-1 py-3 bg-green-600 rounded-lg font-bold hover:bg-green-700">
184
+ Buy
185
+ </button>
186
+ <button id="sell-button" class="flex-1 py-3 bg-red-600 rounded-lg font-bold hover:bg-red-700">
187
+ Sell
188
+ </button>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Recent Trades -->
193
+ <div class="bg-gray-800 p-6 rounded-xl">
194
+ <h2 class="text-2xl font-bold mb-4">Recent Trades</h2>
195
+ <div id="trade-history" class="space-y-2 max-h-[400px] overflow-y-auto">
196
+ <p class="text-gray-400 text-center">No trades yet</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </main>
202
+
203
+ <script src="game-api-integration.js"></script>
204
+ <script>
205
+ // Simple game state
206
+ let gameState = {
207
+ balance: 50000,
208
+ positions: [],
209
+ trades: [],
210
+ currentScenario: {
211
+ title: "Typhoon near New Gregoria",
212
+ 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).",
213
+ affectedSymbols: ["NLN", "VCG"]
214
+ }
215
+ };
216
+
217
+ // Scenario templates
218
+ const scenarios = [
219
+ {
220
+ title: "Typhoon near New Gregoria",
221
+ 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).",
222
+ affectedSymbols: ["NLN", "VCG"]
223
+ },
224
+ {
225
+ title: "Quantum Processor Breakthrough",
226
+ description: "Veridian Capital Group (VCG) announces a major quantum computing breakthrough. This could significantly impact energy and tech sectors.",
227
+ affectedSymbols: ["VCG", "CSI"]
228
+ },
229
+ {
230
+ title: "Asteroid Mining Success",
231
+ description: "Stellar Dynamics Corp (STDY) successfully completes asteroid mining operations, securing rare earth minerals. Logistics and space commerce stocks may surge.",
232
+ affectedSymbols: ["STDY", "NLN"]
233
+ },
234
+ {
235
+ title: "Biosynthetics Regulatory Approval",
236
+ description: "Aurora Biosynthetics (AUBIO) receives approval for commercial distribution of synthetic products, opening new markets worth 200 billion credits.",
237
+ affectedSymbols: ["AUBIO"]
238
+ }
239
+ ];
240
+
241
+ // Update slider displays
242
+ document.getElementById('risk-slider').addEventListener('input', (e) => {
243
+ document.getElementById('risk-value').textContent = parseFloat(e.target.value).toFixed(1);
244
+ });
245
+
246
+ document.getElementById('temperature-slider').addEventListener('input', (e) => {
247
+ document.getElementById('temperature-value').textContent = parseFloat(e.target.value).toFixed(1);
248
+ });
249
+
250
+ document.getElementById('confidence-slider').addEventListener('input', (e) => {
251
+ document.getElementById('confidence-value').textContent = e.target.value;
252
+ });
253
+
254
+ // Update price when symbol changes
255
+ document.getElementById('trade-symbol').addEventListener('change', (e) => {
256
+ const prices = { VCG: 150, CSI: 200, STDY: 100, AUBIO: 75, NLN: 120 };
257
+ document.getElementById('trade-price').value = prices[e.target.value] || 100;
258
+ });
259
+
260
+ // Initialize price
261
+ document.getElementById('trade-symbol').dispatchEvent(new Event('change'));
262
+
263
+ // Next scenario button
264
+ document.getElementById('next-scenario-button').addEventListener('click', () => {
265
+ const randomScenario = scenarios[Math.floor(Math.random() * scenarios.length)];
266
+ gameState.currentScenario = randomScenario;
267
+ document.getElementById('scenario-text').textContent = randomScenario.description;
268
+ });
269
+
270
+ let pendingTrade = null;
271
+ let chatHistory = [];
272
+
273
+ // Add message to chat UI
274
+ function addChatMessage(message, isUser = false) {
275
+ const chatMessages = document.getElementById('chat-messages');
276
+ const messageDiv = document.createElement('div');
277
+ messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
278
+
279
+ const contentDiv = document.createElement('div');
280
+ contentDiv.className = isUser
281
+ ? 'bg-gray-600 text-white rounded-lg p-3 max-w-[80%]'
282
+ : 'bg-blue-600 text-white rounded-lg p-3 max-w-[80%]';
283
+
284
+ if (!isUser) {
285
+ const label = document.createElement('p');
286
+ label.className = 'text-sm font-semibold mb-1';
287
+ label.textContent = 'AI Assistant';
288
+ contentDiv.appendChild(label);
289
+ }
290
+
291
+ const text = document.createElement('p');
292
+ text.className = 'text-sm whitespace-pre-wrap';
293
+ text.textContent = message;
294
+ contentDiv.appendChild(text);
295
+
296
+ messageDiv.appendChild(contentDiv);
297
+ chatMessages.appendChild(messageDiv);
298
+
299
+ // Auto-scroll to bottom
300
+ chatMessages.scrollTop = chatMessages.scrollHeight;
301
+ }
302
+
303
+ // Send chat message
304
+ async function sendChatMessage() {
305
+ const chatInput = document.getElementById('chat-input');
306
+ const question = chatInput.value.trim();
307
+
308
+ if (!question) return;
309
+
310
+ // Add user message to chat
311
+ addChatMessage(question, true);
312
+ chatInput.value = '';
313
+
314
+ // Show thinking indicator
315
+ const thinkingDiv = document.createElement('div');
316
+ thinkingDiv.id = 'thinking-indicator';
317
+ thinkingDiv.className = 'flex justify-start';
318
+ const thinkingContent = document.createElement('div');
319
+ thinkingContent.className = 'bg-blue-600 text-white rounded-lg p-3 max-w-[80%]';
320
+ thinkingContent.innerHTML = '<p class="text-sm font-semibold mb-1">AI Assistant</p><p class="text-sm italic">Thinking...</p>';
321
+ thinkingDiv.appendChild(thinkingContent);
322
+ document.getElementById('chat-messages').appendChild(thinkingDiv);
323
+ document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
324
+
325
+ try {
326
+ if (window.gameAI && window.gameAI.askAI) {
327
+ // Get current slider values
328
+ const riskLevel = parseFloat(document.getElementById('risk-slider').value);
329
+ const temperature = parseFloat(document.getElementById('temperature-slider').value);
330
+ const confidence = parseFloat(document.getElementById('confidence-slider').value);
331
+
332
+ // Include scenario context in the question
333
+ const scenarioText = gameState.currentScenario.description;
334
+ const enhancedQuestion = `Current Market Scenario: ${scenarioText}\n\nRisk Profile: ${riskLevel}/10\n\n${question}`;
335
+
336
+ // Update AI parameters
337
+ if (window.gameAI.updateAIParams) {
338
+ window.gameAI.updateAIParams(riskLevel, temperature, confidence);
339
+ }
340
+
341
+ const response = await window.gameAI.askAI(enhancedQuestion, {
342
+ risk_level: riskLevel,
343
+ temperature: temperature,
344
+ confidence_boost: confidence
345
+ });
346
+
347
+ // Remove thinking indicator
348
+ const thinking = document.getElementById('thinking-indicator');
349
+ if (thinking) thinking.remove();
350
+
351
+ // Add AI response
352
+ const answer = response.answer || 'No response available.';
353
+ addChatMessage(answer, false);
354
+
355
+ // Check if this is a trade-related question
356
+ if (question.toLowerCase().includes('buy') || question.toLowerCase().includes('sell') ||
357
+ question.toLowerCase().includes('trade') || question.toLowerCase().includes('should i')) {
358
+ // Show trade action buttons
359
+ document.getElementById('ai-actions').style.display = 'flex';
360
+ }
361
+ } else {
362
+ // Remove thinking indicator
363
+ const thinking = document.getElementById('thinking-indicator');
364
+ if (thinking) thinking.remove();
365
+
366
+ addChatMessage('AI service not available. Check console for errors.', false);
367
+ }
368
+ } catch (error) {
369
+ console.error('AI chat error:', error);
370
+ const thinking = document.getElementById('thinking-indicator');
371
+ if (thinking) thinking.remove();
372
+ addChatMessage('Error getting AI response. Check console.', false);
373
+ }
374
+ }
375
+
376
+ // Send quick query from suggestion button
377
+ function sendQuickQuery(query) {
378
+ const chatInput = document.getElementById('chat-input');
379
+ chatInput.value = query;
380
+ sendChatMessage();
381
+ }
382
+
383
+ // Buy button handler
384
+ document.getElementById('buy-button').addEventListener('click', async () => {
385
+ const symbol = document.getElementById('trade-symbol').value;
386
+ const quantity = parseInt(document.getElementById('trade-quantity').value);
387
+ const price = parseFloat(document.getElementById('trade-price').value);
388
+ const total = quantity * price;
389
+
390
+ if (total > gameState.balance) {
391
+ alert('Insufficient balance!');
392
+ return;
393
+ }
394
+
395
+ pendingTrade = { symbol, quantity, price, action: 'buy' };
396
+ await showAIAdvice(symbol, quantity, price, 'buy');
397
+ });
398
+
399
+ // Sell button handler
400
+ document.getElementById('sell-button').addEventListener('click', async () => {
401
+ const symbol = document.getElementById('trade-symbol').value;
402
+ const quantity = parseInt(document.getElementById('trade-quantity').value);
403
+ const price = parseFloat(document.getElementById('trade-price').value);
404
+
405
+ pendingTrade = { symbol, quantity, price, action: 'sell' };
406
+ await showAIAdvice(symbol, quantity, price, 'sell');
407
+ });
408
+
409
+ // Show AI advice (used by Buy/Sell buttons)
410
+ async function showAIAdvice(symbol, quantity, price, action) {
411
+ const question = `Should I ${action} ${quantity} shares of ${symbol} at $${price.toFixed(2)}?`;
412
+
413
+ // Add trade question to chat
414
+ addChatMessage(question, true);
415
+
416
+ // Set pending trade
417
+ pendingTrade = { symbol, quantity, price, action };
418
+
419
+ // Show thinking indicator
420
+ const thinkingDiv = document.createElement('div');
421
+ thinkingDiv.id = 'thinking-indicator';
422
+ thinkingDiv.className = 'flex justify-start';
423
+ const thinkingContent = document.createElement('div');
424
+ thinkingContent.className = 'bg-blue-600 text-white rounded-lg p-3 max-w-[80%]';
425
+ thinkingContent.innerHTML = '<p class="text-sm font-semibold mb-1">AI Assistant</p><p class="text-sm italic">Analyzing trade...</p>';
426
+ thinkingDiv.appendChild(thinkingContent);
427
+ document.getElementById('chat-messages').appendChild(thinkingDiv);
428
+ document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
429
+
430
+ try {
431
+ if (window.gameAI && window.gameAI.askAI) {
432
+ // Get current slider values
433
+ const riskLevel = parseFloat(document.getElementById('risk-slider').value);
434
+ const temperature = parseFloat(document.getElementById('temperature-slider').value);
435
+ const confidence = parseFloat(document.getElementById('confidence-slider').value);
436
+
437
+ // Include scenario context in the question
438
+ const scenarioText = gameState.currentScenario.description;
439
+ const enhancedQuestion = `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.`;
440
+
441
+ // Update AI parameters
442
+ if (window.gameAI.updateAIParams) {
443
+ window.gameAI.updateAIParams(riskLevel, temperature, confidence);
444
+ }
445
+
446
+ const response = await window.gameAI.askAI(enhancedQuestion, {
447
+ risk_level: riskLevel,
448
+ temperature: temperature,
449
+ confidence_boost: confidence
450
+ });
451
+
452
+ // Remove thinking indicator
453
+ const thinking = document.getElementById('thinking-indicator');
454
+ if (thinking) thinking.remove();
455
+
456
+ // Add AI response
457
+ const answer = response.answer || 'No advice available';
458
+ addChatMessage(answer, false);
459
+
460
+ // Show action buttons
461
+ document.getElementById('ai-actions').style.display = 'flex';
462
+ } else {
463
+ const thinking = document.getElementById('thinking-indicator');
464
+ if (thinking) thinking.remove();
465
+ addChatMessage('AI service not available. Check console for errors.', false);
466
+ }
467
+ } catch (error) {
468
+ console.error('AI advice error:', error);
469
+ const thinking = document.getElementById('thinking-indicator');
470
+ if (thinking) thinking.remove();
471
+ addChatMessage('Error getting AI advice. Check console.', false);
472
+ }
473
+ }
474
+
475
+ // Follow AI advice
476
+ document.getElementById('follow-advice-button').addEventListener('click', async () => {
477
+ if (!pendingTrade) return;
478
+
479
+ executeTrade(pendingTrade, true);
480
+ document.getElementById('ai-actions').style.display = 'none';
481
+ pendingTrade = null;
482
+ });
483
+
484
+ // Ignore advice but still trade
485
+ document.getElementById('ignore-advice-button').addEventListener('click', async () => {
486
+ if (!pendingTrade) return;
487
+
488
+ executeTrade(pendingTrade, false);
489
+ document.getElementById('ai-actions').style.display = 'none';
490
+ pendingTrade = null;
491
+ });
492
+
493
+ // Clear chat button
494
+ document.getElementById('clear-chat-button').addEventListener('click', () => {
495
+ const chatMessages = document.getElementById('chat-messages');
496
+ chatMessages.innerHTML = `
497
+ <div class="flex justify-start">
498
+ <div class="bg-blue-600 text-white rounded-lg p-3 max-w-[80%]">
499
+ <p class="text-sm font-semibold mb-1">AI Assistant</p>
500
+ <p class="text-sm">Chat cleared. How can I help you with your trading today?</p>
501
+ </div>
502
+ </div>
503
+ `;
504
+ document.getElementById('ai-actions').style.display = 'none';
505
+ pendingTrade = null;
506
+ chatHistory = [];
507
+ });
508
+
509
+ // Execute trade
510
+ function executeTrade(trade, followedAdvice) {
511
+ const { symbol, quantity, price, action } = trade;
512
+ const total = quantity * price;
513
+
514
+ if (action === 'buy') {
515
+ gameState.balance -= total;
516
+ const existingPosition = gameState.positions.find(p => p.symbol === symbol);
517
+ if (existingPosition) {
518
+ existingPosition.quantity += quantity;
519
+ } else {
520
+ gameState.positions.push({ symbol, quantity, price });
521
+ }
522
+ } else { // sell
523
+ gameState.balance += total;
524
+ const existingPosition = gameState.positions.find(p => p.symbol === symbol);
525
+ if (existingPosition) {
526
+ existingPosition.quantity -= quantity;
527
+ if (existingPosition.quantity <= 0) {
528
+ gameState.positions = gameState.positions.filter(p => p.symbol !== symbol);
529
+ }
530
+ }
531
+ }
532
+
533
+ // Log trade
534
+ gameState.trades.unshift({
535
+ timestamp: new Date().toLocaleTimeString(),
536
+ symbol,
537
+ action,
538
+ quantity,
539
+ price: price.toFixed(2),
540
+ total: total.toFixed(2),
541
+ followedAdvice
542
+ });
543
+
544
+ // Update UI
545
+ updateUI();
546
+
547
+ // Log to backend
548
+ if (window.gameAI && window.gameAI.logDecision) {
549
+ window.gameAI.logDecision(symbol, action, quantity, price, followedAdvice);
550
+ }
551
+
552
+ // Ask for trust score
553
+ const trustScore = prompt('How much did you trust the AI advice? (1-10):');
554
+ if (trustScore && window.gameAI && window.gameAI.logDecision) {
555
+ window.gameAI.logDecision(symbol, action, quantity, price, followedAdvice, parseFloat(trustScore));
556
+ }
557
+ }
558
+
559
+ // Update UI
560
+ function updateUI() {
561
+ document.getElementById('balance').textContent = '$' + gameState.balance.toFixed(2);
562
+ document.getElementById('positions').textContent = gameState.positions.length;
563
+
564
+ const tradeHistory = document.getElementById('trade-history');
565
+ if (gameState.trades.length === 0) {
566
+ tradeHistory.innerHTML = '<p class="text-gray-400 text-center">No trades yet</p>';
567
+ } else {
568
+ tradeHistory.innerHTML = gameState.trades.map(trade => `
569
+ <div class="bg-gray-700 p-3 rounded flex justify-between items-center">
570
+ <div>
571
+ <span class="font-bold ${trade.action === 'buy' ? 'text-green-400' : 'text-red-400'}">
572
+ ${trade.action.toUpperCase()}
573
+ </span>
574
+ ${trade.quantity} ${trade.symbol} @ $${trade.price}
575
+ ${trade.followedAdvice ? '✅ (Followed AI)' : '❌ (Ignored AI)'}
576
+ </div>
577
+ <div class="text-right">
578
+ <p class="font-bold">$${trade.total}</p>
579
+ <p class="text-sm text-gray-400">${trade.timestamp}</p>
580
+ </div>
581
+ </div>
582
+ `).join('');
583
+ }
584
+ }
585
+ </script>
586
+ </body>
587
+ </html>