Skip to content

E
el3ab-Player
Commit 5fdcd96f authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent a3c3fae0
Show whitespace changes
Inline Side-by-side
Showing with 39 additions and 30 deletions
pages/bots.php
View file @ 5fdcd96f
......@@ -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
View file @ 5fdcd96f
......@@ -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
View file @ 5fdcd96f
......@@ -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
View file @ 5fdcd96f
......@@ -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
View file @ 5fdcd96f
......@@ -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
View file @ 5fdcd96f
......@@ -5,6 +5,7 @@ const App = {
user: JSON.parse(localStorage.getItem('el3ab_user') || 'null'),
async fetch(url, options = {}) {
try {
const headers = {
'Content-Type': 'application/json',
...(options.headers || {}),
......@@ -18,6 +19,9 @@ const App = {
return null;
}
return res.json();
} catch (e) {
return null;
}
},
setAuth(token, user) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment