Update index.html

index.html

@@ -223,12 +223,15 @@
       </div>
     </details>
 
-    <button id="visualizeButton" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2 mb-2">
+    <div class="flex items-center gap-2 mb-2">
+      <button id="newNeuronButton" class="bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-3 rounded-lg transition duration-300">+ Nueva neurona</button>
+      <button id="visualizeButton" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
       <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
       </svg>
       <span>Sembrar</span>
-    </button>
+      </button>
+    </div>
 
     <div id="progressBarContainer"><div id="progressBar"></div></div>
 
@@ -697,6 +700,7 @@
       scene.add(hashtagGroup);
 
       const visualizeButton = document.getElementById('visualizeButton');
+      const newNeuronButton = document.getElementById('newNeuronButton');
       const topicInput = document.getElementById('topicInput');
       const level1Slider = document.getElementById('level1Slider');
       const level2Slider = document.getElementById('level2Slider');
@@ -715,6 +719,16 @@
         topicInput.placeholder = 'Ingresa un tema para sembrar (modo anónimo)';
       }
 
+      // Botón "Nueva neurona": limpiar input y centrar cámara en tu galaxia
+      if (newNeuronButton) {
+        newNeuronButton.addEventListener('click', () => {
+          const ti = document.getElementById('topicInput');
+          if (ti) ti.value = '';
+          focusOnUserMaps();
+          if (ti) ti.focus();
+        });
+      }
+
       document.getElementById('level1Slider').addEventListener('input', (e) => {
         document.getElementById('level1Value').innerText = e.target.value;
       });
@@ -994,6 +1008,9 @@
       } finally {
         button.disabled = false;
         button.innerText = 'Sembrar';
+        // Limpiar el input para permitir nueva siembra inmediata
+        const ti = document.getElementById('topicInput');
+        if (ti) ti.value = '';
         progressBar.style.transition = 'width 0.3s ease-in';
         progressBar.style.width = '100%';
         setTimeout(() => {
@@ -1133,20 +1150,12 @@
           }
           allMapsDataCache[map.userId].push({ topic: map.topic, origin: origin, data: parsedData });
 
-          if (map.userId === userId) {
-            visualizeRoot(map.topic, origin);
-            visualizeHashtags(parsedData.lista_palabras, origin, 1, null);
-          }
+          // Visualizar TODOS los mapas (propios y de otros usuarios) de inmediato
+          visualizeRoot(map.topic, origin);
+          visualizeHashtags(parsedData.lista_palabras, origin, 1, null);
         });
 
-        Object.keys(userMaps).forEach(uid => {
-          const userMapOrigins = userMaps[uid];
-          const centroid = new THREE.Vector3(0, 0, 0);
-          userMapOrigins.forEach(origin => centroid.add(origin));
-          centroid.divideScalar(userMapOrigins.length);
-          // Mostrar siempre un sol central con el nombre del usuario, incluido el propio
-          visualizeUserPlaceholder(uid, centroid);
-        });
+        // (Placeholder de usuarios ya no es necesario porque se visualizan todas las constelaciones)
 
         const userListElement = document.getElementById('userList');
         if (userListElement) {