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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="full-receitas">
<style>
<div class="receitas-wrapper">
.char-box {
   <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>
   border: 2px solid #444;
   <div id="receitas-alianca" class="receitas-container"></div>
  border-radius: 12px;
 
   padding: 20px;
   <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>
   background: #1e1e1e;
   <div id="receitas-baratie" class="receitas-container"></div>
  color: white;
</div>
   font-family: 'Segoe UI', sans-serif;
<div id="carrinho-container"></div>
   max-width: 900px;
</div>
   margin: auto;
 
 
<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();
}
}


 
.char-header {
// Função para carregar as receitas a partir do JSON
   display: flex;
async function cargarReceitas() {
  align-items: center;
   try {
  gap: 20px;
    const response = await fetch('https://wiki.gla.com.br/index.php?title=Receitas.json&action=raw');
  border-bottom: 2px solid #555;
    const data = await response.json();
   padding-bottom: 10px;
   
    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() {
.char-header img {
   renderizarSecao('baratie');
   width: 120px;
   renderizarSecao('alianca');
   border-radius: 10px;
  border: 2px solid #888;
}
}


function renderizarSecao(secao) {
.char-info {
  const container = document.getElementById(`receitas-${secao}`);
   display: flex;
   if (!container) return;
   flex-direction: column;
 
   gap: 5px;
   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);
   });
}
}


function mostrarModalReceita(button) {
.char-info .name {
  const descricao = decodeURIComponent(button.getAttribute('data-descricao'));
   font-size: 28px;
  const lvl = button.getAttribute('data-lvl');
   font-weight: bold;
   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="cerrarModal(event)">
      <div class="modal-content" onclick="event.stopPropagation()">
        <button class="close-modal" onclick="cerrarModal(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' && cerrarModal(e));
}
}


function cerrarModal(event) {
.char-info .tier {
   event.preventDefault();
   font-size: 16px;
  const modal = document.querySelector('.modal-overlay');
   color: #bbb;
   if (modal) {
    modal.classList.remove('active');
    setTimeout(() => modal.remove(), 300);
  }
}
}


function encontrarReceita(id) {
.tabs {
   for (const secao in receitas) {
   margin-top: 20px;
    const receita = receitas[secao].find(r => r.id === id);
  display: flex;
    if (receita) return receita;
   gap: 10px;
   }
  return null;
}
}


function renderizarSelecao() {
.tab-button {
   const container = document.getElementById('carrinho-container');
   padding: 8px 16px;
   container.innerHTML = '';
   background: #333;
 
   color: white;
   let totalSlots = 2;
   border: none;
 
  cursor: pointer;
   for (let i = 0; i < totalSlots; i++) {
  border-radius: 6px;
    const receita = receitasSelecionadas[i];
  transition: background 0.3s;
 
    const itemDiv = document.createElement('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) {
.tab-button:hover {
   const receita = receitasSelecionadas[index];
   background: #555;
  if (!receita) return;
  receita.quantidade += alteracao;
  if (receita.quantidade < 1) receita.quantidade = 1;
  renderizarSelecao();
}
}


function atualizarQuantidadeManualSelecionada(index, event) {
.tab-button.active {
   const valor = parseInt(event.target.value);
   background: #007bff;
   if (valor && valor >= 1) {
   font-weight: bold;
    receitasSelecionadas[index].quantidade = valor;
    renderizarSelecao();
  }
}
}


function definir100Selecionada(index) {
.tab-content {
   if (receitasSelecionadas[index]) {
   margin-top: 20px;
    receitasSelecionadas[index].quantidade = 100;
    renderizarSelecao();
  }
}
}


function removerReceitaSelecionada(index) {
.hidden {
   receitasSelecionadas[index] = null;
   display: none;
  renderizarSelecao();
}
}
</style>


function formatarTempo(minutosDecimal) {
<div class="char-box">
  const minutosInt = Math.floor(minutosDecimal);
  <div class="char-header">
   const segundos = Math.round((minutosDecimal % 1) * 60);
    <img src="{{{imagen}}}" alt="Arte del personaje">
    <div class="char-info">
      <div class="name">{{{nombre}}}</div>
      <div class="tier">Tier: {{{tier}}}</div>
      <div class="clase">Clase: {{{clase}}}</div>
    </div>
   </div>


   if (minutosInt < 1) {
   <div class="tabs">
     return `${segundos}seg`;
     <button class="tab-button active" data-tab="skills">Habilidades</button>
  } else if (segundos === 0) {
     <button class="tab-button" data-tab="skins">Skins</button>
     return `${minutosInt}min`;
   </div>
   } else {
    return `${minutosInt}min ${segundos.toString().padStart(2, '0')}seg`;
  }
}


document.addEventListener('DOMContentLoaded', () => {
  <div class="tab-content" id="skills">
   renderizarSelecao();
    {{Persona}}
});
   </div>


// CSS
  <div class="tab-content hidden" id="skins">
document.head.insertAdjacentHTML('beforeend', `
    {{Skins}}
<style>
   </div>
  .receitas-container {
</div>
    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 {
<script>
    opacity: 1;
(function() {
    visibility: visible;
   const buttons = document.querySelectorAll(".tab-button");
  }
  const contents = document.querySelectorAll(".tab-content");


   .modal-content {
   buttons.forEach(btn => {
     background-color: white;
     btn.addEventListener("click", () => {
    padding: 20px;
      buttons.forEach(b => b.classList.remove("active"));
    border-radius: 8px;
      contents.forEach(c => c.classList.add("hidden"));
    width: 300px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }


  .close-modal {
      btn.classList.add("active");
    position: absolute;
      const tabId = btn.getAttribute("data-tab");
    top: 10px;
      document.getElementById(tabId).classList.remove("hidden");
    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>

Edição das 16h46min de 2 de maio de 2025

<style> .char-box { 

 border: 2px solid #444;
 border-radius: 12px;
 padding: 20px;
 background: #1e1e1e;
 color: white;
 font-family: 'Segoe UI', sans-serif;
 max-width: 900px;
 margin: auto;

}

.char-header { 

 display: flex;
 align-items: center;
 gap: 20px;
 border-bottom: 2px solid #555;
 padding-bottom: 10px;

}

.char-header img { 

 width: 120px;
 border-radius: 10px;
 border: 2px solid #888;

}

.char-info { 

 display: flex;
 flex-direction: column;
 gap: 5px;

}

.char-info .name { 

 font-size: 28px;
 font-weight: bold;

}

.char-info .tier { 

 font-size: 16px;
 color: #bbb;

}

.tabs { 

 margin-top: 20px;
 display: flex;
 gap: 10px;

}

.tab-button { 

 padding: 8px 16px;
 background: #333;
 color: white;
 border: none;
 cursor: pointer;
 border-radius: 6px;
 transition: background 0.3s;

}

.tab-button:hover { 

 background: #555;

}

.tab-button.active { 

 background: #007bff;
 font-weight: bold;

}

.tab-content { 

 margin-top: 20px;

}

.hidden { 

 display: none;

} </style> 

   <img src="{{{imagen}}}" alt="Arte del personaje">
{{{nombre}}}
Tier: {{{tier}}}
Clase: {{{clase}}}
   <button class="tab-button active" data-tab="skills">Habilidades</button>
   <button class="tab-button" data-tab="skins">Skins</button>

   Predefinição:Persona

<script> (function() { 

 const buttons = document.querySelectorAll(".tab-button");
 const contents = document.querySelectorAll(".tab-content");

 buttons.forEach(btn => {
   btn.addEventListener("click", () => {
     buttons.forEach(b => b.classList.remove("active"));
     contents.forEach(c => c.classList.add("hidden"));

     btn.classList.add("active");
     const tabId = btn.getAttribute("data-tab");
     document.getElementById(tabId).classList.remove("hidden");
   });
 });

})(); </script>

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