// ============================================ // KONFIGURASI GLOBAL // ============================================ // Daftar path yang dilarang untuk komponen Freespin const forbiddenPaths = [ '/freegame', '/deposit', '/profile', '/withdraw', '/nanospinner', '/bonus', '/riwayat-transaksi', '/referral', '/promo', '/memo', '/complaint', '/change-password', '/signup', '/togel/bet?pool=8&game=4D%203D%202D&id=1', '/togel/bet', '/play-page', '/lightning-2d', '/success-signup', '/login', '/logout' ]; // Variabel global untuk tracking (hanya Freespin) const components = { freespin: { element: null, cssClass: 'freespin' } }; // Flag untuk mencegah multiple initialization let isInitialized = false; let monitoringInterval = null; // ============================================ // FUNGSI UTILITAS UMUM - DIPERBAIKI // ============================================ function isForbiddenPath() { const path = window.location.pathname; const search = window.location.search; const hash = window.location.hash; console.log('[Path Check] Path:', path, 'Search:', search, 'Hash:', hash); // Cek path langsung for (const forbiddenPath of forbiddenPaths) { // Untuk path yang mengandung substring tertentu if ((forbiddenPath === '/referral' && path.includes('/referral')) || (forbiddenPath === '/memo' && path.includes('/memo')) || (forbiddenPath === '/login' && path.includes('/login')) || (forbiddenPath === '/logout' && path.includes('/logout'))) { console.log('[Path Check] Forbidden (substring match):', forbiddenPath); return true; } // Exact match if (path === forbiddenPath) { console.log('[Path Check] Forbidden (exact match):', forbiddenPath); return true; } } // Cek khusus untuk togel/bet dengan query tertentu if (path === '/togel/bet' && (search.includes('pool=8') || hash.includes('pool=8'))) { console.log('[Path Check] Forbidden togel/bet with pool=8'); return true; } console.log('[Path Check] Allowed path'); return false; } // ============================================ // FUNGSI POSITIONING YANG DIPERBAIKI (Hanya untuk Freespin) // ============================================ // Tempatkan komponen setelah home-wrap dengan selector yang lebih spesifik function placeComponentAfterHomeWrap(componentElement, componentType) { if (!componentElement) { console.log(`[${componentType}] No element to place`); return false; } // Hapus dari posisi lama jika ada if (componentElement.parentNode) { componentElement.remove(); } // Cari home-wrap - coba beberapa selector let homeWrap = document.getElementById('home-wrap'); if (!homeWrap) { // Coba selector alternatif jika id tidak ditemukan homeWrap = document.querySelector('#home-wrap, main, [class*="home"], [class*="main"]'); } if (homeWrap && homeWrap.parentNode) { try { // Pastikan tidak ada komponen sejenis di posisi yang sama const existingComponents = document.querySelectorAll(`.freespin`); existingComponents.forEach(comp => { if (comp !== componentElement && comp.parentNode) { comp.remove(); } }); // Cek apakah ada elemen lain antara home-wrap dan komponen kita const nextSibling = homeWrap.nextElementSibling; // Jika next sibling adalah komponen kita, tempatkan setelahnya if (nextSibling && nextSibling.classList.contains('freespin')) { homeWrap.parentNode.insertBefore(componentElement, nextSibling.nextElementSibling); } else { // Tempatkan tepat setelah home-wrap homeWrap.parentNode.insertBefore(componentElement, homeWrap.nextSibling); } console.log(`[${componentType}] Successfully placed after home-wrap`); return true; } catch (e) { console.error(`[${componentType}] Error placing after home-wrap:`, e); } } // Fallback: cari container utama dengan selector yang lebih spesifik const mainContent = document.querySelector('main, #main, .main, .app-content, .container, .content, [class*="content"]'); if (mainContent) { try { // Tempatkan di awal container if (mainContent.firstChild) { // Cari posisi yang tepat - biasanya setelah header const header = mainContent.querySelector('header, [class*="header"], [class*="banner"]'); if (header && header.nextSibling) { mainContent.insertBefore(componentElement, header.nextSibling); } else { mainContent.insertBefore(componentElement, mainContent.firstChild); } } else { mainContent.appendChild(componentElement); } console.log(`[${componentType}] Placed in main content (fallback)`); return true; } catch (e) { console.error(`[${componentType}] Error placing in main content:`, e); } } // Last resort: body, tapi pastikan di posisi yang tepat try { // Cari elemen pertama di body yang bukan script/style const firstChild = Array.from(document.body.children).find(child => child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE' ); if (firstChild) { document.body.insertBefore(componentElement, firstChild); } else { document.body.appendChild(componentElement); } console.log(`[${componentType}] Placed at beginning of body (last resort)`); return true; } catch (e) { console.error(`[${componentType}] Error placing in body:`, e); return false; } } // ============================================ // FUNGSI MARQUEE NORMAL (Hanya untuk Freespin) // ============================================ function createMarquee(text, isMobile = false) { const marqueeWrapper = document.createElement('div'); marqueeWrapper.className = 'marquee-wrapper'; marqueeWrapper.style.cssText = ` background: #1c1717; border: 1px solid #404040; border-radius: 8px; padding: ${isMobile ? '6px 8px' : '8px 12px'}; margin-bottom: ${isMobile ? '6px' : '8px'}; overflow: hidden; position: relative; `; const marqueeContent = document.createElement('div'); marqueeContent.className = 'marquee-content'; marqueeContent.style.cssText = ` display: inline-block; white-space: nowrap; padding-left: 100%; animation: ${isMobile ? 'mobileMarquee' : 'desktopMarquee'} ${isMobile ? '25s' : '30s'} linear infinite; `; const textSpan = document.createElement('span'); textSpan.className = 'marquee-text'; textSpan.style.cssText = ` color: #ffffff; font-weight: 500; font-size: ${isMobile ? '0.75rem' : '0.875rem'}; letter-spacing: 0.025em; margin-right: 40px; `; textSpan.textContent = text; // Duplicate untuk seamless const textSpan2 = textSpan.cloneNode(true); const textSpan3 = textSpan.cloneNode(true); marqueeContent.appendChild(textSpan); marqueeContent.appendChild(textSpan2); marqueeContent.appendChild(textSpan3); marqueeWrapper.appendChild(marqueeContent); return marqueeWrapper; } // ============================================ // KOMPONEN FREESPIN dengan MARQUEE NORMAL // ============================================ function removeFreespin() { const existingElement = document.querySelector('.freespin'); if (existingElement) { existingElement.remove(); console.log('[Freespin] Component removed'); } components.freespin.element = null; const modal = document.getElementById('freespinModal'); if (modal) modal.remove(); const imageModal = document.getElementById('imageModal'); if (imageModal) imageModal.remove(); } function createFreespinModal() { if (document.getElementById('freespinModal')) return; const modal = document.createElement('div'); modal.id = 'freespinModal'; modal.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 10000; `; modal.innerHTML = `

Cara Claim Freespin

Deposit & Pilih Promo
Silahkan deposit pilih promo Free Spin sesuai nominal
Masuk Game & Bet
Masuk ke game STARLIGHT PRINCESS dan bet sekali
Keluar dari Game
Setelah bet, keluar dari game dan tunggu sebentar
Masuk lagi ke Game
Masuk lagi game STARLIGHT PRINCESS, freespin sudah terclaim
Konfirmasi ke Live Chat
Bila belum masuk konfirmasi ke Live Chat: klik disini

Khusus Game : STARLIGHT PRINCESS

Salam JACKPOT !!!

`; document.body.appendChild(modal); setTimeout(() => { const closeBtn = document.getElementById('closeModal'); const closeModalBtn = document.getElementById('closeModalBtn'); const modalElement = document.getElementById('freespinModal'); const closeModalFunc = () => { modalElement.style.display = 'none'; }; if (closeBtn) closeBtn.onclick = closeModalFunc; if (closeModalBtn) closeModalBtn.onclick = closeModalFunc; if (modalElement) modalElement.onclick = (e) => { if (e.target === modalElement) modalElement.style.display = 'none'; }; }, 100); } function createImageModal() { if (document.getElementById('imageModal')) return; const imageModal = document.createElement('div'); imageModal.id = 'imageModal'; imageModal.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; z-index: 10001; `; imageModal.innerHTML = `

`; document.body.appendChild(imageModal); setTimeout(() => { const closeBtn = document.getElementById('closeImageModal'); const modalElement = document.getElementById('imageModal'); if (closeBtn) closeBtn.onclick = () => modalElement.style.display = 'none'; if (modalElement) modalElement.onclick = (e) => { if (e.target === modalElement) modalElement.style.display = 'none'; }; }, 100); } function showFreespinModal() { createFreespinModal(); const modal = document.getElementById('freespinModal'); if (modal) modal.style.display = 'flex'; } function showImageModal() { createImageModal(); const modal = document.getElementById('imageModal'); if (modal) modal.style.display = 'flex'; } function createFreespin() { // Cek path dilarang if (isForbiddenPath()) { removeFreespin(); return; } // Cek jika sudah ada const existing = document.querySelector('.freespin'); if (existing) { components.freespin.element = existing; console.log('[Freespin] Component already exists'); return; } console.log('[Freespin] Creating component...'); const mainImageUrl = "https://i.gyazo.com/5641327402359115f5dd7636f5f80586.png"; components.freespin.element = document.createElement('div'); components.freespin.element.className = 'freespin'; components.freespin.element.innerHTML = `

`; // Style untuk freespin dengan keyframes const style = document.createElement('style'); style.id = 'freespin-styles'; style.textContent = ` /* KEYFRAMES untuk freespin marquee */ @keyframes freespinMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes desktopMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes mobileMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Freespin Styles */ .freespin { background: transparent; padding: 0; max-width: 900px; margin: 0 auto 8px auto; width: 100%; box-sizing: border-box; } .cards-container { display: flex; flex-direction: column; gap: 4px; } .image-container { background: transparent; border-radius: 8px; overflow: hidden; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; margin-top: 8px; } .main-image { width: 100%; height: auto; object-fit: contain; border-radius: 8px; } .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; border-radius: 8px; } .image-container:hover .image-overlay { opacity: 1; } .zoom-icon { width: 32px; height: 32px; color: #bfbfbf; stroke-width: 2; } .freespin-guide-btn { background-color: #1c1717; color: #ffffff; height: 36px; font-size: 0.85rem; font-weight: bold; border-radius: 6px; border: 2px solid #a0a0a0; padding: 0 16px; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .freespin-guide-btn:hover { background-color: #d4d4d4; color: #000000; } /* Marquee Styles */ .marquee-wrapper { position: relative; overflow: hidden; width: 100%; } .marquee-content { display: inline-block; white-space: nowrap; padding-left: 100%; } .marquee-text { color: #ffffff; font-weight: 500; } /* Responsive */ @media (max-width: 768px) { .freespin { max-width: 100%; margin: 0 auto 6px auto; } .freespin-guide-btn { height: 34px; font-size: 0.8rem; padding: 0 14px; } } @media (max-width: 480px) { .freespin-guide-btn { height: 32px; font-size: 0.75rem; padding: 0 12px; border-radius: 5px; } } `; const oldStyle = document.getElementById('freespin-styles'); if (oldStyle) oldStyle.remove(); document.head.appendChild(style); // Tempatkan komponen const placedSuccessfully = placeComponentAfterHomeWrap(components.freespin.element, 'Freespin'); if (placedSuccessfully) { // Setup setelah ditempatkan setTimeout(() => { // Tambahkan marquee const freespinMarqueeContainer = document.getElementById('freespinMarquee'); if (freespinMarqueeContainer) { const freespinMarquee = createMarquee('Ayo Dapatkan Freespin Hingga 300x Setiap Hari!!!', true); freespinMarqueeContainer.parentNode.replaceChild(freespinMarquee, freespinMarqueeContainer); } // Event listeners const guideBtn = document.getElementById('freespinGuideBtn'); const clickableImage = document.querySelector('.clickable-image'); if (guideBtn) guideBtn.onclick = showFreespinModal; if (clickableImage) clickableImage.onclick = showImageModal; console.log('[Freespin] Component fully initialized'); }, 100); } else { console.error('[Freespin] Failed to place component'); } } // ============================================ // MANAJEMEN UTAMA (Hanya untuk Freespin) // ============================================ function checkAndUpdateComponents() { console.log('[Main] Checking components...'); const isForbidden = isForbiddenPath(); // Handle freespin const hasFreespin = document.querySelector('.freespin'); if (isForbidden && hasFreespin) { console.log('[Main] Removing Freespin (forbidden path)'); removeFreespin(); } else if (!isForbidden && !hasFreespin) { console.log('[Main] Creating Freespin (allowed path)'); createFreespin(); } else if (!isForbidden && hasFreespin) { // Pastikan posisinya benar console.log('[Main] Repositioning Freespin'); const freespinElement = document.querySelector('.freespin'); if (freespinElement) { placeComponentAfterHomeWrap(freespinElement, 'Freespin'); } } } function startSmartMonitoring() { console.log('[Main] Starting smart monitoring...'); let lastUrl = window.location.href; let lastPath = window.location.pathname; // Hapus interval lama jika ada if (monitoringInterval) { clearInterval(monitoringInterval); } // Interval check yang lebih cerdas monitoringInterval = setInterval(() => { const currentUrl = window.location.href; const currentPath = window.location.pathname; if (currentUrl !== lastUrl || currentPath !== lastPath) { console.log('[Main] Navigation detected:', currentPath); lastUrl = currentUrl; lastPath = currentPath; // Tunggu lebih lama untuk memastikan DOM sudah siap setTimeout(() => { checkAndUpdateComponents(); // Extra check untuk memastikan setTimeout(checkAndUpdateComponents, 500); }, 300); } }, 500); // History API untuk SPA - dengan handling yang lebih baik const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function() { originalPushState.apply(this, arguments); console.log('[History] pushState called'); setTimeout(() => { checkAndUpdateComponents(); // Double check untuk back dari game setTimeout(checkAndUpdateComponents, 200); }, 150); }; history.replaceState = function() { originalReplaceState.apply(this, arguments); console.log('[History] replaceState called'); setTimeout(() => { checkAndUpdateComponents(); }, 150); }; // Popstate untuk back/forward dengan handling khusus window.addEventListener('popstate', function() { console.log('[Main] Back/forward detected via popstate'); // Tunggu lebih lama untuk back dari game setTimeout(() => { checkAndUpdateComponents(); // Extra handling untuk back dari game setTimeout(() => { if (!isForbiddenPath()) { // Force re-creation untuk memastikan posisi benar const freespin = document.querySelector('.freespin'); if (freespin) { const newFreespin = freespin.cloneNode(true); freespin.remove(); components.freespin.element = newFreespin; placeComponentAfterHomeWrap(newFreespin, 'Freespin'); // Re-attach events setTimeout(() => { const guideBtn = newFreespin.querySelector('#freespinGuideBtn'); const clickableImage = newFreespin.querySelector('.clickable-image'); if (guideBtn) guideBtn.onclick = showFreespinModal; if (clickableImage) clickableImage.onclick = showImageModal; }, 100); } } }, 400); }, 200); }); // Tambahkan event listener untuk DOM changes const observer = new MutationObserver(function(mutations) { for (const mutation of mutations) { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { // Cek apakah home-wrap ditambahkan for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { if (node.id === 'home-wrap' || node.querySelector('#home-wrap')) { console.log('[Observer] home-wrap detected, updating components'); setTimeout(checkAndUpdateComponents, 100); break; } } } } } }); observer.observe(document.body, { childList: true, subtree: true }); return monitoringInterval; } function initComponents() { if (isInitialized) { console.log('[Main] Already initialized'); return; } console.log('[Main] Initializing components...'); isInitialized = true; // Reset state components.freespin.element = null; // Tunggu DOM benar-benar siap if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { setTimeout(() => { initializeAfterDOMReady(); }, 300); }); } else { setTimeout(() => { initializeAfterDOMReady(); }, 200); } } function initializeAfterDOMReady() { // Initial create dengan retry mechanism let retryCount = 0; const maxRetries = 5; function attemptInitialization() { console.log(`[Main] Initialization attempt ${retryCount + 1}/${maxRetries}`); checkAndUpdateComponents(); // Cek apakah komponen berhasil dibuat const hasFreespin = document.querySelector('.freespin'); const isForbidden = isForbiddenPath(); if (!isForbidden) { if (!hasFreespin) { retryCount++; if (retryCount < maxRetries) { setTimeout(attemptInitialization, 500); return; } } } console.log('[Main] Initialization completed'); // Start monitoring startSmartMonitoring(); } attemptInitialization(); } // ============================================ // INISIALISASI DAN CLEANUP // ============================================ // Tambahkan cleanup function function cleanup() { if (monitoringInterval) { clearInterval(monitoringInterval); monitoringInterval = null; } removeFreespin(); isInitialized = false; console.log('[Main] Cleanup completed'); } // Handle page unload window.addEventListener('beforeunload', function() { cleanup(); }); // Handle visibility change (tab switching) document.addEventListener('visibilitychange', function() { if (!document.hidden) { // Tab aktif kembali, cek komponen setTimeout(checkAndUpdateComponents, 200); } }); // Initial call dengan delay untuk memastikan setTimeout(() => { if (!isInitialized) { initComponents(); } }, 1000); // Export (hanya Freespin) window.DualComponents = { init: initComponents, check: checkAndUpdateComponents, cleanup: cleanup, freespin: { create: createFreespin, remove: removeFreespin } }; console.log('Freespin Component loaded - SBOBET Game Removed');