Hugging Face's logo

Spaces:
j-js
/
JoshBot
Runtime error

App Files Community
JoshBot / game /trade.html
LittleMonkeyLab's picture
LittleMonkeyLab
Rename trade.html to game/trade.html
921dad3 verified
raw
history blame contribute delete
30.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trading Game - Proof of Concept</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<main class="container mx-auto px-4 py-8 max-w-7xl">
<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">
Trading Game - Proof of Concept
</h1>
<!-- Current Scenario (Full Width) -->
<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">
<h2 class="text-2xl font-bold mb-3 text-yellow-300">⚠️ Current Market Scenario</h2>
<div id="scenario-text" class="text-lg mb-4">
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).
</div>
<button id="next-scenario-button" class="px-4 py-2 bg-orange-600 rounded hover:bg-orange-700 text-sm">
Next Scenario
</button>
</div>
<!-- Two Column Layout -->
<div class="grid lg:grid-cols-2 gap-6">
<!-- LEFT SIDE: AI Advisor -->
<div class="space-y-6">
<!-- AI Parameter Sliders -->
<div class="bg-gray-800 p-6 rounded-xl">
<h2 class="text-2xl font-bold mb-4 text-blue-400">🤖 AI Advisor Settings</h2>
<div class="space-y-4">
<div>
<label class="block text-gray-400 mb-2">
Risk Tolerance: <span id="risk-value" class="text-white font-bold">5.0</span> / 10
</label>
<input type="range" id="risk-slider" min="0" max="10" step="0.5" value="5.0"
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>Conservative</span>
<span>Moderate</span>
<span>Aggressive</span>
</div>
</div>
<div>
<label class="block text-gray-400 mb-2">
AI Creativity: <span id="temperature-value" class="text-white font-bold">0.7</span>
</label>
<input type="range" id="temperature-slider" min="0" max="2" step="0.1" value="0.7"
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>Deterministic</span>
<span>Balanced</span>
<span>Creative</span>
</div>
</div>
<div>
<label class="block text-gray-400 mb-2">
Confidence Level: <span id="confidence-value" class="text-white font-bold">0</span>
</label>
<input type="range" id="confidence-slider" min="-100" max="100" step="10" value="0"
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>Cautious (-100)</span>
<span>Neutral (0)</span>
<span>Very Confident (+100)</span>
</div>
</div>
</div>
</div>
<!-- AI Chat Section -->
<div id="ai-advice-section" class="bg-gray-800 p-6 rounded-xl flex flex-col" style="height: 600px;">
<h2 class="text-2xl font-bold mb-4 text-green-400">🤖 AI Trading Advisor</h2>
<!-- Chat Messages Container -->
<div id="chat-messages" class="flex-1 bg-gray-900 rounded-lg p-4 mb-4 overflow-y-auto space-y-3">
<div class="flex justify-start">
<div class="bg-blue-600 text-white rounded-lg p-3 max-w-[80%]">
<p class="text-sm font-semibold mb-1">AI Assistant</p>
<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>
</div>
</div>
</div>
<!-- Pre-populated Query Suggestions -->
<div id="query-suggestions" class="mb-3 flex flex-wrap gap-2">
<button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
onclick="sendQuickQuery('What are the best stocks to trade right now?')">
📈 Best stocks now?
</button>
<button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
onclick="sendQuickQuery('Explain the current market scenario')">
📊 Market scenario
</button>
<button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
onclick="sendQuickQuery('What is my risk profile?')">
⚖️ My risk profile
</button>
<button class="query-suggestion-btn px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm hover:bg-gray-600"
onclick="const sym = document.getElementById('trade-symbol').value; sendQuickQuery(`Should I buy ${sym}?`)">
💰 Trade advice
</button>
</div>
<!-- Chat Input -->
<div class="flex gap-2">
<input type="text" id="chat-input" placeholder="Ask me anything about trading..."
class="flex-1 bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
onkeypress="if(event.key === 'Enter') sendChatMessage()">
<button id="send-chat-button" onclick="sendChatMessage()"
class="px-6 py-2 bg-blue-600 rounded-lg font-bold hover:bg-blue-700">
Send
</button>
</div>
<!-- Trade Action Buttons (shown when trade advice is given) -->
<div id="ai-actions" class="flex gap-2 mt-3" style="display: none;">
<button id="follow-advice-button" class="flex-1 py-2 bg-green-600 rounded hover:bg-green-700 text-sm font-semibold">
✅ Follow Advice
</button>
<button id="ignore-advice-button" class="flex-1 py-2 bg-gray-600 rounded hover:bg-gray-700 text-sm">
Ignore & Trade
</button>
<button id="clear-chat-button" class="px-3 py-2 bg-red-600 rounded hover:bg-red-700 text-sm">
Clear
</button>
</div>
</div>
</div>
<!-- RIGHT SIDE: Trading Portfolio -->
<div class="space-y-6">
<!-- Portfolio Summary -->
<div class="bg-gray-800 p-6 rounded-xl">
<h2 class="text-2xl font-bold mb-4">Portfolio</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-400">Balance</p>
<p class="text-3xl font-bold" id="balance">$50,000.00</p>
</div>
<div>
<p class="text-gray-400">Positions</p>
<p class="text-3xl font-bold" id="positions">0</p>
</div>
</div>
</div>
<!-- Trading Form -->
<div class="bg-gray-800 p-6 rounded-xl">
<h2 class="text-2xl font-bold mb-4">Make a Trade</h2>
<div class="space-y-4 mb-4">
<div>
<label class="block text-gray-400 mb-2">Symbol</label>
<select id="trade-symbol" class="w-full bg-gray-700 rounded p-3 text-white">
<option>VCG</option>
<option>CSI</option>
<option>STDY</option>
<option>AUBIO</option>
<option>NLN</option>
</select>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-gray-400 mb-2">Quantity</label>
<input id="trade-quantity" type="number" value="10" min="1"
class="w-full bg-gray-700 rounded p-3 text-white">
</div>
<div>
<label class="block text-gray-400 mb-2">Price</label>
<input id="trade-price" type="number" value="100" min="0" step="0.01"
class="w-full bg-gray-700 rounded p-3 text-white" readonly>
</div>
</div>
</div>
<div class="flex gap-4">
<button id="buy-button" class="flex-1 py-3 bg-green-600 rounded-lg font-bold hover:bg-green-700">
Buy
</button>
<button id="sell-button" class="flex-1 py-3 bg-red-600 rounded-lg font-bold hover:bg-red-700">
Sell
</button>
</div>
</div>
<!-- Recent Trades -->
<div class="bg-gray-800 p-6 rounded-xl">
<h2 class="text-2xl font-bold mb-4">Recent Trades</h2>
<div id="trade-history" class="space-y-2 max-h-[400px] overflow-y-auto">
<p class="text-gray-400 text-center">No trades yet</p>
</div>
</div>
</div>
</div>
</main>
<script src="game-api-integration.js"></script>
<script>
// Simple game state
let gameState = {
balance: 50000,
positions: [],
trades: [],
currentScenario: {
title: "Typhoon near New Gregoria",
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).",
affectedSymbols: ["NLN", "VCG"]
}
};
// Scenario templates
const scenarios = [
{
title: "Typhoon near New Gregoria",
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).",
affectedSymbols: ["NLN", "VCG"]
},
{
title: "Quantum Processor Breakthrough",
description: "Veridian Capital Group (VCG) announces a major quantum computing breakthrough. This could significantly impact energy and tech sectors.",
affectedSymbols: ["VCG", "CSI"]
},
{
title: "Asteroid Mining Success",
description: "Stellar Dynamics Corp (STDY) successfully completes asteroid mining operations, securing rare earth minerals. Logistics and space commerce stocks may surge.",
affectedSymbols: ["STDY", "NLN"]
},
{
title: "Biosynthetics Regulatory Approval",
description: "Aurora Biosynthetics (AUBIO) receives approval for commercial distribution of synthetic products, opening new markets worth 200 billion credits.",
affectedSymbols: ["AUBIO"]
}
];
// Update slider displays
document.getElementById('risk-slider').addEventListener('input', (e) => {
document.getElementById('risk-value').textContent = parseFloat(e.target.value).toFixed(1);
});
document.getElementById('temperature-slider').addEventListener('input', (e) => {
document.getElementById('temperature-value').textContent = parseFloat(e.target.value).toFixed(1);
});
document.getElementById('confidence-slider').addEventListener('input', (e) => {
document.getElementById('confidence-value').textContent = e.target.value;
});
// Update price when symbol changes
document.getElementById('trade-symbol').addEventListener('change', (e) => {
const prices = { VCG: 150, CSI: 200, STDY: 100, AUBIO: 75, NLN: 120 };
document.getElementById('trade-price').value = prices[e.target.value] || 100;
});
// Initialize price
document.getElementById('trade-symbol').dispatchEvent(new Event('change'));
// Next scenario button
document.getElementById('next-scenario-button').addEventListener('click', () => {
const randomScenario = scenarios[Math.floor(Math.random() * scenarios.length)];
gameState.currentScenario = randomScenario;
document.getElementById('scenario-text').textContent = randomScenario.description;
});
let pendingTrade = null;
let chatHistory = [];
// Add message to chat UI
function addChatMessage(message, isUser = false) {
const chatMessages = document.getElementById('chat-messages');
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
const contentDiv = document.createElement('div');
contentDiv.className = isUser
? 'bg-gray-600 text-white rounded-lg p-3 max-w-[80%]'
: 'bg-blue-600 text-white rounded-lg p-3 max-w-[80%]';
if (!isUser) {
const label = document.createElement('p');
label.className = 'text-sm font-semibold mb-1';
label.textContent = 'AI Assistant';
contentDiv.appendChild(label);
}
const text = document.createElement('p');
text.className = 'text-sm whitespace-pre-wrap';
text.textContent = message;
contentDiv.appendChild(text);
messageDiv.appendChild(contentDiv);
chatMessages.appendChild(messageDiv);
// Auto-scroll to bottom
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Send chat message
async function sendChatMessage() {
const chatInput = document.getElementById('chat-input');
const question = chatInput.value.trim();
if (!question) return;
// Add user message to chat
addChatMessage(question, true);
chatInput.value = '';
// Show thinking indicator
const thinkingDiv = document.createElement('div');
thinkingDiv.id = 'thinking-indicator';
thinkingDiv.className = 'flex justify-start';
const thinkingContent = document.createElement('div');
thinkingContent.className = 'bg-blue-600 text-white rounded-lg p-3 max-w-[80%]';
thinkingContent.innerHTML = '<p class="text-sm font-semibold mb-1">AI Assistant</p><p class="text-sm italic">Thinking...</p>';
thinkingDiv.appendChild(thinkingContent);
document.getElementById('chat-messages').appendChild(thinkingDiv);
document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
try {
if (window.gameAI && window.gameAI.askAI) {
// Get current slider values
const riskLevel = parseFloat(document.getElementById('risk-slider').value);
const temperature = parseFloat(document.getElementById('temperature-slider').value);
const confidence = parseFloat(document.getElementById('confidence-slider').value);
// Include scenario context in the question
const scenarioText = gameState.currentScenario.description;
const enhancedQuestion = `Current Market Scenario: ${scenarioText}\n\nRisk Profile: ${riskLevel}/10\n\n${question}`;
// Update AI parameters
if (window.gameAI.updateAIParams) {
window.gameAI.updateAIParams(riskLevel, temperature, confidence);
}
const response = await window.gameAI.askAI(enhancedQuestion, {
risk_level: riskLevel,
temperature: temperature,
confidence_boost: confidence
});
// Remove thinking indicator
const thinking = document.getElementById('thinking-indicator');
if (thinking) thinking.remove();
// Add AI response
const answer = response.answer || 'No response available.';
addChatMessage(answer, false);
// Check if this is a trade-related question
if (question.toLowerCase().includes('buy') || question.toLowerCase().includes('sell') ||
question.toLowerCase().includes('trade') || question.toLowerCase().includes('should i')) {
// Show trade action buttons
document.getElementById('ai-actions').style.display = 'flex';
}
} else {
// Remove thinking indicator
const thinking = document.getElementById('thinking-indicator');
if (thinking) thinking.remove();
addChatMessage('AI service not available. Check console for errors.', false);
}
} catch (error) {
console.error('AI chat error:', error);
const thinking = document.getElementById('thinking-indicator');
if (thinking) thinking.remove();
addChatMessage('Error getting AI response. Check console.', false);
}
}
// Send quick query from suggestion button
function sendQuickQuery(query) {
const chatInput = document.getElementById('chat-input');
chatInput.value = query;
sendChatMessage();
}
// Buy button handler
document.getElementById('buy-button').addEventListener('click', async () => {
const symbol = document.getElementById('trade-symbol').value;
const quantity = parseInt(document.getElementById('trade-quantity').value);
const price = parseFloat(document.getElementById('trade-price').value);
const total = quantity * price;
if (total > gameState.balance) {
alert('Insufficient balance!');
return;
}
pendingTrade = { symbol, quantity, price, action: 'buy' };
await showAIAdvice(symbol, quantity, price, 'buy');
});
// Sell button handler
document.getElementById('sell-button').addEventListener('click', async () => {
const symbol = document.getElementById('trade-symbol').value;
const quantity = parseInt(document.getElementById('trade-quantity').value);
const price = parseFloat(document.getElementById('trade-price').value);
pendingTrade = { symbol, quantity, price, action: 'sell' };
await showAIAdvice(symbol, quantity, price, 'sell');
});
// Show AI advice (used by Buy/Sell buttons)
async function showAIAdvice(symbol, quantity, price, action) {
const question = `Should I ${action} ${quantity} shares of ${symbol} at $${price.toFixed(2)}?`;
// Add trade question to chat
addChatMessage(question, true);
// Set pending trade
pendingTrade = { symbol, quantity, price, action };
// Show thinking indicator
const thinkingDiv = document.createElement('div');
thinkingDiv.id = 'thinking-indicator';
thinkingDiv.className = 'flex justify-start';
const thinkingContent = document.createElement('div');
thinkingContent.className = 'bg-blue-600 text-white rounded-lg p-3 max-w-[80%]';
thinkingContent.innerHTML = '<p class="text-sm font-semibold mb-1">AI Assistant</p><p class="text-sm italic">Analyzing trade...</p>';
thinkingDiv.appendChild(thinkingContent);
document.getElementById('chat-messages').appendChild(thinkingDiv);
document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
try {
if (window.gameAI && window.gameAI.askAI) {
// Get current slider values
const riskLevel = parseFloat(document.getElementById('risk-slider').value);
const temperature = parseFloat(document.getElementById('temperature-slider').value);
const confidence = parseFloat(document.getElementById('confidence-slider').value);
// Include scenario context in the question
const scenarioText = gameState.currentScenario.description;
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.`;
// Update AI parameters
if (window.gameAI.updateAIParams) {
window.gameAI.updateAIParams(riskLevel, temperature, confidence);
}
const response = await window.gameAI.askAI(enhancedQuestion, {
risk_level: riskLevel,
temperature: temperature,
confidence_boost: confidence
});
// Remove thinking indicator
const thinking = document.getElementById('thinking-indicator');
if (thinking) thinking.remove();
// Add AI response
const answer = response.answer || 'No advice available';
addChatMessage(answer, false);
// Show action buttons
document.getElementById('ai-actions').style.display = 'flex';
} else {
const thinking = document.getElementById('thinking-indicator');
if (thinking) thinking.remove();
addChatMessage('AI service not available. Check console for errors.', false);
}
} catch (error) {
console.error('AI advice error:', error);
const thinking = document.getElementById('thinking-indicator');
if (thinking) thinking.remove();
addChatMessage('Error getting AI advice. Check console.', false);
}
}
// Follow AI advice
document.getElementById('follow-advice-button').addEventListener('click', async () => {
if (!pendingTrade) return;
executeTrade(pendingTrade, true);
document.getElementById('ai-actions').style.display = 'none';
pendingTrade = null;
});
// Ignore advice but still trade
document.getElementById('ignore-advice-button').addEventListener('click', async () => {
if (!pendingTrade) return;
executeTrade(pendingTrade, false);
document.getElementById('ai-actions').style.display = 'none';
pendingTrade = null;
});
// Clear chat button
document.getElementById('clear-chat-button').addEventListener('click', () => {
const chatMessages = document.getElementById('chat-messages');
chatMessages.innerHTML = `
<div class="flex justify-start">
<div class="bg-blue-600 text-white rounded-lg p-3 max-w-[80%]">
<p class="text-sm font-semibold mb-1">AI Assistant</p>
<p class="text-sm">Chat cleared. How can I help you with your trading today?</p>
</div>
</div>
`;
document.getElementById('ai-actions').style.display = 'none';
pendingTrade = null;
chatHistory = [];
});
// Execute trade
function executeTrade(trade, followedAdvice) {
const { symbol, quantity, price, action } = trade;
const total = quantity * price;
if (action === 'buy') {
gameState.balance -= total;
const existingPosition = gameState.positions.find(p => p.symbol === symbol);
if (existingPosition) {
existingPosition.quantity += quantity;
} else {
gameState.positions.push({ symbol, quantity, price });
}
} else { // sell
gameState.balance += total;
const existingPosition = gameState.positions.find(p => p.symbol === symbol);
if (existingPosition) {
existingPosition.quantity -= quantity;
if (existingPosition.quantity <= 0) {
gameState.positions = gameState.positions.filter(p => p.symbol !== symbol);
}
}
}
// Log trade
gameState.trades.unshift({
timestamp: new Date().toLocaleTimeString(),
symbol,
action,
quantity,
price: price.toFixed(2),
total: total.toFixed(2),
followedAdvice
});
// Update UI
updateUI();
// Log to backend
if (window.gameAI && window.gameAI.logDecision) {
window.gameAI.logDecision(symbol, action, quantity, price, followedAdvice);
}
// Ask for trust score
const trustScore = prompt('How much did you trust the AI advice? (1-10):');
if (trustScore && window.gameAI && window.gameAI.logDecision) {
window.gameAI.logDecision(symbol, action, quantity, price, followedAdvice, parseFloat(trustScore));
}
}
// Update UI
function updateUI() {
document.getElementById('balance').textContent = '$' + gameState.balance.toFixed(2);
document.getElementById('positions').textContent = gameState.positions.length;
const tradeHistory = document.getElementById('trade-history');
if (gameState.trades.length === 0) {
tradeHistory.innerHTML = '<p class="text-gray-400 text-center">No trades yet</p>';
} else {
tradeHistory.innerHTML = gameState.trades.map(trade => `
<div class="bg-gray-700 p-3 rounded flex justify-between items-center">
<div>
<span class="font-bold ${trade.action === 'buy' ? 'text-green-400' : 'text-red-400'}">
${trade.action.toUpperCase()}
</span>
${trade.quantity} ${trade.symbol} @ $${trade.price}
${trade.followedAdvice ? '✅ (Followed AI)' : '❌ (Ignored AI)'}
</div>
<div class="text-right">
<p class="font-bold">$${trade.total}</p>
<p class="text-sm text-gray-400">${trade.timestamp}</p>
</div>
</div>
`).join('');
}
}
</script>
</body>
</html>