Widget:VisnoTeste
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('Error al cargar las receitas:', error);
alert('No se pudieron cargar las receitas. Por favor, inténtalo más tarde.');
}
}
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 = `
`;
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;
tempo = formatarTempo(receita.tempo * receita.quantidade);
const ingredientesHtml = receita.ingredientes.map(([nome, qtd]) => {
const totalIngrediente = qtd * receita.quantidade;
return `
<img class="ingrediente-img" src="URL_DA_IMAGEM" alt="${nome}"/>${nome}: ${totalIngrediente}
`;
}).join();
itemDiv.innerHTML = `
<img src="${receita.img}" width="40" height="40" />
${receita.nome}
Level: ${receita.lvl}
Time: ${tempo}
${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`;
}
}
document.addEventListener('DOMContentLoaded', () => {
renderizarSelecao();
});
// CSS document.head.insertAdjacentHTML('beforeend', ` <style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
body, html {
font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}
.receitas-container {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 24px;
justify-content: center;
background: #f6f7fa;
border-radius: 10px;
padding: 10px 0;
}
.nome-item, .subtotal{
user-select: none;
}
.receita-card {
width: 150px; /* aumente a largura */
text-align: center;
border: 1.5px solid #e0e0e0;
border-radius: 12px;
padding: 12px 8px;
background: #fff;
box-shadow: 0 2px 8px rgba(180,180,180,0.10);
transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
user-select: none;
position: relative;
}
.receita-card:hover {
transform: translateY(-4px) scale(1.06);
box-shadow: 0 8px 24px rgba(180,180,180,0.18);
background: #f2f2f2;
}
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(80, 80, 80, 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: #fff;
padding: 22px;
border-radius: 10px;
width: 320px;
position: relative;
box-shadow: 0 4px 16px rgba(120,120,120,0.18);
}
.close-modal {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
background: none;
border: none;
color: #888;
}
.info-btn {
position: absolute;
top: 5px;
right: 5px;
background: #e0e0e0;
color: #333;
border: none;
border-radius: 50%;
width: 22px;
height: 22px;
font-size: 13px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.2s;
}
.info-btn:hover {
background: #bdbdbd;
}
.receita-nome {
font-weight: bold;
margin: 4px 0;
min-height: 3em;
max-height: 3em;
line-height: 1.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
align-items: center;
justify-content: center;
text-align: center;
font-size: 80%; /* pode aumentar ou diminuir conforme preferir */
color: #222;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.nome-item{
font-weight: bold;
color: #222;
}
.ingredientes{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 5px;
margin-bottom: 10px;
}
.ingredientes div {
background-color: #f3f3f3;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 5px 7px 5px 32px; /* espaço à esquerda para a imagem */
font-size: 13px;
text-align: left;
color: #444;
white-space: normal;
overflow: hidden;
text-overflow: unset;
overflow-wrap: break-word;
align-content: center;
position: relative;
min-height: 32px;
display: flex;
align-items: center;
}
/* Espaço reservado para a imagem do ingrediente */
.ingrediente-img {
width: 24px; height: 24px; object-fit: contain; margin-right: 6px; margin-left: -24px; flex-shrink: 0; background: transparent; display: inline-block;
}
.receita-preco {
margin-bottom: 2px;
color: #555;
}
.item-carrinho {
display: flex;
gap: 12px;
padding: 12px;
border: 1.5px solid #e0e0e0;
border-radius: 12px;
margin-bottom: 12px;
width: 44.5%;
margin-inline: 1%;
flex-direction: column;
align-items: center;
background: #fafbfc;
box-shadow: 0 2px 8px rgba(180,180,180,0.08);
height: fit-content;
min-height: 97%;
transition: box-shadow 0.18s, background 0.18s;
}
.item-carrinho:hover {
background: #f2f2f2;
box-shadow: 0 8px 24px rgba(180,180,180,0.13);
}
.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: 44px;
text-align: center;
padding: 2px;
border: 1px solid #bbb;
border-radius: 4px;
background: #f7f7f7;
color: #333;
}
.controle-quantidade button {
width: 24px;
height: 24px;
background: #e0e0e0;
border: none;
border-radius: 4px;
color: #222;
cursor: pointer;
transition: background 0.2s;
}
.controle-quantidade button:hover {
background: #bdbdbd;
}
.btn-100 {
width: auto !important;
padding: 0 4px;
margin-left: 4px;
font-size: 12px;
background: #d1d5db !important;
color: #222;
}
.remover-item {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #888;
transition: color 0.2s;
}
.remover-item:hover {
color: #d32f2f;
}
.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: #e8f5e9;
}
.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: 1.5px solid #e0e0e0;
padding: 10px;
border-radius: 12px;
background: #fafbfc;
}
.full-receitas {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: #f6f7fa;
}
@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>