|
|
| (530 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="loading" style="padding: 10px; display: none;">Carregando receitas...</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="error" style="color: red; padding: 10px; display: none;"></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> |
| <!-- Contenedores para las recetas --> | | <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a> |
| <div class="receitas-container"> | |
| <h4>Baratie</h4> | |
| <div id="receitas-baratia" class="receitas-list"></div>
| |
| </div> | | </div> |
|
| |
|
| <div class="receitas-container"> | | <style> |
| <h4>Aliança</h4>
| | .language-switch { |
| <div id="receitas-alianca" class="receitas-list"></div> | | display: flex; |
| </div>
| | gap: 6px; |
| | | margin: 8px 0; |
| <div id="carrinho-container"></div>
| | justify-content: center; |
| <div id="carrinho-total" style="font-weight: bold; margin-top: 10px;"></div>
| |
| | |
| <div style="margin-top: 20px; display: flex; gap: 10px;">
| |
| <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button> | |
| <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>
| |
| </div>
| |
| | |
| <script>
| |
| // Variables globales
| |
| let receitas = {};
| |
| const carrinho = {};
| |
| | |
| // Elementos del DOM
| |
| const loadingEl = document.getElementById('loading');
| |
| const errorEl = document.getElementById('error');
| |
| | |
| // Función para cargar las recetas desde el JSON externo
| |
| async function carregarReceitas() {
| |
| loadingEl.style.display = 'block'; | |
| errorEl.style.display = 'none';
| |
|
| |
| try {
| |
| const response = await fetch('https://wiki.gla.com.br/index.php?title=Receitas.json&action=raw', {
| |
| cache: 'no-cache'
| |
| });
| |
|
| |
| // Verificar si la respuesta es válida
| |
| if (!response.ok) {
| |
| throw new Error(`Erro HTTP: ${response.status}`);
| |
| }
| |
|
| |
| const contentType = response.headers.get('content-type');
| |
| if (!contentType || !contentType.includes('application/json')) {
| |
| throw new Error('A resposta não é um JSON válido');
| |
| }
| |
|
| |
| receitas = await response.json();
| |
| renderizarReceitas();
| |
| } catch (err) {
| |
| console.error('Erro ao cargar receitas:', err);
| |
| errorEl.textContent = `Não foi possível carregar as receitas. (${err.message})`;
| |
| errorEl.style.display = 'block';
| |
|
| |
| // Datos de ejemplo como fallback
| |
| receitas = {
| |
| baratie: {
| |
| b1: { nome: "Carne", thumb: "https://via.placeholder.com/64", cost: 5000 },
| |
| b2: { nome: "Peixe", thumb: "https://via.placeholder.com/64", cost: 5000 }
| |
| },
| |
| alianca: {
| |
| a1: { nome: "Bife e Ovo", thumb: "https://via.placeholder.com/64", cost: 720 },
| |
| a2: { nome: "Medalhão", thumb: "https://via.placeholder.com/64", cost: 850 }
| |
| }
| |
| };
| |
| renderizarReceitas();
| |
| } finally {
| |
| loadingEl.style.display = 'none';
| |
| }
| |
| } | | } |
| | | .language-switch img { |
| // Renderizar todas las recetas
| | 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 { |
| // Renderizar una sección específica
| | transform: scale(1.1); |
| function renderizarSecao(secao) {
| | border-color: #333; |
| const container = document.getElementById(`receitas-${secao}`);
| |
| if (!container || !receitas[secao]) return; | |
|
| |
| container.innerHTML = '';
| |
| | |
| for (const [id, receita] of Object.entries(receitas[secao])) {
| |
| const card = document.createElement('div');
| |
| card.className = 'receita-card';
| |
| card.innerHTML = `
| |
| <img src="${receita.thumb}" width="64" height="64" />
| |
| <div class="receita-nome">${receita.nome}</div>
| |
| <div class="receita-preco">${receita.cost.toLocaleString()} Berry</div>
| |
| <button onclick="adicionarAoCarrinho('${id}')">➕</button>
| |
| `;
| |
| container.appendChild(card);
| |
| }
| |
| } | | } |
| | | .language-switch img.active { |
| // Funciones del carrito (se mantienen iguales con pequeñas adaptaciones)
| | border-color: #000; |
| function adicionarAoCarrinho(id) {
| |
| let receita = encontrarReceita(id);
| |
| if (!receita) return;
| |
| | |
| if (!carrinho[id]) {
| |
| carrinho[id] = {
| |
| ...receita,
| |
| quantidade: 1,
| |
| preco: receita.cost, // Mantener compatibilidad
| |
| img: receita.thumb // Mantener compatibilidad
| |
| };
| |
| } else {
| |
| carrinho[id].quantidade++;
| |
| } | |
| renderizarCarrinho();
| |
| } | | } |
| | </style> |
|
| |
|
| function encontrarReceita(id) {
| | <script> |
| for (const secao in receitas) {
| | (function () { |
| if (receitas[secao][id]) {
| | let currentLang = 'pt'; // idioma por defecto |
| return {
| |
| ...receitas[secao][id],
| |
| id: id,
| |
| preco: receitas[secao][id].cost,
| |
| img: receitas[secao][id].thumb
| |
| };
| |
| }
| |
| } | |
| 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) {
| |
| delete carrinho[id];
| |
| }
| |
| renderizarCarrinho();
| |
| }
| |
|
| |
|
| function atualizarQuantidadeManual(id, event) {
| | const active = document.querySelector('.skill-icon.active'); |
| const novoValor = parseInt(event.target.value);
| | if (active) active.click(); |
| if (!isNaN(novoValor) && novoValor >= 0) {
| | }); |
| if (novoValor === 0) {
| | }); |
| delete carrinho[id]; | |
| } else {
| |
| carrinho[id].quantidade = novoValor;
| |
| } | |
| renderizarCarrinho();
| |
| }
| |
| }
| |
|
| |
|
| function esvaziarCarrinho() {
| | // Activar la bandera por defecto |
| for (const id in carrinho) {
| | const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img'); |
| delete carrinho[id];
| | if (defaultBtn) defaultBtn.classList.add('active'); |
| } | | } |
| renderizarCarrinho();
| |
| }
| |
|
| |
|
| function mostrarTotal() {
| | const oldClicks = document.querySelectorAll('.skill-icon'); |
| const total = calcularTotal(); | | oldClicks.forEach(el => { |
| alert(`Total atual: ${total.toLocaleString()} Berry`); | | el.addEventListener('click', () => { |
| }
| | const name = el.dataset.nome || ''; |
| | const rawDesc = el.dataset.desc || ''; |
| | let descText = ''; |
|
| |
|
| function calcularTotal() {
| | try { |
| return Object.values(carrinho).reduce((sum, item) => sum + (item.preco * item.quantidade), 0);
| | const obj = JSON.parse(rawDesc); |
| } | | descText = obj[currentLang] || obj['pt'] || ''; |
| | } catch (e) { |
| | descText = rawDesc; // fallback si no es un JSON |
| | } |
|
| |
|
| function renderizarCarrinho() {
| | const attrs = el.dataset.atr || ''; |
| const container = document.getElementById('carrinho-container');
| | const descBox = document.querySelector('.desc-box'); |
| container.innerHTML = '';
| | if (descBox) { |
| let total = 0;
| | descBox.innerHTML = `<div class=" skill- title">< h3>${ name}</ h3>< /div>${ renderAttributes( attrs)}<div class=" desc">${ descText}</div>`; |
| | | } |
| 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);
| |
| | |
| // Estilos CSS
| |
| document.head.insertAdjacentHTML('beforeend', `
| |
| <style>
| |
| .receitas-container {
| |
| margin-bottom: 30px;
| |
| padding: 15px;
| |
| background: #f5f5f5;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| .receitas-list {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 15px;
| |
| } | |
|
| |
| .receita-card {
| |
| width: 150px;
| |
| text-align: center;
| |
| border: 1px solid #ddd;
| |
| border-radius: 8px;
| |
| padding: 10px;
| |
| background: white;
| |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1);
| |
| }
| |
|
| |
| .receita-card img {
| |
| border-radius: 4px;
| |
| margin-bottom: 8px;
| |
| }
| |
|
| |
| .receita-nome {
| |
| font-weight: bold;
| |
| margin: 5px 0;
| |
| }
| |
|
| |
| .receita-preco {
| |
| color: #2a6496;
| |
| font-weight: bold;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .item-carrinho {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| padding: 10px;
| |
| border: 1px solid #ddd;
| |
| border-radius: 8px;
| |
| margin-bottom: 10px;
| |
| background: white;
| |
| }
| |
|
| |
| .info-carrinho {
| |
| flex: 1;
| |
| }
| |
|
| |
| .controle-quantidade {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 5px;
| |
| margin-top: 5px;
| |
| }
| |
|
| |
| .controle-quantidade input {
| |
| width: 50px;
| |
| text-align: center;
| |
| padding: 3px;
| |
| }
| |
|
| |
| .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%;
| |
| }
| |
| </style>
| |
| `);
| |
| | |
| // Inicialización
| |
| document.addEventListener('DOMContentLoaded', carregarReceitas);
| |
| </script> | | </script> |
<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>
