Fix game server communication by updating ai-fiction.js and adding socket.io script

public/js/ai-fiction.js

@@ -74,15 +74,15 @@ class AIFiction {
     
     // Toggle speech
     this.speechButton.addEventListener('click', () => {
-      if (tts.isReady()) {
-        const enabled = tts.toggle();
+      if (ttsHandler && typeof ttsHandler.isEnabled === 'function') {
+        const enabled = ttsHandler.toggle();
         this.updateSpeechButton(enabled);
         
         if (enabled) {
           // Speak the last narrative if speech was just enabled
           const lastNarrative = this.storyContainer.lastElementChild;
           if (lastNarrative && lastNarrative.classList.contains('narrative')) {
-            tts.speak(lastNarrative.textContent);
+            ttsHandler.speak(lastNarrative.textContent);
           }
         }
       } else {
@@ -156,6 +156,15 @@ class AIFiction {
     
     // Narrative response received
     this.socket.on('narrativeResponse', (data) => {
+      // Clear any pending "thinking" indicators
+      if (this.currentCommandTimeout) {
+        clearTimeout(this.currentCommandTimeout);
+        this.currentCommandTimeout = null;
+        
+        // Remove any existing thinking indicators
+        document.querySelectorAll('.thinking').forEach(el => el.remove());
+      }
+      
       this.addNarrative(data.text);
       
       if (data.suggestions && data.suggestions.length > 0) {
@@ -273,7 +282,7 @@ class AIFiction {
     this.storyContainer.appendChild(element);
     
     // Apply SmartyPants transformations for better typography
-    const processedText = SmartyPants.process(text);
+    const processedText = SmartyPants.smartypantsu ? SmartyPants.smartypantsu(text, 1) : text;
     
     // Clear any existing typing timeouts
     if (this.typingTimeout) {
@@ -284,8 +293,8 @@ class AIFiction {
     this.typeText(element, processedText, 0);
     
     // Read text aloud if speech is enabled
-    if (tts && tts.enabled) {
-      tts.speak(text);
+    if (ttsHandler && ttsHandler.isEnabled()) {
+      ttsHandler.speak(text);
     }
   }
   
@@ -343,7 +352,7 @@ class AIFiction {
     const element = document.createElement('div');
     element.id = id;
     element.className = 'thinking';
-    element.innerHTML = '<p>Thinking<span class="loading-indicator"><div></div><div></div><div></div><div></div></span></p>';
+    element.innerHTML = '<p>Thinking<span class="loading-indicator"><span>.</span><span>.</span><span>.</span></span></p>';
     element.style.fontStyle = 'italic';
     element.style.color = '#777';
     this.storyContainer.appendChild(element);
@@ -412,7 +421,10 @@ class AIFiction {
    * Scroll the story container to the bottom
    */
   scrollToBottom() {
-    this.storyContainer.scrollTop = this.storyContainer.scrollHeight;
+    const container = document.getElementById('page_right');
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+    }
   }
 }