Skip to content

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

fix: game menu redesigned as proper game UI — bigger buttons, better layout 

Game menu popup overhauled:
- Header: game icon (gradient square) + name + close button
- Main buttons (.gm-btn): 52px icon, bold title, subtitle, arrow indicator
  - 'لاعب واحد' with gamepad icon on game gradient
  - 'أونلاين' with swords on red/orange gradient
- Secondary grid (.gm-chip): vertical icon + label, full tap target
  - الترتيب, مبارياتي, أحجيات (chess only)
- All buttons: dark card style with border, scale-on-press, no web-form feel
- Removed old .menu-btn / .feature-chip CSS entirely
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent adb62666
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 68 deletions
public/js/modules/play/scenes/table.js
View file @ cc7da7a7
...@@ -144,71 +144,55 @@ export function mountTable(el) { ...@@ -144,71 +144,55 @@ export function mountTable(el) {
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
} }
.game-menu-title { /* Game menu buttons */
font-size: 20px; .gm-btn {
font-weight: 800;
color: #f8fafc;
}
.game-menu-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: none;
color: #94a3b8;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.menu-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 14px;
width: 100%; width: 100%;
padding: 20px; padding: 18px 16px;
background: #1a1a2e;
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: 16px; border-radius: 16px;
border: none;
cursor: pointer; cursor: pointer;
margin-bottom: 12px; margin-bottom: 10px;
transition: transform 0.1s, background 0.15s;
text-align: right; text-align: right;
min-height: 72px; transition: transform 0.1s, border-color 0.2s;
} font-family: inherit;
.menu-btn:active { transform: scale(0.96); }
.menu-btn-primary {
background: var(--game-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
color: white;
}
.menu-btn-secondary {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #f8fafc;
} }
.menu-btn-icon { .gm-btn:active { transform: scale(0.96); border-color: rgba(255,255,255,0.2); }
width: 48px; .gm-btn-icon {
height: 48px; width: 52px;
border-radius: 12px; height: 52px;
background: rgba(255,255,255,0.15); border-radius: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24px; font-size: 26px;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
} }
.menu-btn-text { .gm-btn-body { flex: 1; }
flex: 1; .gm-btn-title { font-size: 17px; font-weight: 800; color: #f8fafc; }
} .gm-btn-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.menu-btn-label { .gm-btn-arrow { font-size: 22px; color: #475569; font-weight: 300; }
font-size: 17px; .gm-chip {
font-weight: 700; display: flex;
} flex-direction: column;
.menu-btn-desc { align-items: center;
gap: 4px;
padding: 14px 8px;
background: #1a1a2e;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
cursor: pointer;
font-family: inherit;
color: #e2e8f0;
font-size: 11px; font-size: 11px;
opacity: 0.7; font-weight: 600;
margin-top: 2px; transition: transform 0.1s, background 0.15s;
} }
.gm-chip:active { transform: scale(0.93); background: rgba(255,255,255,0.08); }
.menu-features { .menu-features {
display: flex; display: flex;
gap: 10px; gap: 10px;
...@@ -276,31 +260,47 @@ function showGameMenu(menu, game) { ...@@ -276,31 +260,47 @@ function showGameMenu(menu, game) {
menu.classList.remove('hidden'); menu.classList.remove('hidden');
menu.style.animation = 'slideUpBounce 0.4s cubic-bezier(0.16, 1, 0.3, 1)'; menu.style.animation = 'slideUpBounce 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
menu.innerHTML = ` menu.innerHTML = `
<div class="game-menu-header"> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
<div class="game-menu-title">${game.icon} ${game.name}</div> <div style="display:flex;align-items:center;gap:10px;">
<button class="game-menu-close" id="menu-close">✕</button> <div style="width:42px;height:42px;border-radius:12px;background:${game.gradient};display:flex;align-items:center;justify-content:center;font-size:22px;">${game.icon}</div>
<div style="font-size:22px;font-weight:800;color:#f8fafc;">${game.name}</div>
</div>
<button id="menu-close" style="width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:#94a3b8;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
</div> </div>
<button class="menu-btn menu-btn-primary" id="btn-single" style="--game-gradient:${game.gradient};"> <!-- Main play buttons -->
<div class="menu-btn-icon">🎮</div> <button class="gm-btn" id="btn-single">
<div class="menu-btn-text"> <div class="gm-btn-icon" style="background:${game.gradient};">🎮</div>
<div class="menu-btn-label">لاعب واحد</div> <div class="gm-btn-body">
<div class="menu-btn-desc">العب ضد الكمبيوتر أو محلياً</div> <div class="gm-btn-title">لاعب واحد</div>
<div class="gm-btn-sub">العب ضد الكمبيوتر</div>
</div> </div>
<div class="gm-btn-arrow">›</div>
</button> </button>
<button class="menu-btn menu-btn-primary" id="btn-multi" style="--game-gradient:${game.gradient};opacity:0.85;"> <button class="gm-btn" id="btn-multi">
<div class="menu-btn-icon">⚔️</div> <div class="gm-btn-icon" style="background:linear-gradient(135deg,#dc2626,#f97316);">⚔️</div>
<div class="menu-btn-text"> <div class="gm-btn-body">
<div class="menu-btn-label">متعدد اللاعبين</div> <div class="gm-btn-title">أونلاين</div>
<div class="menu-btn-desc">نافس لاعبين حقيقيين أونلاين</div> <div class="gm-btn-sub">نافس لاعبين حقيقيين</div>
</div> </div>
<div class="gm-btn-arrow">›</div>
</button> </button>
<div class="menu-features"> <!-- Secondary actions -->
<div class="feature-chip" id="btn-leaderboard">🏆 الترتيب</div> <div style="display:grid;grid-template-columns:${game.key === 'chess' ? '1fr 1fr 1fr' : '1fr 1fr'};gap:8px;margin-top:14px;">
<div class="feature-chip" id="btn-history">📋 مبارياتي</div> <button class="gm-chip" id="btn-leaderboard">
${game.key === 'chess' ? '<div class="feature-chip" id="btn-puzzles">🧩 أحجيات</div>' : ''} <span style="font-size:18px;">🏆</span>
<span>الترتيب</span>
</button>
<button class="gm-chip" id="btn-history">
<span style="font-size:18px;">📋</span>
<span>مبارياتي</span>
</button>
${game.key === 'chess' ? `<button class="gm-chip" id="btn-puzzles">
<span style="font-size:18px;">🧩</span>
<span>أحجيات</span>
</button>` : ''}
</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