cpred/_includes/skill-overview.html

<div id="skill-overview">

</div>
<script>
  fetch("{{ '/assets/game-data/skills.json' | relative_url }}")
    .then(response => response.json())
    .then(skills => {
      const skillDiv = document.getElementById('skill-overview');
      for (const skillgroup of skills.Fertigkeiten) {
        const groupSection = document.createElement('section');
        const groupTitle = document.createElement('h2');
        groupTitle.className = "cyber-h";
        groupTitle.textContent = skillgroup.Gruppe;
        groupSection.appendChild(groupTitle);
        const skillTable = document.createElement('table');
        skillTable.className = "cyber-table ac-red";
        skillTable.setAttribute("style", "width: auto;");
        const tableHeader = document.createElement('tr');
        const headerName = document.createElement('th');
        headerName.textContent = "Fertigkeit";
        const headerType = document.createElement('th');
        headerType.textContent = "Attribut";
        const headerDescription = document.createElement('th');
        headerDescription.textContent = "Beschreibung";
        tableHeader.appendChild(headerName);
        tableHeader.appendChild(headerType);
        tableHeader.appendChild(headerDescription);
        skillTable.appendChild(tableHeader);
        for (const skill of skillgroup.Fertigkeiten) {
          const skillRow = document.createElement('tr');
          const skillName = document.createElement('td');
          skillName.textContent = skill.Name;
          const skillType = document.createElement('td');
          skillType.textContent = skill.Attribut;
          const skillDescription = document.createElement('td');
          skillDescription.textContent = skill.Beschreibung;
          skillRow.appendChild(skillName);
          skillRow.appendChild(skillType);
          skillRow.appendChild(skillDescription);
          skillTable.appendChild(skillRow);
        }
        groupSection.appendChild(skillTable);
        skillDiv.appendChild(groupSection);
      }
    });
</script>