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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<h3>🛒 Carrinho de Compras</h3>
<div id="receitas-widget">
<div id="carrinho-container"></div>
  <h3>Receitas do Baratie e Aliança</h3>
<div id="carrinho-total" style="font-weight: bold; margin-top: 10px;"></div>
  <div id="loading">Carregando receitas...</div>
 
  <div id="error" style="color:red; display:none;"></div>
<div style="margin-top: 20px; display: flex; gap: 10px;">
 
  <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button>
  <div id="baratie-container" style="margin-bottom:20px;">
   <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>
    <h4>Baratie</h4>
    <div class="receitas-list"></div>
  </div>
 
   <div id="alianca-container">
    <h4>Aliança</h4>
    <div class="receitas-list"></div>
  </div>
</div>
</div>


<script>
<script>
// 1. Definimos los contenedores
const loadingEl = document.getElementById('loading');
const errorEl = document.getElementById('error');
const baratieList = document.querySelector('#baratie-container .receitas-list');
const aliancaList = document.querySelector('#alianca-container .receitas-list');


let receitas = {};
// 2. Función para cargar el JSON
 
async function cargarReceitas() {
async function carregarReceitas() {
   try {
   try {
     const response = await fetch('https://wiki.gla.com.br/index.php/Receitas.json');
     const response = await fetch('https://wiki.gla.com.br/index.php/Receitas.json');
     if (!response.ok) throw new Error('Error al cargar recetas');
     if (!response.ok) throw new Error('Falha ao cargar receitas');
     receitas = await response.json();
     return await response.json();
    renderizarReceitas();
   } catch (err) {
   } catch (error) {
     errorEl.textContent = `Erro: ${err.message}`;
     console.error('Error:', error);
    errorEl.style.display = 'block';
    return null;
   }
   }
}
}


// Carrinho
// 3. Función para mostrar las recetas
const carrinho = {};
function mostrarReceitas(data) {
 
   if (!data) return;
// Renderizar receitas
    
function renderizarReceitas() {
  // Limpiar contenedores
   renderizarSecao('baratie');
   baratieList.innerHTML = '';
   renderizarSecao('alianca');
   aliancaList.innerHTML = '';
}
 
function renderizarSecao(secao) {
   const container = document.getElementById(`receitas-${secao}`);
  if (!container) return;
   container.innerHTML = '';
    
    
   // Iterar sobre las recetas en el objeto
   // Mostrar recetas de Baratie
   for (const id in receitas[secao]) {
   for (const [id, receita] of Object.entries(data.baratie)) {
    const receita = receitas[secao][id];
     baratieList.innerHTML += `
    const card = document.createElement('div');
       <div class="receita" style="border:1px solid #ddd; padding:10px; margin:5px 0;">
     card.className = 'receita-card';
        <img src="${receita.thumb}" width="50" height="50">
    card.innerHTML = `
        <strong>${receita.nome}</strong> - ${receita.cost} Berry
       <img src="${receita.thumb}" width="64" height="64" />
       </div>
      <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);
  }
}
// Funções do carrinho
function adicionarAoCarrinho(id) {
  let receita = encontrarReceita(id);
  if (!receita) return;
  if (!carrinho[id]) {
    carrinho[id] = { ...receita, quantidade: 1 };
  } else {
    carrinho[id].quantidade++;
  }
  renderizarCarrinho();
}
function encontrarReceita(id) {
  for (const secao in receitas) {
    if (receitas[secao][id]) {
      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) {
   // Mostrar recetas de Aliança
    delete carrinho[id];
   for (const [id, receita] of Object.entries(data.alianca)) {
  }
    aliancaList.innerHTML += `
  renderizarCarrinho();
      <div class="receita" style="border:1px solid #ddd; padding:10px; margin:5px 0;">
}
        <img src="${receita.thumb}" width="50" height="50">
 
         <strong>${receita.nome}</strong> - ${receita.cost} Berry
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>
      <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) {
// 4. Cargar y mostrar al iniciar
  delete carrinho[id];
(async function init() {
  renderizarCarrinho();
  const receitas = await cargarReceitas();
}
  loadingEl.style.display = 'none';
 
   if (receitas) mostrarReceitas(receitas);
// Event listeners
})();
document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);
document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);
 
// Estilos 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>
`);
 
// Inicializar
carregarReceitas();
</script>
</script>

Edição das 18h21min de 8 de abril de 2025

Receitas do Baratie e Aliança

Carregando receitas...

Baratie

Aliança

<script> // 1. Definimos los contenedores const loadingEl = document.getElementById('loading'); const errorEl = document.getElementById('error'); const baratieList = document.querySelector('#baratie-container .receitas-list'); const aliancaList = document.querySelector('#alianca-container .receitas-list');

// 2. Función para cargar el JSON async function cargarReceitas() { 

 try {
   const response = await fetch('https://wiki.gla.com.br/index.php/Receitas.json');
   if (!response.ok) throw new Error('Falha ao cargar receitas');
   return await response.json();
 } catch (err) {
   errorEl.textContent = `Erro: ${err.message}`;
   errorEl.style.display = 'block';
   return null;
 }

}

// 3. Función para mostrar las recetas function mostrarReceitas(data) { 

 if (!data) return;
 
 // Limpiar contenedores
 baratieList.innerHTML = ;
 aliancaList.innerHTML = ;
 
 // Mostrar recetas de Baratie
 for (const [id, receita] of Object.entries(data.baratie)) {
   baratieList.innerHTML += `

       <img src="${receita.thumb}" width="50" height="50">
       ${receita.nome} - ${receita.cost} Berry

   `;
 }
 
 // Mostrar recetas de Aliança
 for (const [id, receita] of Object.entries(data.alianca)) {
   aliancaList.innerHTML += `

       <img src="${receita.thumb}" width="50" height="50">
       ${receita.nome} - ${receita.cost} Berry

   `;
 }

}

// 4. Cargar y mostrar al iniciar (async function init() { 

 const receitas = await cargarReceitas();
 loadingEl.style.display = 'none';
 if (receitas) mostrarReceitas(receitas);

})(); </script>

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