Add skill overview and attributes sections to player guide; create skill overview page and JSON data for skills

_includes/skill-overview.html

@@ -0,0 +1,46 @@
+<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>