Skip to content

E
el3ab-Player
Commit 9924c814 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

fix: bot avatars try image first, fallback to letter avatar on error 

Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 74a030c2
Show whitespace changes
Inline Side-by-side
Showing with 20 additions and 77 deletions
pages/bots.php
View file @ 9924c814
......@@ -10,89 +10,32 @@
<div class="space-y-3" id="bots-grid">
<div class="card card-hover bot-card" data-bot="amina" data-elo="800">
<?php
$bots = [
['id' => 'amina', 'name' => 'امينة', 'level' => 'مبتدئة', 'elo' => 800, 'letter' => 'A', 'gradient' => '#4ade80,#22c55e', 'bar' => 11, 'barColor' => 'var(--success)'],
['id' => 'tarek', 'name' => 'طارق', 'level' => 'هاوي', 'elo' => 1000, 'letter' => 'T', 'gradient' => '#38bdf8,#0ea5e9', 'bar' => 25, 'barColor' => 'var(--success)'],
['id' => 'nour', 'name' => 'نور', 'level' => 'متوسطة', 'elo' => 1200, 'letter' => 'N', 'gradient' => '#a78bfa,#7c3aed', 'bar' => 40, 'barColor' => 'var(--warning)'],
['id' => 'omar', 'name' => 'عمر', 'level' => 'جيد', 'elo' => 1400, 'letter' => 'O', 'gradient' => '#fb923c,#ea580c', 'bar' => 55, 'barColor' => 'var(--warning)'],
['id' => 'layla', 'name' => 'ليلى', 'level' => 'قوية', 'elo' => 1600, 'letter' => 'L', 'gradient' => '#f472b6,#db2777', 'bar' => 70, 'barColor' => 'var(--error)'],
['id' => 'ziad', 'name' => 'زياد', 'level' => 'خبير', 'elo' => 1800, 'letter' => 'Z', 'gradient' => '#f87171,#dc2626', 'bar' => 85, 'barColor' => 'var(--error)'],
['id' => 'grandmaster', 'name' => 'الاستاذ الكبير', 'level' => 'جراند ماستر', 'elo' => 2200, 'letter' => 'GM', 'gradient' => 'var(--gold),#b45309', 'bar' => 100, 'barColor' => 'var(--purple)'],
];
foreach ($bots as $bot): ?>
<div class="card card-hover bot-card" data-bot="<?= $bot['id'] ?>" data-elo="<?= $bot['elo'] ?>">
<div class="card-body" style="display:flex;align-items:center;gap:16px;">
<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>
<img src="https://stockfishapi.caprover.al-arcade.com/portraits/<?= $bot['id'] ?>.jpg"
class="avatar" style="object-fit:cover;"
onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
<div class="avatar" style="display:none;background:linear-gradient(135deg,<?= $bot['gradient'] ?>);color:#fff;font-weight:700;font-size:18px;align-items:center;justify-content:center;"><?= $bot['letter'] ?></div>
<div style="flex:1;">
<p style="font-size:16px;font-weight:600;">امينة</p>
<p class="text-muted text-xs">مبتدئة - ELO 800</p>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:11%;background:var(--success);"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<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;">
<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>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:25%;background:var(--success);"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<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;">
<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>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:40%;background:var(--warning);"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<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;">
<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>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:55%;background:var(--warning);"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<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;">
<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>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:70%;background:var(--error);"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<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;">
<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>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:85%;background:var(--error);"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<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;">
<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>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:100%;background:var(--purple);"></div></div>
<p style="font-size:16px;font-weight:600;"><?= $bot['name'] ?></p>
<p class="text-muted text-xs"><?= $bot['level'] ?> - ELO <?= $bot['elo'] ?></p>
<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:<?= $bot['bar'] ?>%;background:<?= $bot['barColor'] ?>;"></div></div>
</div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
......
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