Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(405 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="carousel-container">
<div class="language-switch">
<div class="carousel-track">
  <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
<div class="carousel-slide global-event-widget">
  <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
<img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
  <a data-lang="en"><img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24"></a>
<div id="global-event-timer"></div>
  <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
</div>
<div class="carousel-slide worldboss-widget">
<img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
<div id="worldboss-timer"></div>
</div>
<div class="carousel-slide ranked-widget">
<img class="ranked-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
<div id="ranked-timer"></div>
</div>
</div>
</div>
<div class="carousel-controls-images">
<i class="fa-solid fa-star carousel-thumb active" data-index="0" title="Evento Global"></i>
<i class="fa-solid fa-skull carousel-thumb" data-index="1" title="World Boss"></i>
<i class="fa-solid fa-shield-halved carousel-thumb" data-index="2" title="Ranked"></i>
</div>
</div>


 
<style>
<script>
.language-switch {
(function loadFontAwesome() {
  display: flex;
if (!document.querySelector('link[href*="font-awesome"]')) {
  gap: 6px;
const faLink = document.createElement('link');
  margin: 8px 0;
faLink.rel = 'stylesheet';
  justify-content: center;
faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
}
document.head.appendChild(faLink);
.language-switch img {
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
}
})();
.language-switch img:hover {
 
  transform: scale(1.1);
const track = document.querySelector('.carousel-track');
  border-color: #333;
const thumbs = document.querySelectorAll('.carousel-thumb');
 
let currentSlide = 0;
let totalSlides = thumbs.length - 1;
let intervalId;
let rankedTimer, rankedImage;
let rankedInterval;
 
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');
}
}
 
.language-switch img.active {
function resetInterval() {
  border-color: #000;
clearInterval(intervalId);
intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
}
}
</style>


thumbs.forEach(thumb => {
<script>
thumb.addEventListener('click', () => {
const idx = parseInt(thumb.getAttribute('data-index'));
goToSlide(idx);
resetInterval();
});
});
 
resetInterval();
(function () {
(function () {
let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage;
  let currentLang = 'pt'; // idioma por defecto
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 rankedEvents = {
  0: [ // domingo
    { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ],
  2: [ // terça
    { hour: 20, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ],
  4: [ // quinta
    { hour: 20, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ],
  6: [ // sabado
    { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ]
};
 
 
const alternatedEvents = [
{
name: 'Marineford',
image: '/images/e/e6/Marineford_event.png'
},
{
name: 'World Boss',
image: '/images/9/93/Anywb_event.png'
}


];
  const langSwitch = document.querySelector('.language-switch');
  if (langSwitch) {
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
      btn.addEventListener('click', () => {
        currentLang = btn.dataset.lang;
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
        btn.querySelector('img').classList.add('active');


function rankedCountdown(eventStart, eventEnd) {
        const active = document.querySelector('.skill-icon.active');
    if (rankedInterval) clearInterval(rankedInterval);
        if (active) active.click();
      });
    });


     rankedInterval = setInterval(() => {
     // Activar la bandera por defecto
      const now = getBrazilTime().getTime();
    const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
 
    if (defaultBtn) defaultBtn.classList.add('active');
      if (now < eventStart) {
        const timeLeft = Math.floor((eventStart - now) / 1000);
        const min = Math.floor(timeLeft / 60);
        const sec = timeLeft % 60;
        rankedTimer.innerHTML = 'Começa em: ' + pad(min) + ':' + pad(sec);
      } else if (now >= eventStart && now < eventEnd) {
        const timeLeft = Math.floor((eventEnd - now) / 1000);
        const min = Math.floor(timeLeft / 60);
        const sec = timeLeft % 60;
        rankedTimer.innerHTML = 'Em andamento: ' + pad(min) + ':' + pad(sec);
      } else {
        clearInterval(rankedInterval);
        rankedTimer.innerHTML = 'Evento finalizado';
      }
    }, 1000);
   }
   }


  const oldClicks = document.querySelectorAll('.skill-icon');
  oldClicks.forEach(el => {
    el.addEventListener('click', () => {
      const name = el.dataset.nome || '';
      const rawDesc = el.dataset.desc || '';
      let descText = '';


function getWeekNumber(date) {
      try {
const start = new Date(date.getFullYear(), 0, 1);
        const obj = JSON.parse(rawDesc);
const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
        descText = obj[currentLang] || obj['pt'] || '';
const oneWeek = 604800000; // ms en una semana
       } catch (e) {
return Math.floor(diff / oneWeek);
         descText = rawDesc; // fallback si no es un JSON
}
 
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' : ''}`;
}
}
 
function setRankedEvent() {
    const now = getBrazilTime();
    const day = now.getDay();
    const todayEvents = rankedEvents[day];
 
    if (!todayEvents || todayEvents.length === 0) {
      rankedImage.setAttribute('src', '/images/4/44/Ranked_2x2_duo.png');
      rankedTimer.innerHTML = 'Sem eventos hoje';
       return;
    }
 
    let found = false;
 
    for (let event of todayEvents) {
      const start = createBrazilDate(event.hour, 0, 0);
      const end = new Date(start.getTime() + 60 * 60 * 1000);
      const nowMs = now.getTime();
 
      if (nowMs < start.getTime()) {
         rankedImage.setAttribute('src', event.image);
        if (start.getTime() - nowMs <= 60 * 60 * 1000) {
          rankedCountdown(start.getTime(), end.getTime());
        } else {
          const local = ajustarHoraBrasilALocal(start).toLocaleTimeString(undefined, {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
          });
          rankedTimer.innerHTML = local;
        }
        found = true;
        break;
      } else if (nowMs >= start.getTime() && nowMs < end.getTime()) {
        rankedImage.setAttribute('src', event.image);
        rankedCountdown(start.getTime(), end.getTime());
        found = true;
        break;
       }
       }
    }


    if (!found) {
       const attrs = el.dataset.atr || '';
       // Mostrar próximo dia com eventos
       const descBox = document.querySelector('.desc-box');
      let daysToNext = 1;
      if (descBox) {
       while (daysToNext < 7) {
         descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
        const nextDay = (day + daysToNext) % 7;
        if (rankedEvents[nextDay]) break;
         daysToNext++;
       }
       }
      rankedImage.setAttribute('src', '/images/4/44/Ranked_2x2_duo.png');
     });
      rankedTimer.innerHTML = `Em ${daysToNext} dia${daysToNext > 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');
rankedTimer = document.getElementById('ranked-timer');
rankedImage = document.querySelector('.ranked-image');
setWorldBossEvent();
setRankedEvent();
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,
.ranked-image {
width: 100%;
height: 100%;
object-fit: cover;
}
#global-event-timer,
#worldboss-timer,
#ranked-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>
</script>

Edição atual tal como às 06h05min de 31 de agosto de 2025

 <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
 <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
 <a data-lang="en"><img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24"></a>
 <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>

<style> .language-switch { 

 display: flex;
 gap: 6px;
 margin: 8px 0;
 justify-content: center;

} .language-switch img { 

 border: 1px solid #ccc;
 border-radius: 6px;
 cursor: pointer;
 transition: transform 0.2s ease, border-color 0.2s ease;

} .language-switch img:hover { 

 transform: scale(1.1);
 border-color: #333;

} .language-switch img.active { 

 border-color: #000;

} </style>

<script> (function () { 

 let currentLang = 'pt'; // idioma por defecto

 const langSwitch = document.querySelector('.language-switch');
 if (langSwitch) {
   langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
     btn.addEventListener('click', () => {
       currentLang = btn.dataset.lang;
       langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
       btn.querySelector('img').classList.add('active');

       const active = document.querySelector('.skill-icon.active');
       if (active) active.click();
     });
   });

   // Activar la bandera por defecto
   const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
   if (defaultBtn) defaultBtn.classList.add('active');
 }

 const oldClicks = document.querySelectorAll('.skill-icon');
 oldClicks.forEach(el => {
   el.addEventListener('click', () => {
     const name = el.dataset.nome || ;
     const rawDesc = el.dataset.desc || ;
     let descText = ;

     try {
       const obj = JSON.parse(rawDesc);
       descText = obj[currentLang] || obj['pt'] || ;
     } catch (e) {
       descText = rawDesc; // fallback si no es un JSON
     }

     const attrs = el.dataset.atr || ;
     const descBox = document.querySelector('.desc-box');
     if (descBox) {

descBox.innerHTML = `

${name}

${renderAttributes(attrs)}

${descText}

`; 

     }
   });
 });

})(); </script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=38373”