Spaces:

zshashz
/

testjs

Running

App Files Files Community

zshashz commited on 20 days ago

Commit

4a9fc22

1 Parent(s): f75003b

aa

Browse files

Files changed (2) hide show

.gitignore +1 -0
index.html +176 -80

.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ *_s.js

index.html CHANGED Viewed

@@ -3,17 +3,23 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Shy Guy Simulator - AI Edition</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            max-width: 800px;
             margin: 20px auto;
             padding: 20px;
             background-color: #1a1a1a;
             color: #fff;
         }
         #game-container {
             background-color: #2a2a2a;
             padding: 20px;
@@ -21,10 +27,29 @@
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
         }
         .chat-container {
             height: 400px;
             overflow-y: auto;
-            margin: 20px 0;
             padding: 10px;
             background-color: #333;
             border-radius: 4px;
@@ -37,20 +62,9 @@
             word-wrap: break-word;
         }
-        .wingman {
-            background-color: #2c5282;
-            margin-right: 20%;
-        }
-        .shyguy {
-            background-color: #4a5568;
-            margin-left: 20%;
-        }
-        .error {
-            background-color: #c53030;
-            text-align: center;
-        }
         #input-container {
             display: flex;
@@ -76,22 +90,18 @@
             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;
-        }
-        .typing {
-            font-style: italic;
-            color: #718096;
         }
         #api-key-container {
@@ -101,7 +111,7 @@
 </head>
 <body>
     <div id="game-container">
-        <h1>Shy Guy Simulator - AI 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;">
@@ -110,51 +120,98 @@
         <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>Time: <span id="time">8:00 PM</span></span>
             </div>
-            <div class="chat-container" id="chat-container"></div>
-            <div id="input-container">
-                <input type="text" id="user-input" placeholder="Type your encouragement as wingman...">
-                <button onclick="handleUserInput()">Send</button>
             </div>
         </div>
     </div>
     <script>
-        let game;
         class ShyGuySimulator {
             constructor(apiKey) {
                 this.apiKey = apiKey;
                 this.state = {
                     confidence: 0,
-                    anxiety: 100,
                     time: new Date(2024, 0, 1, 20, 0),
-                    location: 'entrance',
-                    hasSpokenToGirl: false,
                     isProcessing: false
                 };
-                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.`
                     }
-                ];
                 this.initialize();
             }
             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();
             }
             async handleInput(userInput) {
@@ -167,7 +224,11 @@
                     this.addMessage(userInput, 'wingman');
                     this.addLoadingMessage();
-                    const currentState = `Current confidence: ${this.state.confidence}%, anxiety: ${this.state.anxiety}%, location: ${this.state.location}`;
                     this.context.push({
                         role: 'user',
@@ -177,9 +238,7 @@
                     const response = await this.callMistralAPI();
                     this.removeLoadingMessage();
-                    this.addMessage(response, 'shyguy');
-                    this.updateGameState(response);
                     this.context.push({
                         role: 'assistant',
@@ -201,6 +260,59 @@
                 }
             }
             async callMistralAPI() {
                 try {
                     const response = await fetch('https://api.mistral.ai/v1/chat/completions', {
@@ -232,31 +344,6 @@
                 }
             }
-            updateGameState(response) {
-                const lowerResponse = response.toLowerCase();
-                // Update confidence
-                if (lowerResponse.includes('okay') || lowerResponse.includes('maybe') || lowerResponse.includes('right')) {
-                    this.state.confidence = Math.min(100, this.state.confidence + 10);
-                    this.state.anxiety = Math.max(0, this.state.anxiety - 5);
-                } else if (lowerResponse.includes('no') || lowerResponse.includes('can\'t') || lowerResponse.includes('scared')) {
-                    this.state.confidence = Math.max(0, this.state.confidence - 5);
-                    this.state.anxiety = Math.min(100, this.state.anxiety + 10);
-                }
-                // Advance time
-                this.state.time = new Date(this.state.time.getTime() + 5 * 60000);
-                this.updateStats();
-            }
-            updateStats() {
-                document.getElementById('confidence').textContent = this.state.confidence;
-                document.getElementById('anxiety').textContent = this.state.anxiety;
-                document.getElementById('time').textContent =
-                    this.state.time.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
-            }
             addMessage(text, type) {
                 const chat = document.getElementById('chat-container');
                 const messageDiv = document.createElement('div');
@@ -282,8 +369,17 @@
                     loadingMessage.remove();
                 }
             }
         }
         function initializeGame() {
             const apiKey = document.getElementById('api-key').value.trim();
             if (!apiKey) {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shy Guy Simulator - Grid 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: 1fr 400px;
+            gap: 20px;
+        }
         #game-container {
             background-color: #2a2a2a;
             padding: 20px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
         }
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(8, 1fr);
+            gap: 2px;
+            background-color: #333;
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+        .grid-cell {
+            aspect-ratio: 1;
+            background-color: #4a4a4a;
+            border-radius: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
         .chat-container {
             height: 400px;
             overflow-y: auto;
             padding: 10px;
             background-color: #333;
             border-radius: 4px;
             word-wrap: break-word;
         }
+        .wingman { background-color: #2c5282; margin-right: 20%; }
+        .shyguy { background-color: #4a5568; margin-left: 20%; }
+        .error { background-color: #c53030; text-align: center; }
         #input-container {
             display: flex;
             cursor: pointer;
         }
+        #stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin-bottom: 20px;
         }
+        .stat-box {
             background-color: #333;
+            padding: 10px;
             border-radius: 4px;
+            text-align: center;
         }
         #api-key-container {
 </head>
 <body>
     <div id="game-container">
+        <h1>Shy Guy Simulator - Grid 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;">
         <div id="game-content" style="display: none;">
             <div id="stats">
+                <div class="stat-box">Confidence: <span id="confidence">0</span>%</div>
+                <div class="stat-box">Drinks: <span id="drinks">0</span></div>
+                <div class="stat-box">Time: <span id="time">8:00 PM</span></div>
             </div>
+            <div class="game-layout">
+                <div class="grid-container" id="grid"></div>
+                <div class="chat-section">
+                    <div class="chat-container" id="chat-container"></div>
+                    <div id="input-container">
+                        <input type="text" id="user-input" placeholder="Type your encouragement as wingman...">
+                        <button onclick="handleUserInput()">Send</button>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
     <script>
         class ShyGuySimulator {
             constructor(apiKey) {
                 this.apiKey = apiKey;
                 this.state = {
                     confidence: 0,
+                    drinks: 0,
                     time: new Date(2024, 0, 1, 20, 0),
+                    position: { x: 0, y: 0 }, // Start at top-left
                     isProcessing: false
                 };
+                this.targetPosition = { x: 7, y: 7 }; // Girl's position (bottom-right)
+                this.gridSize = 8;
+                // System prompt that instructs the model to return structured responses
+                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 an 8x8 grid. You start at (0,0), and the girl you like is at (7,7).
+                    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`
+                }];
                 this.initialize();
             }
             initialize() {
+                this.setupGrid();
+                this.addMessage("Let's help you talk to her! I'll be your wingman tonight.", 'wingman');
                 this.addMessage("I... I don't know about this. Maybe I should just go home...", 'shyguy');
                 this.updateStats();
+                this.updateGrid();
+            }
+            setupGrid() {
+                const grid = document.getElementById('grid');
+                grid.innerHTML = '';
+                for (let y = 0; y < this.gridSize; y++) {
+                    for (let x = 0; x < this.gridSize; x++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'grid-cell';
+                        cell.id = `cell-${x}-${y}`;
+                        grid.appendChild(cell);
+                    }
+                }
+            }
+            updateGrid() {
+                // Clear all cells
+                document.querySelectorAll('.grid-cell').forEach(cell => {
+                    cell.textContent = '';
+                });
+                // Place shy guy
+                const shyGuyCell = document.getElementById(`cell-${this.state.position.x}-${this.state.position.y}`);
+                if (shyGuyCell) shyGuyCell.textContent = '😳';
+                // Place girl
+                const girlCell = document.getElementById(`cell-${this.targetPosition.x}-${this.targetPosition.y}`);
+                if (girlCell) girlCell.textContent = '👧';
             }
             async handleInput(userInput) {
                     this.addMessage(userInput, 'wingman');
                     this.addLoadingMessage();
+                    const currentState = `Current state:
+                        - Confidence: ${this.state.confidence}%
+                        - Drinks: ${this.state.drinks}
+                        - Position: (${this.state.position.x}, ${this.state.position.y})
+                        - Distance to girl: ${this.calculateDistance()}`;
                     this.context.push({
                         role: 'user',
                     const response = await this.callMistralAPI();
                     this.removeLoadingMessage();
+                    this.processAIResponse(response);
                     this.context.push({
                         role: 'assistant',
                 }
             }
+            calculateDistance() {
+                const dx = this.targetPosition.x - this.state.position.x;
+                const dy = this.targetPosition.y - this.state.position.y;
+                return Math.sqrt(dx * dx + dy * dy);
+            }
+            processAIResponse(responseText) {
+                try {
+                    // Extract JSON from response if it's wrapped in text
+                    const jsonMatch = responseText.match(/\{[\s\S]*\}/);
+                    const responseData = jsonMatch ? JSON.parse(jsonMatch[0]) : JSON.parse(responseText);
+                    // Add the dialogue to chat
+                    this.addMessage(responseData.dialogue, 'shyguy');
+                    // Update position
+                    const newX = Math.max(0, Math.min(7, this.state.position.x + responseData.movement.x));
+                    const newY = Math.max(0, Math.min(7, this.state.position.y + responseData.movement.y));
+                    this.state.position = { x: newX, y: newY };
+                    // Update confidence based on emotion
+                    const emotionConfidenceMap = {
+                        'anxious': -5,
+                        'nervous': 0,
+                        'slightly_confident': 5,
+                        'confident': 10
+                    };
+                    this.state.confidence = Math.max(0, Math.min(100,
+                        this.state.confidence + (emotionConfidenceMap[responseData.emotion] || 0)
+                    ));
+                    // Update the grid and stats
+                    this.updateGrid();
+                    this.updateStats();
+                    // Check win condition
+                    if (this.state.position.x === this.targetPosition.x &&
+                        this.state.position.y === this.targetPosition.y) {
+                        this.handleWin();
+                    }
+                } catch (error) {
+                    console.error('Error processing AI response:', error);
+                    this.addMessage("I... uh... *mumbles something incoherent*", 'shyguy');
+                }
+            }
+            handleWin() {
+                this.addMessage("Oh my god, I actually made it! Hi... I've been wanting to talk to you...", 'shyguy');
+                this.addMessage("Congratulations! You've helped Shy Guy reach his goal!", 'wingman');
+                // Disable input
+                document.getElementById('user-input').disabled = true;
+            }
             async callMistralAPI() {
                 try {
                     const response = await fetch('https://api.mistral.ai/v1/chat/completions', {
                 }
             }
             addMessage(text, type) {
                 const chat = document.getElementById('chat-container');
                 const messageDiv = document.createElement('div');
                     loadingMessage.remove();
                 }
             }
+            updateStats() {
+                document.getElementById('confidence').textContent = this.state.confidence;
+                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) {