107 lines
5.9 KiB
HTML
107 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GAMEHUS — الألعاب</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="static/style.css" rel="stylesheet">
|
|
</head>
|
|
<body data-page="games" class="auth-guard">
|
|
|
|
<div class="app-shell">
|
|
<header id="topbar" class="topbar"></header>
|
|
<div class="app-body">
|
|
<aside id="sidebar" class="sidebar"></aside>
|
|
<main class="content-area">
|
|
|
|
<!-- Inner tabs for game categories -->
|
|
<div style="flex:1;overflow:hidden;display:flex;flex-direction:column;" data-inner-tabs>
|
|
<div class="inner-tab-bar">
|
|
<button class="inner-tab" data-inner-tab="all">🎮 الكل</button>
|
|
<button class="inner-tab" data-inner-tab="billiards">🎱 البلياردو</button>
|
|
<button class="inner-tab" data-inner-tab="chess">♟️ الشطرنج</button>
|
|
<button class="inner-tab" data-inner-tab="checkers">🔴 الداما</button>
|
|
</div>
|
|
|
|
<!-- All -->
|
|
<div class="inner-panel" data-inner-panel="all">
|
|
<div class="inner-content" id="grid-all"></div>
|
|
</div>
|
|
<!-- Billiards -->
|
|
<div class="inner-panel" data-inner-panel="billiards">
|
|
<div class="inner-content" id="grid-billiards"></div>
|
|
</div>
|
|
<!-- Chess -->
|
|
<div class="inner-panel" data-inner-panel="chess">
|
|
<div class="inner-content" id="grid-chess"></div>
|
|
</div>
|
|
<!-- Checkers -->
|
|
<div class="inner-panel" data-inner-panel="checkers">
|
|
<div class="inner-content" id="grid-checkers"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/script.js"></script>
|
|
<script>
|
|
const ALL_GAMES = [
|
|
{id:'billiards-8ball', name:'8-Ball Pool', icon:'🎱', bg:'linear-gradient(135deg,#0a2010,#143020)', players:1247, badge:'الأكثر شعبية', cat:'billiards', desc:'اللعبة الكلاسيكية الأشهر — أدخل كراتك وأنهِ بالسوداء'},
|
|
{id:'billiards-9ball', name:'9-Ball Pool', icon:'🎱', bg:'linear-gradient(135deg,#0a1a18,#102820)', players:892, badge:'مميز', cat:'billiards', desc:'العب بالأرقام بالترتيب وأدخل كرة 9 للفوز'},
|
|
{id:'billiards-snooker',name:'Snooker', icon:'🎯', bg:'linear-gradient(135deg,#0a1810,#122018)', players:654, badge:'احترافي', cat:'billiards', desc:'طاولة كبيرة وتكتيك عالٍ — للمحترفين فقط'},
|
|
{id:'chess-classic', name:'Classic Chess', icon:'♟️', bg:'linear-gradient(135deg,#10121a,#1a1e30)', players:2103, badge:'الأكثر شعبية', cat:'chess', desc:'الشطرنج الكلاسيكي — اختبر ذكاءك ضد أقوى اللاعبين'},
|
|
{id:'chess-rapid', name:'Rapid Chess', icon:'⏱️', bg:'linear-gradient(135deg,#141418,#20202c)', players:1456, badge:'سريع', cat:'chess', desc:'10 دقائق للحسم — سرعة التفكير هي المفتاح'},
|
|
{id:'checkers', name:'Checkers', icon:'🔴', bg:'linear-gradient(135deg,#1a0a0a,#2c1212)', players:445, badge:'كلاسيكي', cat:'checkers', desc:'الداما الكلاسيكية — استراتيجية بسيطة ومتعة لا تنتهي'},
|
|
];
|
|
|
|
function buildCard(g) {
|
|
return `
|
|
<div class="game-card" onclick="location.href='game-details.html?id=${g.id}'">
|
|
<div class="game-card-thumb" style="background:${g.bg};">
|
|
<span style="position:relative;z-index:1;font-size:3.5rem;filter:drop-shadow(0 0 14px rgba(212,160,23,0.5));">${g.icon}</span>
|
|
<span style="position:absolute;top:8px;right:8px;z-index:2;" class="badge badge-gold">${g.badge}</span>
|
|
</div>
|
|
<div class="game-card-body">
|
|
<div class="game-card-title">${g.name}</div>
|
|
<div class="game-card-sub" style="margin:4px 0 10px;">${g.desc}</div>
|
|
<div style="display:flex;align-items:center;gap:5px;margin-bottom:10px;">
|
|
<span class="online-dot"></span>
|
|
<span style="color:#4ade80;font-size:0.78rem;font-weight:700;">${g.players.toLocaleString('ar')} يلعبون الآن</span>
|
|
</div>
|
|
<div style="display:flex;gap:6px;">
|
|
<button class="btn btn-gold btn-sm" style="flex:1;justify-content:center;" onclick="event.stopPropagation();location.href='game-details.html?id=${g.id}'">▶ العب</button>
|
|
<a href="rooms.html?gameId=${g.id}" class="btn btn-ghost btn-sm" style="flex:1;justify-content:center;" onclick="event.stopPropagation()">🏠 الغرف</a>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function renderGrid(id, games) {
|
|
document.getElementById(id).innerHTML = `
|
|
<div style="margin-bottom:20px;">
|
|
<h1 style="font-size:1.4rem;font-weight:900;" class="gold-text">🎮 ${id==='grid-all'?'جميع الألعاب':games[0]?.cat==='billiards'?'ألعاب البلياردو':games[0]?.cat==='chess'?'ألعاب الشطرنج':'ألعاب الداما'}</h1>
|
|
<p style="color:var(--text-muted);font-size:0.85rem;margin-top:4px;">${games.length} لعبة متاحة</p>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;">
|
|
${games.map(buildCard).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
renderGrid('grid-all', ALL_GAMES);
|
|
renderGrid('grid-billiards', ALL_GAMES.filter(g=>g.cat==='billiards'));
|
|
renderGrid('grid-chess', ALL_GAMES.filter(g=>g.cat==='chess'));
|
|
renderGrid('grid-checkers', ALL_GAMES.filter(g=>g.cat==='checkers'));
|
|
// open tab from URL
|
|
const cat = new URLSearchParams(location.search).get('cat') || 'all';
|
|
const tab = document.querySelector(`[data-inner-tab="${cat}"]`);
|
|
if (tab) tab.click();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|