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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(528 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() {
  const oldClicks = document.querySelectorAll('.skill-icon');
   return Object.values(carrinho).reduce((sum, item) => sum + (item.preco * item.quantidade), 0);
   oldClicks.forEach(el => {
}
    el.addEventListener('click', () => {
      const name = el.dataset.nome || '';
      const rawDesc = el.dataset.desc || '';
      let descText = '';


function renderizarCarrinho() {
      try {
  const container = document.getElementById('carrinho-container');
        const obj = JSON.parse(rawDesc);
  container.innerHTML = '';
        descText = obj[currentLang] || obj['pt'] || '';
  let total = 0;
      } catch (e) {
        descText = rawDesc; // fallback si no es un JSON
      }


  for (const id in carrinho) {
      const attrs = el.dataset.atr || '';
    const item = carrinho[id];
      const descBox = document.querySelector('.desc-box');
    const subtotal = item.preco * item.quantidade;
      if (descBox) {
    total += subtotal;
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
 
      }
    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
document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);
document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);
 
// CSS
document.head.insertAdjacentHTML('beforeend', `
<style>
  .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 {
    transform: scale(1.05);
  }
 
  .receita-nome {
    font-weight: bold;
    margin: 4px 0;
    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 {
    margin-bottom: 6px;
  }
 
  .item-carrinho {
    display: flex;
    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 {
    width: 25%;
  }
</style>
`);
 
// 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”