Commit abbd3736 authored by Mahmoud Aglan's avatar Mahmoud Aglan

fix(chess): ad banner takes full top void, hidden when no ad

Ad area now flex:1 (absorbs all dead space above the board).
Hidden by default — only shown when an active campaign is loaded.
Game UI pushed further down for thumb reach.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 52a54d29
...@@ -98,14 +98,10 @@ export function mountGame(el, params) { ...@@ -98,14 +98,10 @@ export function mountGame(el, params) {
el.innerHTML = ` el.innerHTML = `
<div class="chess-layout" style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;"> <div class="chess-layout" style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
<!-- Ad Banner (top dead space) --> <!-- Ad Banner — takes all top void space, hidden if no ad -->
<div id="ad-banner-top" style="flex:0 0 auto;min-height:50px;display:flex;align-items:center;justify-content:center;padding:6px 12px;background:#0a0a1a;cursor:pointer;" onclick="window.__adClick && window.__adClick()"> <div id="ad-banner-top" style="flex:1;display:none;align-items:center;justify-content:center;padding:8px 12px;background:#0a0a1a;cursor:pointer;" onclick="window.__adClick && window.__adClick()">
<div id="ad-content" style="width:100%;max-width:400px;height:50px;border-radius:8px;background:linear-gradient(135deg,#1e1e3a,#2a2a5a);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,0.05);"> <div id="ad-content" style="width:100%;height:100%;max-height:180px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;"></div>
<span style="font-size:11px;color:#475569;">إعلان</span>
</div>
</div> </div>
<!-- Spacer — near center, slightly bottom-biased -->
<div style="flex:0.25;"></div>
<!-- Opponent Bar (compact — keep minimal at top) --> <!-- Opponent Bar (compact — keep minimal at top) -->
<div class="chess-bar" style="display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:#0f0f1e;"> <div class="chess-bar" style="display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:#0f0f1e;">
<div style="display:flex;align-items:center;gap:8px;"> <div style="display:flex;align-items:center;gap:8px;">
...@@ -863,9 +859,11 @@ async function loadAdBanner(el) { ...@@ -863,9 +859,11 @@ async function loadAdBanner(el) {
try { try {
const res = await net.post('ads.php', { action: 'get', slot: 'banner_top', game: 'chess' }); const res = await net.post('ads.php', { action: 'get', slot: 'banner_top', game: 'chess' });
if (!res || res.error || !res.image_url) return; if (!res || res.error || !res.image_url) return;
const banner = el.querySelector('#ad-content'); const wrapper = el.querySelector('#ad-banner-top');
if (!banner) return; const content = el.querySelector('#ad-content');
banner.innerHTML = `<img src="${res.image_url}" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">`; if (!wrapper || !content) return;
content.innerHTML = `<img src="${res.image_url}" style="width:100%;height:100%;object-fit:cover;border-radius:10px;">`;
wrapper.style.display = 'flex';
window.__adClick = () => { window.__adClick = () => {
if (res.click_url) window.open(res.click_url, '_blank'); if (res.click_url) window.open(res.click_url, '_blank');
net.post('ads.php', { action: 'impression', campaign_id: res.id }).catch(() => {}); net.post('ads.php', { action: 'impression', campaign_id: res.id }).catch(() => {});
......
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