From 1879203ac831122779c7ab9594f5949a10fcc2ff Mon Sep 17 00:00:00 2001 From: bitsearch Date: Thu, 19 Feb 2026 15:50:33 +0100 Subject: [PATCH] meileure README --- Transcendence/README.md | 390 ++++++++++++++---- .../srcs/frontend/src/ajout du multiplayer | 7 + 2 files changed, 324 insertions(+), 73 deletions(-) create mode 100644 Transcendence/srcs/frontend/src/ajout du multiplayer diff --git a/Transcendence/README.md b/Transcendence/README.md index 19d47eb..0878b16 100644 --- a/Transcendence/README.md +++ b/Transcendence/README.md @@ -1,7 +1,10 @@ # Transcendence -Exemple d'../.env fonctionnel: +--- +## Configuration — Fichier `.env` + +```env POSTGRES_PASSWORD=coucou JWT_SECRET=superlongsecretkeyatleast32characterspleasenevercommitthis POSTGRES_DB=database @@ -11,94 +14,335 @@ POSTGRES_USER=user GITHUB_CLIENT_ID=Iv1.xxxxxxxxxxxxxxxxxxxxxxxxxxx GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx GITHUB_CALLBACK_URL=http://localhost:8080/api/auth/github/callback +``` -Les Variables d'env GITHUB_* sont a generer sur ce lien 'https://github.com/settings/applications/new' +> Les variables `GITHUB_*` sont à générer sur [github.com/settings/applications/new](https://github.com/settings/applications/new) +--- -Gestion de friendship dans POSTGRESQL: -'pending' → demande envoyée -'accepted' → amis -'blocked' → bloqué -'rejected' → refusé +## Gestion des amitiés (PostgreSQL) -Ressource: - https://www.postgresql.org/docs/ - https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps - https://docs.github.com/fr/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app +| Statut | Signification | +|-------------|----------------------------| +| `pending` | Demande envoyée | +| `accepted` | Amis | +| `blocked` | Utilisateur bloqué | +| `rejected` | Demande refusée | -///////////////////////////////////////////////////////////////////////////////////////// +--- -BACKEND +## Ressources -17/01 - Ajout du service/route pour le systeme de game_room - permet aux joueurs de creer et rejoindre des rooms - une room vide est automatiquement detruite. - - Presence d'une fonction affichant toutes les rooms joignables - ainsi qu'une autre fonction pour afficher tous les joueurs de la room avec - leur scores et leur etat actuel. - - Aucun moyen de changer l'etat de la room de waiting a en cours ou finished - ca attendra le systeme du jeu +- [Documentation PostgreSQL](https://www.postgresql.org/docs/) +- [Autoriser les OAuth Apps — GitHub](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps) +- [Créer une OAuth App — GitHub](https://docs.github.com/fr/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) -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 +## Journal des modifications -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 +### BACKEND -21/01 Ajout de avatar_url dans la table users +| Date | Description | +|-------|-------------| +| 17/01 | Ajout du service/route pour le système de `game_room` — création/rejoindre une room, destruction automatique si vide, liste des rooms joignables et des joueurs avec scores et état | +| 21/01 | Ajout du service/route pour le système d'avatar — changement, suppression, et récupération de l'avatar | -///////////////////////////////////////////////////////////////////////////////////////// +### DATABASE -TETRIS +| Date | Description | +|-------|-------------| +| 17/01 | Ajout des tables `game_rooms`, `game_players`, `game_rounds`, `words` — nom/statut/paramètres de game, joueurs/scores/rôles, historique des rounds, liste des mots | +| 21/01 | Ajout de `avatar_url` dans la table `users` | -Feuille de route - - Ajout du jeu Tetris au projet Transcendence - - Bouton Tetris qui redirige vers une page dédiée (tetris.html) - - Architecture modulaire : le monolithe HTML a été découpé en 5 fichiers séparés : - tetris.html — structure de la page - tetris.css — styles (thème cyberpunk) - pieces.js — définition des 7 pièces Tetris et leurs rotations - tetris.js — logique du jeu (classe Tetris) - renderer.js — rendu canvas (grille, hold, next) - ui.js — glue UI : boutons, overlay, liaison game ↔ DOM +--- -Architecture — classe Tetris (tetris.js) - Constructeur - new Tetris(onRender, onGameOver) - onRender : callback appelé à chaque frame pour redessiner - onGameOver : callback appelé avec le score final +--- - Méthodes publiques - start() — initialise et lance une partie - stop() — arrête la partie en cours - pause() — bascule pause / reprise - configure({ timeToDown, — modifie les paramètres de difficulté - hardening, (efficace uniquement avant start() - decrementTTD }) pour timeToDown) +# TETRIS - Paramètres de difficulté (configurables via le panneau Settings) - timeToDown (ms, défaut 1000) — intervalle entre deux descentes automatiques. - Plus la valeur est petite, plus le jeu est rapide. - hardening (pts, défaut 1000) — nombre de points de score cumulés avant chaque - accélération. Augmenter = progression plus lente. - decrementTTD (ms, défaut 100) — réduction de timeToDown à chaque palier atteint. - Augmenter = accélération plus brutale. +``` + ████████╗███████╗████████╗██████╗ ██╗███████╗ + ██╔══╝██╔════╝╚══██╔══╝██╔══██╗██║██╔════╝ + ██║ █████╗ ██║ ██████╔╝██║███████╗ + ██║ ██╔══╝ ██║ ██╔══██╗██║╚════██║ + ██║ ███████╗ ██║ ██║ ██║██║███████║ + ╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝╚══════╝ +``` - Flux de jeu - spawn → tick (toutes les timeToDown ms) → moveDown ou lockPiece - → verifierLignes (score + lignes) → _makeHarder → spawn suivant - → game over si la pièce spawne dans une case occupée +Implémentation du jeu Tetris avec un thème cyberpunk, entièrement découpée en modules JS séparés. -Contrôles clavier - ← → Déplacer la pièce - ↓ Descente douce (+1 pt) - Espace Hard drop (+2 pts par case) - Q Rotation gauche - W Rotation droite - C Hold (stocker / échanger la pièce courante) \ No newline at end of file +--- + +## Architecture des fichiers + +``` +srcs/frontend/src/ +├── pieces.js ← Définition des 7 pièces Tetris et leurs rotations +├── tetris.js ← Logique du jeu (classe Tetris) +├── renderer.js ← Rendu canvas (grille principale, hold, next) +└── ui.js ← Glue UI : boutons, overlay, liaison game ↔ DOM +``` + +``` +srcs/frontend/ +└── tetris.html ← Structure HTML de la page + tetris.css ← Styles (thème cyberpunk) +``` + +--- + +## Contrôles clavier + +| Touche | Action | +|-------------|-------------------------------------| +| `←` `→` | Déplacer la pièce horizontalement | +| `↓` | Descente douce (+1 pt) | +| `Espace` | Hard drop — chute instantanée (+2 pts par case) | +| `Q` | Rotation gauche | +| `W` | Rotation droite | +| `C` | Hold — stocker / échanger la pièce courante | + +--- + +## Flux de jeu + +``` + spawn() + │ + ▼ + tick() ──── toutes les timeToDown ms ────┐ + │ │ + ├─ canMoveDown ? ──── oui ──► moveDown() + │ + └─ non ──► lockPiece() + │ + ├─► verifierLignes() (efface + score) + ├─► _makeHarder() (accélération) + └─► spawn() + │ + └─ canSpawn ? ──── non ──► GAME OVER +``` + +--- + +## `pieces.js` — Les pièces Tetris + +### Classe de base : `Piece` + +Classe abstraite dont héritent toutes les pièces du jeu. + +``` +┌─────────────────────────────────────────────────────────────┐ +│ class Piece │ +├─────────────────────────────────────────────────────────────┤ +│ position { x, y } — coordonnées dans la grille │ +│ currentRotation index de la rotation active │ +│ rotations tableau de toutes les formes rotées │ +│ shape forme actuellement active │ +└─────────────────────────────────────────────────────────────┘ +``` + +| Méthode | Description | +|--------------------|-------------| +| `defineRotations()`| Retourne le tableau de toutes les matrices de rotation de la pièce. Surchargée dans chaque sous-classe. | +| `getColor()` | Retourne l'index couleur de la pièce (1 à 7). Surchargée dans chaque sous-classe. | +| `getPosition()` | Retourne une copie de `{ x, y }` — position actuelle dans la grille. | +| `getShape()` | Retourne la matrice 2D de la forme active (rotation courante). | +| `moveDown()` | Incrémente `y` de 1 — descend la pièce d'une case. | +| `moveLeft()` | Décrémente `x` de 1 — déplace la pièce d'une case à gauche. | +| `moveRight()` | Incrémente `x` de 1 — déplace la pièce d'une case à droite. | +| `rotateLeft()` | Passe à la rotation précédente dans le tableau (sens anti-horaire). | +| `rotateRight()` | Passe à la rotation suivante dans le tableau (sens horaire). | + +--- + +### Les 7 pièces — sous-classes de `Piece` + +Chaque pièce définit ses rotations via une matrice `1`/`0` et son index couleur. + +| Classe | Forme | Couleur (index) | Rotations | +|-----------------|-------|-----------------|-----------| +| `PieceT` | T | Violet `1` | 4 | +| `PieceL` | L | Orange `2` | 4 | +| `PieceReverseL` | J | Bleu `3` | 4 | +| `PieceI` | I | Cyan `4` | 2 | +| `PieceZ` | Z | Rouge `5` | 2 | +| `PieceReverseZ` | S | Vert `6` | 2 | +| `PieceO` | O | Jaune `7` | 1 | + +**Exemple — `PieceT` (4 rotations) :** +``` +Rotation 0 Rotation 1 Rotation 2 Rotation 3 + 0 1 0 0 1 0 0 0 0 0 1 0 + 1 1 1 0 1 1 1 1 1 1 1 0 + 0 0 0 0 1 0 0 1 0 0 1 0 +``` + +--- + +## `tetris.js` — Logique du jeu + +### Classe `Tetris` + +``` +┌─────────────────────────────────────────────────────────────────────┐ +│ new Tetris(onRender, onGameOver) │ +├─────────────────────────────────────────────────────────────────────┤ +│ onRender : () => void — callback de rendu à chaque frame │ +│ onGameOver : (score) => void — callback appelé en fin de partie │ +└─────────────────────────────────────────────────────────────────────┘ +``` + +#### État interne + +| Propriété | Type | Description | +|----------------------|-----------|-------------| +| `grid` | `number[][]` | Grille principale 10×20 — `0` = vide, sinon index couleur | +| `bufferGrid` | `number[][]` | Grille 10×5 utilisée pour afficher la pièce suivante | +| `currentPiece` | `Piece` | Pièce en cours de chute | +| `nextPiece` | `Piece` | Prochaine pièce à spawner | +| `storedPiece` | `Piece` | Pièce en hold (stockée par le joueur) | +| `score` | `number` | Score courant | +| `timeToDown` | `number` | Intervalle (ms) entre deux descentes automatiques | +| `hardening` | `number` | Seuil de points avant chaque accélération | +| `decrementTTD` | `number` | Réduction de `timeToDown` à chaque palier | +| `count` | `number` | Accumulateur de points depuis le dernier palier | +| `isRunning` | `boolean` | Vrai si une partie est en cours | +| `isPaused` | `boolean` | Vrai si la partie est en pause | +| `canStore` | `boolean` | Faux si le hold a déjà été utilisé depuis le dernier spawn | + +--- + +### Méthodes publiques + +| Méthode | Description | +|------------------------|-------------| +| `configure(options)` | Applique les paramètres de difficulté — `timeToDown`, `hardening`, `decrementTTD`. Doit être appelé **avant** `start()` pour que `timeToDown` soit pris en compte. | +| `start()` | Initialise et démarre une nouvelle partie (réinitialise la grille, le score, et spawn la première pièce). | +| `stop()` | Arrête la partie — annule la boucle `requestAnimationFrame` et retire l'écouteur clavier. | +| `pause()` | Bascule entre pause et reprise. En reprise, réinitialise `lastTime` pour éviter un saut d'accumulation. | + +--- + +### Méthodes privées + +#### Boucle de jeu + +| Méthode | Description | +|----------------------|-------------| +| `_startGameLoop()` | Lance la boucle via `requestAnimationFrame`. Calcule le `deltaTime` entre chaque frame et accumule le temps. Déclenche `_tick()` dès que l'accumulateur dépasse `timeToDown`. | +| `_tick()` | Un pas logique du jeu : descend la pièce si possible, sinon la verrouille, vérifie les lignes, accélère le jeu, puis spawne la suivante. Si le spawn est impossible → game over. | + +#### Gestion des pièces + +| Méthode | Description | +|------------------------|-------------| +| `_spawnNewPiece()` | Fait de `nextPiece` la pièce courante, génère une nouvelle `nextPiece`, et met à jour la `bufferGrid`. | +| `_createRandomPiece()` | Instancie aléatoirement l'une des 7 pièces à la position de départ `(3, 0)`. | +| `_updateBufferGrid()` | Recrée la grille miniature `bufferGrid` (10×5) centrée sur la forme de `nextPiece`. | +| `_lockPiece()` | Grave la forme et la couleur de `currentPiece` dans `grid` à sa position actuelle. | +| `_storePiece()` | Échange `currentPiece` et `storedPiece` (ou stocke la pièce courante si hold vide). Désactive le hold jusqu'au prochain spawn. | +| `_rotatePiece(dir)` | Tente une rotation (`-1` = gauche, `1` = droite). En cas de collision, essaie des décalages latéraux ou verticaux (wall kick) avant d'annuler. | +| `_hardDrop()` | Téléporte la pièce au bas de sa trajectoire, ajoute +2 pts par case parcourue, puis la verrouille immédiatement. | + +#### Collisions + +| Méthode | Description | +|----------------------|-------------| +| `_canMoveDown()` | Vérifie que chaque cellule de la pièce peut descendre d'une ligne (pas de mur bas, pas de case occupée). | +| `_canMoveLeft()` | Vérifie que chaque cellule peut se déplacer d'une colonne à gauche. | +| `_canMoveRight()` | Vérifie que chaque cellule peut se déplacer d'une colonne à droite. | +| `_isValidPosition()` | Vérifie que la pièce est entièrement dans les limites de la grille et n'occupe aucune case déjà remplie. | +| `_canSpawn()` | Alias de `_isValidPosition()` — utilisé pour détecter le game over après un spawn. | + +#### Score & difficulté + +| Méthode | Description | +|------------------|-------------| +| `verifierLignes()` | Parcourt la grille de bas en haut. Supprime chaque ligne complète, insère une ligne vide en haut. Ajoute les points selon le nombre de lignes effacées simultanément : `0→0 / 1→100 / 2→300 / 3→500 / 4→800`. | +| `_makeHarder()` | Si `count` (points accumulés depuis le dernier palier) dépasse `hardening`, remet `count` à 0 et réduit `timeToDown` de `decrementTTD` (minimum 100 ms). | +| `_gameOver()` | Appelle `stop()` puis déclenche le callback `onGameOver(score)`. | + +#### Entrées clavier + +| Méthode | Description | +|-------------------|-------------| +| `_handleKey(e)` | Écouteur `keydown`. Dispatche l'action selon la touche pressée. Appelle `onRender()` après chaque action. Ignoré si la partie est en pause (sauf pour les touches déjà bloquées par `isRunning`). | + +--- + +### Paramètres de difficulté + +| Paramètre | Défaut | Description | +|---------------|----------|-------------| +| `timeToDown` | `1000 ms`| Intervalle entre deux descentes automatiques. Plus faible = plus rapide. | +| `hardening` | `1000 pts`| Points cumulés avant chaque accélération. Plus élevé = progression plus lente. | +| `decrementTTD`| `100 ms` | Réduction de `timeToDown` à chaque palier. Plus élevé = accélération plus brutale. | + +--- + +## `renderer.js` — Rendu canvas + +### Constantes + +| Constante | Valeur | Description | +|-----------|--------|-------------| +| `CELL` | `30` | Taille en pixels d'une cellule dans la grille principale | +| `COLORS` | tableau| 8 couleurs indexées de `0` (fond) à `7` (jaune) — thème cyberpunk | + +### Fonctions + +| Fonction | Description | +|---------------------------------------|-------------| +| `drawCell(ctx, x, y, colorIndex, size)` | Dessine une cellule colorée à la position `(x, y)` avec un effet 3D : highlight blanc en haut/gauche, ombre noire en bas/droite. | +| `clearCanvas(ctx, w, h)` | Efface un canvas en le remplissant avec la couleur de fond `#070712`. | +| `drawGridLines(ctx, cols, rows, size)`| Trace la grille de fond en lignes semi-transparentes (opacité 4 %). | +| `drawGhost(ctx, piece, grid)` | Calcule et affiche la "pièce fantôme" — projection de la pièce courante au bas de sa trajectoire, dessinée en contour blanc semi-transparent. | +| `drawMiniPiece(ctx, piece, w, h)` | Dessine une pièce centrée dans un petit canvas (pour les panneaux **Next** et **Hold**), en utilisant des cellules de 20 px. | +| `render()` | Fonction de rendu principale appelée à chaque frame. Redessine : la grille principale, les cellules verrouillées, la pièce ghost, la pièce courante, les panneaux Next/Hold, et le score. | + +--- + +## `ui.js` — Interface utilisateur + +### Fonctions + +| Fonction | Description | +|-----------------------------|-------------| +| `updateButtons()` | Met à jour l'état des boutons et des inputs selon `game.isRunning` et `game.isPaused` — désactive Start si en cours, active Pause/Stop seulement pendant une partie, bascule le label entre "Pause" et "Resume", verrouille les inputs de settings pendant le jeu. | +| `showOverlay(title, score)` | Affiche l'overlay (écran superposé) avec un titre et optionnellement un score. Utilisé pour "GAME OVER", "PAUSE", et "STOPPED". | +| `hideOverlay()` | Retire la classe `visible` de l'overlay pour le masquer. | +| `applySettings()` | Lit les valeurs des trois inputs de configuration et appelle `game.configure(...)` pour mettre à jour les paramètres de difficulté. | + +### Initialisation + +```js +const game = new Tetris( + () => { render(); updateButtons(); }, // onRender + (score) => { render(); updateButtons(); showOverlay('GAME OVER', score); } // onGameOver +); +``` + +| Événement | Action | +|----------------------------------|--------| +| Clic `btn-start` | Masque l'overlay, démarre la partie, met à jour UI et canvas | +| Clic `btn-pause` | Bascule pause, affiche ou masque l'overlay "PAUSE" | +| Clic `btn-stop` | Arrête la partie, affiche l'overlay "STOPPED" | +| `change` sur les inputs settings | Appelle `applySettings()` pour reconfigurer la difficulté | + +--- + +## Système de couleurs + +``` +Index Couleur Hex Pièce + 0 Fond #070712 (vide) + 1 Violet #a855f7 PieceT + 2 Orange #f97316 PieceL + 3 Bleu #3b82f6 PieceReverseL + 4 Cyan #06b6d4 PieceI + 5 Rouge #ef4444 PieceZ + 6 Vert #22c55e PieceReverseZ + 7 Jaune #eab308 PieceO +``` diff --git a/Transcendence/srcs/frontend/src/ajout du multiplayer b/Transcendence/srcs/frontend/src/ajout du multiplayer new file mode 100644 index 0000000..834cd94 --- /dev/null +++ b/Transcendence/srcs/frontend/src/ajout du multiplayer @@ -0,0 +1,7 @@ +Je veux rendre le tetris en multijoueur, +il est fonctionnel est solo. + +Pour commencer, je vais devoir +creer une div qui sera le rendu +du joueur second joueur. +