Widget:Droflax

🛒 Carrinho de Compras

 <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button>
 <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>

<script> const receitasSelecionadas = {}; const MAX_RECEITAS = 2; let receitas = {}; const berryGif = "https://wiki.gla.com.br/images/thumb/d/d1/Berrynewgif.gif/32px-Berrynewgif.gif";

function selecionarReceita(id) {

 if (Object.keys(receitasSelecionadas).length >= MAX_RECEITAS && !receitasSelecionadas[id]) {
   alert("Você só pode selecionar até 2 receitas.");
   return;
 }

 const receita = encontrarReceita(id);
 if (!receita) return;

 if (!receitasSelecionadas[id]) {
   receitasSelecionadas[id] = { ...receita, quantidade: 1 };
 }

 renderizarSelecao();

}

// Função para carregar as receitas a partir do JSON 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.');
 }

}

function renderizarReceitas() {

 renderizarSecao('baratie');
 renderizarSecao('alianca');

}

function renderizarSecao(secao) {

 const container = document.getElementById(`receitas-${secao}`);
 if (!container) return;

 container.innerHTML = ;

 receitas[secao].forEach(receita => {
   const card = document.createElement('div');
   card.className = 'receita-card';
   card.setAttribute('data-id', receita.id);
   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="48" height="48" />

${receita.nome}

${receita.preco.toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);"/>

     <button class="add-to-cart-btn" onclick="selecionarReceita('${receita.id}')">Selecionar</button>
   `;
   container.appendChild(card);
 });

}

function mostrarModalReceita(button) {

 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, '
')
   .replace(/Tempo de recarga/g, '
Tempo de recarga');

 const modalHTML = `

       <button class="close-modal" onclick="cerrarModal(event)">×</button>

Nível: ${lvl}

Tempo de preparo: ${tempo} min

Descrição:
${descricaoFormatada}

 `;
 
 document.body.insertAdjacentHTML('beforeend', modalHTML);
 document.addEventListener('keydown', (e) => e.key === 'Escape' && cerrarModal(e));

}

function cerrarModal(event) {

 event.preventDefault();
 const modal = document.querySelector('.modal-overlay');
 if (modal) {
   modal.classList.remove('active');
   setTimeout(() => modal.remove(), 300);
 }

}

function encontrarReceita(id) {

 for (const secao in receitas) {
   const receita = receitas[secao].find(r => r.id === id);
   if (receita) return receita;
 }
 return null;

}

function esvaziarCarrinho() {

 for (const id in carrinho) {
   delete carrinho[id];
   const receitaCard = document.querySelector(`[data-id="${id}"]`);
   if (receitaCard) {
     receitaCard.style.backgroundColor = ;
   }
 }
 renderizarCarrinho();
 const detalhesContainer = document.getElementById('detalhes-carrinho');
 if (detalhesContainer) {
   detalhesContainer.innerHTML = ;
 }

}

function renderizarSelecao() {

 const container = document.getElementById('carrinho-container');
 const totalContainer = document.getElementById('carrinho-total');
 container.innerHTML = ;
 totalContainer.innerHTML = ;

 let total = 0;

 for (const id in receitasSelecionadas) {
   const item = receitasSelecionadas[id];
   const subtotal = item.preco * item.quantidade;
   total += subtotal;

   // Calcular ingredientes totais dessa receita
   const ingredientesMultiplicados = {};
   item.ingredientes.forEach(([nome, quantidade]) => {
     ingredientesMultiplicados[nome] = quantidade * item.quantidade;
   });

   const itemDiv = document.createElement('div');
   itemDiv.className = 'item-carrinho';
   itemDiv.innerHTML = `

       <img src="${item.img}" width="64" height="64" />

${item.nome}

           <button onclick="alterarQuantidadeSelecionada('${id}', -1)">−</button>
           <input type="number" value="${item.quantidade}" min="1" onchange="atualizarQuantidadeManualSelecionada('${id}', event)">
           <button onclick="alterarQuantidadeSelecionada('${id}', 1)">+</button>
           <button class="btn-100" onclick="alterarQuantidadeSelecionada('${id}', 100, true)">x100</button>
           <button class="remover-item" onclick="removerReceitaSelecionada('${id}')">🗑️</button>

         ${subtotal.toLocaleString()} <img src="${berryGif}" width="25" height="25" />

🥣 Ingredientes:

       ${Object.entries(ingredientesMultiplicados).map(([nome, qtd]) => `

${qtd}x ${nome}

       `).join()}

   `;

   container.appendChild(itemDiv);
 }

 // Mostrar total geral no final
 if (total > 0) {
   totalContainer.innerHTML = `Total: ${total.toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);" />`;
 }

}

function alterarQuantidadeSelecionada(id, alteracao, substituir = false) {

 if (!receitasSelecionadas[id]) return;
 if (substituir) {
   receitasSelecionadas[id].quantidade = alteracao;
 } else {
   receitasSelecionadas[id].quantidade += alteracao;
   if (receitasSelecionadas[id].quantidade < 1) {
     receitasSelecionadas[id].quantidade = 1;
   }
 }
 renderizarSelecao();

}

function atualizarQuantidadeManualSelecionada(id, event) {

 const novoValor = parseInt(event.target.value);
 if (!isNaN(novoValor) && novoValor >= 1) {
   receitasSelecionadas[id].quantidade = novoValor;
   renderizarSelecao();
 }

}

function removerReceitaSelecionada(id) {

 delete receitasSelecionadas[id];
 renderizarSelecao();

}

// Botões document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);

// 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: 96px;
   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;
   font-size: 88%;
 }

 .receita-preco {
   margin-bottom: 6px;
 }
 
 .item-carrinho {
   display: flex;
   gap: 12px;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 8px;
   margin-bottom: 8px;
   width: 44.5%;
   margin-inline: 1%;
   flex-direction: column;
   align-items: center;
 }
 
 .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;
   justify-content: center;
   margin-top: 1.5%;
 }

 .receita-card.highlighted {
   background-color: lightgreen;
 }

 .detalhe-receita ul {
   padding-left: 20px;
 }

 .detalhe-receita li {
   margin-bottom: 3px;
 }

 .detalhe-receita {
   width: 16%;
   justify-items: anchor-center;
 }

 .receitas-wrapper{
   display: flex;
   flex-direction: column;
   width: 48%;
 }

 .full-receitas {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
 }

 @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%;
   }
 }

</style> `);

// Carregar as receitas ao iniciar document.addEventListener('DOMContentLoaded', cargarReceitas); </script>