|
|
| (452 revisões intermediárias por 2 usuários não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| <div class="full-receitas"> | | <div class="language-switch"> |
| <div class="receitas-wrapper">
| | <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a> |
| <div style="font-size: 180%; font-weight: bold; border-bottom: 1px solid #aaa; margin-bottom: 0.5em;">» <span style="color:#4393ff">Receitas Aliança</span></div>
| | <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a> |
| <div id="receitas-alianca" class="receitas-container"></div>
| | <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> |
|
| | <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a> |
| <div style="font-size: 180%; font-weight: bold; border-bottom: 1px solid #aaa; margin-bottom: 0.5em;">» <span style="color:#4393ff">Receitas Baratie</span></div>
| |
| <div id="receitas-baratie" class="receitas-container"></div>
| |
| </div>
| |
| {{#widget:Cozinha}}
| |
| <div id="carrinho-container"></div>
| |
| </div> | | </div> |
|
| |
|
| <script> | | <style> |
| let receitasSelecionadas = {
| | .language-switch { |
| 0: null,
| | display: flex; |
| 1: null
| | gap: 6px; |
| };
| | margin: 8px 0; |
| let receitas = {};
| | justify-content: center; |
| const berryGif = "https://wiki.gla.com.br/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();
| |
| } | | } |
| | | .language-switch img { |
| | | border: 1px solid #ccc; |
| // Função para carregar as receitas a partir do JSON
| | border-radius: 6px; |
| async function cargarReceitas() {
| | cursor: pointer; |
| try { | | transition: transform 0.2s ease, border-color 0.2s ease; |
| 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.');
| |
| }
| |
| } | | } |
| | | .language-switch img:hover { |
| function renderizarReceitas() {
| | transform: scale(1.1); |
| renderizarSecao('baratie'); | | border-color: #333; |
| renderizarSecao('alianca'); | |
| } | | } |
| | | .language-switch img.active { |
| function renderizarSecao(secao) {
| | border-color: #000; |
| 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" />
| |
| <div class="receita-nome">${receita.nome}</div>
| |
| <div class="receita-preco">${receita.preco.toLocaleString()} <img src="${berryGif}" alt="Berry" width="25" height="25" style="transform: translateY(-1px);"/></div>
| |
| <button class="add-to-cart-btn" onclick="selecionarReceita('${receita.id}')">Selecionar</button>
| |
| `;
| |
| container.appendChild(card);
| |
| });
| |
| } | | } |
| | </style> |
|
| |
|
| function mostrarModalReceita(button) { | | <script> |
| const descricao = decodeURIComponent(button.getAttribute('data-descricao')); | | (function () { |
| const lvl = button.getAttribute('data-lvl');
| | let currentLang = 'pt'; // idioma por defecto |
| 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 = ` | | const langSwitch = document.querySelector('.language-switch'); |
| <div class="modal-overlay active" onclick="cerrarModal(event)"> | | if (langSwitch) { |
| <div class="modal-content" onclick="event.stopPropagation()"> | | langSwitch.querySelectorAll('a[data-lang]').forEach(btn => { |
| <button class="close-modal" onclick="cerrarModal(event)">×</button>
| | btn.addEventListener('click', () => { |
| <p><strong>Nível:</strong> ${lvl}</p>
| | currentLang = btn.dataset.lang; |
| <p><strong>Tempo de preparo:</strong> ${tempo} min</p> | | langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active')); |
| <p><strong>Descrição:</strong><br>${descricaoFormatada}</p> | | btn.querySelector('img').classList.add('active'); |
| </div>
| |
| </div>
| |
| `;
| |
|
| |
| document.body.insertAdjacentHTML('beforeend', modalHTML);
| |
| document.addEventListener('keydown', (e) => e.key === 'Escape' && cerrarModal(e));
| |
| }
| |
|
| |
|
| function cerrarModal(event) {
| | const active = document.querySelector('.skill-icon.active'); |
| event.preventDefault();
| | if (active) active.click(); |
| const modal = document.querySelector('.modal-overlay');
| | }); |
| if (modal) {
| | }); |
| modal.classList.remove('active');
| |
| setTimeout(() => modal.remove(), 300);
| |
| }
| |
| } | |
|
| |
|
| function encontrarReceita(id) {
| | // Activar la bandera por defecto |
| for (const secao in receitas) {
| | const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img'); |
| const receita = receitas[secao].find(r => r.id === id); | | if (defaultBtn) defaultBtn.classList.add('active'); |
| if (receita) return receita; | |
| } | | } |
| return null;
| |
| }
| |
|
| |
|
| function renderizarSelecao() {
| | const oldClicks = document.querySelectorAll('.skill-icon'); |
| const container = document.getElementById('carrinho-container'); | | oldClicks.forEach(el => { |
| container.innerHTML = ''; | | el.addEventListener('click', () => { |
| | const name = el.dataset.nome || ''; |
| | const rawDesc = el.dataset.desc || ''; |
| | let descText = ''; |
|
| |
|
| let totalSlots = 2;
| | try { |
| | const obj = JSON.parse(rawDesc); |
| | descText = obj[currentLang] || obj['pt'] || ''; |
| | } catch (e) { |
| | descText = rawDesc; // fallback si no es un JSON |
| | } |
|
| |
|
| for (let i = 0; i < totalSlots; i++) {
| | const attrs = el.dataset.atr || ''; |
| const receita = receitasSelecionadas[i];
| | const descBox = document.querySelector('.desc-box'); |
| | | if (descBox) { |
| const itemDiv = document.createElement('div');
| | descBox.innerHTML = `<div class=" skill- title">< h3>${ name}</ h3></div>${ renderAttributes( attrs)}<div class=" desc">${ descText}</div>`; |
| itemDiv.className = 'item-carrinho';
| | } |
| | | }); |
| if (receita) {
| | }); |
| const subtotal = receita.preco * receita.quantidade; | | })(); |
| tempo = formatarTempo(receita.tempo);
| |
| | |
| const ingredientesHtml = receita.ingredientes.map(([nome, qtd]) => { | |
| const totalIngrediente = qtd * receita.quantidade; | |
| return `<div>${nome}: ${totalIngrediente}</div>`;
| |
| }).join('');
| |
| | |
| itemDiv.innerHTML = `
| |
| <img src="${receita.img}" width="40" height="40" />
| |
| <div class=" info- carrinho"> | |
| <div class="nome-item">${receita.nome}</div>
| |
| <div class="atributes">
| |
| <div class="">Level: ${receita.lvl}</div>
| |
| <div class="">Time: ${tempo}</div>
| |
| <p class="texto-centrado">${receita.descricao}</p>
| |
| </div>
| |
| <div class="controle-quantidade">
| |
| <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>
| |
| </div>
| |
| <div class="ingredientes">
| |
| ${ingredientesHtml}
| |
| </div>
| |
| </div>
| |
| <div class=" subtotal">${ subtotal.toLocaleString()} <img src="${berryGif} " alt="Berry" width="25" height="25" style="transform: translateY(-1px);" /></div> | |
| <button class="remover-item" onclick="removerReceitaSelecionada(${i})">🗑️</button>
| |
| `;
| |
| } else {
| |
| itemDiv.innerHTML = `<div class="placeholder">Selecione uma receita</div>`; | |
| }
| |
| | |
| 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`;
| |
| }
| |
| }
| |
| | |
| document.addEventListener('DOMContentLoaded', () => {
| |
| renderizarSelecao();
| |
| });
| |
| | |
| // CSS
| |
| document.head.insertAdjacentHTML('beforeend', `
| |
| <style>
| |
| .receitas-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 16px;
| |
| margin-bottom: 24px;
| |
| justify-content: center;
| |
| }
| |
| .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;
| |
| line-height: 1.5em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-align: center;
| |
| font-size: 88%;
| |
| }
| |
| .nome-item{
| |
| font-weight: bold;
| |
| }
| |
| | |
| .ingredientes{
| |
| display: grid;
| |
| grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas */
| |
| gap: 8px;
| |
| margin-top: 5px;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .ingredientes div {
| |
| 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;
| |
| }
| |
| | |
| .receita-preco {
| |
| margin-bottom: 2px;
| |
| }
| |
|
| |
| .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;
| |
| height: fit-content;
| |
| min-height: 97%;
| |
| }
| |
|
| |
| .info-carrinho {
| |
| flex: 1;
| |
| justify-items: center;
| |
| }
| |
|
| |
| .controle-quantidade {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 4px;
| |
| margin-top: 2%;
| |
| margin-bottom: 5%;
| |
| }
| |
|
| |
| .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;
| |
| }
| |
|
| |
| .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: nowrap;
| |
| justify-content: center;
| |
| width: 69%;
| |
| }
| |
| | |
| .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: 32.5%;
| |
| position: static;
| |
| max-height: 620px;
| |
| overflow-y: auto;
| |
| overflow-x: hidden;
| |
| border: 1px solid #ccc;
| |
| padding: 10px;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .full-receitas {
| |
| display: flex;
| |
| flex-direction: row;
| |
| flex-wrap: nowrap;
| |
| }
| |
| | |
| @media screen and (max-width: 1366px) {
| |
| .item-carrinho {
| |
| width: 45%;
| |
| }
| |
| .receitas-wrapper{
| |
| display: flex;
| |
| flex-direction: column;
| |
| width: 35.5vw;
| |
| }
| |
| }
| |
| .atributes {
| |
| display: grid;
| |
| grid-template-columns: repeat(2, 1fr);
| |
| gap: 8px;
| |
| margin-top: 5px;
| |
| margin-bottom: 10px;
| |
| width: 80%;
| |
| justify-items: center;
| |
| }
| |
| .texto-centrado {
| |
| text-align: center;
| |
| grid-column: 1 / -1;
| |
| }
| |
| | |
| @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> | | </script> |
