/* =========================================================
La casita — sala privada de dos.
Modelo de seguridad
-------------------
· El código de sala solo ubica la sala y abre el "directorio"
(los nombres y las claves públicas). No abre la conversación.
· Cada persona tiene su propia identidad: un par ECDH (para
cifrar) y un par ECDSA (para firmar). Las privadas se guardan
cifradas con SU frase personal, que la otra no conoce.
· La clave de la conversación sale de ECDH entre los dos. Nadie
más puede derivarla, ni con el código de sala en la mano.
· Cada mensaje va firmado. Si la firma no cuadra con la clave
pública de quien dice ser, sale marcado como no verificado.
· La sala solo admite dos personas. La tercera no entra.
Para añadir un juego: mira el objeto JUEGOS al final.
========================================================= */
const { useState, useEffect, useRef, useCallback, useMemo } = React;
/* ---------------- temas ---------------- */
const TEMAS = {
normal: {
fondo:"#0E0F16", aura1:"rgba(232,85,126,.16)", aura2:"rgba(127,214,169,.10)",
panel:"#1A1C27", panel2:"#232633", line:"#3A3F52", ink:"#EDEBE6", dim:"#9AA0B4",
hot:"#E8557E", gold:"#F2D492", ok:"#7FD6A9", glow:"rgba(242,212,146,.55)",
},
picante: {
fondo:"#150409", aura1:"rgba(255,45,110,.28)", aura2:"rgba(150,20,200,.20)",
panel:"#26060F", panel2:"#360A17", line:"#5C1B2E", ink:"#FFE9EF", dim:"#C98A9E",
hot:"#FF2D6E", gold:"#FFB3C8", ok:"#FF7AA8", glow:"rgba(255,45,110,.7)",
},
};
const norm = (s) => s.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toUpperCase();
const hora = (t) => new Date(t).toLocaleTimeString("es-CO", { hour:"2-digit", minute:"2-digit" });
/* ---------------- primitivas ---------------- */
const te = new TextEncoder(), td = new TextDecoder();
const b64 = (b) => btoa(String.fromCharCode(...new Uint8Array(b)));
const unb64 = (s) => Uint8Array.from(atob(s), c => c.charCodeAt(0));
const P256 = { namedCurve: "P-256" };
async function pbkdf2(secreto, salt, iter, algo) {
const base = await crypto.subtle.importKey("raw", te.encode(secreto), "PBKDF2", false, ["deriveBits","deriveKey"]);
return crypto.subtle.deriveKey({ name:"PBKDF2", salt, iterations:iter, hash:"SHA-256" },
base, algo, false, ["encrypt","decrypt"]);
}
async function cifrar(clave, obj) {
const iv = crypto.getRandomValues(new Uint8Array(12));
const ct = await crypto.subtle.encrypt({ name:"AES-GCM", iv }, clave, te.encode(JSON.stringify(obj)));
return JSON.stringify({ v:2, iv:b64(iv), ct:b64(ct) });
}
async function descifrar(clave, crudo) {
const s = JSON.parse(crudo);
const plano = await crypto.subtle.decrypt({ name:"AES-GCM", iv:unb64(s.iv) }, clave, unb64(s.ct));
return JSON.parse(td.decode(plano));
}
/* ---- sala: id + clave del directorio (a partir del código) ---- */
async function derivarSala(codigo) {
const base = await crypto.subtle.importKey("raw", te.encode(codigo), "PBKDF2", false, ["deriveBits","deriveKey"]);
const sobre = await crypto.subtle.deriveKey(
{ name:"PBKDF2", salt: te.encode("casita.v2.directorio"), iterations:150000, hash:"SHA-256" },
base, { name:"AES-GCM", length:256 }, false, ["encrypt","decrypt"]);
const bits = await crypto.subtle.deriveBits(
{ name:"PBKDF2", salt: te.encode("casita.v2.id"), iterations:50000, hash:"SHA-256" }, base, 128);
const id = [...new Uint8Array(bits)].map(b => b.toString(16).padStart(2,"0")).join("");
return { id, sobre };
}
/* ---- identidad personal ---- */
const limpiaJwk = (j) => { const c = { ...j }; delete c.key_ops; delete c.ext; return c; };
const impDHpub = (j) => crypto.subtle.importKey("jwk", limpiaJwk(j), { name:"ECDH", ...P256 }, true, []);
const impDHpriv = (j) => crypto.subtle.importKey("jwk", limpiaJwk(j), { name:"ECDH", ...P256 }, true, ["deriveKey"]);
const impSGpub = (j) => crypto.subtle.importKey("jwk", limpiaJwk(j), { name:"ECDSA", ...P256 }, true, ["verify"]);
const impSGpriv = (j) => crypto.subtle.importKey("jwk", limpiaJwk(j), { name:"ECDSA", ...P256 }, true, ["sign"]);
async function crearIdentidad(frase) {
const dh = await crypto.subtle.generateKey({ name:"ECDH", ...P256 }, true, ["deriveKey"]);
const sg = await crypto.subtle.generateKey({ name:"ECDSA", ...P256 }, true, ["sign","verify"]);
const priv = {
dh: await crypto.subtle.exportKey("jwk", dh.privateKey),
sg: await crypto.subtle.exportKey("jwk", sg.privateKey),
};
const pub = {
dh: await crypto.subtle.exportKey("jwk", dh.publicKey),
sg: await crypto.subtle.exportKey("jwk", sg.publicKey),
};
const salt = crypto.getRandomValues(new Uint8Array(16));
const clave = await pbkdf2(frase, salt, 200000, { name:"AES-GCM", length:256 });
return {
ranura: { pub, salt: b64(salt), priv: await cifrar(clave, priv) },
mias: { dh: dh.privateKey, sg: sg.privateKey },
};
}
async function abrirIdentidad(ranura, frase) {
const clave = await pbkdf2(frase, unb64(ranura.salt), 200000, { name:"AES-GCM", length:256 });
const priv = await descifrar(clave, ranura.priv); // lanza si la frase no es
return { dh: await impDHpriv(priv.dh), sg: await impSGpriv(priv.sg) };
}
async function claveConversacion(miDHpriv, suDHpubJwk) {
return crypto.subtle.deriveKey(
{ name:"ECDH", public: await impDHpub(suDHpubJwk) },
miDHpriv, { name:"AES-GCM", length:256 }, false, ["encrypt","decrypt"]);
}
async function firmar(privSG, contenido) {
const f = await crypto.subtle.sign({ name:"ECDSA", hash:"SHA-256" }, privSG,
te.encode(JSON.stringify(contenido)));
return b64(f);
}
async function verificar(pubSGJwk, contenido, firma) {
try {
return await crypto.subtle.verify({ name:"ECDSA", hash:"SHA-256" },
await impSGpub(pubSGJwk), unb64(firma), te.encode(JSON.stringify(contenido)));
} catch (e) { return false; }
}
/* ---------------- sonido ---------------- */
let ctxAudio = null;
function tono(f, dur=.14, tipo="sine", vol=.06, retraso=0) {
try {
ctxAudio = ctxAudio || new (window.AudioContext || window.webkitAudioContext)();
const t = ctxAudio.currentTime + retraso;
const o = ctxAudio.createOscillator(), g = ctxAudio.createGain();
o.type = tipo; o.frequency.setValueAtTime(f, t);
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(.0001, t + dur);
o.connect(g).connect(ctxAudio.destination);
o.start(t); o.stop(t + dur);
} catch (e) {}
}
const SONIDO = {
acierto: () => tono(680,.11,"triangle"),
fallo: () => tono(140,.24,"sawtooth",.05),
gana: () => [523,659,784,1046].forEach((f,i) => tono(f,.2,"triangle",.06,i*.1)),
pierde: () => [330,262,196].forEach((f,i) => tono(f,.36,"sine",.06,i*.16)),
mensaje: () => { tono(880,.07,"sine",.045); tono(1170,.09,"sine",.04,.07); },
clic: () => tono(520,.07,"triangle",.04),
};
const estadoInicial = () => ({ juego:"ahorcado", picante:false, marcador:{}, datos:{}, ts:0 });
/* =========================================================
App
========================================================= */
function App() {
const [sesion, setSesion] = useState(null); // { nombre, id, sobre, mias, directorio }
const [estado, setEstado] = useState(estadoInicial());
const [mensajes, setMensajes] = useState([]);
const [reacciones, setReacciones] = useState({}); // { firmaDelMensaje: { autor: emoji } }
const [escribiendo, setEscribiendo] = useState(null);
const [directorio, setDirectorio] = useState(null);
const [conectado, setConectado] = useState(false);
const [vista, setVista] = useState("chat");
const [sinLeer, setSinLeer] = useState(0);
const [sonido, setSonido] = useState(true);
const [angosto, setAngosto] = useState(window.innerWidth < 900);
const convRef = useRef(null); // clave AES de la conversación
const vRef = useRef(-1), mRef = useRef(0), dRef = useRef(-1), vivoRef = useRef(false);
const eRef = useRef(0); // cursor del aviso "esta escribiendo"
const escTimer = useRef(null), ultimoAviso = useRef(0);
const estadoRef = useRef(estado), sonidoRef = useRef(sonido), dirRef = useRef(null);
estadoRef.current = estado; sonidoRef.current = sonido; dirRef.current = directorio;
const T = TEMAS[estado.picante ? "picante" : "normal"];
const nombres = directorio ? Object.keys(directorio.ranuras) : [];
const otro = sesion ? nombres.find(n => n !== sesion.nombre) : null;
const listo = Boolean(convRef.current);
useEffect(() => {
const f = () => setAngosto(window.innerWidth < 900);
window.addEventListener("resize", f);
return () => window.removeEventListener("resize", f);
}, []);
useEffect(() => () => { vivoRef.current = false; }, []);
/* ---- emparejar cuando aparezca la otra persona ---- */
const emparejar = useCallback(async (dir, ses) => {
const suNombre = Object.keys(dir.ranuras).find(n => n !== ses.nombre);
if (!suNombre || convRef.current) return;
try {
convRef.current = await claveConversacion(ses.mias.dh, dir.ranuras[suNombre].pub.dh);
setEstado(e => ({ ...e })); // repinta
} catch (e) {}
}, []);
/* ---- publicar estado de juego ---- */
const publicar = useCallback(async (nuevo) => {
if (!convRef.current) return;
const con = { ...nuevo, ts: Date.now() };
setEstado(con);
try {
await fetch(`/api/estado?id=${sesion.id}`, { method:"POST",
headers:{ "Content-Type":"text/plain" }, body: await cifrar(convRef.current, con) });
} catch (e) { setConectado(false); }
}, [sesion]);
/* ---- enviar mensaje firmado ---- */
// Devuelve true solo si el servidor lo recibio, para que el chat no borre
// del campo un mensaje que en realidad no salio.
const enviar = useCallback(async (texto) => {
const limpio = texto.trim();
if (!limpio || !convRef.current) return false;
const c = { autor: sesion.nombre, texto: limpio.slice(0,800), t: Date.now() };
const paquete = { c, f: await firmar(sesion.mias.sg, c) };
try {
const r = await fetch(`/api/mensaje?id=${sesion.id}`, { method:"POST",
headers:{ "Content-Type":"text/plain" }, body: await cifrar(convRef.current, paquete) });
if (!r.ok) throw new Error("envio");
return true;
} catch (e) { setConectado(false); return false; }
}, [sesion]);
/* ---- reaccionar a un mensaje ----
'ref' es la FIRMA del mensaje: ya es única y ya viene en los mensajes que
estaban guardados antes, así que se puede reaccionar al historial viejo
sin cambiarle nada al formato. La reacción también va firmada: una que no
verifique se descarta al recibirla. */
const reaccionar = useCallback(async (ref, emoji, quitar) => {
if (!convRef.current || !ref) return;
const c = { tipo:"reaccion", ref, emoji, quitar: !!quitar,
autor: sesion.nombre, t: Date.now() };
const paquete = { c, f: await firmar(sesion.mias.sg, c) };
try {
await fetch(`/api/mensaje?id=${sesion.id}`, { method:"POST",
headers:{ "Content-Type":"text/plain" }, body: await cifrar(convRef.current, paquete) });
} catch (e) { setConectado(false); }
}, [sesion]);
/* ---- "está escribiendo" ----
Va por su propio endpoint, que el servidor guarda solo en memoria. Como
mucho un aviso cada 3 s: ni satura la Pi ni gasta el límite de peticiones. */
const avisarEscribiendo = useCallback(async () => {
if (!convRef.current || !sesion) return;
const ahora = Date.now();
if (ahora - ultimoAviso.current < 3000) return;
ultimoAviso.current = ahora;
try {
await fetch(`/api/escribiendo?id=${sesion.id}`, { method:"POST",
headers:{ "Content-Type":"text/plain" },
body: await cifrar(convRef.current, { autor: sesion.nombre, t: ahora }) });
} catch (e) {}
}, [sesion]);
/* ---- bucle de sincronización ---- */
const arrancarBucle = useCallback((ses) => {
vivoRef.current = true;
(async function bucle() {
while (vivoRef.current) {
try {
const r = await fetch(
`/api/sync?id=${ses.id}&v=${vRef.current}&m=${mRef.current}&d=${dRef.current}` +
`&e=${eRef.current}&espera=25`,
{ cache:"no-store" });
if (!r.ok) throw new Error("sync");
const d = await r.json();
setConectado(true);
vRef.current = d.version;
if (d.directorio) {
dRef.current = d.dir_version;
try {
const dir = await descifrar(ses.sobre, d.directorio);
setDirectorio(dir);
await emparejar(dir, ses);
} catch (e) {}
}
if (d.estado && convRef.current) {
try {
const remoto = await descifrar(convRef.current, d.estado);
if (remoto.ts >= (estadoRef.current.ts || 0)) setEstado(remoto);
} catch (e) {}
}
if (d.mensajes?.length && convRef.current) {
const abiertos = [], reacs = [];
for (const crudo of d.mensajes) {
try {
const p = await descifrar(convRef.current, crudo);
const dir = dirRef.current;
const pub = dir?.ranuras[p.c.autor]?.pub.sg;
const ok = pub ? await verificar(pub, p.c, p.f) : false;
if (p.c.tipo === "reaccion") {
if (ok) reacs.push(p.c); // sin firma buena, no cuenta
} else if (!p.c.tipo) {
// los mensajes de siempre: mismo formato de antes, mas su id
abiertos.push({ ...p.c, ok, id: p.f });
}
// cualquier otro 'tipo' se ignora en silencio, para no pintar
// basura si algun dia se agrega algo nuevo
} catch (e) {}
}
if (abiertos.length) {
setMensajes(prev => [...prev, ...abiertos]);
const ajenos = abiertos.filter(m => m.autor !== ses.nombre).length;
if (ajenos) {
if (sonidoRef.current) SONIDO.mensaje();
setSinLeer(n => n + ajenos);
setEscribiendo(null); // ya escribio: se apaga el aviso
}
}
if (reacs.length) {
setReacciones(prev => {
const n = { ...prev };
for (const r of reacs) {
const m = { ...(n[r.ref] || {}) };
if (r.quitar) delete m[r.autor]; else m[r.autor] = r.emoji;
if (Object.keys(m).length) n[r.ref] = m; else delete n[r.ref];
}
return n;
});
}
}
if (typeof d.esc === "number") eRef.current = d.esc;
if (d.escribiendo && convRef.current) {
try {
const q = await descifrar(convRef.current, d.escribiendo);
if (q.autor && q.autor !== ses.nombre) {
setEscribiendo(q.autor);
clearTimeout(escTimer.current);
escTimer.current = setTimeout(() => setEscribiendo(null), 5000);
}
} catch (e) {}
}
if (typeof d.total === "number") {
if (d.total < mRef.current) { setMensajes([]); setReacciones({}); } // borraron el chat
mRef.current = d.total;
}
} catch (e) {
setConectado(false);
await new Promise(r => setTimeout(r, 2500));
}
}
})();
}, [emparejar]);
const entrar = useCallback(async (ses, dir) => {
setSesion(ses);
setDirectorio(dir);
dirRef.current = dir;
await emparejar(dir, ses);
arrancarBucle(ses);
}, [arrancarBucle, emparejar]);
const salir = () => {
vivoRef.current = false;
try { localStorage.removeItem("casita:recordado"); } catch (e) {}
location.reload();
};
const borrarChat = async () => {
if (!confirm("¿Borrar todo el chat para los dos? No se puede deshacer.")) return;
try {
await fetch(`/api/mensajes?id=${sesion.id}`, { method:"DELETE" });
setMensajes([]);
setReacciones({});
} catch (e) {}
};
useEffect(() => { if (vista === "chat" || !angosto) setSinLeer(0); },
[vista, angosto, mensajes.length]);
if (!sesion) return ;
const juego = JUEGOS[estado.juego] || JUEGOS.ahorcado;
const ctx = { estado, publicar, yo: sesion.nombre, T, sonido, SONIDO };
const panelJuego = (
{!listo ? (
) : (
<>
{Object.entries(JUEGOS).map(([k, j]) => (
))}
)}
);
const panelChat = (
);
return (
{/* Las auras van en su propia caja recortada: si cuelgan del div raiz,
su desborde lo vuelve scrolleable y scrollIntoView termina moviendo
toda la interfaz (el encabezado del chat se iba de pantalla). */}
{angosto ? (
{vista === "juego" ? panelJuego :
{panelChat}
}
) : (
{panelJuego}
{/* height 100% explicito: sin el, la columna queda con altura auto, el
Chat crece hasta el alto de la conversacion y desborda el div raiz. */}
{panelChat}
)}
);
}
function Esperando({ T, nombre }) {
return (
Falta que entre la otra persona
Tu identidad quedó guardada como {nombre}.
Hasta que ella entre con el mismo código y su propia frase, no hay clave de
conversación: ni el chat ni los juegos pueden abrirse todavía.
);
}
/* =========================================================
Entrada — aquí se decide quién es quién
========================================================= */
function Entrada({ onEntrar }) {
const N = TEMAS.normal;
const [nombre, setNombre] = useState("");
const [codigo, setCodigo] = useState("");
const [frase, setFrase] = useState("");
const [recordar, setRecordar] = useState(false);
const [aviso, setAviso] = useState("");
const [cargando, setCargando] = useState(false);
useEffect(() => {
try {
const g = JSON.parse(localStorage.getItem("casita:recordado") || "{}");
if (g.nombre) { setNombre(g.nombre); setRecordar(true); }
if (g.codigo) setCodigo(g.codigo);
} catch (e) {}
}, []);
const abrir = async () => {
const nom = nombre.trim();
if (!nom) return setAviso("Escribe tu nombre.");
if (codigo.trim().length < 8) return setAviso("El código de sala necesita mínimo 8 caracteres.");
if (frase.length < 6) return setAviso("Tu frase personal necesita mínimo 6 caracteres.");
setCargando(true); setAviso("");
let sala;
try {
sala = await derivarSala(codigo.trim().toLowerCase().replace(/\s+/g, "-"));
} catch (e) {
setCargando(false);
return setAviso("Abre la página por https para que funcione el cifrado.");
}
try {
const r = await fetch(`/api/sync?id=${sala.id}&v=-1&m=0&d=-1&espera=0`, { cache:"no-store" });
const d = await r.json();
let dir = { ranuras: {} };
if (d.directorio) {
try { dir = await descifrar(sala.sobre, d.directorio); }
catch (e) {
setCargando(false);
return setAviso("Ese código no corresponde a esta sala.");
}
}
let mias;
if (dir.ranuras[nom]) {
// ya existe: hay que probar que eres tú
try { mias = await abrirIdentidad(dir.ranuras[nom], frase); }
catch (e) {
setCargando(false);
return setAviso(`Esa frase no abre la identidad de ${nom}.`);
}
} else {
if (Object.keys(dir.ranuras).length >= 2) {
setCargando(false);
return setAviso("Esta sala ya tiene sus dos personas.");
}
const nueva = await crearIdentidad(frase);
dir = { ranuras: { ...dir.ranuras, [nom]: nueva.ranura } };
mias = nueva.mias;
await fetch(`/api/directorio?id=${sala.id}`, { method:"POST",
headers:{ "Content-Type":"text/plain" }, body: await cifrar(sala.sobre, dir) });
}
try {
if (recordar) localStorage.setItem("casita:recordado",
JSON.stringify({ nombre: nom, codigo: codigo.trim().toLowerCase().replace(/\s+/g,"-") }));
else localStorage.removeItem("casita:recordado");
} catch (e) {}
setCargando(false);
onEntrar({ nombre: nom, id: sala.id, sobre: sala.sobre, mias }, dir);
} catch (e) {
setCargando(false);
setAviso("No se pudo hablar con el servidor.");
}
};
return (
La casita
Solo caben dos. Cada uno con su propia frase, para que nadie pueda escribir por el otro.
La frase nunca se guarda: se pide cada vez. Si la olvidas, pierdes tu identidad
en esta sala y toca empezar de cero.
{aviso &&
{aviso}
}
);
}
function Campo({ label, T, valor, set, ph, onEnter, tipo }) {
return (