SynCode | Collaborative IDE

diff --git a/script.js b/script.js index f1bb512..517251c 100644 --- a/script.js +++ b/script.js @@ -261,6 +261,14 @@ function changeLanguage() { codeEditor.refresh(); } +function logout() { + if (socket) { + socket.close(); + } + localStorage.clear(); + location.reload(); +} + function sendMessage() { const inp = document.getElementById("msg-input"); if (!inp.value.trim()) return; diff --git a/style.css b/style.css index ccc57a0..6f9c825 100644 --- a/style.css +++ b/style.css @@ -127,10 +127,16 @@ body { border-bottom: 1px solid #333; } +.sidebar-footer { + padding: 15px; + border-top: 1px solid #444; +} + #users-list { list-style: none; padding: 10px; overflow-y: auto; + flex-grow: 1; } /* Main Content Area */ @@ -294,6 +300,22 @@ body { color: #fff; } +.logout-btn { + width: 100%; + padding: 10px; + background-color: #ff4757; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: bold; + transition: background 0.3s; +} + +.logout-btn:hover { + background-color: #ff6b81; +} + .show-sidebar-btn { display: none; } From 55a87ae45e79db3282e31847e3e96bc31a04e15d Mon Sep 17 00:00:00 2001 From: martigiron01 Date: Sun, 8 Mar 2026 19:10:33 +0100 Subject: [PATCH 07/19] Room change close #8 --- index.html | 7 +- script.js | 28 +++++++- style.css | 197 ++++++++++++++++++++--------------------------------- 3 files changed, 106 insertions(+), 126 deletions(-) diff --git a/index.html b/index.html index 4676a93..6e9b220 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@

Join SynCode Room

- +

@@ -44,7 +44,10 @@

Users

diff --git a/script.js b/script.js index 517251c..e83f037 100644 --- a/script.js +++ b/script.js @@ -25,6 +25,17 @@ document.addEventListener("DOMContentLoaded", () => { if (authToken && myUsername && room) { console.log(`[AUTH] Session restored for ${myUsername} in room ${room}`); connectWebSocket(); + } else if (authToken && myUsername) { + document.getElementById("username-input").value = myUsername; + document.getElementById("username-input").disabled = true; + document.getElementById("password-input").style.display = "none"; + document.getElementById("avatar-grid").style.display = "none"; + document.getElementById("login-label").style.display = "none"; + document.getElementById("auth-title").innerText = "Change Room"; + + const roomInput = document.getElementById("room-input"); + roomInput.value = ""; + roomInput.style.display = "block"; } // B. Inicializar CodeMirror @@ -101,7 +112,16 @@ async function handleAuth() { const passIn = document.getElementById("password-input").value; const roomIn = document.getElementById("room-input").value; - if (!userIn || !passIn || (!isSignUp && !roomIn)) return alert("Fill all fields"); + const isChangingRoom = !!authToken; + + if (!userIn || (!isChangingRoom && !passIn) || (!isSignUp && !roomIn)) return alert("Fill all fields"); + + if (isChangingRoom) { + room = roomIn; + localStorage.setItem("room", room); + connectWebSocket(); + return; + } const endpoint = isSignUp ? '/api/auth/register' : '/api/auth/login'; try { @@ -269,6 +289,12 @@ function logout() { location.reload(); } +function changeRoom() { + if (socket) socket.close(); + localStorage.removeItem("room"); + location.reload(); +} + function sendMessage() { const inp = document.getElementById("msg-input"); if (!inp.value.trim()) return; diff --git a/style.css b/style.css index 6f9c825..b530036 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,15 @@ +/* --- GLOBAL & RESET --- */ * { margin: 0; padding: 0; box-sizing: border-box; } -html, -body { +html, body { height: 100%; width: 100%; overflow: hidden; - font-family: 'Segoe UI', sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #121212; color: white; } @@ -57,9 +57,7 @@ body { transform: scale(1.1); } -#username-input, -#password-input, -#room-input { +#username-input, #password-input, #room-input { width: 100%; padding: 10px; margin-top: 10px; @@ -67,6 +65,7 @@ body { border: none; background: #2c2c2c; color: white; + outline: none; } #btn-connect { @@ -79,18 +78,11 @@ body { border-radius: 6px; cursor: pointer; font-weight: bold; + transition: background 0.2s; } -.auth-switch { - margin-top: 15px; - font-size: 0.85em; - color: #b9bbbe; -} - -#link-switch { - color: #5865F2; - text-decoration: none; - font-weight: bold; +#btn-connect:hover { + background: #4752c4; } /* --- MAIN LAYOUT --- */ @@ -127,11 +119,6 @@ body { border-bottom: 1px solid #333; } -.sidebar-footer { - padding: 15px; - border-top: 1px solid #444; -} - #users-list { list-style: none; padding: 10px; @@ -139,7 +126,40 @@ body { flex-grow: 1; } -/* Main Content Area */ +/* --- NUEVA SECCIÓN: BOTONES INFERIORES SIDEBAR --- */ +.sidebar-footer { + padding: 15px; + border-top: 1px solid #333; + background: #1a1a1a; +} + +.footer-buttons { + display: flex; + gap: 8px; /* Espacio entre los dos botones */ +} + +.footer-buttons .logout-btn, +.footer-buttons .tool-btn { + flex: 1; /* Ambos botones ocupan el mismo ancho */ + padding: 8px 2px; + font-size: 12px; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} + +/* Estilo específico para botón de sala (azul suave/grisáceo) */ +.tool-btn.secondary { + background: #4f545c; + color: white; +} + +.tool-btn.secondary:hover { + background: #686d73; +} + +/* --- MAIN CONTENT AREA --- */ .main-content { display: flex; flex-direction: column; @@ -166,30 +186,29 @@ body { .editor-wrapper { flex: 1; position: relative; - background: #1e1e1e; + overflow: hidden; + display: flex; + flex-direction: column; + background: #282a36; /* Fondo Dracula */ } -#editor { - width: 100%; - height: 100%; - background: #1e1e1e; - color: #d4d4d4; - border: none; - padding: 20px; +.CodeMirror { + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + height: 100% !important; + width: 100% !important; font-family: 'Consolas', monospace; - font-size: 16px; - resize: none; - outline: none; + font-size: 15px; } -/* Collapsible Chat Panel */ +/* Chat Panel */ #chat-collapsible { - height: 50%; + height: 40%; background: #121212; display: flex; flex-direction: column; transition: height 0.3s ease, opacity 0.2s; - border-top: 1px solid #333; + border-top: 2px solid #333; } #chat-collapsible.chat-hidden { @@ -199,7 +218,6 @@ body { border: none; } -/* Chat Log & Input */ #messages-log { flex: 1; overflow-y: auto; @@ -217,21 +235,6 @@ body { gap: 10px; } -#emoji-bar { - margin-bottom: 8px; - display: flex; - gap: 5px; -} - -.emoji-btn { - background: #2c2c2c; - border: none; - color: white; - padding: 5px 8px; - border-radius: 4px; - cursor: pointer; -} - #msg-input { flex: 1; padding: 8px 15px; @@ -251,13 +254,7 @@ body { cursor: pointer; } -/* UI Elements */ -.header-right { - display: flex; - align-items: center; - gap: 15px; -} - +/* UI ELEMENTS */ #lang-indicator { background: #3776ab; color: #ffde57; @@ -265,8 +262,7 @@ body { border-radius: 4px; font-size: 12px; font-weight: bold; - text-transform: uppercase; - letter-spacing: 0.5px; + cursor: pointer; border: 1px solid #ffde57; } @@ -277,11 +273,6 @@ body { cursor: pointer; padding: 2px 8px; border-radius: 4px; - font-size: 12px; -} - -#btn-toggle-chat { - font-size: 20px; } .tool-btn { @@ -292,38 +283,19 @@ body { border-radius: 4px; font-size: 13px; cursor: pointer; - transition: background 0.2s, color 0.2s; -} - -.tool-btn:hover { - background: #444; - color: #fff; } .logout-btn { - width: 100%; - padding: 10px; - background-color: #ff4757; + background-color: #ed4245; /* Rojo Discord */ color: white; border: none; - border-radius: 5px; + border-radius: 4px; cursor: pointer; font-weight: bold; - transition: background 0.3s; } .logout-btn:hover { - background-color: #ff6b81; -} - -.show-sidebar-btn { - display: none; -} - -.avatar { - width: 24px; - height: 24px; - border-radius: 50%; + background-color: #c03537; } .user-item { @@ -332,12 +304,12 @@ body { gap: 10px; padding: 8px; border-radius: 6px; - cursor: pointer; - font-size: 0.9em; } -.user-item:hover { - background: #2c2c2c; +.avatar { + width: 24px; + height: 24px; + border-radius: 50%; } /* Bubbles */ @@ -360,16 +332,6 @@ body { .own-message .bubble { background: #5865F2; - border-bottom-right-radius: 2px; -} -#password-input { - width: 100%; - padding: 10px; - margin-top: 10px; - border-radius: 6px; - border: none; - background: #2c2c2c; - color: white; } .auth-switch { @@ -384,28 +346,17 @@ body { font-weight: bold; } -#link-switch:hover { - text-decoration: underline; -} -.editor-wrapper { - flex: 1; - position: relative; - overflow: hidden; +#emoji-bar { + margin-bottom: 8px; display: flex; - flex-direction: column; - font-size: 16px; -} - -.CodeMirror { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100% !important; - width: 100% !important; + gap: 5px; } -.CodeMirror-vscrollbar, .CodeMirror-hscrollbar { - background: #1e1e1e; +.emoji-btn { + background: #2c2c2c; + border: none; + color: white; + padding: 5px 8px; + border-radius: 4px; + cursor: pointer; } \ No newline at end of file From a63be61271b3f36521a2f397bf1266fcaa7bbaf9 Mon Sep 17 00:00:00 2001 From: martigiron01 Date: Mon, 9 Mar 2026 17:49:52 +0100 Subject: [PATCH 08/19] lobby for room selection close #12 --- index.html | 49 ++++++++++++--- script.js | 117 ++++++++++++++++++++++++++---------- style.css | 170 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 299 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 6e9b220..af99c5e 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,10 @@ - + + -

+ + + + +

Enter SynCode

Date: Sun, 15 Mar 2026 17:36:31 +0100 Subject: [PATCH 18/19] error checks --- script.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 70 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index baea6ca..21dae9f 100644 --- a/script.js +++ b/script.js @@ -7,6 +7,7 @@ let chatHistory = []; let dbUsers = {}; let remoteCursors = {}; // { userId: { username, cursor, selection, marker, widget } } let lastCursorUpdate = 0; // Throttle control +let contentLoaded = false; // Track if content has been loaded const HOST = window.location.hostname + ":3000"; // --- 1. INICIALIZACIÓN SEGURA --- @@ -201,18 +202,22 @@ function connectWebSocket() { // Load current project info await loadProjectInfo(); - // P2P: Cargar proyecto si la sala está vacía + // Fallback: if no code arrives after 1s, load from endpoint setTimeout(async () => { - if (Object.keys(dbUsers).length === 0) { + if (!contentLoaded) { try { const resp = await secureFetch(`http://${HOST}/api/rooms/${room}/content`, { headers: { 'Authorization': `Bearer ${authToken}` } }); const data = await resp.json(); - if (data.content) codeEditor.setValue(data.content); + if (data.content && !contentLoaded) { + codeEditor.setValue(data.content); + contentLoaded = true; + } } catch (e) { console.error("Error loading project content", e); } } - }, 500); + }, 1000); + setTimeout(() => codeEditor.refresh(), 100); }; @@ -222,6 +227,7 @@ function connectWebSocket() { localStorage.removeItem("room"); alert("Room does not exist."); }; + contentLoaded = false; location.reload(); }; } @@ -229,7 +235,30 @@ function connectWebSocket() { function handleSocketMessage(event) { const data = JSON.parse(event.data); switch (data.type) { - case 'set-id': myId = data.id; break; + case 'set-id': + myId = data.id; + break; + case 'existing-users': + if (data.users && Array.isArray(data.users)) { + data.users.forEach(user => { + if (user.id !== myId) { + dbUsers[user.id] = { username: user.username, avatar: user.avatar }; + } + }); + updateUserList(); + + // Request code from the oldest user immediately + const oldestUser = data.users.reduce((oldest, current) => + current.id < oldest.id ? current : oldest + ); + if (oldestUser && socket?.readyState === WebSocket.OPEN) { + socket.send(JSON.stringify({ + type: 'code-request', + targetId: oldestUser.id + })); + } + } + break; case 'user-connected': if (data.id !== myId) { dbUsers[data.id] = { username: data.username, avatar: data.avatar }; @@ -243,8 +272,39 @@ function handleSocketMessage(event) { updateUserList(); } break; + case 'code-response': + codeEditor.setValue(data.code); + contentLoaded = true; + if (data.chat) { + data.chat.forEach(m => appendMessage(m.user, m.text, getUsernameColor(m.user), false)); + chatHistory = data.chat; + } + if (data.users) { + const filteredUsers = Object.keys(data.users).reduce((acc, userId) => { + if (parseInt(userId) !== myId) { + acc[userId] = data.users[userId]; + } + return acc; + }, {}); + dbUsers = { ...dbUsers, ...filteredUsers }; + updateUserList(); + } + break; + case 'send-code-request': + // Another user is requesting my code + if (socket?.readyState === WebSocket.OPEN) { + socket.send(JSON.stringify({ + type: 'code-response', + targetId: data.targetId, + code: codeEditor.getValue(), + chat: chatHistory, + users: { [myId]: { username: myUsername, avatar: myAvatar }, ...dbUsers } + })); + } + break; case 'history-sync': codeEditor.setValue(data.code); + contentLoaded = true; data.chat.forEach(m => appendMessage(m.user, m.text, getUsernameColor(m.user), false)); chatHistory = data.chat; // Filtrar para que no incluya al usuario actual @@ -743,8 +803,12 @@ async function restoreVersion(projectId, historyId, label) { // --- 5. FUNCIONES AUXILIARES --- function checkAndSendHistory(newId) { + // Only the oldest user (lowest ID) in the room sends const ids = Object.keys(dbUsers).map(Number); - if (ids.every(id => id >= myId) && socket?.readyState === 1) { + const allIds = [myId, ...ids]; + const minId = Math.min(...allIds); + + if (myId === minId && socket?.readyState === 1) { socket.send(JSON.stringify({ type: 'history-sync', targetId: newId, code: codeEditor.getValue(), chat: chatHistory, From ee0f8457b551f4dc5cdddb842ea1fb68f51cf5c9 Mon Sep 17 00:00:00 2001 From: martigiron01 Date: Mon, 16 Mar 2026 17:48:56 +0100 Subject: [PATCH 19/19] Update readme close #16 --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 74bfdda..2be54ee 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,24 @@ Esta es la interfaz de usuario para la plataforma **SynCode**, desarrollada con tecnologías web estándar para garantizar ligereza y compatibilidad. +## Cómo funciona + +El frontend es una **SPA (single-page application) estática** sin frameworks ni compilación. Toda la lógica reside en tres archivos (`index.html`, `script.js`, `style.css`) y se apoya en **CodeMirror 5** como editor de código. + +Al cargarse, la app lee `localStorage` para detectar si hay una sesión activa (token JWT + sala) y redirige automáticamente al lobby o a la sala correspondiente. En caso contrario, muestra la pantalla de login/registro. + +La navegación entre pantallas (login → lobby → sala) se gestiona ocultando y mostrando `div`s con `style.display`. + +Una vez dentro de una sala, la app abre una conexión **WebSocket** (`ws://HOST:3000/room/{sala}?token=JWT`) para sincronizar en tiempo real: + +- **Código**: cualquier cambio en el editor se transmite al instante a todos los participantes. +- **Cursores y selecciones**: la posición del cursor de cada usuario se dibuja directamente en el editor con su nombre. +- **Chat**: mensajes en tiempo real con historial sincronizado al entrar. + +La sincronización inicial del contenido al unirse a una sala se realiza solicitando el estado al usuario más antiguo conectado o con un fallback a `GET /api/rooms/{sala}/content` si no hay respuesta. + +La gestión de proyectos y versiones (guardar, listar, previsualizar y restaurar versiones) se realiza mediante llamadas REST estándar al backend, autenticadas con el token JWT. + ## Estructura de archivos - **`index.html`**: Estructura principal de la aplicación.

Users

${r.room_name}

Create New Workspace

${r.room_name}

${r.room_name}

Users

Import Project

${r.room_name}

Users

Users

Users

Join SynCode Room

Users

Join SynCode Room

Join SynCode Room

Join SynCode Room

Available Rooms

Create New Workspace

Users

Users

${r.room_name}

Create New Workspace

Users

Import Project

${r.room_name}

${r.room_name}

Users

Import Project

Projects & Versions

Your Projects

Project Versions

Preview

${r.room_name}

Join SynCode Room

Enter SynCode