From 3b15245d270070c18b6950826d648937106ba7f8 Mon Sep 17 00:00:00 2001
From: ErickHub192 <earriola18@alumnos.uaq.mx>
Date: Sun, 9 Aug 2026 23:01:58 -0600
Subject: [PATCH] "Crear otra sala" crea la sala

Era un enlace a `#/`, asi que te dejaba frente a otro boton de crear sala: la
accion que prometia ocurria un click despues, en otra pantalla. Se notaba poco
mientras la pantalla del nombre se metia en medio; en cuanto esa dejo de
aparecer al recargar, el rodeo quedo a la vista.

La logica ya existia toda (`createRoom`, el salto por hash, y hasta las claves
`creandoSala` y `noSePudoCrear` traducidas en los dos idiomas): faltaba que el
boton la usara. Lo nuevo es el estado de "creando", para que un segundo click
no cree dos salas, y apagarle al <button> los estilos que trae de fabrica.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/MenuSalas.tsx | 31 ++++++++++++++++++++++++++++---
 web/src/styles.css    | 12 ++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/web/src/MenuSalas.tsx b/web/src/MenuSalas.tsx
index e7ed73c..0ca0393 100644
--- a/web/src/MenuSalas.tsx
+++ b/web/src/MenuSalas.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { salasVisitadas, olvidarSala, type SalaVisitada } from "./historial-salas.js";
+import { createRoom } from "./socket.js";
 import { useTextos } from "./i18n.js";
 
 /**
@@ -15,8 +16,24 @@ export function MenuSalas({ actual }: { actual?: string }) {
   const { t, idioma } = useTextos();
   const [abierto, setAbierto] = useState(false);
   const [salas, setSalas] = useState<SalaVisitada[]>([]);
+  const [creando, setCreando] = useState(false);
   const cajaRef = useRef<HTMLDivElement>(null);
 
+  const crearOtra = async () => {
+    setCreando(true);
+    try {
+      const id = await createRoom();
+      window.location.hash = `#/sala/${id}`;
+      setAbierto(false);
+    } catch (e) {
+      // Sin sala nueva el menú se queda como estaba, que es un sitio válido:
+      // las salas de siempre siguen ahí y se puede volver a intentar.
+      alert(t.noSePudoCrear + String(e));
+    } finally {
+      setCreando(false);
+    }
+  };
+
   // Se lee al abrir, no al montar: así refleja lo que haya pasado en otra
   // pestaña sin tener que escuchar el evento `storage`.
   useEffect(() => {
@@ -84,9 +101,17 @@ export function MenuSalas({ actual }: { actual?: string }) {
             </ul>
           )}
 
-          <a className="menu-nueva" href="#/" onClick={() => setAbierto(false)}>
-            {t.crearOtraSala}
-          </a>
+          {/*
+            Crea la sala aquí mismo, no manda al inicio.
+
+            Era un enlace a `#/`, así que "crear otra sala" te dejaba frente a
+            otro botón de crear sala: la acción prometida ocurría un click
+            después. Se notaba poco cuando de por medio estaba la pantalla del
+            nombre; en cuanto esa dejó de aparecer, el rodeo quedó a la vista.
+          */}
+          <button className="menu-nueva" onClick={crearOtra} disabled={creando}>
+            {creando ? t.creandoSala : t.crearOtraSala}
+          </button>
         </div>
       )}
     </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index 9464bdd..89ff593 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -313,8 +313,16 @@ body::after {
   color: var(--rojo);
 }
 
+/* Es un <button> (crea la sala ahí mismo), así que hay que apagarle lo que el
+   navegador le pone de fábrica: fondo gris, borde y ancho de contenido. */
 .menu-nueva {
   display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font: inherit;
   margin-top: 8px;
   padding: 9px 8px 4px;
   border-top: 1px solid var(--linea);
@@ -325,6 +333,10 @@ body::after {
 .menu-nueva:hover {
   color: var(--texto);
 }
+.menu-nueva:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
 .sala-nombre {
   font-family: "Bodoni MT", "Didot", Georgia, serif;
   font-size: 19px;