|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Shy Guy Simulator - LLM Edition</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
max-width: 1200px; |
|
margin: 20px auto; |
|
padding: 20px; |
|
background-color: #1a1a1a; |
|
color: #fff; |
|
} |
|
|
|
.game-layout { |
|
display: grid; |
|
grid-template-columns: 2fr 3fr; |
|
gap: 20px; |
|
} |
|
|
|
#game-container { |
|
background-color: #2a2a2a; |
|
padding: 20px; |
|
border-radius: 8px; |
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
.chat-container { |
|
height: 300px; |
|
overflow-y: auto; |
|
margin: 20px 0; |
|
padding: 10px; |
|
background-color: #333; |
|
border-radius: 4px; |
|
} |
|
|
|
.message { |
|
margin: 10px 0; |
|
padding: 10px; |
|
border-radius: 4px; |
|
word-wrap: break-word; |
|
} |
|
|
|
.wingman-msg { |
|
background-color: #2c5282; |
|
margin-right: 20%; |
|
} |
|
|
|
.shyguy { |
|
background-color: #4a5568; |
|
margin-left: 20%; |
|
} |
|
|
|
.error { |
|
background-color: #c53030; |
|
text-align: center; |
|
} |
|
|
|
.viewport { |
|
width: 800px; |
|
height: 800px; |
|
overflow: hidden; |
|
position: relative; |
|
border: 2px solid #4a5568; |
|
border-radius: 4px; |
|
} |
|
|
|
.grid-container { |
|
width: 10240px; |
|
height: 10240px; |
|
position: relative; |
|
background-color: #1a1a1a; |
|
background-image: linear-gradient(#2d3748 1px, transparent 1px), |
|
linear-gradient(90deg, #2d3748 1px, transparent 1px); |
|
background-size: 20px 20px; |
|
} |
|
|
|
#player, #wingman { |
|
width: 16px; |
|
height: 16px; |
|
border-radius: 50%; |
|
position: absolute; |
|
transition: all 0.1s ease; |
|
z-index: 2; |
|
} |
|
|
|
#player { |
|
background-color: #4299e1; |
|
} |
|
|
|
#wingman { |
|
background-color: #48bb78; |
|
} |
|
|
|
.location-marker { |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 4px; |
|
} |
|
|
|
.bar { background-color: #744210; } |
|
.dj { background-color: #2c5282; } |
|
.girl { background-color: #d53f8c; } |
|
.sister { background-color: #805ad5; } |
|
.obstacle { background-color: #4a5568; } |
|
|
|
.legend { |
|
display: flex; |
|
gap: 10px; |
|
margin-top: 10px; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.legend-item { |
|
display: flex; |
|
align-items: center; |
|
gap: 5px; |
|
} |
|
|
|
.legend-color { |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 4px; |
|
} |
|
|
|
#input-container { |
|
display: flex; |
|
gap: 10px; |
|
margin-top: 20px; |
|
} |
|
|
|
#user-input { |
|
flex-grow: 1; |
|
padding: 10px; |
|
border: none; |
|
border-radius: 4px; |
|
background-color: #4a4a4a; |
|
color: white; |
|
} |
|
|
|
button { |
|
padding: 10px 20px; |
|
background-color: #4299e1; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
} |
|
|
|
button:hover { |
|
background-color: #3182ce; |
|
} |
|
|
|
#stats { |
|
margin-top: 20px; |
|
padding: 10px; |
|
background-color: #333; |
|
border-radius: 4px; |
|
display: flex; |
|
justify-content: space-between; |
|
flex-wrap: wrap; |
|
gap: 10px; |
|
} |
|
|
|
.drunk-effect { |
|
animation: wobble 1s infinite; |
|
} |
|
|
|
@keyframes wobble { |
|
0% { transform: translate(0, 0) rotate(0deg); } |
|
15% { transform: translate(-5%, 0) rotate(-5deg); } |
|
30% { transform: translate(5%, 0) rotate(5deg); } |
|
45% { transform: translate(-5%, 0) rotate(-3deg); } |
|
60% { transform: translate(5%, 0) rotate(3deg); } |
|
75% { transform: translate(-5%, 0) rotate(-1deg); } |
|
100% { transform: translate(0, 0) rotate(0deg); } |
|
} |
|
|
|
#api-key-container { |
|
margin-bottom: 20px; |
|
} |
|
|
|
.tooltip { |
|
position: fixed; |
|
background: rgba(0, 0, 0, 0.8); |
|
padding: 5px; |
|
border-radius: 4px; |
|
font-size: 12px; |
|
pointer-events: none; |
|
z-index: 100; |
|
display: none; |
|
} |
|
|
|
.win-screen { |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
background: rgba(0, 0, 0, 0.9); |
|
padding: 20px; |
|
border-radius: 10px; |
|
text-align: center; |
|
z-index: 1000; |
|
} |
|
|
|
.controls-info { |
|
margin-top: 10px; |
|
padding: 10px; |
|
background-color: #333; |
|
border-radius: 4px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="game-container"> |
|
<h1>Shy Guy Simulator - LLM Edition</h1> |
|
|
|
<div id="api-key-container"> |
|
<input type="password" id="api-key" placeholder="Enter your Mistral API key" style="width: 100%; padding: 10px; margin-bottom: 10px;"> |
|
<button onclick="initializeGame()" id="start-button">Start Game</button> |
|
</div> |
|
|
|
<div id="game-content" style="display: none;"> |
|
<div id="stats"> |
|
<span>Confidence: <span id="confidence">0</span>%</span> |
|
<span>Anxiety: <span id="anxiety">100</span>%</span> |
|
<span>Drinks: <span id="drinks">0</span></span> |
|
<span>Time: <span id="time">8:00 PM</span></span> |
|
</div> |
|
|
|
<div class="game-layout"> |
|
<div class="chat-side"> |
|
<div class="chat-container" id="chat-container"></div> |
|
<div id="input-container"> |
|
<input type="text" id="user-input" placeholder="Talk to your shy friend..."> |
|
<button onclick="handleUserInput()">Send</button> |
|
</div> |
|
<div class="controls-info"> |
|
Use arrow keys to move the wingman (green dot).<br> |
|
Get close to push the shy guy (blue dot) in the right direction! |
|
</div> |
|
</div> |
|
|
|
<div class="game-side"> |
|
<div class="viewport"> |
|
<div class="grid-container" id="party-grid"></div> |
|
</div> |
|
|
|
<div class="legend"> |
|
<div class="legend-item"> |
|
<div class="legend-color" style="background-color: #4299e1;"></div> |
|
<span>Shy Guy</span> |
|
</div> |
|
<div class="legend-item"> |
|
<div class="legend-color" style="background-color: #48bb78;"></div> |
|
<span>Wingman (You)</span> |
|
</div> |
|
<div class="legend-item"> |
|
<div class="legend-color" style="background-color: #744210;"></div> |
|
<span>Bar</span> |
|
</div> |
|
<div class="legend-item"> |
|
<div class="legend-color" style="background-color: #2c5282;"></div> |
|
<span>DJ</span> |
|
</div> |
|
<div class="legend-item"> |
|
<div class="legend-color" style="background-color: #d53f8c;"></div> |
|
<span>Girl</span> |
|
</div> |
|
<div class="legend-item"> |
|
<div class="legend-color" style="background-color: #805ad5;"></div> |
|
<span>Sister</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="tooltip" id="tooltip"></div> |
|
|
|
<script> |
|
class ShyGuySimulator { |
|
constructor(apiKey) { |
|
this.apiKey = apiKey; |
|
this.state = { |
|
confidence: 0, |
|
anxiety: 100, |
|
drinks: 0, |
|
time: new Date(2024, 0, 1, 20, 0), |
|
playerPos: { x: 50, y: 450 }, |
|
wingmanPos: { x: 40, y: 450 }, |
|
isProcessing: false, |
|
hasSpokenToGirl: false, |
|
emotion: 'anxious', |
|
locations: { |
|
bar: [{ x: 450, y: 50 }, { x: 451, y: 50 }], |
|
dj: [{ x: 250, y: 20 }, { x: 251, y: 20 }], |
|
girl: [{ x: 450, y: 450 }], |
|
sister: [{ x: 150, y: 250 }], |
|
obstacles: [ |
|
{ x: 200, y: 200 }, { x: 201, y: 200 }, |
|
{ x: 300, y: 300 }, { x: 301, y: 300 } |
|
] |
|
} |
|
}; |
|
|
|
this.context = [{ |
|
role: 'system', |
|
content: `You are roleplaying as a shy guy at a party, providing both dialogue and movement decisions. |
|
The party is on a 512x512 grid. Movement values should be between -30 and 30 units per move. |
|
ALWAYS structure your responses in this exact format: |
|
{ |
|
"dialogue": "Your spoken response here", |
|
"movement": { |
|
"x": number (-30 to 30), |
|
"y": number (-30 to 30) |
|
}, |
|
"emotion": "anxious|nervous|slightly_confident|confident" |
|
} |
|
|
|
Rules: |
|
1. When drinks > 2, be more likely to move toward the girl |
|
2. When confidence < 30, prefer to move away or stay still |
|
3. Keep dialogue natural and brief (1-2 sentences) |
|
4. Movement should reflect emotional state |
|
5. Consider current position and avoid obstacles |
|
6. React to encouragement from the wingman |
|
7. If near the girl and confidence/drinks are low, move away` |
|
}]; |
|
|
|
this.initialize(); |
|
this.initializeGrid(); |
|
this.setupKeyboardControls(); |
|
} |
|
|
|
initialize() { |
|
this.addMessage("Hey! I'll be your wingman tonight. I see that girl you like over there - let's help you talk to her!", 'wingman-msg'); |
|
this.addMessage("I... I don't know about this. Maybe I should just go home...", 'shyguy'); |
|
this.updateStats(); |
|
} |
|
|
|
setupKeyboardControls() { |
|
document.addEventListener('keydown', (e) => { |
|
const moveDistance = 5; |
|
let dx = 0, dy = 0; |
|
|
|
switch(e.key) { |
|
case 'ArrowLeft': |
|
dx = -moveDistance; |
|
break; |
|
case 'ArrowRight': |
|
dx = moveDistance; |
|
break; |
|
case 'ArrowUp': |
|
dy = -moveDistance; |
|
break; |
|
case 'ArrowDown': |
|
dy = moveDistance; |
|
break; |
|
} |
|
|
|
if (dx !== 0 || dy !== 0) { |
|
this.moveWingman(dx, dy); |
|
} |
|
}); |
|
} |
|
|
|
moveWingman(dx, dy) { |
|
let newX = this.state.wingmanPos.x + dx; |
|
let newY = this.state.wingmanPos.y + dy; |
|
|
|
|
|
newX = Math.max(0, Math.min(511, newX)); |
|
newY = Math.max(0, Math.min(511, newY)); |
|
|
|
|
|
const distanceToPlayer = Math.hypot( |
|
newX - this.state.playerPos.x, |
|
newY - this.state.playerPos.y |
|
); |
|
|
|
if (distanceToPlayer < 20) { |
|
|
|
const pushForce = 10; |
|
const pushDx = (this.state.playerPos.x - newX) / distanceToPlayer * pushForce; |
|
const pushDy = (this.state.playerPos.y - newY) / distanceToPlayer * pushForce; |
|
|
|
|
|
this.movePlayer(pushDx, pushDy, true); |
|
} |
|
|
|
|
|
this.state.wingmanPos = { x: newX, y: newY }; |
|
this.updateCharacterPositions(); |
|
} |
|
|
|
async movePlayer(dx, dy, isPush = false) { |
|
let newX = this.state.playerPos.x + dx; |
|
let newY = this.state.playerPos.y + dy; |
|
|
|
|
|
newX = Math.max(0, Math.min(511, newX)); |
|
newY = Math.max(0, Math.min(511, newY)); |
|
|
|
|
|
if (this.isLocationNearby(newX, newY, 'obstacles', 15)) { |
|
return; |
|
} |
|
|
|
|
|
if (this.state.drinks >= 3 && !isPush) { |
|
const stumbleChance = (this.state.drinks - 2) * 0.1; |
|
if (Math.random() < stumbleChance) { |
|
const randomDir = Math.random() < 0.5 ? 1 : -1; |
|
if (Math.random() < 0.5) { |
|
newX += randomDir * 10; |
|
} else { |
|
newY += randomDir * 10; |
|
} |
|
newX = Math.max(0, Math.min(511, newX)); |
|
newY = Math.max(0, Math.min(511, newY)); |
|
} |
|
} |
|
|
|
|
|
this.state.playerPos = { x: newX, y: newY }; |
|
|
|
if (!isPush) { |
|
|
|
await this.handleLocationInteraction(newX, newY); |
|
this.state.time = new Date(this.state.time.getTime() + 2 * 60000); |
|
} |
|
|
|
this.updateStats(); |
|
this.updateCharacterPositions(); |
|
} |
|
|
|
isLocationNearby(x, y, type, radius = 10) { |
|
return this.state.locations[type].some(pos => |
|
Math.hypot(x - pos.x * 20, y - pos.y * 20) < radius |
|
); |
|
} |
|
|
|
updateCharacterPositions() { |
|
const player = document.getElementById('player'); |
|
const wingman = document.getElementById('wingman'); |
|
|
|
if (player) { |
|
player.style.left = `${this.state.playerPos.x}px`; |
|
player.style.top = `${this.state.playerPos.y}px`; |
|
if (this.state.drinks >= 3) { |
|
player.classList.add('drunk-effect'); |
|
} else { |
|
player.classList.remove('drunk-effect'); |
|
} |
|
} |
|
|
|
if (wingman) { |
|
wingman.style.left = `${this.state.wingmanPos.x}px`; |
|
wingman.style.top = `${this.state.wingmanPos.y}px`; |
|
} |
|
|
|
|
|
const viewport = document.querySelector('.viewport'); |
|
if (viewport) { |
|
const scrollX = this.state.playerPos.x - viewport.clientWidth / 2; |
|
const scrollY = this.state.playerPos.y - viewport.clientHeight / 2; |
|
viewport.scrollTo(scrollX, scrollY); |
|
} |
|
} |
|
|
|
initializeGrid() { |
|
const grid = document.getElementById('party-grid'); |
|
grid.innerHTML = ''; |
|
|
|
|
|
Object.entries(this.state.locations).forEach(([type, positions]) => { |
|
positions.forEach(pos => { |
|
const marker = document.createElement('div'); |
|
marker.className = `location-marker ${type}`; |
|
marker.style.left = `${pos.x * 20}px`; |
|
marker.style.top = `${pos.y * 20}px`; |
|
grid.appendChild(marker); |
|
}); |
|
}); |
|
|
|
|
|
const player = document.createElement('div'); |
|
player.id = 'player'; |
|
if (this.state.drinks >= 3) player.classList.add('drunk-effect'); |
|
grid.appendChild(player); |
|
|
|
const wingman = document.createElement('div'); |
|
wingman.id = 'wingman'; |
|
grid.appendChild(wingman); |
|
|
|
|
|
this.updateCharacterPositions(); |
|
} |
|
|
|
async handleLocationInteraction(x, y) { |
|
x = Math.floor(x / 20); |
|
y = Math.floor(y / 20); |
|
|
|
if (this.isLocation(x, y, 'bar')) { |
|
this.state.drinks++; |
|
this.state.confidence = Math.min(100, this.state.confidence + 15); |
|
this.state.anxiety = Math.max(0, this.state.anxiety - 10); |
|
await this.addMessage("*Takes another drink from the bar*", 'shyguy'); |
|
|
|
if (this.state.drinks > 5) { |
|
this.state.confidence = Math.max(0, this.state.confidence - 5); |
|
await this.addMessage("*Starting to feel really dizzy...*", 'shyguy'); |
|
} |
|
} |
|
|
|
if (this.isLocation(x, y, 'sister')) { |
|
this.state.confidence = Math.min(100, this.state.confidence + 20); |
|
this.state.anxiety = Math.max(0, this.state.anxiety - 15); |
|
await this.addMessage("*Gets some encouragement from sister*", 'shyguy'); |
|
} |
|
|
|
if (this.isLocation(x, y, 'dj')) { |
|
this.state.confidence = Math.min(100, this.state.confidence + 10); |
|
this.state.anxiety = Math.max(0, this.state.anxiety - 5); |
|
await this.addMessage("*Vibing to the music*", 'shyguy'); |
|
} |
|
|
|
if (this.isLocation(x, y, 'girl')) { |
|
if (this.state.confidence >= 70 && this.state.anxiety <= 50) { |
|
await this.addMessage("*Finally gathered the courage to talk to her!*", 'shyguy'); |
|
this.gameWon(); |
|
} else { |
|
await this.addMessage("*Gets too nervous and quickly walks away*", 'shyguy'); |
|
this.state.playerPos = { |
|
x: Math.max(0, x - 2) * 20, |
|
y: Math.max(0, y - 2) * 20 |
|
}; |
|
this.state.anxiety += 15; |
|
this.state.confidence = Math.max(0, this.state.confidence - 10); |
|
} |
|
} |
|
} |
|
|
|
isLocation(x, y, type) { |
|
return this.state.locations[type].some(pos => pos.x === x && pos.y === y); |
|
} |
|
|
|
async handleInput(userInput) { |
|
if (this.state.isProcessing) return; |
|
this.state.isProcessing = true; |
|
|
|
try { |
|
if (!userInput.trim()) throw new Error("Please enter some text"); |
|
|
|
this.addMessage(userInput, 'wingman-msg'); |
|
this.addLoadingMessage(); |
|
|
|
const currentState = `Current state: |
|
Confidence: ${this.state.confidence}%, |
|
Anxiety: ${this.state.anxiety}%, |
|
Drinks: ${this.state.drinks}, |
|
Location: ${this.getLocationDescription()}, |
|
Position: (${Math.floor(this.state.playerPos.x / 20)},${Math.floor(this.state.playerPos.y / 20)}), |
|
Emotion: ${this.state.emotion}`; |
|
|
|
this.context.push({ |
|
role: 'user', |
|
content: `${userInput}\n\n${currentState}` |
|
}); |
|
|
|
const llmResponse = await this.callMistralAPI(); |
|
const dialogue = await this.processLLMResponse(llmResponse); |
|
|
|
this.removeLoadingMessage(); |
|
this.addMessage(dialogue, 'shyguy'); |
|
|
|
this.context.push({ |
|
role: 'assistant', |
|
content: llmResponse |
|
}); |
|
|
|
if (this.context.length > 10) { |
|
this.context = [ |
|
this.context[0], |
|
...this.context.slice(-4) |
|
]; |
|
} |
|
} catch (error) { |
|
this.removeLoadingMessage(); |
|
this.addMessage(`Error: ${error.message}`, 'error'); |
|
console.error('Error:', error); |
|
} finally { |
|
this.state.isProcessing = false; |
|
} |
|
} |
|
|
|
async processLLMResponse(response) { |
|
try { |
|
const jsonMatch = response.match(/\{[\s\S]*\}/); |
|
if (!jsonMatch) { |
|
throw new Error("Invalid response format"); |
|
} |
|
|
|
const parsedResponse = JSON.parse(jsonMatch[0]); |
|
|
|
if (!parsedResponse.dialogue || !parsedResponse.movement || !parsedResponse.emotion) { |
|
throw new Error("Missing required fields in response"); |
|
} |
|
|
|
this.state.emotion = parsedResponse.emotion; |
|
|
|
await this.movePlayer( |
|
parsedResponse.movement.x, |
|
parsedResponse.movement.y |
|
); |
|
|
|
this.updateEmotionalState(parsedResponse.emotion); |
|
|
|
return parsedResponse.dialogue; |
|
} catch (error) { |
|
console.error("Error processing LLM response:", error); |
|
return "I'm not sure what to do right now..."; |
|
} |
|
} |
|
|
|
updateEmotionalState(emotion) { |
|
const emotionEffects = { |
|
'anxious': { confidence: -5, anxiety: 5 }, |
|
'nervous': { confidence: -2, anxiety: 2 }, |
|
'slightly_confident': { confidence: 5, anxiety: -5 }, |
|
'confident': { confidence: 10, anxiety: -10 } |
|
}; |
|
|
|
const effect = emotionEffects[emotion] || { confidence: 0, anxiety: 0 }; |
|
|
|
this.state.confidence = Math.max(0, Math.min(100, this.state.confidence + effect.confidence)); |
|
this.state.anxiety = Math.max(0, Math.min(100, this.state.anxiety + effect.anxiety)); |
|
} |
|
|
|
async callMistralAPI() { |
|
try { |
|
const response = await fetch('https://api.mistral.ai/v1/chat/completions', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
'Authorization': `Bearer ${this.apiKey}` |
|
}, |
|
body: JSON.stringify({ |
|
model: 'mistral-large-latest', |
|
messages: this.context, |
|
max_tokens: 150, |
|
temperature: 0.7 |
|
}) |
|
}); |
|
|
|
if (!response.ok) { |
|
const error = await response.json(); |
|
throw new Error(error.error?.message || 'API request failed'); |
|
} |
|
|
|
const data = await response.json(); |
|
return data.choices[0].message.content; |
|
} catch (error) { |
|
if (error.message.includes('API key')) { |
|
throw new Error('Invalid API key. Please check your API key and try again.'); |
|
} |
|
throw new Error('Failed to get response from AI. Please try again.'); |
|
} |
|
} |
|
|
|
getLocationDescription() { |
|
const x = Math.floor(this.state.playerPos.x / 20); |
|
const y = Math.floor(this.state.playerPos.y / 20); |
|
|
|
if (this.isLocation(x, y, 'bar')) return 'at the bar'; |
|
if (this.isLocation(x, y, 'dj')) return 'near the DJ'; |
|
if (this.isLocation(x, y, 'sister')) return 'with sister'; |
|
if (this.isLocation(x, y, 'girl')) return 'near the girl'; |
|
return 'in the room'; |
|
} |
|
|
|
gameWon() { |
|
this.addMessage("Congratulations! You successfully talked to her, and she seems interested! The party wasn't so scary after all.", 'wingman-msg'); |
|
this.state.hasSpokenToGirl = true; |
|
|
|
const winScreen = document.createElement('div'); |
|
winScreen.className = 'win-screen'; |
|
winScreen.innerHTML = ` |
|
<h2>You did it!</h2> |
|
<p>Final Stats:</p> |
|
<p>Confidence: ${this.state.confidence}%</p> |
|
<p>Anxiety: ${this.state.anxiety}%</p> |
|
<p>Drinks: ${this.state.drinks}</p> |
|
<p>Time taken: ${this.getTimeDifference()}</p> |
|
<button onclick="location.reload()">Play Again</button> |
|
`; |
|
document.body.appendChild(winScreen); |
|
} |
|
|
|
getTimeDifference() { |
|
const startTime = new Date(2024, 0, 1, 20, 0); |
|
const timeDiff = this.state.time - startTime; |
|
const minutes = Math.floor(timeDiff / 60000); |
|
return `${minutes} minutes`; |
|
} |
|
|
|
addMessage(text, type) { |
|
const chat = document.getElementById('chat-container'); |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = `message ${type}`; |
|
messageDiv.textContent = text; |
|
chat.appendChild(messageDiv); |
|
chat.scrollTop = chat.scrollHeight; |
|
} |
|
|
|
addLoadingMessage() { |
|
const chat = document.getElementById('chat-container'); |
|
const loadingDiv = document.createElement('div'); |
|
loadingDiv.className = 'message shyguy typing'; |
|
loadingDiv.id = 'loading-message'; |
|
loadingDiv.textContent = 'Thinking...'; |
|
chat.appendChild(loadingDiv); |
|
chat.scrollTop = chat.scrollHeight; |
|
} |
|
|
|
removeLoadingMessage() { |
|
const loadingMessage = document.getElementById('loading-message'); |
|
if (loadingMessage) { |
|
loadingMessage.remove(); |
|
} |
|
} |
|
|
|
updateStats() { |
|
document.getElementById('confidence').textContent = Math.round(this.state.confidence); |
|
document.getElementById('anxiety').textContent = Math.round(this.state.anxiety); |
|
document.getElementById('drinks').textContent = this.state.drinks; |
|
document.getElementById('time').textContent = |
|
this.state.time.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); |
|
} |
|
} |
|
|
|
let game; |
|
|
|
function initializeGame() { |
|
const apiKey = document.getElementById('api-key').value.trim(); |
|
if (!apiKey) { |
|
alert('Please enter your Mistral API key'); |
|
return; |
|
} |
|
|
|
document.getElementById('api-key-container').style.display = 'none'; |
|
document.getElementById('game-content').style.display = 'block'; |
|
|
|
game = new ShyGuySimulator(apiKey); |
|
} |
|
|
|
async function handleUserInput() { |
|
if (!game) return; |
|
|
|
const input = document.getElementById('user-input'); |
|
const text = input.value.trim(); |
|
if (text) { |
|
await game.handleInput(text); |
|
input.value = ''; |
|
} |
|
} |
|
|
|
document.getElementById('user-input')?.addEventListener('keypress', function(e) { |
|
if (e.key === 'Enter') { |
|
handleUserInput(); |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
