Widget:Droflax

De Wiki Gla
Revisão de 18h16min de 27 de maio de 2025 por Droflax (discussão | contribs)
Ir para navegação Ir para pesquisar
» Receitas Aliança
» Receitas Baratie


<script> let receitasSelecionadas = { 

 0: null,
 1: null

}; let receitas = {}; const berryGif = "/images/thumb/d/d1/Berrynewgif.gif/32px-Berrynewgif.gif";

function selecionarReceita(id) { 

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

 if (Object.values(receitasSelecionadas).some(r => r && r.id === id)) return;

 for (let i = 0; i < 2; i++) {
   if (!receitasSelecionadas[i]) {
     receitasSelecionadas[i] = {
       id: receita.id,
       nome: receita.nome,
       preco: receita.preco,
       img: receita.img,
       ingredientes: receita.ingredientes,
       lvl: receita.lvl,
       tempo: receita.tempo,
       descricao: receita.descricao,
       quantidade: 1
     };
     break;
   }
 }

 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('Erro ao carregar as receitas:', error);
   alert('Não foi possível carregar as receitas locais.');
 }

}

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 renderizarSelecao() { 

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

 let totalSlots = 2;

 for (let i = 0; i < totalSlots; i++) {
   const receita = receitasSelecionadas[i];

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

   if (receita) {
     const subtotal = receita.preco * receita.quantidade;
     const tempoTotal = formatarTempo(receita.tempo * receita.quantidade); 

     const ingredientesHtml = receita.ingredientes.map(([nome, qtd]) => {
       const totalIngrediente = qtd * receita.quantidade;

return `

${nome}: ${totalIngrediente}

`; 

     }).join();

     itemDiv.innerHTML = `
       <img src="${receita.img}" width="40" height="40" />
${receita.nome}
Level: ${receita.lvl}
Time: ${tempoTotal}

${receita.descricao}

           <button onclick="alterarQuantidadeSelecionada(${i}, -1)">−</button>
           <input type="number" value="${receita.quantidade}" min="1"
                  onchange="atualizarQuantidadeManualSelecionada(${i}, event)">
           <button onclick="alterarQuantidadeSelecionada(${i}, 1)">+</button>
           <button class="btn-100" onclick="definir100Selecionada(${i})">x100</button>

           ${ingredientesHtml}
${subtotal.toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);" />
       <button class="remover-item" onclick="removerReceitaSelecionada(${i})">🗑️</button>
     `;
   } else {

itemDiv.innerHTML = `

Selecione uma receita

`; 

   }

   container.appendChild(itemDiv);
 }

}

function alterarQuantidadeSelecionada(index, alteracao) { 

 const receita = receitasSelecionadas[index];
 if (!receita) return;
 receita.quantidade += alteracao;
 if (receita.quantidade < 1) receita.quantidade = 1;
 renderizarSelecao();

}

function atualizarQuantidadeManualSelecionada(index, event) { 

 const valor = parseInt(event.target.value);
 if (valor && valor >= 1) {
   receitasSelecionadas[index].quantidade = valor;
   renderizarSelecao();
 }

}

function definir100Selecionada(index) { 

 if (receitasSelecionadas[index]) {
   receitasSelecionadas[index].quantidade = 100;
   renderizarSelecao();
 }

}

function removerReceitaSelecionada(index) { 

 receitasSelecionadas[index] = null;
 renderizarSelecao();

}

function formatarTempo(minutosDecimal) { 

 const minutosInt = Math.floor(minutosDecimal);
 const segundos = Math.round((minutosDecimal % 1) * 60);

 if (minutosInt < 1) {
   return `${segundos}seg`;
 } else if (segundos === 0) {
   return `${minutosInt}min`;
 } else {
   return `${minutosInt}min ${segundos.toString().padStart(2, '0')}seg`;
 }

}

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

// CSS moderno e agradável document.head.insertAdjacentHTML('beforeend', ` <style> 

 body {
   background: #f6f8fa;
   font-family: 'Segoe UI', Arial, sans-serif;
   color: #222;
   margin: 0;
   padding: 0;
 }

 .full-receitas {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   gap: 32px;
   min-height: 100vh;
 }

 .receitas-wrapper {
   flex: 1 1 0;
   overflow-y: auto;
 }

 #carrinho-container {
   flex: 1 1 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 20px;
   background: #f8fbff;
   border-radius: 16px;
   padding: 24px 18px;
 }

 .receitas-container {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-bottom: 32px;
   justify-content: center;
 }

 .receita-card {
   width: 110px;
   text-align: center;
   border: 1.5px solid rgba(0,0,0,0.13); /* igual ao carrinho */
   border-radius: 12px;
   padding: 18px 12px; /* igual ao carrinho */
   background: #fff;   /* igual ao carrinho */
   box-shadow: 0 2px 8px rgba(67,147,255,0.08); /* igual ao carrinho */
   transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
   user-select: none;
   position: relative;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 180px; /* para ficar mais larga como o carrinho */
   min-height: 180px;
   justify-content: center;
 }
 .receita-card:hover {
   transform: translateY(-4px) scale(1.06);
   box-shadow: 0 8px 24px rgba(67,147,255,0.13); /* igual ao carrinho hover */
   background: #eaf3ff;
 }

 .info-btn {
   position: absolute;
   top: 7px;
   right: 7px;
   background: #4393ff;
   color: white;
   border: none;
   border-radius: 50%;
   width: 22px;
   height: 22px;
   font-size: 13px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0 1px 4px rgba(67,147,255,0.13);
   transition: background 0.2s;
 }
 .info-btn:hover {
   background: #2566b3;
 }

 .receita-nome {
   font-weight: 600;
   margin: 8px 0 4px 0;
   min-height: 2.5em;
   line-height: 1.3em;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 95%;
   color: #2566b3;
 }

 .receita-preco {
   margin-bottom: 4px;
   font-size: 15px;
   color: #4393ff;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
 }

 .add-to-cart-btn {
   background: linear-gradient(90deg, #4393ff 60%, #2566b3 100%);
   color: #fff;
   border: none;
   border-radius: 6px;
   padding: 5px 0;
   width: 100%;
   font-size: 14px;
   font-weight: 500;
   margin-top: 6px;
   cursor: pointer;
   transition: background 0.2s, transform 0.1s;
   box-shadow: 0 1px 4px rgba(67,147,255,0.10);
 }
 .add-to-cart-btn:hover {
   background: linear-gradient(90deg, #2566b3 60%, #4393ff 100%);
   transform: scale(1.04);
 }

 .item-carrinho {
   flex: 1 1 45%;
   max-width: 48%;
   min-width: 300px;
   width: 100%;
   margin-bottom: 0;
   background: #fff;
   border: 1.5px solid rgba(0,0,0,0.13); /* borda preta suave */
   border-radius: 12px;
   padding: 18px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .item-carrinho:not(:empty):hover {
   box-shadow: 0 8px 24px rgba(67,147,255,0.13);
 }

 .info-carrinho {
   flex: 1;
   width: 100%;
   justify-items: center;
 }

 .nome-item {
   font-weight: 700;
   color: #2566b3;
   font-size: 1.08em;
   margin-bottom: 2px;
 }

 .atributes {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   margin-top: 5px;
   margin-bottom: 10px;
   width: 90%;
   justify-items: center;
   font-size: 14px;
   color: #555;
 }
 .texto-centrado {
   text-align: center;
   grid-column: 1 / -1;
   font-size: 13px;
   color: #444;
   margin-top: 4px;
 }

 .controle-quantidade {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: 2%;
   margin-bottom: 5%;
 }
 .controle-quantidade input {
   width: 48px;
   text-align: center;
   padding: 2px;
   border: 1px solid #d0d8e0;
   border-radius: 4px;
   font-size: 15px;
   background: #f8fbff;
 }
 .controle-quantidade button {
   width: 26px;
   height: 26px;
   border: none;
   border-radius: 4px;
   background: #eaf3ff;
   color: #2566b3;
   font-size: 16px;
   cursor: pointer;
   transition: background 0.15s;
 }
 .controle-quantidade button:hover {
   background: #4393ff;
   color: #fff;
 }
 .btn-100 {
   width: auto !important;
   padding: 0 8px;
   margin-left: 4px;
   font-size: 13px;
   background: #4393ff;
   color: #fff;
   border-radius: 4px;
   font-weight: 500;
   transition: background 0.15s;
 }
 .btn-100:hover {
   background: #2566b3;
 }

 .remover-item {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 20px;
   color: #e74c3c;
   margin-top: 6px;
   transition: color 0.15s;
 }
 .remover-item:hover {
   color: #b71c1c;
 }

 .ingredientes {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   margin-top: 5px;
   margin-bottom: 10px;
   width: 90%;
 }
 .ingredientes div {
   background-color: #f8fbff;
   border: 1px solid #d0d8e0;
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 14px;
   text-align: center;
   color: #2566b3;
   font-weight: 500;
   white-space: normal;
   overflow: hidden;
   text-overflow: unset;
   overflow-wrap: break-word;
   align-content: center;
 }

 .subtotal {
   font-size: 15px;
   font-weight: 600;
   color: #4393ff;
   display: flex;
   align-items: center;
   gap: 2px;
   user-select: none;
 }

 #carrinho-container {
   flex: 1 1 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 20px;
   background: #f8fbff;
   border-radius: 16px;
   padding: 24px 18px;
 }

 /* Modal */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(67,147,255, 0.18);
   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: #fff;
   padding: 28px 24px 18px 24px;
   border-radius: 12px;
   width: 340px;
   position: relative;
   box-shadow: 0 8px 32px rgba(67,147,255,0.18);
   font-size: 16px;
   color: #2566b3;
 }
 .close-modal {
   position: absolute;
   top: 12px;
   right: 12px;
   font-size: 22px;
   cursor: pointer;
   background: none;
   border: none;
   color: #4393ff;
   transition: color 0.15s;
 }
 .close-modal:hover {
   color: #e74c3c;
 }

 /* Responsividade */
 @media (max-width: 1100px) {
   .full-receitas {
     flex-direction: column;
     align-items: center;
     gap: 24px;
   }
   .receitas-wrapper, #carrinho-container {
     width: 95vw;
     max-width: 420px;
     margin: 0 auto;
   }
   #carrinho-container {
     flex: 1 1 100%;
     width: 100%;
     margin-left: 0;
   }
   .item-carrinho {
     width: 100%;
     min-width: unset;
     max-width: unset;
   }
 }
 @media (max-width: 900px) {
   .full-receitas {
     flex-direction: column;
     align-items: stretch;
     gap: 18px;
     padding: 12px 0;
   }
   .receitas-wrapper, #carrinho-container {
     width: 98vw;
     max-width: 100%;
     margin: 0 auto;
     border-radius: 10px;
     padding: 12px 4px;
   }
   #carrinho-container {
     margin-left: 0;
     min-height: unset;
   }
   .item-carrinho {
     width: 100%;
     min-width: unset;
     max-width: unset;
     margin-bottom: 14px;
     padding: 12px 6px;
   }
   .receita-card {
     width: 95vw;
     max-width: 320px;
     margin: 0 auto;
   }
 }
 @media (max-width: 700px) {
   .full-receitas {
     flex-direction: column;
     gap: 12px;
     padding: 4vw 0;
     min-height: unset;
   }
   .receitas-wrapper, #carrinho-container {
     width: 100vw;
     max-width: 100vw;
     min-width: 0;
     margin: 0;
     border-radius: 0;
     padding: 8px 2vw;
     box-sizing: border-box;
   }
   .receita-card {
     width: 100%;
     max-width: 100vw;
     min-width: 0;
     margin: 0 0 12px 0;
     padding: 10px 2px 8px 2px;
   }
   .item-carrinho {
     width: 100%;
     max-width: 100vw;
     min-width: 0;
     margin-bottom: 12px;
     padding: 8px 2px;
     min-height: 100px;
   }
   .ingredientes {
     grid-template-columns: 1fr;
     gap: 4px;
     width: 100%;
   }
   .modal-content {
     width: 98vw;
     min-width: unset;
     padding: 12px 4px 8px 4px;
     border-radius: 8px;
   }
 }
 @media (max-width: 600px) {
   .receitas-wrapper, #carrinho-container {
     padding: 6px 2px;
     border-radius: 6px;
   }
   .receita-card {
     width: 98vw;
     max-width: 98vw;
     padding: 10px 2px 8px 2px;
   }
   .modal-content {
     width: 98vw;
     min-width: unset;
     padding: 12px 4px 8px 4px;
   }
   .item-carrinho {
     padding: 8px 2px;
     min-height: 120px;
   }
   .ingredientes {
     grid-template-columns: 1fr;
     gap: 4px;
     width: 100%;
   }
 }

 .item-carrinho .placeholder {
   color: #2566b3;
   opacity: 0.85;
   font-size: 1.15em;
   font-weight: 500;
   text-align: center;
   margin: auto 0;
   padding: 40px 0;
   width: 100%;
   border: 2px dashed #4393ff;
   border-radius: 14px;
   background: #f8fbff;
   min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(67,147,255,0.06);
   transition: background 0.2s, border 0.2s;
 }

</style> `); </script>

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