Editor - Contos de Nohat

Renomear título:

.grafico-individual {
    flex: 1 1 45%;
    max-width: 45%;
    text-align: center;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 8px;
    background: #f9f9f9;
  }

.grafico-individual h3 {
    margin-top: 0;
  }

canvas {
    max-width: 100%;
    height: auto;
  }

.info-golem {
    text-align: left;
    margin-top: 10px;
    font-size: 14px;
    background: #fff;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
  }
</style>

<h2>📊 Estatísticas de Todos os Golems (Nv.1 ao Nv.5)</h2>
<div id="todosOsGraficos" class="grafico-container"></div>

<h2 style="margin-top:60px;">📊 Comparativo de Golems por Nível</h2>
<div id="comparativoGeral" class="grafico-container"></div>

const golems = {
  "Madeira": [[2,2,3,15,18],[3,3,4,20,23],[4,4,5,22,26],[4,5,5,23,28],[4,5,6,25,30]],
  "Vento": [[3,6,5,12,16],[4,8,7,16,20],[5,10,8,18,23],[6,11,9,20,26],[6,12,10,22,28]],
  "Fogo": [[6,4,4,10,15],[8,6,6,14,18],[10,7,7,16,20],[11,8,8,18,22],[12,9,8,20,25]],
  "Água": [[3,5,4,20,22],[4,6,5,25,28],[5,7,6,30,32],[5,8,6,33,35],[5,8,7,35,38]],
  "Gelo": [[4,3,4,25,28],[5,4,5,28,30],[6,5,6,30,32],[6,5,6,32,34],[7,6,7,34,36]],
  "Sombras": [[4,5,6,18,22],[5,6,7,22,26],[6,7,8,24,28],[7,8,9,26,30],[8,9,10,28,32]],
  "Luz": [[4,6,6,20,24],[5,7,8,24,27],[6,8,9,26,30],[6,9,10,28,32],[7,10,11,30,33]],
  "Vazio": [[6,5,6,10,12],[8,7,8,14,16],[10,8,10,15,18],[11,9,11,16,20],[13,10,12,18,22]],
  "Ouro": [[3,1,2,18,20],[4,2,3,24,28],[5,2,3,26,31],[5,3,4,28,33],[6,3,4,30,35]],
  "Pedra": [[4,1,1,25,28],[6,1,1,32,35],[7,1,2,37,40],[8,2,2,40,43],[8,2,2,42,44]],
  "Terra": [[5,2,2,30,33],[6,2,3,32,36],[7,3,4,34,39],[8,4,5,36,41],[9,4,5,38,43]],
  "Ferro": [[3,1,1,20,25],[5,1,2,30,35],[7,2,2,35,40],[8,2,3,38,43],[9,2,3,40,45]],
  "Lava": [[6,3,3,20,24],[8,4,4,26,30],[9,5,5,28,33],[10,6,6,30,35],[11,7,6,32,37]],
  "Diamante": [[5,2,3,25,28],[6,3,4,35,38],[8,3,5,40,44],[9,3,6,43,47],[10,4,6,45,50]]
};

const descricoes = {
  "ferro": "Um golem de defesa robusta, ideal para bloqueio de ataques físicos.",
  "madeira": "Golem ágil e leve, usado em terrenos florestais e armadilhas.",
  "ouro": "Golem valioso e equilibrado, resistente à magia.",
  "diamante": "Golem de elite, alta resistência e poder bruto.",
  "agua": "Extremamente veloz e fluido, ótimo contra fogo.",
  "fogo": "Explosivo e ofensivo, mas frágil.",
  "vazio": "Instável e sombrio, possui habilidades imprevisíveis.",
  "pedra": "Golem básico de defesa bruta e resistência.",
  "vento": "Altamente móvel, com reflexos excepcionais.",
  "lava": "Mistura de fogo e terra, perigoso e resistente.",
  "luz": "Rápido e preciso, especializado em dano mágico.",
  "sombras": "Trabalha com furtividade e manipulação.",
  "terra": "Estável, resistente e com forte conexão elemental.",
  "gelo": "Controla áreas com congelamento e redução de velocidade inimiga."
};

const container = document.getElementById("todosOsGraficos");

Object.entries(golems).forEach(([nome, niveis]) => {
  const slug = nome.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "").replace(/\s+/g, '-');
  const canvasId = "graficoRadar_" + slug;

const div = document.createElement("div");
  div.className = `grafico-individual golem-${slug}`;
  div.id = `golem-${slug}`;

div.innerHTML = `
    <h3>${nome}</h3>
    <canvas id="${canvasId}" width="250" height="250"></canvas>
    <div class="info-golem" id="info-${slug}">
      <p><strong>Descrição:</strong> ${descricoes[slug] || 'Sem descrição.'}</p>
    </div>
  `;

container.appendChild(div);

const datasets = niveis.map((dados, i) => ({
    label: `Nv. ${i + 1}`,
    data: dados,
    fill: true,
    borderColor: `hsl(${i * 60}, 70%, 50%)`,
    backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.2)`,
    pointBackgroundColor: `hsl(${i * 60}, 70%, 50%)`,
    pointRadius: 3
  }));

const comparativoDiv = document.getElementById("comparativoGeral");

for (let nivel = 0; nivel < 5; nivel++) {
  const canvasId = `comparativoNv${nivel + 1}`;
  const div = document.createElement("div");
  div.className = "grafico-individual comparativo-nivel";
  div.innerHTML = `<h3>Comparativo - Nível ${nivel + 1}</h3><canvas id="${canvasId}" width="250" height="250"></canvas>`;
  comparativoDiv.appendChild(div);

new Chart(document.getElementById(canvasId).getContext("2d"), {
    type: "radar",
    data: {
      labels: atributos,
      datasets
    },
    options: {
      responsive: true,
      plugins: {
        datalabels: {
          color: '#000',
          font: { weight: 'bold', size: 11 },
          formatter: value => value
        },
        legend: { position: 'top' }
      },
      scales: {
        r: {
          suggestedMin: 0,
          suggestedMax: 50,
          ticks: { stepSize: 10, backdropColor: 'transparent' }
        }
      }
    },
    plugins: [ChartDataLabels]
  });
}
</script>
<h2>📦 Tabela de Drops por Golem</h2>
<table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; width: 100%; background: #fff;">
<thead style="background: #f0f0f0;">
<tr>
  <th>Golem</th>
  <th>Itens Obtidos</th>
</tr>
</thead>
<tbody>
<tr><td>🧊 Diamante</td><td>Lascas de Diamante Vivo, Prisma Cortante</td></tr>
<tr><td>⚡ Eletricidade</td><td>Núcleo Eletrificado, Fio de Raio Vivo</td></tr>
<tr><td>⚙️ Ferro</td><td>Presa de Ferrogume, Engrenagem Viva</td></tr>
<tr><td>🔥 Fogo</td><td>Brasão Ígneo, Coração de Cinzas Ardentes</td></tr>
<tr><td>❄️ Gelo</td><td>Cristal Glacial, Neve Eterna Condensada</td></tr>
<tr><td>🌋 Lava</td><td>Fragmento de Obsidiana Viva, Sangue de Magma</td></tr>
<tr><td>☀️ Luz</td><td>Prisma Solar, Núcleo Radiante</td></tr>
<tr><td>🪵 Madeira</td><td>Casca Rúnica, Seiva Ancestral</td></tr>
<tr><td>🪙 Ouro</td><td>Pepita Viva, Essência Dourada</td></tr>
<tr><td>🪨 Pedra</td><td>Fragmento de Rocha Antiga, Núcleo de Sílica Viva</td></tr>
<tr><td>🌑 Sombras</td><td>Fragmento de Escuridão Pura, Véu das Trevas</td></tr>
<tr><td>🪨 Terra</td><td>Bloco de Argila Densa, Raiz de Terranis</td></tr>
<tr><td>🕳️ Vazio</td><td>Poeira do Nada, Fragmento de Existência Rachada</td></tr>
<tr><td>🌪️ Vento</td><td>Pluma Etérea, Fragmento de Ciclone</td></tr>
<tr><td>💧 Água</td><td>Núcleo Fluído, Essência das Marés</td></tr>
</tbody>
</table>

<h2>📊 Tabela de XP por Golem e Nível (XP Variável)</h2>
<table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; width: 100%; background: #fff;">
<thead style="background: #f0f0f0;">
<tr>
  <th>Golem</th>
  <th>Nível</th>
  <th>XP Obtido</th>
</tr>
</thead>
<tbody>
<tr><td>🪨 Pedra</td><td>Nv. 1</td><td>240</td></tr>
<tr><td>🪨 Pedra</td><td>Nv. 2</td><td>288</td></tr>
<tr><td>🪨 Pedra</td><td>Nv. 3</td><td>348</td></tr>
<tr><td>🪨 Pedra</td><td>Nv. 4</td><td>432</td></tr>
<tr><td>🪨 Pedra</td><td>Nv. 5</td><td>504</td></tr>
<tr><td>🔥 Fogo</td><td>Nv. 1</td><td>250</td></tr>
<tr><td>🔥 Fogo</td><td>Nv. 2</td><td>300</td></tr>
<tr><td>🔥 Fogo</td><td>Nv. 3</td><td>362</td></tr>
<tr><td>🔥 Fogo</td><td>Nv. 4</td><td>450</td></tr>
<tr><td>🔥 Fogo</td><td>Nv. 5</td><td>525</td></tr>
<tr><td>💧 Água</td><td>Nv. 1</td><td>260</td></tr>
<tr><td>💧 Água</td><td>Nv. 2</td><td>312</td></tr>
<tr><td>💧 Água</td><td>Nv. 3</td><td>377</td></tr>
<tr><td>💧 Água</td><td>Nv. 4</td><td>468</td></tr>
<tr><td>💧 Água</td><td>Nv. 5</td><td>546</td></tr>
<tr><td>❄️ Gelo</td><td>Nv. 1</td><td>255</td></tr>
<tr><td>❄️ Gelo</td><td>Nv. 2</td><td>306</td></tr>
<tr><td>❄️ Gelo</td><td>Nv. 3</td><td>369</td></tr>
<tr><td>❄️ Gelo</td><td>Nv. 4</td><td>459</td></tr>
<tr><td>❄️ Gelo</td><td>Nv. 5</td><td>535</td></tr>
<tr><td>🌪️ Vento</td><td>Nv. 1</td><td>245</td></tr>
<tr><td>🌪️ Vento</td><td>Nv. 2</td><td>294</td></tr>
<tr><td>🌪️ Vento</td><td>Nv. 3</td><td>355</td></tr>
<tr><td>🌪️ Vento</td><td>Nv. 4</td><td>441</td></tr>
<tr><td>🌪️ Vento</td><td>Nv. 5</td><td>514</td></tr>
<tr><td>⚡ Eletricidade</td><td>Nv. 1</td><td>265</td></tr>
<tr><td>⚡ Eletricidade</td><td>Nv. 2</td><td>318</td></tr>
<tr><td>⚡ Eletricidade</td><td>Nv. 3</td><td>384</td></tr>
<tr><td>⚡ Eletricidade</td><td>Nv. 4</td><td>477</td></tr>
<tr><td>⚡ Eletricidade</td><td>Nv. 5</td><td>556</td></tr>
<tr><td>🌋 Lava</td><td>Nv. 1</td><td>270</td></tr>
<tr><td>🌋 Lava</td><td>Nv. 2</td><td>324</td></tr>
<tr><td>🌋 Lava</td><td>Nv. 3</td><td>391</td></tr>
<tr><td>🌋 Lava</td><td>Nv. 4</td><td>486</td></tr>
<tr><td>🌋 Lava</td><td>Nv. 5</td><td>567</td></tr>
<tr><td>🌑 Sombras</td><td>Nv. 1</td><td>275</td></tr>
<tr><td>🌑 Sombras</td><td>Nv. 2</td><td>330</td></tr>
<tr><td>🌑 Sombras</td><td>Nv. 3</td><td>398</td></tr>
<tr><td>🌑 Sombras</td><td>Nv. 4</td><td>495</td></tr>
<tr><td>🌑 Sombras</td><td>Nv. 5</td><td>577</td></tr>
<tr><td>☀️ Luz</td><td>Nv. 1</td><td>280</td></tr>
<tr><td>☀️ Luz</td><td>Nv. 2</td><td>336</td></tr>
<tr><td>☀️ Luz</td><td>Nv. 3</td><td>406</td></tr>
<tr><td>☀️ Luz</td><td>Nv. 4</td><td>504</td></tr>
<tr><td>☀️ Luz</td><td>Nv. 5</td><td>588</td></tr>
<tr><td>🪙 Ouro</td><td>Nv. 1</td><td>285</td></tr>
<tr><td>🪙 Ouro</td><td>Nv. 2</td><td>342</td></tr>
<tr><td>🪙 Ouro</td><td>Nv. 3</td><td>413</td></tr>
<tr><td>🪙 Ouro</td><td>Nv. 4</td><td>513</td></tr>
<tr><td>🪙 Ouro</td><td>Nv. 5</td><td>598</td></tr>
<tr><td>🪵 Madeira</td><td>Nv. 1</td><td>250</td></tr>
<tr><td>🪵 Madeira</td><td>Nv. 2</td><td>300</td></tr>
<tr><td>🪵 Madeira</td><td>Nv. 3</td><td>362</td></tr>
<tr><td>🪵 Madeira</td><td>Nv. 4</td><td>450</td></tr>
<tr><td>🪵 Madeira</td><td>Nv. 5</td><td>525</td></tr>
<tr><td>🧊 Diamante</td><td>Nv. 1</td><td>300</td></tr>
<tr><td>🧊 Diamante</td><td>Nv. 2</td><td>360</td></tr>
<tr><td>🧊 Diamante</td><td>Nv. 3</td><td>435</td></tr>
<tr><td>🧊 Diamante</td><td>Nv. 4</td><td>540</td></tr>
<tr><td>🧊 Diamante</td><td>Nv. 5</td><td>630</td></tr>
<tr><td>⚙️ Ferro</td><td>Nv. 1</td><td>265</td></tr>
<tr><td>⚙️ Ferro</td><td>Nv. 2</td><td>318</td></tr>
<tr><td>⚙️ Ferro</td><td>Nv. 3</td><td>384</td></tr>
<tr><td>⚙️ Ferro</td><td>Nv. 4</td><td>477</td></tr>
<tr><td>⚙️ Ferro</td><td>Nv. 5</td><td>556</td></tr>
<tr><td>🕳️ Vazio</td><td>Nv. 1</td><td>290</td></tr>
<tr><td>🕳️ Vazio</td><td>Nv. 2</td><td>348</td></tr>
<tr><td>🕳️ Vazio</td><td>Nv. 3</td><td>420</td></tr>
<tr><td>🕳️ Vazio</td><td>Nv. 4</td><td>522</td></tr>
<tr><td>🕳️ Vazio</td><td>Nv. 5</td><td>609</td></tr>
<tr><td>🪨 Terra</td><td>Nv. 1</td><td>250</td></tr>
<tr><td>🪨 Terra</td><td>Nv. 2</td><td>300</td></tr>
<tr><td>🪨 Terra</td><td>Nv. 3</td><td>362</td></tr>
<tr><td>🪨 Terra</td><td>Nv. 4</td><td>450</td></tr>
<tr><td>🪨 Terra</td><td>Nv. 5</td><td>525</td></tr>
</tbody>
</table>

❌ Não Salvar

🖼️ Imagens disponíveis