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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(534 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>
 
.language-switch {
let receitas = {};
   display: flex;
 
  gap: 6px;
async function carregarReceitas() {
  margin: 8px 0;
   try {
   justify-content: center;
    const response = await fetch('https://wiki.gla.com.br/index.php/Receitas.json');
    if (!response.ok) throw new Error('Error al cargar recetas');
    receitas = await response.json();
    renderizarReceitas();
   } catch (error) {
    console.error('Error:', error);
  }
}
}
 
.language-switch img {
// Carrinho
  border: 1px solid #ccc;
const carrinho = {};
  border-radius: 6px;
 
   cursor: pointer;
// Renderizar receitas
   transition: transform 0.2s ease, border-color 0.2s ease;
function renderizarReceitas() {
   renderizarSecao('baratie');
   renderizarSecao('alianca');
}
}
 
.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 = '';
    
  // Iterar sobre las recetas en el objeto
  for (const id in receitas[secao]) {
    const receita = receitas[secao][id];
    const card = document.createElement('div');
    card.className = 'receita-card';
    card.innerHTML = `
      <img src="${receita.thumb}" width="64" height="64" />
      <div class="receita-nome">${receita.nome}</div>
      <div class="receita-preco">${receita.cost.toLocaleString()} Berry</div>
      <button onclick="adicionarAoCarrinho('${id}', '${secao}')">➕</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 () {
    if (receitas[secao][id]) {
   let currentLang = 'pt'; // idioma por defecto
      return {
        ...receitas[secao][id],
        id: id,
        preco: receitas[secao][id].cost,
        img: receitas[secao][id].thumb
      };
    }
  }
  return null;
}
 
function alterarQuantidade(id, alteracao) {
  if (alteracao === 100) {
    carrinho[id].quantidade = 100;
  } else {
    carrinho[id].quantidade += alteracao;
  }
 
  if (carrinho[id].quantidade <= 0) {
    delete carrinho[id];
  }
  renderizarCarrinho();
}
 
function atualizarQuantidadeManual(id, event) {
  const novoValor = parseInt(event.target.value);
  if (!isNaN(novoValor) && novoValor >= 0) {
    if (novoValor === 0) {
      delete carrinho[id];
    } else {
      carrinho[id].quantidade = novoValor;
    }
    renderizarCarrinho();
  }
}
 
function esvaziarCarrinho() {
  for (const id in carrinho) {
    delete carrinho[id];
  }
  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 container = document.getElementById('carrinho-container');
  container.innerHTML = '';
   let total = 0;
 
  for (const id in carrinho) {
    const item = carrinho[id];
    const subtotal = item.preco * item.quantidade;
    total += subtotal;
 
    const itemDiv = document.createElement('div');
    itemDiv.className = 'item-carrinho';
    itemDiv.innerHTML = `
      <img src="${item.img}" width="40" height="40" />
      <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
  const langSwitch = document.querySelector('.language-switch');
document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);
  if (langSwitch) {
document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
 
      btn.addEventListener('click', () => {
// Estilos CSS
        currentLang = btn.dataset.lang;
document.head.insertAdjacentHTML('beforeend', `
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
<style>
        btn.querySelector('img').classList.add('active');
  .receitas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
  }
 
  .receita-card {
    width: 150px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    background-color: #fff;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
  }


  .receita-card:hover {
        const active = document.querySelector('.skill-icon.active');
    transform: scale(1.05);
        if (active) active.click();
  }
      });
    });


  .receita-nome {
     // Activar la bandera por defecto
     font-weight: bold;
     const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
    margin: 4px 0;
     if (defaultBtn) defaultBtn.classList.add('active');
    min-height: 3em; /* força ocupar duas linhas mesmo se o texto for curto */
     line-height: 1.5em;
    display: flex;
    align-items: center;
     justify-content: center;
    text-align: center;
   }
   }


   .receita-preco {
   const oldClicks = document.querySelectorAll('.skill-icon');
    margin-bottom: 6px;
   oldClicks.forEach(el => {
  }
     el.addEventListener('click', () => {
 
      const name = el.dataset.nome || '';
  .item-carrinho {
      const rawDesc = el.dataset.desc || '';
    display: flex;
      let descText = '';
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 8px;
  }
 
  .info-carrinho {
    flex: 1;
   }
 
  .controle-quantidade {
     display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
  }
 
  .controle-quantidade input {
    width: 50px;
    text-align: center;
    padding: 2px;
  }
 
  .controle-quantidade button {
    width: 24px;
    height: 24px;
  }
 
  .btn-100 {
    width: auto !important;
    padding: 0 4px;
    margin-left: 4px;
    font-size: 12px;
  }
 
  .remover-item {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
 
  .acao-carrinho {
    padding: 8px 16px;
    background-color: #4393ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
 
  .acao-carrinho:hover {
    background-color: #3275c7;
  }


  #carrinho-container {
      try {
    width: 25%;
        const obj = JSON.parse(rawDesc);
  }
        descText = obj[currentLang] || obj['pt'] || '';
</style>
      } catch (e) {
`);
        descText = rawDesc; // fallback si no es un JSON
      }


// Inicializar
      const attrs = el.dataset.atr || '';
carregarReceitas();
      const descBox = document.querySelector('.desc-box');
      if (descBox) {
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
      }
    });
  });
})();
</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”