Skip to content

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

ui: update domino room/bot-picker to dark navy theme 

Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 25a80cf0
Hide whitespace changes
Inline Side-by-side
Showing with 11 additions and 11 deletions
public/js/modules/domino/scenes/room.js
View file @ db7cf8ef
...@@ -22,13 +22,13 @@ export function mountRoom(el, params) { ...@@ -22,13 +22,13 @@ export function mountRoom(el, params) {
function renderMenu(el) { function renderMenu(el) {
el.innerHTML = ` el.innerHTML = `
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;padding:24px;background:linear-gradient(180deg,#081a0c 0%,#0a2a0e 100%);"> <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;padding:24px;background:linear-gradient(180deg,#0a0a14 0%,#0f0f1e 100%);">
<div style="font-size:48px;">${emoji('domino_tile', '🁣', 48)}</div> <div style="font-size:48px;">${emoji('domino_tile', '🁣', 48)}</div>
<div style="font-size:22px;font-weight:800;color:#f0fdf4;">دومينو</div> <div style="font-size:22px;font-weight:800;color:#f8fafc;">دومينو</div>
<div style="font-size:13px;color:#86efac;text-align:center;max-width:260px;">أول من يوصل 100 نقطة يفوز!</div> <div style="font-size:13px;color:#E4AC38;text-align:center;max-width:260px;">أول من يوصل 100 نقطة يفوز!</div>
<div style="display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:12px;"> <div style="display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:12px;">
<button class="btn btn-primary" id="btn-bot" style="min-height:56px;border-radius:16px;font-size:16px;font-weight:700;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;gap:8px;"> <button class="btn btn-primary" id="btn-bot" style="min-height:56px;border-radius:16px;font-size:16px;font-weight:700;background:linear-gradient(135deg,#E4AC38,#d4940a);display:flex;align-items:center;justify-content:center;gap:8px;">
${emoji('robot', '🤖', 20)} ضد البوت ${emoji('robot', '🤖', 20)} ضد البوت
</button> </button>
<button class="btn btn-primary" id="btn-online" style="min-height:56px;border-radius:16px;font-size:16px;font-weight:700;background:linear-gradient(135deg,#06b6d4,#0891b2);display:flex;align-items:center;justify-content:center;gap:8px;"> <button class="btn btn-primary" id="btn-online" style="min-height:56px;border-radius:16px;font-size:16px;font-weight:700;background:linear-gradient(135deg,#06b6d4,#0891b2);display:flex;align-items:center;justify-content:center;gap:8px;">
...@@ -72,8 +72,8 @@ function renderBotPicker(el) { ...@@ -72,8 +72,8 @@ function renderBotPicker(el) {
]; ];
el.innerHTML = ` el.innerHTML = `
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;padding:24px;background:linear-gradient(180deg,#081a0c 0%,#0a2a0e 100%);"> <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;padding:24px;background:linear-gradient(180deg,#0a0a14 0%,#0f0f1e 100%);">
<div style="font-size:20px;font-weight:700;color:#f0fdf4;">اختر مستوى البوت</div> <div style="font-size:20px;font-weight:700;color:#f8fafc;">اختر مستوى البوت</div>
<div style="display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;"> <div style="display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;">
${levels.map(l => ` ${levels.map(l => `
<button class="btn-level" data-level="${l.key}" style=" <button class="btn-level" data-level="${l.key}" style="
...@@ -113,21 +113,21 @@ function renderBotPicker(el) { ...@@ -113,21 +113,21 @@ function renderBotPicker(el) {
function renderLobby(el, { challengeId, friendId, friendName }) { function renderLobby(el, { challengeId, friendId, friendName }) {
const isHost = !challengeId; const isHost = !challengeId;
el.innerHTML = ` el.innerHTML = `
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;padding:24px;background:linear-gradient(180deg,#081a0c 0%,#0a2a0e 100%);"> <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;padding:24px;background:linear-gradient(180deg,#0a0a14 0%,#0f0f1e 100%);">
<div style="font-size:40px;">${emoji('domino_tile', '🁣', 40)}</div> <div style="font-size:40px;">${emoji('domino_tile', '🁣', 40)}</div>
<div style="font-size:18px;font-weight:700;color:#f0fdf4;"> <div style="font-size:18px;font-weight:700;color:#f8fafc;">
${isHost ? 'بانتظار الصديق...' : `تحدي من ${friendName || 'صديق'}`} ${isHost ? 'بانتظار الصديق...' : `تحدي من ${friendName || 'صديق'}`}
</div> </div>
<div id="lobby-status" style="display:flex;flex-direction:column;align-items:center;gap:8px;"> <div id="lobby-status" style="display:flex;flex-direction:column;align-items:center;gap:8px;">
<div class="pulse" style="width:60px;height:60px;border-radius:50%;border:3px solid #10b981;display:flex;align-items:center;justify-content:center;"> <div class="pulse" style="width:60px;height:60px;border-radius:50%;border:3px solid #E4AC38;display:flex;align-items:center;justify-content:center;">
${emoji('clock', '⏳', 24)} ${emoji('clock', '⏳', 24)}
</div> </div>
<div style="font-size:13px;color:#86efac;" id="lobby-msg">${isHost ? 'أرسل الدعوة لصديقك' : 'اضغط قبول للبدء'}</div> <div style="font-size:13px;color:#E4AC38;" id="lobby-msg">${isHost ? 'أرسل الدعوة لصديقك' : 'اضغط قبول للبدء'}</div>
</div> </div>
<div style="display:flex;gap:10px;margin-top:12px;"> <div style="display:flex;gap:10px;margin-top:12px;">
${!isHost ? `<button class="btn btn-primary" id="btn-accept" style="min-height:48px;padding:0 24px;border-radius:14px;font-size:15px;font-weight:700;background:linear-gradient(135deg,#10b981,#06b6d4);">قبول</button>` : ''} ${!isHost ? `<button class="btn btn-primary" id="btn-accept" style="min-height:48px;padding:0 24px;border-radius:14px;font-size:15px;font-weight:700;background:linear-gradient(135deg,#3b82f6,#2563eb);">قبول</button>` : ''}
<button class="btn btn-secondary" id="btn-cancel-lobby" style="min-height:48px;padding:0 24px;border-radius:14px;font-size:14px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;">إلغاء</button> <button class="btn btn-secondary" id="btn-cancel-lobby" style="min-height:48px;padding:0 24px;border-radius:14px;font-size:14px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;">إلغاء</button>
</div> </div>
</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