dddddddd

index.html

@@ -268,52 +268,110 @@
 
     <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: 0, y: 9 },
-                    moveSpeed: 1,
-                    isProcessing: false,
-                    hasSpokenToGirl: false,
-                    locations: {
-                        bar: [{ x: 8, y: 1 }, { x: 9, y: 1 }],
-                        dj: [{ x: 4, y: 0 }, { x: 5, y: 0 }],
-                        girl: [{ x: 9, y: 8 }],
-                        sister: [{ x: 2, y: 5 }],
-                        obstacles: [
-                            { x: 3, y: 3 }, { x: 4, y: 3 }, 
-                            { x: 6, y: 6 }, { x: 7, y: 6 }
-                        ]
-                    }
-                };
-
-                this.context = [
-                    {
-                        role: 'system',
-                        content: `You are roleplaying as a shy and anxious guy at a homecoming party. 
-                        You're standing near the entrance, and the girl you like is across the room. 
-                        Your responses should reflect your social anxiety and reluctance to approach her. 
-                        Keep responses concise (max 2-3 sentences) and natural. 
-                        Express hesitation, worry, and self-doubt while reacting to the wingman's encouragement.
-                        Current state: Confidence: ${this.state.confidence}%, Anxiety: ${this.state.anxiety}%`
-                    }
-                ];
-
-                this.initialize();
-                this.initializeGrid();
-            }
-
-            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');
-                this.addMessage("I... I don't know about this. Maybe I should just go home...", 'shyguy');
-                this.updateStats();
-            }
+	<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: 0, y: 9 },
+					moveSpeed: 1,
+					isProcessing: false,
+					hasSpokenToGirl: false,
+					lastEmotion: 'anxious',
+					locations: {
+						bar: [{ x: 8, y: 1 }, { x: 9, y: 1 }],
+						dj: [{ x: 4, y: 0 }, { x: 5, y: 0 }],
+						girl: [{ x: 9, y: 8 }],
+						sister: [{ x: 2, y: 5 }],
+						obstacles: [
+							{ x: 3, y: 3 }, { x: 4, y: 3 }, 
+							{ x: 6, y: 6 }, { x: 7, y: 6 }
+						]
+					}
+				};
+		
+				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 10x10 grid. You start at (0,9), and the girl you like is at (9,8).
+					ALWAYS structure your responses in this exact format:
+					{
+						"dialogue": "Your spoken response here",
+						"movement": {
+							"x": number (-1, 0, or 1 for movement),
+							"y": number (-1, 0, or 1 for movement)
+						},
+						"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. Account for obstacles at: [(3,3), (4,3), (6,6), (7,6)]
+					6. Consider locations of: bar(8,1 & 9,1), DJ(4,0 & 5,0), sister(2,5)
+					Current state: Confidence: ${this.state.confidence}%, Anxiety: ${this.state.anxiety}%`
+				}];
+		
+				this.initialize();
+				this.initializeGrid();
+				this.startAutonomousMovement();
+			}
+		
+			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');
+				this.addMessage("I... I don't know about this. Maybe I should just go home...", 'shyguy');
+				this.updateStats();
+			}
+		
+			startAutonomousMovement() {
+				this.movementInterval = setInterval(async () => {
+					if (!this.state.isProcessing && !this.state.hasSpokenToGirl) {
+						await this.getNextMove();
+					}
+				}, 5000);
+			}
+		
+			stopAutonomousMovement() {
+				if (this.movementInterval) {
+					clearInterval(this.movementInterval);
+				}
+			}
+		
+			async getNextMove() {
+				try {
+					const response = await this.callMistralAPI();
+					let parsedResponse;
+					
+					try {
+						parsedResponse = JSON.parse(response);
+					} catch (e) {
+						const jsonMatch = response.match(/\{[\s\S]*\}/);
+						if (jsonMatch) {
+							parsedResponse = JSON.parse(jsonMatch[0]);
+						} else {
+							throw new Error('Could not parse LLM response');
+						}
+					}
+		
+					this.state.lastEmotion = parsedResponse.emotion;
+					this.addMessage(parsedResponse.dialogue, 'shyguy');
+		
+					if (parsedResponse.movement) {
+						await this.movePlayer(
+							parsedResponse.movement.x, 
+							parsedResponse.movement.y
+						);
+					}
+				} catch (error) {
+					console.error('Error getting next move:', error);
+				}
+			}
 
             initializeGrid() {
                 const grid = document.getElementById('party-grid');

test_x.html

@@ -0,0 +1,227 @@
+// The HTML and CSS remain the same until the ShyGuySimulator class
+
+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: 0, y: 9 },
+            moveSpeed: 1,
+            isProcessing: false,
+            hasSpokenToGirl: false,
+            lastEmotion: 'anxious',
+            locations: {
+                bar: [{ x: 8, y: 1 }, { x: 9, y: 1 }],
+                dj: [{ x: 4, y: 0 }, { x: 5, y: 0 }],
+                girl: [{ x: 9, y: 8 }],
+                sister: [{ x: 2, y: 5 }],
+                obstacles: [
+                    { x: 3, y: 3 }, { x: 4, y: 3 }, 
+                    { x: 6, y: 6 }, { x: 7, y: 6 }
+                ]
+            }
+        };
+
+        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 10x10 grid. You start at (0,9), and the girl you like is at (9,8).
+            ALWAYS structure your responses in this exact format:
+            {
+                "dialogue": "Your spoken response here",
+                "movement": {
+                    "x": number (-1, 0, or 1 for movement),
+                    "y": number (-1, 0, or 1 for movement)
+                },
+                "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. Account for obstacles at: [(3,3), (4,3), (6,6), (7,6)]
+            6. Consider locations of: bar(8,1 & 9,1), DJ(4,0 & 5,0), sister(2,5)
+            Current state: Confidence: ${this.state.confidence}%, Anxiety: ${this.state.anxiety}%`
+        }];
+
+        this.initialize();
+        this.initializeGrid();
+        this.startAutonomousMovement();
+    }
+
+    // Add autonomous movement
+    startAutonomousMovement() {
+        this.movementInterval = setInterval(async () => {
+            if (!this.state.isProcessing && !this.state.hasSpokenToGirl) {
+                await this.getNextMove();
+            }
+        }, 5000); // Move every 5 seconds
+    }
+
+    stopAutonomousMovement() {
+        if (this.movementInterval) {
+            clearInterval(this.movementInterval);
+        }
+    }
+
+    async getNextMove() {
+        try {
+            const response = await this.callMistralAPI();
+            let parsedResponse;
+            
+            try {
+                // Try to parse the response as JSON
+                parsedResponse = JSON.parse(response);
+            } catch (e) {
+                // If parsing fails, try to extract JSON from the text
+                const jsonMatch = response.match(/\{[\s\S]*\}/);
+                if (jsonMatch) {
+                    parsedResponse = JSON.parse(jsonMatch[0]);
+                } else {
+                    throw new Error('Could not parse LLM response');
+                }
+            }
+
+            // Update emotional state
+            this.state.lastEmotion = parsedResponse.emotion;
+
+            // Add the dialogue
+            this.addMessage(parsedResponse.dialogue, 'shyguy');
+
+            // Execute the movement
+            if (parsedResponse.movement) {
+                await this.movePlayer(
+                    parsedResponse.movement.x, 
+                    parsedResponse.movement.y
+                );
+            }
+        } catch (error) {
+            console.error('Error getting next move:', error);
+        }
+    }
+
+    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');
+            this.addLoadingMessage();
+
+            const currentState = `Current state: 
+                Confidence: ${this.state.confidence}%, 
+                Anxiety: ${this.state.anxiety}%, 
+                Drinks: ${this.state.drinks}, 
+                Position: (${this.state.playerPos.x},${this.state.playerPos.y}), 
+                Location: ${this.getLocationDescription()}`;
+            
+            this.context.push({
+                role: 'user',
+                content: `${userInput}\n\n${currentState}`
+            });
+
+            await this.getNextMove();
+
+        } catch (error) {
+            this.removeLoadingMessage();
+            this.addMessage(`Error: ${error.message}`, 'error');
+            console.error('Error:', error);
+        } finally {
+            this.state.isProcessing = false;
+        }
+    }
+
+    async movePlayer(dx, dy) {
+        let newX = this.state.playerPos.x + dx * this.state.moveSpeed;
+        let newY = this.state.playerPos.y + dy * this.state.moveSpeed;
+        
+        // Check boundaries
+        newX = Math.max(0, Math.min(9, newX));
+        newY = Math.max(0, Math.min(9, newY));
+        
+        // Check obstacles
+        if (this.isLocation(newX, newY, 'obstacles')) {
+            return;
+        }
+
+        // Random stumble when drunk
+        if (this.state.drinks >= 3) {
+            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;
+                } else {
+                    newY += randomDir;
+                }
+                newX = Math.max(0, Math.min(9, newX));
+                newY = Math.max(0, Math.min(9, newY));
+            }
+        }
+
+        // Update position
+        this.state.playerPos = { x: newX, y: newY };
+        
+        // Handle location interactions
+        await this.handleLocationInteraction(newX, newY);
+
+        // Advance time
+        this.state.time = new Date(this.state.time.getTime() + 2 * 60000);
+        
+        this.updateStats();
+        this.initializeGrid();
+    }
+
+    async handleLocationInteraction(x, y) {
+        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);
+            this.state.moveSpeed = Math.min(2, 1 + this.state.drinks * 0.2);
+            
+            if (this.state.drinks > 5) {
+                this.state.confidence = Math.max(0, this.state.confidence - 5);
+                await this.handleInput("*Starting to feel really dizzy...*");
+            }
+        }
+        
+        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);
+        }
+        
+        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);
+        }
+        
+        if (this.isLocation(x, y, 'girl')) {
+            if (this.state.confidence >= 70 && this.state.anxiety <= 50) {
+                this.gameWon();
+            } else {
+                this.state.playerPos = { 
+                    x: Math.max(0, x - 2), 
+                    y: Math.max(0, y - 2) 
+                };
+                this.state.anxiety += 15;
+                this.state.confidence = Math.max(0, this.state.confidence - 10);
+            }
+        }
+    }
+
+    gameWon() {
+        this.stopAutonomousMovement();
+        // Rest of gameWon implementation remains the same
+    }
+
+    // Rest of the class implementation remains the same
+}
+
+// The rest of the code (event listeners, etc.) remains the same