diff --git a/README.md b/README.md index 299b401..69171c5 100644 --- a/README.md +++ b/README.md @@ -39,10 +39,16 @@ BACKEND Aucun moyen de changer l'etat de la room de waiting a en cours ou finished ca attendra le systeme du jeu +21/01 Ajout du service/route pour le systeme d'avatar + permet aux utilisateurs de changer ou supprimer leur avatar actuel + Ajout egalement d'une simple fonction pour recuperer l'avatar d'un utilisateur (pour le frontend) + DATABASE 17/01 Ajout des tables game_rooms, game_players, game_rounds, words - nom, status et parametres de la game - joueurs dans la game, leur scores et leur role actuel (dessinateur, devineur) - historique de la game, qui a dessine quoi precedemment ainsi que les timers des rounds, sera aussi utile si on veut faire les stats de compte a l'avenir. - - contient la liste des mots utilisable par les joueurs \ No newline at end of file + - contient la liste des mots utilisable par les joueurs + +21/01 Ajout de avatar_url dans la table users \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 56eb7be..f3a647a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -28,8 +28,8 @@ services: # - "3001:3001" depends_on: - database - # volumes: - # // + volumes: + - ./srcs/backend/avatar:/app/avatar env_file: - ../.env networks: diff --git a/srcs/backend/db.js b/srcs/backend/db.js index 1d346fa..5bf4ff6 100644 --- a/srcs/backend/db.js +++ b/srcs/backend/db.js @@ -38,6 +38,7 @@ async function createTables() username VARCHAR(50) UNIQUE NOT NULL, password_hash TEXT NOT NULL, email VARCHAR(100), + avatar_url TEXT DEFAULT '/avatar/default.png', created_at TIMESTAMP DEFAULT NOW() ); diff --git a/srcs/backend/index.js b/srcs/backend/index.js index 608d53b..e8c91f7 100644 --- a/srcs/backend/index.js +++ b/srcs/backend/index.js @@ -5,10 +5,10 @@ import {Server} from 'socket.io'; import authRouter from './routes/auth.js'; import chatRouter from './routes/global_chat.js'; import gameRoomRouter from './routes/game_room.js'; -// import avatarRouter from './routes/avatar.js'; +import avatarRouter from './routes/avatar.js'; import {waitForDb, createTables, ensureOauthClient} from './db.js'; import setupSocketIO from './services/socket.js'; -// import avatarService from './services/avatar.js'; +import avatarService from './services/avatar.js'; const app = express(); const server = http.createServer(app); @@ -38,11 +38,11 @@ async function startServer() console.warn('OAuth client might already exist or failed to register:', e.message); } - // app.use('/avatar', express.static(avatarService.AVATAR_DIR)); + app.use('/avatar', express.static(avatarService.AVATAR_DIR)); app.use('/api/auth', authRouter); app.use('/api/global_chat', chatRouter); app.use('/api/rooms', gameRoomRouter); - // app.use('/api/avatar', avatarRouter); + app.use('/api/avatar', avatarRouter); app.get('/api', (req, res) => res.send('Backend running')); server.listen(3001, () => diff --git a/srcs/backend/routes/avatar.js b/srcs/backend/routes/avatar.js index 7e26560..6df63ae 100644 --- a/srcs/backend/routes/avatar.js +++ b/srcs/backend/routes/avatar.js @@ -1,7 +1,7 @@ import express from 'express'; import multer from 'multer'; import avatarService from '../services/avatar.js'; -import {authenticateToken} from '../middleware/auth.js'; +import authenticateToken from '../middleware/auth.js'; const router = express.Router(); diff --git a/srcs/frontend/src/app.js b/srcs/frontend/src/app.js index 9b5cb07..f511867 100644 --- a/srcs/frontend/src/app.js +++ b/srcs/frontend/src/app.js @@ -9,7 +9,7 @@ function direBonjour() { alert("clicked !"); } -// Définir les éléments du menu (structure logique) +// Define the elements of the menu (logical structure) const menuElement = new Element("menu"); const loginElement = new MenuElement("login"); const registeredElement = new MenuElement("registered"); @@ -17,11 +17,11 @@ const explorerElement = new MenuElement("explorer"); const accueilElement = new MenuElement("accueil"); const globalChatElement = new MenuElement("global_chat"); -// Lancement de la grille (commentés si on ne l’utilise pas tout de suite) +// Start of the grid (commented if we dont use it yet) // const gridgreen = new Grid('#143a0fff', -1, 25, 0.12, "normal"); // const gridReverseRed = new Grid('#3a0f0f75', -1, 12.5, 0.09, "reverse"); -// Fenêtres et écrans +// Windows and screens const test = new fenetre(); const loginWindow = new LoginWindow(); const global_chat = new GlobalChat(); diff --git a/srcs/frontend/src/global_chat.js b/srcs/frontend/src/global_chat.js index af43ea9..8294fce 100644 --- a/srcs/frontend/src/global_chat.js +++ b/srcs/frontend/src/global_chat.js @@ -3,7 +3,7 @@ export class GlobalChat extends fenetre { constructor() { super(320, 240, "Global Chat"); - // Création des éléments + // Creation of the elements this.output = document.createElement("div"); this.output.className = "chat-output"; @@ -24,12 +24,12 @@ export class GlobalChat extends fenetre { this.applyStyles(); this.applyEvents(); - // Connexion au chat global est déclenchée via des contrôles dédiés + // Connection to the global chat is started via dedicated controls this.connected = false; this.createConnectControls(); } - // Crée les contrôles Connect / Reconnect dans la fenêtre du chat + // Create the controls (Connect / Reconnect) in the chat window createConnectControls() { this.controls = document.createElement("div"); this.controls.style.display = "flex"; @@ -62,7 +62,7 @@ export class GlobalChat extends fenetre { } async reconnect_sockio_global_chat() { - // Déconnecte et reconnecte le socket si nécessaire + // Disconnect and reconnect the socket if necessary if (this.socket) { try { this.socket.close(); @@ -77,7 +77,7 @@ export class GlobalChat extends fenetre { } applyStyles() { - // Conteneur principal en flex column + // Main container in flex collumn this.body.style.display = "flex"; this.body.style.flexDirection = "column"; this.body.style.height = "100%"; @@ -85,7 +85,7 @@ export class GlobalChat extends fenetre { this.body.style.boxSizing = "border-box"; this.body.style.gap = "10px"; - // Zone des messages + // Messages zone this.output.style.flex = "1"; this.output.style.overflowY = "auto"; this.output.style.padding = "8px"; @@ -95,7 +95,7 @@ export class GlobalChat extends fenetre { this.output.style.flexDirection = "column"; this.output.style.gap = "10px"; - // Conteneur input + bouton + // Input container + button this.inputContainer.style.display = "flex"; this.inputContainer.style.gap = "8px"; this.inputContainer.style.paddingTop = "8px"; @@ -107,7 +107,7 @@ export class GlobalChat extends fenetre { this.input.style.borderRadius = "6px"; this.input.style.fontSize = "14px"; - // Bouton envoyer + // Sender button this.sendButton.style.padding = "8px 16px"; this.sendButton.style.background = "#0066cc"; this.sendButton.style.color = "white"; @@ -118,10 +118,10 @@ export class GlobalChat extends fenetre { } applyEvents() { - // Envoi avec le bouton + // Send with the button this.sendButton.addEventListener("click", () => this.sendMessage()); - // Envoi avec Entrée + // Send with Enter key this.input.addEventListener("keypress", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); @@ -130,7 +130,7 @@ export class GlobalChat extends fenetre { }); } - // Envoie le message courant via Socket.IO + // Send current message via Socket.IO sendMessage() { const content = this.input.value.trim(); if (!content) return; @@ -143,7 +143,7 @@ export class GlobalChat extends fenetre { return; } - // Affichage immédiat dans l'interface pour feedback utilisateur + // Immediate display in the interface pour user feedback const div = document.createElement("div"); div.className = "chat-message"; div.innerHTML = `Moi: ${content}`; @@ -167,7 +167,7 @@ export class GlobalChat extends fenetre { return; } - // Si déjà connecté, ne pas tenter de nouveau + // If already connected, dont retry if (this.socket && this.socket.connected) { this.output.innerHTML += '
Déjà connecté au chat global
'; return; @@ -194,7 +194,7 @@ export class GlobalChat extends fenetre { reconnectionDelay: 1000, transports: ["websocket", "polling"] }; - // Optionnel: se connecter via un port alternatif si défini (ex: pour contourner le proxy) + // Optional: connect from an alternative port (ex: to dodge the proxy) const altPort = window.GLOBAL_CHAT_ALT_PORT; if (altPort) { const host = location.hostname || 'localhost'; @@ -218,7 +218,7 @@ export class GlobalChat extends fenetre { this.output.innerHTML += `
Déconnecté du chat (${reason})
`; }); - // Réception des messages + // Messages reception this.socket.on("chat-message", (msg) => { const div = document.createElement("div"); div.className = "chat-message"; diff --git a/srcs/frontend/src/grid.js b/srcs/frontend/src/grid.js deleted file mode 100644 index dc3e876..0000000 --- a/srcs/frontend/src/grid.js +++ /dev/null @@ -1,75 +0,0 @@ -export class Grid { - constructor(color = '#143a0fff', zIndex = 1, gridSize = 25, speed = 0.35, sens = "normal") { - // Initialisation des propriétés de l'instance - this.canvas = document.createElement('canvas'); - this.ctx = this.canvas.getContext('2d'); - this.offset = 0; - this.gridSize = gridSize; - this.speed = speed; - this.color = color; - - // Configuration du style - document.body.appendChild(this.canvas); - this.canvas.style.position = 'fixed'; - this.canvas.style.top = '0'; - this.canvas.style.left = '0'; - this.canvas.style.zIndex = zIndex; - this.canvas.style.pointerEvents = 'none'; // Pour ne pas bloquer les clics sur les boutons - - // Gestion du redimensionnement - window.addEventListener('resize', () => this.resize()); - this.resize(); - this.draw(sens); - } - - resize() { - this.canvas.width = window.innerWidth; - this.canvas.height = window.innerHeight; - } - - draw(sens = "normal") { - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.ctx.strokeStyle = this.color; - this.ctx.lineWidth = 1; - - // Mise à jour de l'offset - this.offset = (this.offset + this.speed) % this.gridSize; - if (sens === "normal") { - // Lignes verticales - for (let x = this.offset; x < this.canvas.width; x += this.gridSize) { - this.ctx.beginPath(); - this.ctx.moveTo(x, 0); - this.ctx.lineTo(x, this.canvas.height); - this.ctx.stroke(); - } - - // Lignes horizontales - for (let y = this.offset; y < this.canvas.height; y += this.gridSize) { - this.ctx.beginPath(); - this.ctx.moveTo(0, y); - this.ctx.lineTo(this.canvas.width, y); - this.ctx.stroke(); - } - } - //pareillement pour le sens reverse - else if (sens === "reverse") { - // Lignes verticales - for (let x = this.gridSize - this.offset; x < this.canvas.width; x += this.gridSize) { - this.ctx.beginPath(); - this.ctx.moveTo(x, 0); - this.ctx.lineTo(x, this.canvas.height); - this.ctx.stroke(); - } - // Lignes horizontales - for (let y = this.gridSize - this.offset; y < this.canvas.height; y += this.gridSize) { - this.ctx.beginPath(); - this.ctx.moveTo(0, y); - this.ctx.lineTo(this.canvas.width, y); - this.ctx.stroke(); - } - } - // Appel récursif pour l'animation - requestAnimationFrame(() => this.draw(sens)); - } - -} \ No newline at end of file diff --git a/srcs/frontend/src/index.html b/srcs/frontend/src/index.html index 529532b..30d951c 100644 --- a/srcs/frontend/src/index.html +++ b/srcs/frontend/src/index.html @@ -4,13 +4,13 @@ scribl.lidl_edition - +

scribl.lidl_edition

- +