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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Limpou toda a página)
Etiqueta: anulando
Linha 1: Linha 1:
<div id="widget-cozinha">
  <header>
    <h3>Carrinho de Compras</h3>
  </header>
 
  <section id="carrinho">
    <div id="carrinho-container"></div>
    <div id="carrinho-total" class="carrinho-total"></div>
   
    <div class="acoes">
      <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button>
      <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>
    </div>
   
    <div id="resumo-total" class="resumo-total"></div>
  </section>
 
  <section id="lista-receitas" class="receitas-container">
    <!-- Os cards de receita serão inseridos aqui via JavaScript -->
  </section>
</div>


<style>
  /* CSS centralizado para a widget */
  #widget-cozinha {
    font-family: sans-serif;
    background-color: #f7f7f7;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 1000px;
    margin: auto;
  }
 
  #widget-cozinha header h3 {
    margin-bottom: 10px;
    color: #333;
    text-align: center;
  }
 
  .acoes {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
 
  .acao-carrinho {
    padding: 8px 16px;
    background-color: #4393ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
 
  .acao-carrinho:hover {
    background-color: #3275c7;
  }
 
  .receitas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
  }
 
  /* Demais estilos para os cards e modais podem ser mantidos com ajustes para retirar emojis */
  .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;
    position: relative;
  }
 
  .remover-item {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
  }
 
  /* Resto do CSS conforme a necessidade */
</style>
<script>
  // Variáveis globais
  let receitas = {};
  const carrinho = {};
  document.addEventListener('DOMContentLoaded', function() {
    initWidget();
   
    document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);
    document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);
  });
 
  async function initWidget() {
    try {
      const response = await fetch('https://wiki.gla.com.br/index.php?title=Receitas.json&action=raw');
      const data = await response.json();
      receitas = processarReceitas(data);
      renderizarReceitas();
    } catch (error) {
      console.error('Erro ao carregar receitas:', error);
      alert('Não foi possível carregar as receitas. Tente novamente mais tarde.');
    }
  }
 
  function processarReceitas(data) {
    return {
      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
      }))
    };
  }
 
  function renderizarReceitas() {
    renderizarSecao('baratie');
    renderizarSecao('alianca');
  }
 
  function renderizarSecao(secao) {
    const container = document.getElementById(`receitas-${secao}`) || document.getElementById('lista-receitas');
    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()}</div>
        <button onclick="adicionarAoCarrinho('${receita.id}')">Adicionar</button>
      `;
      container.appendChild(card);
    });
  }
 
  // Outras funções de gerenciamento do carrinho, modal e cálculos seguem de forma similar, apenas removendo ou substituindo os emojis.
  function adicionarAoCarrinho(id) {
    const 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) {
      const receita = receitas[secao].find(r => r.id === id);
      if (receita) return receita;
    }
    return null;
  }
 
  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>
          </div>
        </div>
        <div class="subtotal">${subtotal.toLocaleString()}</div>
        <button class="remover-item" onclick="removerDoCarrinho('${id}')">Remover</button>
      `;
      container.appendChild(itemDiv);
    }
    document.getElementById('carrinho-total').innerHTML = total > 0
      ? `Total: ${total.toLocaleString()}`
      : '';
  }
 
  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 removerDoCarrinho(id) {
    delete carrinho[id];
    renderizarCarrinho();
  }
 
  function esvaziarCarrinho() {
    Object.keys(carrinho).forEach(id => delete carrinho[id]);
    renderizarCarrinho();
  }
 
  function mostrarTotal() {
    // Implementação similar para calcular e exibir os ingredientes totais necessários
    // usando um layout organizado na seção "resumo-total"
  }
 
  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, '<br>').replace(/Tempo de recarga/g, '<br><strong>Tempo de recarga</strong>');
   
    const modalHTML = `
      <div class="modal-overlay active" onclick="fecharModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
          <button class="close-modal" onclick="fecharModal(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' && fecharModal(e));
  }
 
  function fecharModal(event) {
    event.preventDefault();
    const modal = document.querySelector('.modal-overlay');
    if (modal) {
      modal.classList.remove('active');
      setTimeout(() => modal.remove(), 300);
    }
  }
</script>

Edição das 23h42min de 9 de abril de 2025

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