Master/Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleaned

Browse Source
This commit is contained in:
H3XploR
2026-03-22 13:48:16 +01:00
parent 9c1e8e03bb
commit d3e2d9bdf9
24 changed files with 527 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Transcendence/srcs/frontend/src/app.js
+7 -7
View File
@@ -2,13 +2,13 @@
* Application entry point
* Initializes windows and handles menu interactions
*/
import { windowRegistry } from './windows.js';
import { LoginWindow } from './login.js';
import { GlobalChat } from './global_chat.js';
import { AvatarWindow } from './avatar.js';
import { FriendsWindow } from './friends.js';
import { GameRoomWindow } from './game_room.js';
import { StatsWindow } from './stats.js';
import { windowRegistry } from './core/windows.js';
import { LoginWindow } from './windows/login.js';
import { GlobalChat } from './windows/global_chat.js';
import { AvatarWindow } from './windows/avatar.js';
import { FriendsWindow } from './windows/friends.js';
import { GameRoomWindow } from './windows/game_room.js';
import { StatsWindow } from './windows/stats.js';
/**
* Main application class
Transcendence/srcs/frontend/src/config.js → Transcendence/srcs/frontend/src/core/config.js
View File
Transcendence/srcs/frontend/src/element.js → Transcendence/srcs/frontend/src/core/element.js
View File
Transcendence/srcs/frontend/src/events.js → Transcendence/srcs/frontend/src/core/events.js
View File
Transcendence/srcs/frontend/src/windows.js → Transcendence/srcs/frontend/src/core/windows.js
View File
Transcendence/srcs/frontend/src/game.css → Transcendence/srcs/frontend/src/game/game.css
View File
Transcendence/srcs/frontend/src/game.html → Transcendence/srcs/frontend/src/game/game.html
+2 -2
View File
@@ -21,7 +21,7 @@
<nav class="game" aria-label="Game">
<button class="game__item" data-action="Home page" aria-label="Home Page"
onclick="window.location.href='index.html'">Home Page</button>
onclick="window.location.href='../index.html'">Home Page</button>
</nav>
<div class="page" aria-label="Page">
@@ -29,6 +29,6 @@
</div>
<script type="module" src="app.js"></script>
<script type="module" src="../app.js"></script>
</body>
</html>
Transcendence/srcs/frontend/src/index.html
+2 -2
View File
@@ -21,9 +21,9 @@
<nav class="game" aria-label="Game">
<button class="game__item" data-action="new_game" aria-label="Start new game"
onclick="window.location.href='game.html'">Start new game</button>
onclick="window.location.href='game/game.html'">Start new game</button>
<button class="game__item" data-action="tetris" aria-label="Tetris"
onclick="window.location.href='tetris.html'">Tetris</button>
onclick="window.location.href='tetris/tetris.html'">Tetris</button>
</nav>
<script type="module" src="app.js"></script>
Transcendence/srcs/frontend/src/duel.js → Transcendence/srcs/frontend/src/tetris/duel.js
+18 -21
View File
@@ -3,11 +3,13 @@
// ─────────────────────────────────────────────
class Duel {
constructor(socket, tetrisGame, onStatusChange, onStart) {
// ui : { showOverlay, hideOverlay, render, renderOpponent, updateButtons }
constructor(socket, tetrisGame, onStatusChange, onStart, ui) {
this.socket = socket;
this.tetrisGame = tetrisGame;
this.onStatusChange = onStatusChange; // (status, opponentName) => void
this.onStart = onStart; // () => void — déclenche le début du jeu local
this.onStatusChange = onStatusChange;
this.onStart = onStart;
this.ui = ui;
this.action_queue = [];
this.opponentGrid = this._emptyGrid();
@@ -38,6 +40,7 @@ class Duel {
this.isReady = false;
this.opponentGrid = this._emptyGrid();
this.opponentScore = 0;
this.opponentShieldActive = false;
}
// ─── Hooks appelés par tetris.js ──────────
@@ -49,9 +52,7 @@ class Duel {
onLocalLinesCleared(count, holeCol) {
if (!this.isReady) return;
const garbageLines = [];
for (let i = 0; i < count; i++)
garbageLines.push(this._buildGarbageLine(holeCol));
const garbageLines = Array.from({ length: count }, () => this._buildGarbageLine(holeCol));
this.socket.emit('tetris:lines-cleared', { count, holeCol, garbageLines });
}
@@ -63,11 +64,8 @@ class Duel {
onLocalShieldChanged(event) {
if (!this.isReady) return;
if (event === 'activated') {
this.socket.emit('tetris:shield-activated');
} else if (event === 'deactivated') {
this.socket.emit('tetris:shield-deactivated');
}
if (event === 'activated') this.socket.emit('tetris:shield-activated');
else if (event === 'deactivated') this.socket.emit('tetris:shield-deactivated');
}
endDuel() {
@@ -80,8 +78,7 @@ class Duel {
synchronize_game() {
while (this.action_queue.length > 0) {
const action = this.action_queue.shift();
this._processAction(action);
this._processAction(this.action_queue.shift());
}
}
@@ -91,7 +88,7 @@ class Duel {
this.opponentGrid = action.grid;
this.opponentScore = action.score;
document.getElementById('opponent-score').textContent = action.score;
renderOpponent(this.opponentGrid);
this.ui.renderOpponent(this.opponentGrid, this.opponentShieldActive);
break;
case 'LINES_CLEARED':
@@ -99,7 +96,7 @@ class Duel {
break;
case 'OPPONENT_GAME_OVER':
showOverlay('YOU WIN', action.score);
this.ui.showOverlay('YOU WIN', action.score);
this.endDuel();
break;
@@ -159,16 +156,16 @@ class Duel {
this.socket.on('tetris:pause', () => {
this.tetrisGame.pause();
updateButtons();
if (this.tetrisGame.isPaused) showOverlay('PAUSE');
else hideOverlay();
this.ui.updateButtons();
if (this.tetrisGame.isPaused) this.ui.showOverlay('PAUSE');
else this.ui.hideOverlay();
});
this.socket.on('tetris:stop', () => {
this.tetrisGame.stop();
updateButtons();
render();
showOverlay('STOPPED');
this.ui.updateButtons();
this.ui.render();
this.ui.showOverlay('STOPPED');
});
this.socket.on('tetris:settings', (data) => {
Transcendence/srcs/frontend/src/tetris/effects.js
Vendored
+49
View File
@@ -0,0 +1,49 @@
// ─────────────────────────────────────────────
// EFFETS VISUELS : SCALING RESPONSIVE + MATRIX RAIN
// ─────────────────────────────────────────────
// ── Responsive scaling ──
(function() {
const container = document.getElementById('scale-container');
const NAT_W = 640;
const NAT_H = 1020;
function resize() {
const s = Math.min(window.innerWidth / NAT_W, window.innerHeight / NAT_H);
container.style.transform = 'scale(' + s + ')';
container.style.transformOrigin = 'top center';
container.style.marginBottom = ((s - 1) * NAT_H) + 'px';
}
resize();
window.addEventListener('resize', resize);
})();
// ── Matrix rain ──
(function() {
const canvas = document.getElementById('matrix-bg');
const ctx = canvas.getContext('2d');
const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF>_{}[]|\\/#@$%^&*01';
const fs = 14;
let drops = [];
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
function initDrops() { drops = Array(Math.floor(canvas.width / fs)).fill(1); }
resize();
initDrops();
window.addEventListener('resize', () => { resize(); initDrops(); });
setInterval(function() {
ctx.fillStyle = 'rgba(0,5,0,0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = fs + 'px monospace';
for (let i = 0; i < drops.length; i++) {
const ch = chars[Math.floor(Math.random() * chars.length)];
ctx.fillStyle = drops[i] * fs < 50 ? '#aaffaa' : '#00ff41';
ctx.fillText(ch, i * fs, drops[i] * fs);
if (drops[i] * fs > canvas.height && Math.random() > 0.975) drops[i] = 0;
drops[i]++;
}
}, 40);
})();
Transcendence/srcs/frontend/src/tetris/leaderboard.js
+124
View File
@@ -0,0 +1,124 @@
// ─────────────────────────────────────────────
// LEADERBOARDS & HISTORIQUE
// ─────────────────────────────────────────────
function escapeHtml(str) {
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
// ── Historique ───────────────────────────────
async function loadGameHistory() {
const token = localStorage.getItem('auth_token');
if (!token) return;
try {
const res = await fetch('/api/stats/tetris/history', {
headers: { 'Authorization': `Bearer ${token}` }
});
if (!res.ok) return;
renderGameHistory(await res.json());
} catch (err) {
console.error('Erreur chargement historique:', err);
}
}
function renderGameHistory(history) {
const tbody = document.getElementById('lb-history-body');
if (!tbody) return;
if (!history.length) {
tbody.innerHTML = '<tr><td colspan="5">Aucune partie jouée</td></tr>';
return;
}
tbody.innerHTML = history.map((entry, i) => {
const date = new Date(entry.played_at).toLocaleDateString('fr-FR', {
day: '2-digit', month: '2-digit', year: '2-digit',
hour: '2-digit', minute: '2-digit'
});
const type = entry.game_type === 'duel' ? 'Duel' : 'Solo';
let resultHtml = '—';
if (entry.result === 'win') resultHtml = '<span class="hist-win">Victoire</span>';
if (entry.result === 'loss') resultHtml = '<span class="hist-loss">Défaite</span>';
return `<tr>
<td>${i + 1}</td>
<td>${date}</td>
<td>${type}</td>
<td>${entry.score}</td>
<td>${resultHtml}</td>
</tr>`;
}).join('');
}
// ── Classements ──────────────────────────────
async function loadLeaderboards() {
const token = localStorage.getItem('auth_token');
if (!token) return;
const headers = { 'Authorization': `Bearer ${token}` };
try {
const [scoresRes, winsRes, meRes, rankScoreRes, rankWinsRes] = await Promise.all([
fetch('/api/stats/tetris/leaderboard/score', { headers }),
fetch('/api/stats/tetris/leaderboard/wins', { headers }),
fetch('/api/stats/me', { headers }),
fetch('/api/stats/tetris/rank/score', { headers }),
fetch('/api/stats/tetris/rank/wins', { headers })
]);
const me = meRes.ok ? await meRes.json() : null;
const rankScore = rankScoreRes.ok ? (await rankScoreRes.json()).rank : null;
const rankWins = rankWinsRes.ok ? (await rankWinsRes.json()).rank : null;
if (scoresRes.ok) renderLeaderboard('lb-scores-body', await scoresRes.json(), ['tetris_best_score', 'tetris_games_played'], me, rankScore);
if (winsRes.ok) renderLeaderboard('lb-wins-body', await winsRes.json(), ['tetris_wins', 'tetris_games_played'], me, rankWins);
} catch (err) {
console.error('Erreur chargement leaderboards:', err);
}
}
function renderLeaderboard(tbodyId, rows, [col1, col2], me, myRank) {
const tbody = document.getElementById(tbodyId);
if (!tbody) return;
if (!rows.length && !me) {
tbody.innerHTML = '<tr><td colspan="4">Aucun résultat</td></tr>';
return;
}
const myUsername = me?.username;
const inTop = rows.some(r => r.username === myUsername);
let html = rows.map((r, i) => {
const isMe = r.username === myUsername;
return `<tr class="${isMe ? 'lb-me' : ''}">
<td>${i + 1}</td>
<td>${escapeHtml(r.username)}${isMe ? ' <span class="lb-you">(vous)</span>' : ''}</td>
<td>${r[col1] ?? 0}</td>
<td>${r[col2] ?? 0}</td>
</tr>`;
}).join('');
if (!inTop && me && myRank !== null) {
html += `<tr class="lb-separator"><td colspan="4">· · ·</td></tr>`;
html += `<tr class="lb-me">
<td>${myRank}</td>
<td>${escapeHtml(myUsername)} <span class="lb-you">(vous)</span></td>
<td>${me[col1] ?? 0}</td>
<td>${me[col2] ?? 0}</td>
</tr>`;
}
tbody.innerHTML = html || '<tr><td colspan="4">Aucun résultat</td></tr>';
}
// ── Tabs ─────────────────────────────────────
document.querySelectorAll('.lb-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.lb-tab').forEach(t => t.classList.remove('lb-tab--active'));
document.querySelectorAll('.lb-content').forEach(c => c.classList.remove('lb-content--active'));
tab.classList.add('lb-tab--active');
document.getElementById(`lb-${tab.dataset.tab}`).classList.add('lb-content--active');
if (tab.dataset.tab === 'history') loadGameHistory();
});
});
loadLeaderboards();
loadGameHistory();
Transcendence/srcs/frontend/src/pieces.js → Transcendence/srcs/frontend/src/tetris/pieces.js
View File
Transcendence/srcs/frontend/src/renderer.js → Transcendence/srcs/frontend/src/tetris/renderer.js
+15 -23
View File
@@ -61,17 +61,14 @@ function drawCell(ctx, x, y, colorIndex, size) {
const color = COLORS[colorIndex];
ctx.fillStyle = color;
ctx.fillRect(x * size + p, y * size + p, size - p * 2, size - p * 2);
// Glow inner
ctx.shadowColor = color;
ctx.shadowBlur = 6;
ctx.fillStyle = color;
ctx.fillRect(x * size + p + 2, y * size + p + 2, size - p * 2 - 4, size - p * 2 - 4);
ctx.shadowBlur = 0;
// Highlight top/left
ctx.fillStyle = currentTheme.highlight;
ctx.fillRect(x * size + p, y * size + p, size - p * 2, 2);
ctx.fillRect(x * size + p, y * size + p, 2, size - p * 2);
// Shadow bottom/right
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.fillRect(x * size + p, (y + 1) * size - p - 2, size - p * 2, 2);
ctx.fillRect((x + 1) * size - p - 2, y * size + p, 2, size - p * 2);
@@ -150,8 +147,10 @@ function _drawShieldOverlay(ctx, w, h, alpha) {
ctx.restore();
}
function render() {
// Grille principale
// ── Rendu joueur local ────────────────────────────────────────────────────────
// Prend l'objet game explicitement — aucun accès à des globaux externes.
function render(game) {
clearCanvas(ctxMain, 300, 600);
drawGridLines(ctxMain, 10, 20, CELL);
@@ -160,7 +159,6 @@ function render() {
if (game.grid[y][x] !== 0)
drawCell(ctxMain, x, y, game.grid[y][x], CELL);
// Ghost + pièce courante
if (game.currentPiece) {
drawGhost(ctxMain, game.currentPiece, game.grid);
const { x, y } = game.currentPiece.getPosition();
@@ -172,20 +170,16 @@ function render() {
drawCell(ctxMain, x + col, y + row, color, CELL);
}
// Shield overlay (bordure cyan pulsée)
if (game.shieldActive) {
const pulse = 0.6 + 0.4 * Math.sin(Date.now() / 150);
_drawShieldOverlay(ctxMain, 300, 600, pulse);
}
// Panneaux miniatures
drawMiniPiece(ctxNext, game.nextPiece, 100, 80);
drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
// Score
document.getElementById('score-display').textContent = game.score;
// Shield status UI
const shieldEl = document.getElementById('shield-status-display');
const shieldBar = document.getElementById('shield-bar');
if (shieldEl) {
@@ -207,29 +201,27 @@ function render() {
}
}
function renderOpponent(opponentGrid) {
// ── Rendu adversaire ─────────────────────────────────────────────────────────
// Prend grid et shieldActive explicitement — aucun accès à l'objet duel global.
function renderOpponent(grid, shieldActive) {
clearCanvas(ctxOpponent, 300, 600);
drawGridLines(ctxOpponent, 10, 20, CELL);
for (let y = 0; y < opponentGrid.length; y++)
for (let x = 0; x < opponentGrid[y].length; x++)
if (opponentGrid[y][x] !== 0)
drawCell(ctxOpponent, x, y, opponentGrid[y][x], CELL);
for (let y = 0; y < grid.length; y++)
for (let x = 0; x < grid[y].length; x++)
if (grid[y][x] !== 0)
drawCell(ctxOpponent, x, y, grid[y][x], CELL);
// Shield overlay adversaire
if (typeof duel !== 'undefined' && duel && duel.opponentShieldActive) {
if (shieldActive) {
const pulse = 0.6 + 0.4 * Math.sin(Date.now() / 150);
_drawShieldOverlay(ctxOpponent, 300, 600, pulse);
}
// Indicateur HTML adversaire
const oppShieldEl = document.getElementById('opponent-shield-indicator');
if (oppShieldEl) {
const active = typeof duel !== 'undefined' && duel && duel.opponentShieldActive;
oppShieldEl.style.display = active ? 'block' : 'none';
}
if (oppShieldEl) oppShieldEl.style.display = shieldActive ? 'block' : 'none';
}
// Restore saved theme
// Restaure le thème sauvegardé
(function() {
const saved = localStorage.getItem('tetris-theme');
if (saved && THEMES[saved]) setColorTheme(saved);
Transcendence/srcs/frontend/src/tetris.css → Transcendence/srcs/frontend/src/tetris/tetris.css
View File
Transcendence/srcs/frontend/src/tetris.html → Transcendence/srcs/frontend/src/tetris/tetris.html
+16 -79
View File
@@ -15,10 +15,9 @@
<h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
<!-- Bouton home -->
<a id="btn-home" href="/">Home</a>
<a id="btn-home" href="/">Home</a>
<!-- Panneau de connexion duel -->
<!-- Panneau duel -->
<div id="duel-panel">
<span class="settings-title">Duel</span>
<div class="duel-row">
@@ -40,7 +39,7 @@
<div id="local-section">
<div id="app">
<!-- Colonne gauche : Hold + Score + Boutons + Settings -->
<!-- Colonne gauche : Hold + Score + Boutons + Paramètres -->
<div id="left-column">
<div class="panel">
<div class="panel-title">Hold</div>
@@ -64,16 +63,16 @@
</div>
</div>
<!-- Panneau de configuration -->
<!-- Paramètres -->
<div id="settings-panel">
<div class="settings-title">Paramètres</div>
<div class="settings-row">
<label>Couleur</label>
<div class="theme-btns">
<button class="theme-btn active" data-theme="green" onclick="setColorTheme('green')" title="Vert"></button>
<button class="theme-btn" data-theme="red" onclick="setColorTheme('red')" title="Rouge"></button>
<button class="theme-btn" data-theme="yellow" onclick="setColorTheme('yellow')" title="Jaune"></button>
<button class="theme-btn" data-theme="blue" onclick="setColorTheme('blue')" title="Bleu"></button>
<button class="theme-btn active" data-theme="green" title="Vert"></button>
<button class="theme-btn" data-theme="red" title="Rouge"></button>
<button class="theme-btn" data-theme="yellow" title="Jaune"></button>
<button class="theme-btn" data-theme="blue" title="Bleu"></button>
</div>
</div>
<div class="settings-row">
@@ -151,34 +150,22 @@
<div id="lb-scores" class="lb-content lb-content--active">
<table class="lb-table">
<thead>
<tr><th>#</th><th>Joueur</th><th>Meilleur score</th><th>Parties</th></tr>
</thead>
<tbody id="lb-scores-body">
<tr><td colspan="4">Chargement…</td></tr>
</tbody>
<thead><tr><th>#</th><th>Joueur</th><th>Meilleur score</th><th>Parties</th></tr></thead>
<tbody id="lb-scores-body"><tr><td colspan="4">Chargement…</td></tr></tbody>
</table>
</div>
<div id="lb-wins" class="lb-content">
<table class="lb-table">
<thead>
<tr><th>#</th><th>Joueur</th><th>Victoires</th><th>Parties</th></tr>
</thead>
<tbody id="lb-wins-body">
<tr><td colspan="4">Chargement…</td></tr>
</tbody>
<thead><tr><th>#</th><th>Joueur</th><th>Victoires</th><th>Parties</th></tr></thead>
<tbody id="lb-wins-body"><tr><td colspan="4">Chargement…</td></tr></tbody>
</table>
</div>
<div id="lb-history" class="lb-content">
<table class="lb-table">
<thead>
<tr><th>#</th><th>Date</th><th>Type</th><th>Score</th><th>Résultat</th></tr>
</thead>
<tbody id="lb-history-body">
<tr><td colspan="5">Chargement…</td></tr>
</tbody>
<thead><tr><th>#</th><th>Date</th><th>Type</th><th>Score</th><th>Résultat</th></tr></thead>
<tbody id="lb-history-body"><tr><td colspan="5">Chargement…</td></tr></tbody>
</table>
</div>
</div>
@@ -190,59 +177,9 @@
<script src="tetris.js"></script>
<script src="renderer.js"></script>
<script src="duel.js"></script>
<script src="leaderboard.js"></script>
<script src="ui.js"></script>
<script src="effects.js"></script>
<script>
// ── Responsive scaling ──────────────────────────
(function() {
const container = document.getElementById('scale-container');
// Dimensions naturelles du contenu (single-player)
const NAT_W = 640;
const NAT_H = 1020;
function resize() {
const s = Math.min(
window.innerWidth / NAT_W,
window.innerHeight / NAT_H
);
container.style.transform = 'scale(' + s + ')';
container.style.transformOrigin = 'top center';
// Compense l'espace de layout non affecté par transform
container.style.marginBottom = ((s - 1) * NAT_H) + 'px';
}
resize();
window.addEventListener('resize', resize);
})();
</script>
<script>
// ── Matrix rain ──────────────────────────────────
(function() {
const canvas = document.getElementById('matrix-bg');
const ctx = canvas.getContext('2d');
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
resize();
window.addEventListener('resize', resize);
const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF>_{}[]|\\/#@$%^&*01';
const fs = 14;
let drops = [];
function initDrops() { drops = Array(Math.floor(canvas.width / fs)).fill(1); }
initDrops();
window.addEventListener('resize', initDrops);
setInterval(function() {
ctx.fillStyle = 'rgba(0,5,0,0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = fs + 'px monospace';
for (let i = 0; i < drops.length; i++) {
const ch = chars[Math.floor(Math.random() * chars.length)];
ctx.fillStyle = drops[i] * fs < 50 ? '#aaffaa' : '#00ff41';
ctx.fillText(ch, i * fs, drops[i] * fs);
if (drops[i] * fs > canvas.height && Math.random() > 0.975) drops[i] = 0;
drops[i]++;
}
}, 40);
})();
</script>
</body>
</html>
Transcendence/srcs/frontend/src/tetris.js → Transcendence/srcs/frontend/src/tetris/tetris.js
View File
Transcendence/srcs/frontend/src/tetris/ui.js
+265
View File
@@ -0,0 +1,265 @@
// ─────────────────────────────────────────────
// UI — Contrôles, socket, duel, matchmaking
// ─────────────────────────────────────────────
// ── Références DOM ───────────────────────────
const btnStart = document.getElementById('btn-start');
const btnPause = document.getElementById('btn-pause');
const btnStop = document.getElementById('btn-stop');
const btnRestart = document.getElementById('btn-restart');
const overlay = document.getElementById('overlay');
const inputTTD = document.getElementById('input-ttd');
const inputHardening = document.getElementById('input-hardening');
const inputDecrement = document.getElementById('input-decrement');
const btnJoinDuel = document.getElementById('btn-join-duel');
const btnLeaveDuel = document.getElementById('btn-leave-duel');
const inputRoomCode = document.getElementById('input-room-code');
const duelStatusEl = document.getElementById('duel-status');
const opponentSection = document.getElementById('opponent-section');
const btnMatchmaking = document.getElementById('btn-matchmaking');
const btnMatchmakingCancel = document.getElementById('btn-matchmaking-cancel');
const matchmakingStatusEl = document.getElementById('matchmaking-status');
// ── Overlay ──────────────────────────────────
function showOverlay(title, score) {
document.getElementById('overlay-title').textContent = title;
document.getElementById('overlay-score').textContent = score !== undefined ? `Score : ${score}` : '';
overlay.classList.add('visible');
}
function hideOverlay() {
overlay.classList.remove('visible');
}
// ── Boutons ──────────────────────────────────
function updateButtons() {
btnStart.disabled = game.isRunning;
btnPause.disabled = !game.isRunning;
btnStop.disabled = !game.isRunning;
btnPause.textContent = game.isPaused ? 'Resume' : 'Pause';
inputTTD.disabled = game.isRunning;
inputHardening.disabled = game.isRunning;
inputDecrement.disabled = game.isRunning;
}
// ── Socket ───────────────────────────────────
const socket = io({
auth: { token: localStorage.getItem('auth_token') },
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 1000,
transports: ['websocket', 'polling']
});
// ── Duel ─────────────────────────────────────
let duel = null;
// Callbacks passés au Duel pour qu'il pilote l'UI sans accéder à des globaux.
function _makeDuelUI() {
return {
showOverlay,
hideOverlay,
updateButtons,
render: () => render(game),
renderOpponent: (grid, shieldActive) => renderOpponent(grid, shieldActive),
};
}
function updateDuelStatus(status, opponentName) {
duelStatusEl.className = '';
if (status === 'waiting') {
duelStatusEl.textContent = "En attente d'un adversaire…";
duelStatusEl.classList.add('waiting');
opponentSection.classList.remove('visible');
} else if (status === 'ready') {
duelStatusEl.textContent = `Prêt — ${opponentName}`;
duelStatusEl.classList.add('ready');
opponentSection.classList.add('visible');
if (duel) duel.hideOpponentOverlay();
const grid = duel ? duel.opponentGrid : Array.from({ length: 20 }, () => Array(10).fill(0));
const shieldActive = duel ? duel.opponentShieldActive : false;
renderOpponent(grid, shieldActive);
} else {
duelStatusEl.textContent = '—';
opponentSection.classList.remove('visible');
}
}
function startLocalGame() {
hideOverlay();
game.start();
updateButtons();
render(game);
}
// Crée un Duel et rejoint la salle — mutualisé entre le bouton et le matchmaking.
function _joinDuelRoom(code) {
if (duel) duel.leave();
if (game.isRunning) { game.stop(); hideOverlay(); render(game); updateButtons(); }
duel = new Duel(socket, game, updateDuelStatus, startLocalGame, _makeDuelUI());
duel.join(code);
btnJoinDuel.disabled = true;
btnLeaveDuel.disabled = false;
inputRoomCode.disabled = true;
updateDuelStatus('waiting', null);
}
btnJoinDuel.addEventListener('click', () => {
const code = inputRoomCode.value.trim().toUpperCase();
if (!code) return;
_joinDuelRoom(code);
});
btnLeaveDuel.addEventListener('click', () => {
if (duel) { duel.leave(); duel = null; }
btnJoinDuel.disabled = false;
btnLeaveDuel.disabled = true;
inputRoomCode.disabled = false;
updateDuelStatus(null, null);
});
// ── Matchmaking ──────────────────────────────
btnMatchmaking.addEventListener('click', () => {
socket.emit('tetris:matchmaking-join');
btnMatchmaking.disabled = true;
btnMatchmakingCancel.disabled = false;
btnJoinDuel.disabled = true;
matchmakingStatusEl.textContent = 'Recherche en cours…';
matchmakingStatusEl.className = 'waiting';
});
btnMatchmakingCancel.addEventListener('click', () => {
socket.emit('tetris:matchmaking-leave');
btnMatchmaking.disabled = false;
btnMatchmakingCancel.disabled = true;
btnJoinDuel.disabled = false;
matchmakingStatusEl.textContent = '';
});
socket.on('tetris:matchmaking-status', (data) => {
if (data.status === 'searching') {
matchmakingStatusEl.textContent = `Recherche… (${data.position} joueur(s) en attente)`;
} else if (data.status === 'idle') {
matchmakingStatusEl.textContent = '';
btnMatchmaking.disabled = false;
btnMatchmakingCancel.disabled = true;
btnJoinDuel.disabled = false;
}
});
socket.on('tetris:matched', (data) => {
matchmakingStatusEl.textContent = `Adversaire trouvé : ${data.opponent} !`;
matchmakingStatusEl.className = 'ready';
btnMatchmaking.disabled = false;
btnMatchmakingCancel.disabled = true;
inputRoomCode.value = data.roomCode;
_joinDuelRoom(data.roomCode);
});
// ── Jeu ──────────────────────────────────────
function saveTetrisScore(score) {
const token = localStorage.getItem('auth_token');
if (!token) return;
fetch('/api/stats/tetris/score', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
body: JSON.stringify({ score })
})
.then(r => r.json())
.then(data => { if (data.bestScore !== undefined) console.log('Meilleur score tetris:', data.bestScore); })
.catch(err => console.error('Erreur sauvegarde score tetris:', err));
}
const game = new Tetris(
// onRender
() => {
if (duel) duel.synchronize_game();
render(game);
updateButtons();
},
// onGameOver
(score, validBlock) => {
if (duel && duel.isReady) duel.onLocalGameOver(score, validBlock);
else saveTetrisScore(score);
render(game);
updateButtons();
showOverlay('GAME OVER', score);
loadLeaderboards();
loadGameHistory();
},
// onBlockPlaced
(grid) => { if (duel) duel.onLocalBlockPlaced(grid, game.score); },
// onLinesCleared
(count, holeCol) => { if (duel) duel.onLocalLinesCleared(count, holeCol); },
// onShieldChanged
(event) => { if (duel) duel.onLocalShieldChanged(event); }
);
// ── Boutons de contrôle ──────────────────────
btnStart.addEventListener('click', () => {
if (duel && duel.isReady) duel.startDuel();
else startLocalGame();
});
btnPause.addEventListener('click', () => {
if (duel && duel.isReady) {
duel.togglePause();
} else {
game.pause();
updateButtons();
if (game.isPaused) showOverlay('PAUSE');
else hideOverlay();
}
});
btnStop.addEventListener('click', () => {
if (duel && duel.isReady) {
duel.stop();
} else {
game.stop();
updateButtons();
render(game);
showOverlay('STOPPED');
}
});
if (btnRestart) {
btnRestart.addEventListener('click', () => {
if (duel && duel.isReady) return;
game.restart();
updateButtons();
render(game);
});
}
// ── Paramètres ───────────────────────────────
function applySettings() {
const settings = {
timeToDown: parseInt(inputTTD.value, 10),
hardening: parseInt(inputHardening.value, 10),
decrementTTD: parseInt(inputDecrement.value, 10),
};
game.configure(settings);
if (duel && duel.isReady) duel.syncSettings(settings);
}
inputTTD.addEventListener('change', applySettings);
inputHardening.addEventListener('change', applySettings);
inputDecrement.addEventListener('change', applySettings);
// ── Thème ────────────────────────────────────
document.querySelectorAll('.theme-btn').forEach(btn => {
btn.addEventListener('click', () => setColorTheme(btn.dataset.theme));
});
Transcendence/srcs/frontend/src/ui.js
-412
View File
@@ -1,412 +0,0 @@
// ─────────────────────────────────────────────
// UI
// ─────────────────────────────────────────────
const btnStart = document.getElementById('btn-start');
const btnPause = document.getElementById('btn-pause');
const btnStop = document.getElementById('btn-stop');
const overlay = document.getElementById('overlay');
const inputTTD = document.getElementById('input-ttd');
const inputHardening = document.getElementById('input-hardening');
const inputDecrement = document.getElementById('input-decrement');
// Duel UI
const btnJoinDuel = document.getElementById('btn-join-duel');
const btnLeaveDuel = document.getElementById('btn-leave-duel');
const inputRoomCode = document.getElementById('input-room-code');
const duelStatusEl = document.getElementById('duel-status');
const opponentSection = document.getElementById('opponent-section');
// Matchmaking UI
const btnMatchmaking = document.getElementById('btn-matchmaking');
const btnMatchmakingCancel = document.getElementById('btn-matchmaking-cancel');
const matchmakingStatusEl = document.getElementById('matchmaking-status');
function updateButtons() {
btnStart.disabled = game.isRunning;
btnPause.disabled = !game.isRunning;
btnStop.disabled = !game.isRunning;
btnPause.textContent = game.isPaused ? 'Resume' : 'Pause';
inputTTD.disabled = game.isRunning;
inputHardening.disabled = game.isRunning;
inputDecrement.disabled = game.isRunning;
}
function showOverlay(title, score) {
document.getElementById('overlay-title').textContent = title;
document.getElementById('overlay-score').textContent = score !== undefined ? `Score : ${score}` : '';
overlay.classList.add('visible');
}
function hideOverlay() {
overlay.classList.remove('visible');
}
// ─────────────────────────────────────────────
// SOCKET + DUEL
// ─────────────────────────────────────────────
const socket = io({
auth: { token: localStorage.getItem('auth_token') },
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 1000,
transports: ['websocket', 'polling']
});
let duel = null;
function updateDuelStatus(status, opponentName) {
duelStatusEl.className = '';
if (status === 'waiting') {
duelStatusEl.textContent = 'En attente d\'un adversaire…';
duelStatusEl.classList.add('waiting');
opponentSection.classList.remove('visible');
} else if (status === 'ready') {
duelStatusEl.textContent = `Prêt — ${opponentName}`;
duelStatusEl.classList.add('ready');
opponentSection.classList.add('visible');
if (duel) duel.hideOpponentOverlay();
renderOpponent(duel ? duel.opponentGrid : Array.from({length:20}, () => Array(10).fill(0)));
} else {
duelStatusEl.textContent = '—';
opponentSection.classList.remove('visible');
}
}
function startLocalGame() {
hideOverlay();
game.start();
updateButtons();
render();
}
// ─────────────────────────────────────────────
// SCORE SAVE (solo)
// ─────────────────────────────────────────────
function saveTetrisScore(score) {
const token = localStorage.getItem('auth_token');
if (!token) return;
fetch('/api/stats/tetris/score', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ score })
})
.then(r => r.json())
.then(data => {
if (data.bestScore !== undefined) {
console.log('Meilleur score tetris:', data.bestScore);
}
})
.catch(err => console.error('Erreur sauvegarde score tetris:', err));
}
// ─────────────────────────────────────────────
// DUEL BUTTONS
// ─────────────────────────────────────────────
btnJoinDuel.addEventListener('click', () => {
const code = inputRoomCode.value.trim().toUpperCase();
if (!code) return;
if (duel) { duel.leave(); }
if (game.isRunning) { game.stop(); hideOverlay(); render(); updateButtons(); }
duel = new Duel(socket, game, updateDuelStatus, startLocalGame);
duel.join(code);
btnJoinDuel.disabled = true;
btnLeaveDuel.disabled = false;
inputRoomCode.disabled = true;
updateDuelStatus('waiting', null);
});
btnLeaveDuel.addEventListener('click', () => {
if (duel) { duel.leave(); duel = null; }
btnJoinDuel.disabled = false;
btnLeaveDuel.disabled = true;
inputRoomCode.disabled = false;
updateDuelStatus(null, null);
});
// ─────────────────────────────────────────────
// MATCHMAKING
// ─────────────────────────────────────────────
btnMatchmaking.addEventListener('click', () => {
socket.emit('tetris:matchmaking-join');
btnMatchmaking.disabled = true;
btnMatchmakingCancel.disabled = false;
btnJoinDuel.disabled = true;
matchmakingStatusEl.textContent = 'Recherche en cours…';
matchmakingStatusEl.className = 'waiting';
});
btnMatchmakingCancel.addEventListener('click', () => {
socket.emit('tetris:matchmaking-leave');
btnMatchmaking.disabled = false;
btnMatchmakingCancel.disabled = true;
btnJoinDuel.disabled = false;
matchmakingStatusEl.textContent = '';
});
socket.on('tetris:matchmaking-status', (data) => {
if (data.status === 'searching') {
matchmakingStatusEl.textContent = `Recherche… (${data.position} joueur(s) en attente)`;
} else if (data.status === 'idle') {
matchmakingStatusEl.textContent = '';
btnMatchmaking.disabled = false;
btnMatchmakingCancel.disabled = true;
btnJoinDuel.disabled = false;
}
});
socket.on('tetris:matched', (data) => {
matchmakingStatusEl.textContent = `Adversaire trouvé : ${data.opponent} !`;
matchmakingStatusEl.className = 'ready';
btnMatchmaking.disabled = false;
btnMatchmakingCancel.disabled = true;
btnJoinDuel.disabled = false;
// Auto-rejoindre la salle générée
if (duel) { duel.leave(); }
if (game.isRunning) { game.stop(); hideOverlay(); render(); updateButtons(); }
duel = new Duel(socket, game, updateDuelStatus, startLocalGame);
duel.join(data.roomCode);
inputRoomCode.value = data.roomCode;
btnJoinDuel.disabled = true;
btnLeaveDuel.disabled = false;
inputRoomCode.disabled = true;
updateDuelStatus('waiting', null);
});
// ─────────────────────────────────────────────
// INIT
// ─────────────────────────────────────────────
const game = new Tetris(
// onRender
() => {
if (duel) duel.synchronize_game();
render();
updateButtons();
},
// onGameOver
(score, validBlock) => {
const isDuel = duel && duel.isReady;
if (isDuel) {
duel.onLocalGameOver(score, validBlock);
} else {
saveTetrisScore(score);
}
render();
updateButtons();
showOverlay('GAME OVER', score);
loadLeaderboards();
loadGameHistory();
},
// onBlockPlaced — relay duel
(grid) => {
if (duel) duel.onLocalBlockPlaced(grid, game.score);
},
// onLinesCleared — relay duel
(count, holeCol) => {
if (duel) duel.onLocalLinesCleared(count, holeCol);
},
// onShieldChanged — relay duel
(event) => {
if (duel) duel.onLocalShieldChanged(event);
}
);
btnStart.addEventListener('click', () => {
if (duel && duel.isReady) {
duel.startDuel(); // déclenche les deux parties via le serveur
} else {
startLocalGame(); // solo
}
});
btnPause.addEventListener('click', () => {
if (duel && duel.isReady) {
duel.togglePause();
} else {
game.pause();
updateButtons();
if (game.isPaused) showOverlay('PAUSE');
else hideOverlay();
}
});
btnStop.addEventListener('click', () => {
if (duel && duel.isReady) {
duel.stop();
} else {
game.stop();
updateButtons();
render();
showOverlay('STOPPED');
}
});
function applySettings() {
const settings = {
timeToDown: parseInt(inputTTD.value, 10),
hardening: parseInt(inputHardening.value, 10),
decrementTTD: parseInt(inputDecrement.value, 10),
};
game.configure(settings);
if (duel && duel.isReady) duel.syncSettings(settings);
}
inputTTD.addEventListener('change', applySettings);
inputHardening.addEventListener('change', applySettings);
inputDecrement.addEventListener('change', applySettings);
const btnRestart = document.getElementById('btn-restart');
if (btnRestart) {
btnRestart.addEventListener('click', () => {
if (duel && duel.isReady) return;
game.restart();
updateButtons();
render();
});
}
// ─────────────────────────────────────────────
// GAME HISTORY
// ─────────────────────────────────────────────
async function loadGameHistory() {
const token = localStorage.getItem('auth_token');
if (!token) return;
try {
const res = await fetch('/api/stats/tetris/history', {
headers: { 'Authorization': `Bearer ${token}` }
});
if (!res.ok) return;
const history = await res.json();
renderGameHistory(history);
} catch (err) {
console.error('Erreur chargement historique:', err);
}
}
function renderGameHistory(history) {
const tbody = document.getElementById('lb-history-body');
if (!tbody) return;
if (!history.length) {
tbody.innerHTML = '<tr><td colspan="5">Aucune partie jouée</td></tr>';
return;
}
tbody.innerHTML = history.map((entry, i) => {
const date = new Date(entry.played_at).toLocaleDateString('fr-FR', {
day: '2-digit', month: '2-digit', year: '2-digit',
hour: '2-digit', minute: '2-digit'
});
const type = entry.game_type === 'duel' ? 'Duel' : 'Solo';
let resultHtml = '—';
if (entry.result === 'win') resultHtml = '<span class="hist-win">Victoire</span>';
if (entry.result === 'loss') resultHtml = '<span class="hist-loss">Défaite</span>';
return `<tr>
<td>${i + 1}</td>
<td>${date}</td>
<td>${type}</td>
<td>${entry.score}</td>
<td>${resultHtml}</td>
</tr>`;
}).join('');
}
// ─────────────────────────────────────────────
// LEADERBOARDS
// ─────────────────────────────────────────────
async function loadLeaderboards() {
const token = localStorage.getItem('auth_token');
if (!token) return;
const headers = { 'Authorization': `Bearer ${token}` };
try {
const [scoresRes, winsRes, meRes, rankScoreRes, rankWinsRes] = await Promise.all([
fetch('/api/stats/tetris/leaderboard/score', { headers }),
fetch('/api/stats/tetris/leaderboard/wins', { headers }),
fetch('/api/stats/me', { headers }),
fetch('/api/stats/tetris/rank/score', { headers }),
fetch('/api/stats/tetris/rank/wins', { headers })
]);
const me = meRes.ok ? await meRes.json() : null;
const rankScore = rankScoreRes.ok ? (await rankScoreRes.json()).rank : null;
const rankWins = rankWinsRes.ok ? (await rankWinsRes.json()).rank : null;
if (scoresRes.ok) {
const scores = await scoresRes.json();
renderLeaderboard('lb-scores-body', scores, ['tetris_best_score', 'tetris_games_played'], me, rankScore);
}
if (winsRes.ok) {
const wins = await winsRes.json();
renderLeaderboard('lb-wins-body', wins, ['tetris_wins', 'tetris_games_played'], me, rankWins);
}
} catch (err) {
console.error('Erreur chargement leaderboards:', err);
}
}
function renderLeaderboard(tbodyId, rows, [col1, col2], me, myRank) {
const tbody = document.getElementById(tbodyId);
if (!tbody) return;
if (!rows.length && !me) {
tbody.innerHTML = '<tr><td colspan="4">Aucun résultat</td></tr>';
return;
}
const myUsername = me?.username;
const inTop = rows.some(r => r.username === myUsername);
let html = rows.map((r, i) => {
const isMe = r.username === myUsername;
return `<tr class="${isMe ? 'lb-me' : ''}">
<td>${i + 1}</td>
<td>${escapeHtml(r.username)}${isMe ? ' <span class="lb-you">(vous)</span>' : ''}</td>
<td>${r[col1] ?? 0}</td>
<td>${r[col2] ?? 0}</td>
</tr>`;
}).join('');
if (!inTop && me && myRank !== null) {
html += `<tr class="lb-separator"><td colspan="4">· · ·</td></tr>`;
html += `<tr class="lb-me">
<td>${myRank}</td>
<td>${escapeHtml(myUsername)} <span class="lb-you">(vous)</span></td>
<td>${me[col1] ?? 0}</td>
<td>${me[col2] ?? 0}</td>
</tr>`;
}
tbody.innerHTML = html || '<tr><td colspan="4">Aucun résultat</td></tr>';
}
function escapeHtml(str) {
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
// Tabs leaderboard
document.querySelectorAll('.lb-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.lb-tab').forEach(t => t.classList.remove('lb-tab--active'));
document.querySelectorAll('.lb-content').forEach(c => c.classList.remove('lb-content--active'));
tab.classList.add('lb-tab--active');
document.getElementById(`lb-${tab.dataset.tab}`).classList.add('lb-content--active');
if (tab.dataset.tab === 'history') loadGameHistory();
});
});
// Chargement initial des leaderboards
loadLeaderboards();
loadGameHistory();
Transcendence/srcs/frontend/src/avatar.js → Transcendence/srcs/frontend/src/windows/avatar.js
+3 -3
View File
@@ -1,6 +1,6 @@
import { Window, windowRegistry } from './windows.js';
import { API, STORAGE_KEYS, CSS } from './config.js';
import { eventBus, Events } from './events.js';
import { Window, windowRegistry } from '../core/windows.js';
import { API, STORAGE_KEYS, CSS } from '../core/config.js';
import { eventBus, Events } from '../core/events.js';
/**
* Avatar management window
Transcendence/srcs/frontend/src/friends.js → Transcendence/srcs/frontend/src/windows/friends.js
+3 -3
View File
@@ -1,6 +1,6 @@
import { Window, windowRegistry } from './windows.js';
import { API, STORAGE_KEYS, CSS } from './config.js';
import { eventBus, Events } from './events.js';
import { Window, windowRegistry } from '../core/windows.js';
import { API, STORAGE_KEYS, CSS } from '../core/config.js';
import { eventBus, Events } from '../core/events.js';
/**
* Friends management window
Transcendence/srcs/frontend/src/game_room.js → Transcendence/srcs/frontend/src/windows/game_room.js
+3 -3
View File
@@ -1,6 +1,6 @@
import { Window } from './windows.js';
import { API, STORAGE_KEYS, CSS } from './config.js';
import { eventBus, Events } from './events.js';
import { Window } from '../core/windows.js';
import { API, STORAGE_KEYS, CSS } from '../core/config.js';
import { eventBus, Events } from '../core/events.js';
export class GameRoomWindow extends Window {
constructor() {
Transcendence/srcs/frontend/src/global_chat.js → Transcendence/srcs/frontend/src/windows/global_chat.js
+3 -3
View File
@@ -1,6 +1,6 @@
import { Window } from './windows.js';
import { STORAGE_KEYS, CSS } from './config.js';
import { eventBus, Events } from './events.js';
import { Window } from '../core/windows.js';
import { STORAGE_KEYS, CSS } from '../core/config.js';
import { eventBus, Events } from '../core/events.js';
/**
* Global chat window
Transcendence/srcs/frontend/src/login.js → Transcendence/srcs/frontend/src/windows/login.js
+3 -3
View File
@@ -1,6 +1,6 @@
import { Window } from './windows.js';
import { API, STORAGE_KEYS, CSS } from './config.js';
import { eventBus, Events } from './events.js';
import { Window } from '../core/windows.js';
import { API, STORAGE_KEYS, CSS } from '../core/config.js';
import { eventBus, Events } from '../core/events.js';
/**
* Login and registration window
Transcendence/srcs/frontend/src/stats.js → Transcendence/srcs/frontend/src/windows/stats.js
+2 -2
View File
@@ -1,5 +1,5 @@
import { Window } from './windows.js';
import { API, STORAGE_KEYS } from './config.js';
import { Window } from '../core/windows.js';
import { API, STORAGE_KEYS } from '../core/config.js';
/**
* Stats window — displays Scribble + Tetris stats for any user