const rootEl = document.getElementById("app") || document.body; const pop = document.createElement('div'); pop.innerHTML = ` `; rootEl.appendChild(pop); /* ========================================================= Popup on First Visit + 5 Prizes + Centered Celebration ========================================================= */ setTimeout(()=>{ /* First-visit logic */ const FIRST_VISIT_KEY = "np_wheel_seen_v4"; const wheelPopup = document.getElementById("wheelPopup"); const notNowBtn = document.getElementById("notNowBtn"); const closePopup = document.getElementById("closePopup"); function maybeOpenWheelPopup(){ try{ const seen = localStorage.getItem(FIRST_VISIT_KEY); if(!seen){ wheelPopup.setAttribute("open",""); } }catch(e){ wheelPopup.setAttribute("open",""); } } function markWheelSeen(){ try{ localStorage.setItem(FIRST_VISIT_KEY, "1"); }catch(e){} } closePopup.addEventListener("click", ()=> { wheelPopup.removeAttribute("open"); markWheelSeen(); }); notNowBtn.addEventListener("click", ()=> { wheelPopup.removeAttribute("open"); markWheelSeen(); }); /* ✅ افتح مباشرة لأول زيارة (بدون الاعتماد على DOMContentLoaded هنا) */ maybeOpenWheelPopup(); /* Config: 5 prizes */ const PRIZES = ["Free Print","Discount 20%","Gift Box","Free Shipping","VIP Card"]; const SEGMENTS = PRIZES.length; const BRAND_A = "#cb4d89", BRAND_B = "#4c51b9"; /* Canvas & DOM */ const wheel = document.getElementById("wheel"); const ctx = wheel.getContext("2d"); const spinBtn = document.getElementById("spinBtn"); /* Celebration DOM */ const celebrate = document.getElementById("celebrate"); const celeText = document.getElementById("celeText"); const celeClose = document.getElementById("celeClose"); const flagsRow = document.getElementById("flagsRow"); /* Geometry & angles */ const TAU = Math.PI * 2; const arc = TAU / SEGMENTS; const POINTER_ANGLE = -Math.PI / 2; // السهم لأعلى let angle = 0, spinning = false; function norm(a){ a%=TAU; return a<0? a+TAU : a; } /* Responsive canvas (wheel) */ function fitCanvas() { const cssSize = Math.min(480, window.innerWidth * 0.9); const ratio = window.devicePixelRatio || 1; wheel.style.width = cssSize + "px"; wheel.style.height = cssSize + "px"; wheel.width = Math.floor(cssSize * ratio); wheel.height = Math.floor(cssSize * ratio); ctx.setTransform(ratio, 0, 0, ratio, 0, 0); drawWheel(); } window.addEventListener("resize", fitCanvas); /* Color helpers */ function lerp(a, b, t) { return a + (b - a) * t; } function hexToRgb(hex){ const s=hex.replace('#',''); const n=parseInt(s,16); return { r:(n>>16)&255, g:(n>>8)&255, b:n&255 }; } function rgbToHex({r,g,b}){ const h=v=>v.toString(16).padStart(2,"0"); return `#${h(r)}${h(g)}${h(b)}`; } function mixHex(a,b,t){ const A=hexToRgb(a),B=hexToRgb(b); return rgbToHex({ r:Math.round(lerp(A.r,B.r,t)), g:Math.round(lerp(A.g,B.g,t)), b:Math.round(lerp(A.b,B.b,t)) }); } /* Draw wheel */ const pad = 14; function drawWheel() { const size = Math.min(wheel.width, wheel.height) / (window.devicePixelRatio || 1); const cx = size/2, cy = size/2; const radius = size/2 - pad; ctx.clearRect(0,0,size,size); ctx.save(); ctx.translate(cx, cy); ctx.rotate(angle); for(let i=0;i p.y < window.innerHeight+40 && p.life>0); } function loopConfetti(ts){ if(!lastTime) lastTime = ts; const dt = Math.min(0.033, (ts - lastTime)/1000); lastTime = ts; drawConfetti(dt); if(confetti.length){ confettiRAF = requestAnimationFrame(loopConfetti); } } function buildBunting(){ flagsRow.innerHTML = ""; const palette = [BRAND_A, BRAND_B, "#ffffff", "#ffd166", "#34d399", "#60a5fa", "#f472b6"]; const total = 24; for(let i=0;i{ wheelPopup.removeAttribute("open"); wheelPopup.classList.remove("fade-out"); }, 320); // هل الجائزة خصم؟ أظهر كود خصم في سطر مستقل let html = `لقد ربحت: ${prize}`; if(/discount|خصم/i.test(prize)){ const code = makeCode(); html += `كود خصم: ${code}`; } celeText.innerHTML = html; // << سطر مستقل للكود // زينة الأعلام في المنتصف buildBunting(); // كونفيتي يغطي الشاشة بدقة CSS resizeConfetti(); confetti = createConfetti(220); lastTime = undefined; cancelAnimationFrame(confettiRAF); confettiRAF = requestAnimationFrame(loopConfetti); // صوت الفوز playWin(); // أظهر طبقة الاحتفال (متمركزة) celebrate.setAttribute("open", ""); // إيقاف تلقائي بعد 8 ثوانٍ setTimeout(()=> stopCelebration(), 8000); } function stopCelebration(){ celebrate.removeAttribute("open"); cancelAnimationFrame(confettiRAF); } /* إغلاق يدوي */ celeClose.addEventListener("click", stopCelebration); /* Init */ spinBtn.addEventListener("click", spin); fitCanvas(); drawWheel(); }, 0);