fix: resolve visual issues across all pages

- Replace broken bot avatar images with gradient letter avatars
- Hide eval bar on mobile to prevent board cropping
- Fix SVG icon rendering (add stroke/fill to icon-lg/sm/xl classes)
- Add error handling to App.fetch (try/catch for network failures)
- Show empty state instead of infinite loading on tournaments
- Use clock icon for draws instead of confusing X icon
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

pages/bots.php

@@ -12,7 +12,7 @@
 
     <div class="card card-hover bot-card" data-bot="amina" data-elo="800">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/amina.jpg" class="avatar" alt="amina" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">A</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">امينة</p>
           <p class="text-muted text-xs">مبتدئة - ELO 800</p>
@@ -24,7 +24,7 @@
 
     <div class="card card-hover bot-card" data-bot="tarek" data-elo="1000">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/tarek.jpg" class="avatar" alt="tarek" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">T</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">طارق</p>
           <p class="text-muted text-xs">هاوي - ELO 1000</p>
@@ -36,7 +36,7 @@
 
     <div class="card card-hover bot-card" data-bot="nour" data-elo="1200">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/nour.jpg" class="avatar" alt="nour" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">N</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">نور</p>
           <p class="text-muted text-xs">متوسطة - ELO 1200</p>
@@ -48,7 +48,7 @@
 
     <div class="card card-hover bot-card" data-bot="omar" data-elo="1400">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/omar.jpg" class="avatar" alt="omar" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">O</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">عمر</p>
           <p class="text-muted text-xs">جيد - ELO 1400</p>
@@ -60,7 +60,7 @@
 
     <div class="card card-hover bot-card" data-bot="layla" data-elo="1600">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/layla.jpg" class="avatar" alt="layla" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,#f472b6,#db2777);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">L</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">ليلى</p>
           <p class="text-muted text-xs">قوية - ELO 1600</p>
@@ -72,7 +72,7 @@
 
     <div class="card card-hover bot-card" data-bot="ziad" data-elo="1800">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/ziad.jpg" class="avatar" alt="ziad" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,#f87171,#dc2626);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">Z</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">زياد</p>
           <p class="text-muted text-xs">خبير - ELO 1800</p>
@@ -84,7 +84,7 @@
 
     <div class="card card-hover bot-card" data-bot="grandmaster" data-elo="2200">
       <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-        <img src="https://stockfishapi.caprover.al-arcade.com/portraits/grandmaster.jpg" class="avatar" alt="grandmaster" style="object-fit:cover;">
+        <div class="avatar" style="background:linear-gradient(135deg,var(--gold),#b45309);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;">GM</div>
         <div style="flex:1;">
           <p style="font-size:16px;font-weight:600;">الاستاذ الكبير</p>
           <p class="text-muted text-xs">جراند ماستر - ELO 2200</p>

pages/home.php

@@ -68,8 +68,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     container.innerHTML = gamesData.games.slice(0, 5).map(g => {
       const resultClass = g.result === 'win' ? 'color:var(--success)' : g.result === 'loss' ? 'color:var(--error)' : 'color:var(--text-3)';
       const resultText = g.result === 'win' ? 'فوز' : g.result === 'loss' ? 'خسارة' : 'تعادل';
+      const resultIcon = g.result === 'win' ? 'check' : g.result === 'loss' ? 'x' : 'clock';
       return '<div style="display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);">' +
-        '<svg class="icon" style="' + resultClass + '"><use href="/public/icons/sprite.svg#icon-' + (g.result === 'win' ? 'check' : 'x') + '"></use></svg>' +
+        '<svg class="icon" style="' + resultClass + '"><use href="/public/icons/sprite.svg#icon-' + resultIcon + '"></use></svg>' +
         '<div style="flex:1;"><p style="font-size:13px;font-weight:600;">ضد ' + (g.bot_id || '?') + '</p></div>' +
         '<span class="badge" style="' + resultClass + '">' + resultText + '</span>' +
       '</div>';

pages/tournaments.php

@@ -66,7 +66,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
 async function loadTournaments() {
   const data = await App.fetch('/api/tournaments');
-  if (!data || !data.tournaments) return;
+  if (!data || !data.tournaments) {
+    document.getElementById('active-tournaments').innerHTML = '<div class="card"><div class="empty-state">لا توجد بطولات جارية</div></div>';
+    document.getElementById('upcoming-tournaments').innerHTML = '<div class="card"><div class="empty-state">لا توجد بطولات قادمة</div></div>';
+    document.getElementById('completed-tournaments').innerHTML = '<div class="card"><div class="empty-state">لا توجد بطولات منتهية</div></div>';
+    return;
+  }
 
   const now = new Date();
   const active = [];

public/css/app.css

@@ -127,9 +127,9 @@ img {
   stroke-linejoin: round;
   flex-shrink: 0;
 }
-.icon-sm { width: 16px; height: 16px; }
-.icon-lg { width: 24px; height: 24px; }
-.icon-xl { width: 32px; height: 32px; }
+.icon-sm { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.icon-lg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.icon-xl { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
 .icon-fill { fill: currentColor; stroke: none; }
 
 /* ==================== LAYOUT ==================== */

public/css/chessboard.css

@@ -83,10 +83,10 @@
 
 .game-board-section {
   display: flex;
-  gap: 6px;
+  gap: 4px;
   align-items: stretch;
   width: 100%;
-  max-width: 600px;
+  max-width: 580px;
   margin: 4px auto;
 }
 
@@ -243,9 +243,9 @@
 
 /* Eval Bar */
 .eval-bar {
-  width: 22px;
-  min-width: 22px;
-  background: #333;
+  width: 18px;
+  min-width: 18px;
+  background: #1a1a2e;
   border-radius: var(--radius-sm);
   overflow: hidden;
   position: relative;
@@ -753,7 +753,6 @@
   }
 
   .eval-bar {
-    width: 16px;
-    min-width: 16px;
+    display: none;
   }
 }

public/js/app.js

@@ -5,19 +5,23 @@ const App = {
   user: JSON.parse(localStorage.getItem('el3ab_user') || 'null'),
 
   async fetch(url, options = {}) {
-    const headers = {
-      'Content-Type': 'application/json',
-      ...(options.headers || {}),
-    };
-    if (this.token) {
-      headers['Authorization'] = 'Bearer ' + this.token;
-    }
-    const res = await fetch(url, { ...options, headers });
-    if (res.status === 401) {
-      this.logout();
+    try {
+      const headers = {
+        'Content-Type': 'application/json',
+        ...(options.headers || {}),
+      };
+      if (this.token) {
+        headers['Authorization'] = 'Bearer ' + this.token;
+      }
+      const res = await fetch(url, { ...options, headers });
+      if (res.status === 401) {
+        this.logout();
+        return null;
+      }
+      return res.json();
+    } catch (e) {
       return null;
     }
-    return res.json();
   },
 
   setAuth(token, user) {