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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(502 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>
<div id="resumo-total" style="margin-top: 20px;"></div>


<script>
<style>
const carrinho = {};
.language-switch {
let receitas = {};
   display: flex;
const berryGif = "https://wiki.gla.com.br/images/thumb/d/d1/Berrynewgif.gif/32px-Berrynewgif.gif";
  gap: 6px;
 
  margin: 8px 0;
// Função para carregar as receitas a partir do 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();
   
    receitas = {
      baratie: Object.entries(data.baratie).map(([id, item]) => ({
        id,
        nome: item.nome,
        preco: item.cost,
        img: item.thumb,
        ingredientes: item.ingredients || [],
        lvl: item.lvl,
        tempo: item.time,
        descricao: item.description
      })),
      alianca: Object.entries(data.alianca).map(([id, item]) => ({
        id,
        nome: item.nome,
        preco: item.cost,
        img: item.thumb,
        ingredientes: item.ingredients || [],
        lvl: item.lvl,
        tempo: item.time,
        descricao: item.description
      }))
    };
   
    renderizarReceitas();
   } catch (error) {
    console.error('Error al cargar las receitas:', error);
    alert('No se pudieron cargar las receitas. Por favor, inténtalo más tarde.');
  }
}
}
 
.language-switch img {
function renderizarReceitas() {
  border: 1px solid #ccc;
   renderizarSecao('baratie');
  border-radius: 6px;
   renderizarSecao('alianca');
   cursor: pointer;
   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 = `
      <button class="info-btn" onclick="mostrarModalReceita(this)"
        data-descricao="${encodeURIComponent(receita.descricao)}"
        data-lvl="${receita.lvl}"
        data-tempo="${receita.tempo}">i</button>
      <img src="${receita.img}" width="64" height="64" />
      <div class="receita-nome">${receita.nome}</div>
      <div class="receita-preco">${receita.preco.toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);"/></div>
      <button class="add-to-cart-btn" onclick="adicionarAoCarrinho('${receita.id}')">➕</button>
    `;
    container.appendChild(card);
   });
}
}
 
.language-switch img.active {
function mostrarModalReceita(button) {
   border-color: #000;
  const descricao = decodeURIComponent(button.getAttribute('data-descricao'));
  const lvl = button.getAttribute('data-lvl');
   const tempo = button.getAttribute('data-tempo');
  const descricaoFormatada = descricao
    .replace(/\n/g, '<br>')
    .replace(/Tempo de recarga/g, '<br><strong>Tempo de recarga</strong>');
 
  const modalHTML = `
    <div class="modal-overlay active" onclick="cerrarModal(event)">
      <div class="modal-content" onclick="event.stopPropagation()">
        <button class="close-modal" onclick="cerrarModal(event)">×</button>
        <p><strong>Nível:</strong> ${lvl}</p>
        <p><strong>Tempo de preparo:</strong> ${tempo} min</p>
        <p><strong>Descrição:</strong><br>${descricaoFormatada}</p>
      </div>
    </div>
  `;
 
  document.body.insertAdjacentHTML('beforeend', modalHTML);
  document.addEventListener('keydown', (e) => e.key === 'Escape' && cerrarModal(e));
}
}
</style>


function cerrarModal(event) {
<script>
   event.preventDefault();
(function () {
  const modal = document.querySelector('.modal-overlay');
   let currentLang = 'pt'; // idioma por defecto
  if (modal) {
    modal.classList.remove('active');
    setTimeout(() => modal.remove(), 300);
  }
}


// Funções do carrinho
  const langSwitch = document.querySelector('.language-switch');
function adicionarAoCarrinho(id) {
  if (langSwitch) {
  const receita = encontrarReceita(id);
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
  if (!receita) return;
      btn.addEventListener('click', () => {
        currentLang = btn.dataset.lang;
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
        btn.querySelector('img').classList.add('active');


  if (!carrinho[id]) {
        const active = document.querySelector('.skill-icon.active');
    carrinho[id] = { ...receita, quantidade: 1 };
        if (active) active.click();
  } else {
       });
    carrinho[id].quantidade++;
     });
  }
  renderizarCarrinho();
}
 
function encontrarReceita(id) {
  for (const secao in receitas) {
    const receita = receitas[secao].find(r => r.id === id);
    if (receita) return receita;
  }
  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();
  const detalhesContainer = document.getElementById('detalhes-carrinho');
  if (detalhesContainer) {
    detalhesContainer.innerHTML = '';
  }
}
 
function mostrarTotal() {
  let detalhesContainer = document.getElementById('detalhes-carrinho');
  const resumoTotal = document.getElementById('resumo-total');


  if (!detalhesContainer) {
    // Activar la bandera por defecto
     detalhesContainer = document.createElement('div');
     const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
    detalhesContainer.id = 'detalhes-carrinho';
     if (defaultBtn) defaultBtn.classList.add('active');
    detalhesContainer.style.marginTop = '20px';
     resumoTotal.appendChild(detalhesContainer);
  } else {
    detalhesContainer.innerHTML = '';
   }
   }


  detalhesContainer.innerHTML += '<h3>📦 Ingredientes Totais Necessários:</h3>';
   const oldClicks = document.querySelectorAll('.skill-icon');
 
   oldClicks.forEach(el => {
   const ingredientesContainer = document.createElement('div');
    el.addEventListener('click', () => {
   ingredientesContainer.style.display = 'flex';
      const name = el.dataset.nome || '';
  ingredientesContainer.style.flexWrap = 'wrap'; // Para que no se desborden si son muchos
      const rawDesc = el.dataset.desc || '';
  ingredientesContainer.style.gap = '10px'; // Espacio entre los items
      let descText = '';
 
  for (const id in carrinho) {
    const item = carrinho[id];


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


    const ingredientesMultiplicados = {};
      const attrs = el.dataset.atr || '';
    item.ingredientes.forEach(([nome, quantidade]) => {
      const descBox = document.querySelector('.desc-box');
      if (!ingredientesMultiplicados[nome]) ingredientesMultiplicados[nome] = 0;
      if (descBox) {
       ingredientesMultiplicados[nome] += quantidade * item.quantidade;
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
       }
     });
     });
    const receitaDiv = document.createElement('div');
    receitaDiv.className = 'detalhe-receita';
    receitaDiv.style.border = '1px solid #ccc';
    receitaDiv.style.padding = '10px';
    receitaDiv.style.borderRadius = '8px';
    receitaDiv.style.backgroundColor = '#fff';
    receitaDiv.style.width = '250px';
    receitaDiv.innerHTML = `
      <h4>${item.quantidade}x ${item.nome}</h4>
      <img src="${item.img}" width="64" height="64" style="display: block; margin-bottom: 10px;" />
      <strong>🥣 Ingredientes:</strong>
      <div class="ingredientes-grid">
        ${Object.entries(ingredientesMultiplicados).map(([nome, qtd]) => `
          <div class="ingrediente-item">${qtd}x ${nome}</div>
        `).join('')}
      </div>
      <div><strong>Total da Receita:</strong> ${(item.preco * item.quantidade).toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);"/></div>
    `;
    ingredientesContainer.appendChild(receitaDiv);
  }
  detalhesContainer.appendChild(ingredientesContainer);
}
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()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);"/></div>
      <button class="remover-item" onclick="removerDoCarrinho('${id}')">🗑️</button>
    `;
    container.appendChild(itemDiv);
  }
  document.getElementById('carrinho-total').innerHTML = total > 0
    ? `Total: ${total.toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);" />`
    : '';
}
function removerDoCarrinho(id) {
  delete carrinho[id];
  renderizarCarrinho();
}
document.querySelectorAll('.add-to-cart-btn').forEach(button => {
  button.addEventListener('click', () => {
    button.classList.add('clicked');
    setTimeout(() => button.classList.remove('clicked'), 300); // quita la clase luego de la animación
   });
   });
});
})();
 
// Botões
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;
  }
  .nome-item, .subtotal{
    user-select: none;
  }
 
  .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;
    user-select: none;
    position: relative;
  }
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
 
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
 
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
 
  .close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
  }
 
  .info-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #4393ff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .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;
    width: 20.5%;
    margin-right: 1%;
  }
 
  .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;
  }
  .ingredientes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas */
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
  }
 
  .ingrediente-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 14px;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    overflow-wrap: break-word;
    align-content: center;
  }
 
  .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 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
 
  .detalhe-receita ul {
    padding-left: 20px;
  }
 
  .detalhe-receita li {
    margin-bottom: 3px;
  }
 
  .detalhe-receita {
    width: 16%;
    justify-items: anchor-center;
  }
 
  @media screen and (max-width: 1366px) {
    .item-carrinho {
      width: 29.3%;
    }
  }
 
  @media (max-width: 768px) {
    .item-carrinho {
      width: 43%;
    }
  }
 
  @media only screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 1024px) and (max-height: 1024px) {
    .item-carrinho {
      width: 32%;
    }
  }
  .add-to-cart-btn.clicked {
    animation: pop 0.3s ease;
    background-color: #4ade80; /* verde */
    color: white;
  }
 
  @keyframes pop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
`);
 
// Carregar as receitas ao 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”