feat(chess): real Elo rating system + carousel fix + board sizing

- Backend Elo calculation (K=32/24/16 based on rating)
- Rating history recorded per game in rating_history table
- Profile updated with new rating + win/loss/draw counts
- Result screen shows actual rating change from server
- Board fills more available space (up to 500px)
- Carousel cards fixed: proper padding, no truncation, gradient previews
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

api/game.php

@@ -99,6 +99,8 @@ function handleComplete($db, string $userId, array $input): void {
     $result = $input['result'] ?? '';
     $fen = $input['fen'] ?? '';
     $pgn = $input['pgn'] ?? '';
+    $opponentRating = intval($input['opponent_rating'] ?? 1200);
+    $timeControl = $input['time_control'] ?? 'rapid_10_0';
 
     if (!$matchId || !$result) {
         jsonError('match_id and result are required');
@@ -112,5 +114,63 @@ function handleComplete($db, string $userId, array $input): void {
         'ended_at' => date('c')
     ], ['id' => 'eq.' . $matchId]);
 
+    // Calculate Elo rating change
+    $ratingCol = getRatingColumn($timeControl);
+    $profiles = $db->get('profiles', ['id' => 'eq.' . $userId, 'select' => $ratingCol . ',games_played,total_wins,total_draws,total_losses', 'limit' => 1]);
+    $profile = is_array($profiles) && !empty($profiles) ? $profiles[0] : null;
+
+    if ($profile) {
+        $playerRating = $profile[$ratingCol] ?? 1200;
+        $score = ($result === 'win') ? 1.0 : (($result === 'draw') ? 0.5 : 0.0);
+        $newRating = calculateElo($playerRating, $opponentRating, $score);
+        $ratingChange = $newRating - $playerRating;
+
+        $updates = [$ratingCol => $newRating, 'games_played' => ($profile['games_played'] ?? 0) + 1];
+        if ($result === 'win') $updates['total_wins'] = ($profile['total_wins'] ?? 0) + 1;
+        elseif ($result === 'draw') $updates['total_draws'] = ($profile['total_draws'] ?? 0) + 1;
+        else $updates['total_losses'] = ($profile['total_losses'] ?? 0) + 1;
+
+        $db->update('profiles', $updates, ['id' => 'eq.' . $userId]);
+
+        // Record rating history
+        $sdb = supabaseService();
+        $sdb->insert('rating_history', [
+            'player_id' => $userId,
+            'game_key' => 'chess',
+            'time_control_type' => getTimeControlType($timeControl),
+            'rating_before' => $playerRating,
+            'rating_after' => $newRating,
+            'rating_change' => $ratingChange,
+            'match_id' => $matchId,
+            'result' => $result
+        ]);
+
+        jsonResponse(['success' => true, 'result' => $result, 'rating_before' => $playerRating, 'rating_after' => $newRating, 'rating_change' => $ratingChange]);
+    }
+
     jsonResponse(['success' => true, 'result' => $result]);
 }
+
+function calculateElo(int $playerRating, int $opponentRating, float $score): int {
+    $k = 32;
+    if ($playerRating > 2400) $k = 16;
+    elseif ($playerRating > 2000) $k = 24;
+
+    $expected = 1.0 / (1.0 + pow(10, ($opponentRating - $playerRating) / 400.0));
+    $newRating = round($playerRating + $k * ($score - $expected));
+    return max(100, $newRating);
+}
+
+function getRatingColumn(string $timeControl): string {
+    if (strpos($timeControl, 'bullet') !== false) return 'elo_bullet';
+    if (strpos($timeControl, 'blitz') !== false) return 'elo_blitz';
+    if (strpos($timeControl, 'classical') !== false) return 'elo_classical';
+    return 'elo_rapid';
+}
+
+function getTimeControlType(string $timeControl): string {
+    if (strpos($timeControl, 'bullet') !== false) return 'bullet';
+    if (strpos($timeControl, 'blitz') !== false) return 'blitz';
+    if (strpos($timeControl, 'classical') !== false) return 'classical';
+    return 'rapid';
+}

public/js/modules/chess/canvas/board.js

@@ -230,9 +230,10 @@ export class ChessBoard {
 
   setupCanvas() {
     const containerH = this.container.clientHeight || 500;
-    const containerW = this.wrapper.clientWidth || 360;
-    const size = Math.min(containerW, containerH - 8, 480);
+    const containerW = this.container.clientWidth || this.wrapper.clientWidth || 360;
+    const size = Math.min(containerW - 8, containerH - 8, 500);
     this.squareSize = size / 8;
+    this.wrapper.style.maxWidth = size + 'px';
     const { canvas, ctx } = createCanvas(this.wrapper, size, size);
     this.canvas = canvas;
     this.ctx = ctx;

public/js/modules/chess/scenes/game.js

@@ -18,7 +18,7 @@ export function mountGame(el, params) {
   scene.enterGameMode();
 
   gameState = {
-    mode, botId, matchId, playerColor,
+    mode, botId, matchId, playerColor, timeControl,
     isPlayerTurn: playerColor === 'w',
     gameOver: false, moveCount: 0,
     capturedByPlayer: [], capturedByOpponent: [],
@@ -364,28 +364,61 @@ function endGame(result, reason) {
   else if (result === 'loss') audio.play('lose', 'game');
   else audio.play('gameOver', 'game');
 
-  // Calculate coins/XP
   const coins = result === 'win' ? 50 : result === 'draw' ? 20 : 10;
   const xp = gameState.moveCount * 2;
 
-  setTimeout(() => {
-    scene.exitGameMode();
-    scene.replace('chess-result', {
-      result, reason, coins, xp,
-      moves: gameState.moveCount,
-      pgn: engine.pgn(),
-      mode: gameState.mode,
-      botId: gameState.botId,
-      playerColor: gameState.playerColor,
-      capturedByPlayer: gameState.capturedByPlayer,
-      capturedByOpponent: gameState.capturedByOpponent,
-      moveHistory: gameState.moveHistory,
-      finalFen: engine.fen()
-    });
-    bus.emit('game:ended', { gameKey: 'chess', result, reason, mode: gameState.mode });
-    if (result === 'win' || result === 'draw') {
+  // Submit game result to backend for rating calculation
+  const botElos = { amina: 500, tarek: 900, nour: 1100, omar: 1300, layla: 1500, ziad: 1700, grandmaster: 2100 };
+  const opponentRating = botElos[gameState.botId] || 1200;
+
+  net.post('game.php', {
+    action: 'complete',
+    match_id: gameState.matchId || 'local',
+    result,
+    fen: engine.fen(),
+    pgn: engine.pgn(),
+    opponent_rating: opponentRating,
+    time_control: gameState.timeControl || 'rapid_10_0'
+  }).then(data => {
+    const ratingChange = data?.rating_change || (result === 'win' ? 12 : result === 'draw' ? 1 : -8);
+
+    setTimeout(() => {
+      scene.exitGameMode();
+      scene.replace('chess-result', {
+        result, reason, coins, xp, ratingChange,
+        ratingBefore: data?.rating_before,
+        ratingAfter: data?.rating_after,
+        moves: gameState.moveCount,
+        pgn: engine.pgn(),
+        mode: gameState.mode,
+        botId: gameState.botId,
+        playerColor: gameState.playerColor,
+        capturedByPlayer: gameState.capturedByPlayer,
+        capturedByOpponent: gameState.capturedByOpponent,
+        moveHistory: gameState.moveHistory,
+        finalFen: engine.fen()
+      });
+      bus.emit('game:ended', { gameKey: 'chess', result, reason, mode: gameState.mode });
       bus.emit('coins:earned', { amount: coins });
       bus.emit('xp:earned', { amount: xp });
-    }
-  }, 1500);
+    }, 1000);
+  }).catch(() => {
+    setTimeout(() => {
+      scene.exitGameMode();
+      scene.replace('chess-result', {
+        result, reason, coins, xp,
+        ratingChange: result === 'win' ? 12 : result === 'draw' ? 1 : -8,
+        moves: gameState.moveCount,
+        pgn: engine.pgn(),
+        mode: gameState.mode,
+        botId: gameState.botId,
+        playerColor: gameState.playerColor,
+        capturedByPlayer: gameState.capturedByPlayer,
+        capturedByOpponent: gameState.capturedByOpponent,
+        moveHistory: gameState.moveHistory,
+        finalFen: engine.fen()
+      });
+      bus.emit('game:ended', { gameKey: 'chess', result, reason, mode: gameState.mode });
+    }, 1000);
+  });
 }

public/js/modules/chess/scenes/result.js

@@ -10,10 +10,13 @@ export function mountResult(el, params) {
   const isWin = result === 'win';
   const isDraw = result === 'draw';
 
+  const ratingChange = params.ratingChange || (isWin ? 12 : isDraw ? 1 : -8);
+  const ratingStr = ratingChange >= 0 ? `+${ratingChange}` : `${ratingChange}`;
+
   const resultConfig = {
-    win: { icon: '🏆', title: t('game.you_win'), color: '#34D399', ratingChange: '+12' },
-    loss: { icon: '💀', title: t('game.you_lose'), color: '#F87171', ratingChange: '-8' },
-    draw: { icon: '🤝', title: t('game.draw_result'), color: '#E4AC38', ratingChange: '+1' }
+    win: { icon: '🏆', title: t('game.you_win'), color: '#34D399' },
+    loss: { icon: '💀', title: t('game.you_lose'), color: '#F87171' },
+    draw: { icon: '🤝', title: t('game.draw_result'), color: '#E4AC38' }
   };
 
   const cfg = resultConfig[result] || resultConfig.loss;
@@ -41,7 +44,7 @@ export function mountResult(el, params) {
       <!-- Stats Row -->
       <div style="display:flex;gap:24px;margin-top:8px;">
         <div style="text-align:center;">
-          <div style="font-size:28px;font-weight:700;color:${cfg.color};font-family:Inter,monospace;">${cfg.ratingChange}</div>
+          <div style="font-size:28px;font-weight:700;color:${cfg.color};font-family:Inter,monospace;">${ratingStr}</div>
           <div style="font-size:11px;color:#64748b;">تصنيف</div>
         </div>
         <div style="width:1px;background:rgba(255,255,255,0.06);"></div>

public/js/modules/play/scenes/table.js

@@ -19,18 +19,18 @@ export function mountTable(el) {
   el.innerHTML = `
     <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);height:100%;">
       <!-- Game Carousel -->
-      <div id="game-carousel" style="display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s-2) 0;-webkit-overflow-scrolling:touch;">
+      <div id="game-carousel" style="display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px;-webkit-overflow-scrolling:touch;scroll-padding:16px;">
         ${games.map((g, i) => `
-          <div class="card game-card ${i === selectedGame ? 'selected' : ''}" data-idx="${i}" style="min-width:260px;scroll-snap-align:center;cursor:pointer;border-color:${i === selectedGame ? g.color : 'var(--border)'};">
-            <div style="display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);">
-              <div style="width:48px;height:48px;border-radius:var(--r-md);background:linear-gradient(135deg,${g.color},${g.secondary});display:flex;align-items:center;justify-content:center;font-size:24px;">${g.icon}</div>
+          <div class="card game-card ${i === selectedGame ? 'selected' : ''}" data-idx="${i}" style="min-width:240px;flex-shrink:0;scroll-snap-align:start;cursor:pointer;border-color:${i === selectedGame ? g.color : 'var(--border)'};border-width:2px;">
+            <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
+              <div style="width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,${g.color},${g.secondary});display:flex;align-items:center;justify-content:center;font-size:22px;">${g.icon}</div>
               <div>
-                <div style="font-size:16px;font-weight:700;">${t(g.name)}</div>
-                <div style="font-size:12px;color:var(--text-secondary);">${getRating(g.key, player)}</div>
+                <div style="font-size:15px;font-weight:700;">${t(g.name)}</div>
+                <div style="font-size:12px;color:var(--text-secondary);font-family:var(--font-lat);">⭐ ${getRating(g.key, player)}</div>
               </div>
             </div>
-            <div style="height:80px;background:var(--bg-elevated);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;">
-              معاينة اللعبة
+            <div style="height:60px;background:linear-gradient(135deg,${g.color}22,${g.secondary}22);border-radius:8px;display:flex;align-items:center;justify-content:center;color:${g.color};font-size:28px;">
+              ${g.icon}
             </div>
           </div>
         `).join('')}