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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(529 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<h3>🛒 Carrinho de Compras</h3>
<div class="language-switch">
<div id="carrinho-container"></div>
  <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
<div id="carrinho-total" style="font-weight: bold; margin-top: 10px;"></div>
  <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>
<div style="margin-top: 20px; display: flex; gap: 10px;">
   <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
  <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button>
   <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>
</div>
</div>


<script>
<style>
// Carrinho
.language-switch {
const carrinho = {};
  display: flex;
let receitas = {};
   gap: 6px;
 
  margin: 8px 0;
// Función para cargar las recetas desde el JSON
   justify-content: center;
async function cargarReceitas() {
   try {
    const response = await fetch('https://wiki.gla.com.br/index.php?title=Receitas.json&action=raw');
    const data = await response.json();
   
    // Transformar la estructura del JSON al formato esperado por el código
    receitas = {
      baratie: Object.entries(data.baratie).map(([id, item]) => ({
        id,
        nome: item.nome,
        preco: item.cost,
        img: item.thumb
      })),
      alianca: Object.entries(data.alianca).map(([id, item]) => ({
        id,
        nome: item.nome,
        preco: item.cost,
        img: item.thumb
      }))
    };
   
    renderizarReceitas();
   } catch (error) {
    console.error('Error al cargar las recetas:', error);
    alert('No se pudieron cargar las recetas. Por favor, inténtalo más tarde.');
  }
}
}
 
.language-switch img {
// Renderizar receitas
  border: 1px solid #ccc;
function renderizarReceitas() {
  border-radius: 6px;
   renderizarSecao('baratie');
   cursor: pointer;
   renderizarSecao('alianca');
   transition: transform 0.2s ease, border-color 0.2s ease;
}
}
 
.language-switch img:hover {
function renderizarSecao(secao) {
   transform: scale(1.1);
  const container = document.getElementById(`receitas-${secao}`);
   border-color: #333;
   if (!container) return;
 
  container.innerHTML = '';
    
  receitas[secao].forEach(receita => {
    const card = document.createElement('div');
    card.className = 'receita-card';
    card.innerHTML = `
      <img src="${receita.img}" width="64" height="64" />
      <div class="receita-nome">${receita.nome}</div>
      <div class="receita-preco">${receita.preco.toLocaleString()} Berry</div>
      <button onclick="adicionarAoCarrinho('${receita.id}')">➕</button>
    `;
    container.appendChild(card);
  });
}
}
 
.language-switch img.active {
// Funções do carrinho
   border-color: #000;
function adicionarAoCarrinho(id) {
  let receita = encontrarReceita(id);
  if (!receita) return;
 
  if (!carrinho[id]) {
    carrinho[id] = { ...receita, quantidade: 1 };
  } else {
    carrinho[id].quantidade++;
   }
  renderizarCarrinho();
}
}
</style>


function encontrarReceita(id) {
<script>
   for (const secao in receitas) {
(function () {
    const receita = receitas[secao].find(r => r.id === id);
   let currentLang = 'pt'; // idioma por defecto
    if (receita) return receita;
  }
  return null;
}


function alterarQuantidade(id, alteracao) {
  const langSwitch = document.querySelector('.language-switch');
   if (alteracao === 100) {
   if (langSwitch) {
     carrinho[id].quantidade = 100;
     langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
  } else {
      btn.addEventListener('click', () => {
    carrinho[id].quantidade += alteracao;
        currentLang = btn.dataset.lang;
  }
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
 
        btn.querySelector('img').classList.add('active');
  if (carrinho[id].quantidade <= 0) {
    delete carrinho[id];
  }
  renderizarCarrinho();
}


function atualizarQuantidadeManual(id, event) {
        const active = document.querySelector('.skill-icon.active');
  const novoValor = parseInt(event.target.value);
        if (active) active.click();
  if (!isNaN(novoValor) && novoValor >= 0) {
       });
    if (novoValor === 0) {
     });
       delete carrinho[id];
    } else {
      carrinho[id].quantidade = novoValor;
     }
    renderizarCarrinho();
  }
}


function esvaziarCarrinho() {
    // Activar la bandera por defecto
  for (const id in carrinho) {
    const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
    delete carrinho[id];
    if (defaultBtn) defaultBtn.classList.add('active');
   }
   }
  renderizarCarrinho();
}
function mostrarTotal() {
  const total = calcularTotal();
  alert(`Total atual: ${total.toLocaleString()} Berry`);
}
function calcularTotal() {
  return Object.values(carrinho).reduce((sum, item) => sum + (item.preco * item.quantidade), 0);
}


function renderizarCarrinho() {
   const oldClicks = document.querySelectorAll('.skill-icon');
   const container = document.getElementById('carrinho-container');
   oldClicks.forEach(el => {
   container.innerHTML = '';
    el.addEventListener('click', () => {
  let total = 0;
      const name = el.dataset.nome || '';
      const rawDesc = el.dataset.desc || '';
      let descText = '';


  for (const id in carrinho) {
      try {
    const item = carrinho[id];
        const obj = JSON.parse(rawDesc);
    const subtotal = item.preco * item.quantidade;
        descText = obj[currentLang] || obj['pt'] || '';
    total += subtotal;
      } catch (e) {
        descText = rawDesc; // fallback si no es un JSON
      }


    const itemDiv = document.createElement('div');
      const attrs = el.dataset.atr || '';
    itemDiv.className = 'item-carrinho';
      const descBox = document.querySelector('.desc-box');
    itemDiv.innerHTML = `
      if (descBox) {
      <img src="${item.img}" width="40" height="40" />
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
      <div class="info-carrinho">
      }
        <div class="nome-item">${item.nome}</div>
     });
        <div class="controle-quantidade">
   });
          <button onclick="alterarQuantidade('${id}', -1)">−</button>
})();
          <input type="number" value="${item.quantidade}" min="0"
                onchange="atualizarQuantidadeManual('${id}', event)">
          <button onclick="alterarQuantidade('${id}', 1)">+</button>
          <button class="btn-100" onclick="alterarQuantidade('${id}', 100)">x100</button>
        </div>
      </div>
      <div class="subtotal">${subtotal.toLocaleString()} Berry</div>
      <button class="remover-item" onclick="removerDoCarrinho('${id}')">🗑️</button>
    `;
    container.appendChild(itemDiv);
  }
 
  document.getElementById('carrinho-total').innerText = total > 0
    ? `Total: ${total.toLocaleString()} Berry`
     : '';
}
 
function removerDoCarrinho(id) {
  delete carrinho[id];
   renderizarCarrinho();
}
 
// Event listeners
document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);
document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);
 
// Cargar las recetas al iniciar
document.addEventListener('DOMContentLoaded', cargarReceitas);
</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”