|
|
| (523 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> |
| // Carrinho
| | .language-switch { |
| const carrinho = {};
| | display: flex; |
| let receitas = {};
| | gap: 6px; |
| | | margin: 8px 0; |
| // Función para cargar las recetas desde el 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();
| |
|
| |
| // Transformar la estructura del JSON al formato esperado por el código
| |
| receitas = {
| |
| baratie: Object.entries(data.baratie).map(([id, item]) => ({
| |
| id,
| |
| nome: item.nome,
| |
| preco: item.cost,
| |
| img: item.thumb,
| |
| ingredientes: item.ingredients || [] // guardar ingredientes originales
| |
| })),
| |
| alianca: Object.entries(data.alianca).map(([id, item]) => ({
| |
| id,
| |
| nome: item.nome,
| |
| preco: item.cost,
| |
| img: item.thumb,
| |
| ingredientes: item.ingredients || []
| |
| }))
| |
| };
| |
|
| |
| 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 { |
| // Renderizar receitas
| | border: 1px solid #ccc; |
| function renderizarReceitas() {
| | border-radius: 6px; |
| renderizarSecao('baratie'); | | cursor: pointer; |
| renderizarSecao('alianca'); | | 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 = `
| |
| <img src="${receita.img}" width="64" height="64" />
| |
| <div class="receita-nome">${receita.nome}</div>
| |
| <div class="receita-preco">${receita.preco.toLocaleString()} Berry</div>
| |
| <button onclick="adicionarAoCarrinho('${receita.id}')">➕</button>
| |
| `;
| |
| container.appendChild(card);
| |
| });
| |
| } | | } |
| | | .language-switch img.active { |
| // Funções do carrinho
| | border-color: #000; |
| function adicionarAoCarrinho(id) {
| |
| const receita = encontrarReceita(id);
| |
| if (!receita) return;
| |
| | |
| if (!carrinho[id]) {
| |
| carrinho[id] = { ...receita, quantidade: 1 };
| |
| } else {
| |
| carrinho[id].quantidade++;
| |
| } | |
| renderizarCarrinho();
| |
| } | | } |
| | </style> |
|
| |
|
| function encontrarReceita(id) { | | <script> |
| for (const secao in receitas) { | | (function () { |
| const receita = receitas[secao].find(r => r.id === id);
| | let currentLang = 'pt'; // idioma por defecto |
| if (receita) return receita;
| |
| }
| |
| return null;
| |
| }
| |
|
| |
|
| function alterarQuantidade(id, alteracao) {
| | const langSwitch = document.querySelector('.language-switch'); |
| if (alteracao === 100) { | | if (langSwitch) { |
| carrinho[id].quantidade = 100; | | langSwitch.querySelectorAll('a[data-lang]').forEach(btn => { |
| } else {
| | btn.addEventListener('click', () => { |
| carrinho[id].quantidade += alteracao;
| | currentLang = btn.dataset.lang; |
| }
| | langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active')); |
| | btn.querySelector('img').classList.add('active'); |
|
| |
|
| if (carrinho[id].quantidade <= 0) {
| | const active = document.querySelector('.skill-icon.active'); |
| delete carrinho[id];
| | if (active) active.click(); |
| }
| | }); |
| renderizarCarrinho();
| | }); |
| } | |
|
| |
|
| function atualizarQuantidadeManual(id, event) {
| | // Activar la bandera por defecto |
| const novoValor = parseInt(event.target.value);
| | const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img'); |
| if (!isNaN(novoValor) && novoValor >= 0) {
| | if (defaultBtn) defaultBtn.classList.add('active'); |
| 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();
| |
| let detalhesContainer = document.getElementById('detalhes-carrinho');
| |
| const resumoTotal = document.getElementById('resumo-total');
| |
| | |
| if (!detalhesContainer) {
| |
| detalhesContainer = document.createElement('div');
| |
| detalhesContainer.id = 'detalhes-carrinho';
| |
| 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 => { |
| | el.addEventListener('click', () => { |
| | const name = el.dataset.nome || ''; |
| | const rawDesc = el.dataset.desc || ''; |
| | let descText = ''; |
|
| |
|
| for (const id in carrinho) {
| | try { |
| const item = carrinho[id];
| | const obj = JSON.parse(rawDesc); |
| | descText = obj[currentLang] || obj['pt'] || ''; |
| | } catch (e) { |
| | descText = rawDesc; // fallback si no es un JSON |
| | } |
|
| |
|
| // Usar ingredientes directamente del objeto `item`, que ya tiene `ingredientes`
| | const attrs = el.dataset.atr || ''; |
| if (!item.ingredientes || item.ingredientes.length === 0) continue;
| | const descBox = document.querySelector('.desc-box'); |
| | | if (descBox) { |
| const ingredientesMultiplicados = {};
| | descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`; |
| item.ingredientes.forEach(([nome, quantidade]) => {
| | } |
| if (!ingredientesMultiplicados[nome]) ingredientesMultiplicados[nome] = 0;
| |
| ingredientesMultiplicados[nome] += quantidade * item.quantidade; | |
| }); | | }); |
| | | }); |
| const receitaDiv = document.createElement('div');
| | })(); |
| receitaDiv.className = 'detalhe-receita';
| |
| receitaDiv.style.marginBottom = '20px';
| |
| receitaDiv.style.border = '1px solid #ccc';
| |
| receitaDiv.style.padding = '10px';
| |
| receitaDiv.style.borderRadius = '8px';
| |
| receitaDiv.style.backgroundColor = '#fff';
| |
| | |
| 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()} Berry</div>
| |
| `;
| |
| | |
| detalhesContainer.appendChild(receitaDiv);
| |
| }
| |
| | |
| // Total geral
| |
| const totalFinal = document.createElement('div');
| |
| totalFinal.style.fontWeight = 'bold';
| |
| totalFinal.style.marginTop = '10px';
| |
| totalFinal.innerText = `💰 Total: ${total.toLocaleString()} Berry`;
| |
| | |
| detalhesContainer.appendChild(totalFinal); | |
| } | |
| | |
| 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()} 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) {
| |
| delete carrinho[id];
| |
| renderizarCarrinho();
| |
| }
| |
| | |
| // Event listeners
| |
| 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;
| |
| }
| |
|
| |
| .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;
| |
| }
| |
| .ingredientes-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
| |
| 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: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
|
| |
| .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%;
| |
| }
| |
| | |
| .detalhe-receita ul {
| |
| padding-left: 20px;
| |
| }
| |
| | |
| .detalhe-receita li {
| |
| margin-bottom: 3px;
| |
| }
| |
| | |
| .detalhe-receita {
| |
| width: 16%;
| |
| justify-items: anchor-center;
| |
| }
| |
| </style>
| |
| `);
| |
| | |
| // Cargar las recetas al iniciar
| |
| document.addEventListener('DOMContentLoaded', cargarReceitas);
| |
| </script> | | </script> |
