Widget:Droflax

<img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">

<img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">

<script> (function loadFontAwesome() { if (!document.querySelector('link[href*="font-awesome"]')) { const faLink = document.createElement('link'); faLink.rel = 'stylesheet'; faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css'; document.head.appendChild(faLink); } })();

const track = document.querySelector('.carousel-track'); const thumbs = document.querySelectorAll('.carousel-thumb');

let currentSlide = 0; let totalSlides = thumbs.length - 1; let intervalId;

function goToSlide(index) { currentSlide = (index + totalSlides + 1) % (totalSlides + 1); track.style.transform = `translateX(-${currentSlide * 100}%)`; thumbs.forEach(thumb => thumb.classList.remove('active')); thumbs[currentSlide].classList.add('active'); }

function resetInterval() { clearInterval(intervalId); intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000); }

thumbs.forEach(thumb => { thumb.addEventListener('click', () => { const idx = parseInt(thumb.getAttribute('data-index')); goToSlide(idx); resetInterval(); }); });

resetInterval(); (function () { let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage; let globalEventsInterval, worldBossInterval, globalEventsInfo = {};

// Função para cargar os eventos a partir do JSON async function cargarEventos() { try { const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw'); const data = await response.json(); globalEventsInfo = data; setGlobalEvent();

} catch (error) { console.error('Error al cargar los eventos:', error); alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.'); } }

const alternatedEvents = [ { name: 'Marineford', image: '/images/e/e6/Marineford_event.png' }, { name: 'World Boss', image: '/images/9/93/Anywb_event.png' }

];

function getWeekNumber(date) { const start = new Date(date.getFullYear(), 0, 1); const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000)); const oneWeek = 604800000; // ms en una semana return Math.floor(diff / oneWeek); }

function getCurrentEventIndex(now) { const current = new Date(now); const day = current.getDay();

// Encontrar último sábado a las 10:31 const lastSaturday = new Date(current); const offset = (day >= 6) ? day - 6 : day + 1; // cuántos días restar para llegar al último sábado lastSaturday.setDate(current.getDate() - offset); lastSaturday.setHours(10, 31, 0, 0); // 10:31 BR

if (current < lastSaturday) { lastSaturday.setDate(lastSaturday.getDate() - 7); }

const weekNumber = getWeekNumber(lastSaturday); return weekNumber % 2; // par = World Boss, ímpar = Marineford }

function pad(value) { return value < 10 ? '0' + value : value; }

function getBrazilTime() { const formatter = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Sao_Paulo', hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });

const parts = formatter.formatToParts(new Date()); const values = Object.fromEntries(parts.map(({ type, value }) => [type, value]));

return new Date( parseInt(values.year), parseInt(values.month) - 1, parseInt(values.day), parseInt(values.hour), parseInt(values.minute), parseInt(values.second) ); }

function startGlobalEventCountdown(eventStartTime, eventEndTime) { if (globalEventsInterval) clearInterval(globalEventsInterval);

globalEventsInterval = setInterval(() => { const now = getBrazilTime().getTime();

if (now < eventStartTime) { // Ainda não começou, mostrar contagem regressiva const timeToStart = Math.floor((eventStartTime - now) / 1000); const minutes = Math.floor(timeToStart / 60); const seconds = timeToStart % 60; globalEventsTimer.innerHTML = pad(minutes) + ":" + pad(seconds); } else if (now >= eventStartTime && now < eventEndTime) { // Já começou, mostrar "Iniciando: mm:ss" const timeRemaining = Math.ceil((eventEndTime - now) / 1000); const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; globalEventsTimer.innerHTML = 'Iniciando: ' + pad(minutes) + ":" + pad(seconds); } else { // Terminou clearInterval(globalEventsInterval); setGlobalEvent(); } }, 1000); }

function createBrazilDate(hour, minute, second = 0) { const today = getBrazilTime(); return new Date( today.getFullYear(), today.getMonth(), today.getDate(), hour, minute, second ); }

function ajustarHoraBrasilALocal(dateBrasil) { const offsetUsuarioMin = dateBrasil.getTimezoneOffset(); const offsetBrasilMin = 180;

const diferenciaMin = offsetUsuarioMin - offsetBrasilMin;

return new Date(dateBrasil.getTime() - diferenciaMin * 60 * 1000); }

function worldBossCountdown(eventStartTime, eventEndTime) { if (worldBossInterval) clearInterval(worldBossInterval);

worldBossInterval = setInterval(() => { const now = getBrazilTime().getTime();

if (now < eventStartTime) { const diff = eventStartTime - now; const totalSeconds = Math.floor(diff / 1000); const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60;

worldBossTimer.innerHTML = 'Começa em: ' + pad(hours) + ':' + pad(minutes) + ':' + pad(seconds); } else if (now >= eventStartTime && now < eventEndTime) { const diff = eventEndTime - now; const totalSeconds = Math.floor(diff / 1000); const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60;

worldBossTimer.innerHTML = 'Em andamento: ' + pad(hours) + ':' + pad(minutes) + ':' + pad(seconds); } else { clearInterval(worldBossInterval); worldBossTimer.innerHTML = 'Evento finalizado'; } }, 1000); }

function setGlobalEvent() { const userNow = new Date(); const now = getBrazilTime(); const dayEvents = globalEventsInfo[now.getDay()] || [];

if (dayEvents.length === 0 && userNow.getDate() == now.getDate()) { globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png'); globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje'; return; }

for (let event of dayEvents) { const [h, m, s] = event.time.split(':').map(Number); const eventStartTime = createBrazilDate(h, m, s); const eventEndTime = new Date(eventStartTime.getTime() + 5 * 60 * 1000); const eventStartMs = eventStartTime.getTime(); const eventEndMs = eventEndTime.getTime(); const nowMs = now.getTime();

const horaLocal = ajustarHoraBrasilALocal(eventStartTime);

const localTime = horaLocal.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false }); //Converte a hora dependendo do fuso horário do usuário

if (nowMs >= eventStartMs && nowMs < eventEndMs) { // Evento em andamento globalEventsImage.setAttribute('src', event.src); startGlobalEventCountdown(eventStartMs, eventEndMs); return; }

if (nowMs < eventStartMs) { // Evento ainda não começou globalEventsImage.setAttribute('src', event.src);

if (eventStartMs - nowMs <= 60 * 60 * 1000) { // Falta menos de 1 hora => mostrar contador startGlobalEventCountdown(eventStartMs, eventEndMs); } else { // Falta mais de 1 hora => apenas mostrar o horário globalEventsTimer.innerHTML = localTime; }

return; } }

globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png'); globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje'; }

function setWorldBossEvent() { const now = getBrazilTime(); const [h, m, s] = [11, 00, 0];

const currentWeekday = now.getDay();

const lastFriday = new Date(createBrazilDate(h, m, s)); const daysSinceFriday = (currentWeekday >= 5) ? currentWeekday - 5 : currentWeekday + 2; lastFriday.setDate(now.getDate() - daysSinceFriday); lastFriday.setHours(h, m, s, 0);

const eventStartTime = lastFriday.getTime(); const eventEndTime = eventStartTime + 23 * 60 * 60 * 1000;

const weekNumber = getWeekNumber(lastFriday); const eventIndex = weekNumber % 2; const nextEventIndex = (eventIndex + 1) % 2;

const currentEvent = alternatedEvents[eventIndex]; const nextEvent = alternatedEvents[nextEventIndex];

const nowTime = now.getTime(); const nowDateOnly = new Date(now); nowDateOnly.setHours(0, 0, 0, 0);

if (nowTime >= eventStartTime && nowTime < eventEndTime) { // Evento em andamento worldBossImage.setAttribute('src', currentEvent.image); worldBossCountdown(eventStartTime, eventEndTime); } else if (nowTime < eventStartTime) { // Evento ainda não começou worldBossImage.setAttribute('src', currentEvent.image); worldBossCountdown(eventStartTime, eventEndTime); } else { // Evento já terminou, mostrar o próximo const nextFriday = new Date(lastFriday); nextFriday.setDate(lastFriday.getDate() + 7); nextFriday.setHours(0, 0, 0, 0);

const daysLeft = Math.round((nextFriday - nowDateOnly) / (24 * 60 * 60 * 1000)); worldBossImage.setAttribute('src', nextEvent.image); worldBossTimer.innerHTML = `Em ${daysLeft} dia${daysLeft > 1 ? 's' : }`; } }

document.addEventListener('DOMContentLoaded', function () { globalEventsTimer = document.getElementById('global-event-timer'); globalEventsImage = document.querySelector('.global-event-image'); worldBossTimer = document.getElementById('worldboss-timer'); worldBossImage = document.querySelector('.worldboss-imagen'); setWorldBossEvent(); cargarEventos(); }); })();

// CSS document.head.insertAdjacentHTML('beforeend', `

 <style>

 .carousel-controls-images {

display: flex; justify-content: center; gap: 16px; margin-top: 8px; }

.carousel-thumb { font-size: 22px; color: #999; cursor: pointer; transition: color 0.3s, transform 0.3s; will-change: transform; }

.carousel-thumb.active { color: #459cca; transform: scale(1.2); }

.carousel-thumb.hidden { display: none; }

 .carousel-container {

width: 320px; height: 90px; overflow: hidden; margin: 0 auto; position: relative; }

.carousel-track { display: flex; width: 100%; transition: transform 0.5s ease-in-out; }

.carousel-slide { width: 100%; flex: 0 0 100%; height: 90px; position: relative; }

.global-event-image, .worldboss-imagen { width: 100%; height: 100%; object-fit: cover; }

1. global-event-timer,
2. worldboss-timer {

user-select: none; pointer-events: none; position: absolute; bottom: 3%; left: 3px; padding: 2px 5px; font-size: 1.2em; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); background: linear-gradient(to right, rgba(25, 25, 25, 0.85), rgba(0, 0, 0, 0)); border-top-right-radius: 4px; border-bottom-right-radius: 4px; max-width: fit-content; }

 </style>
 `);

</script>