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

_includes/player-guide.html

@@ -229,3 +229,62 @@ GES des Verteidigers + Fertigkeit Ausweichen + 1W10
 <h4 class="cyber-h">Faustkampf, Boxen mit blosser Faust, Packen, Würgen, Wurf</h4>
 
 TBD
+
+<h2 class="cyber-h">Attribute</h2>
+
+<h3 class="cyber-h">Was sind Attribute?</h3>
+<p>Attribute (kurz ATT) sind Werte, welche die Fähigkeiten eines Charakters zu allen anderen im Spieluniversum ins Verhältnis setzen. Attribute helfen dabei, die Fähigkeiten der Charaktere vergleichbar zu machen. In einer <b>Cyberpunk-RED-Kampagne</b> weisen die Charaktere zehn Hauptattribute aus vier Gruppen auf: <b>Geistig</b>, <b>Kampf</b>, <b>Schicksal</b> und <b>Körperlich</b>.</p>
+
+<h4 class="cyber-h">Geistige Gruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie schlau du allgemein bist: Schlauheit, Aufmerksamkeit, Wahrnehmung, Lernfähigkeit.">Intelligenz (INT)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Deine Entschlossenheit und Fähigkeit, mit Gefahren und Stress umzugehen. Beeinflusst Mut und Durchhaltevermögen.">Wille (WIL)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie gut du mit Druck und sozialen Situationen umgehen kannst, inkl. Ausstrahlung.">Coolness (COOL)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Fähigkeit, dich in andere hineinzuversetzen und sozial zu handeln. Nimmt durch Cyberware ab.">Empathie (EMP)</span></li>
+</ul>
+
+<h4 class="cyber-h">Kampfgruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Fähigkeit, mit Werkzeugen und Technik umzugehen – z. B. Hacking, Reparatur.">Technik (TECH)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Reaktionszeit und Koordination – wichtig fürs Zielen, Ausweichen und schnelle Aktionen.">Reflexe (REF)</span></li>
+</ul>
+
+<h4 class="cyber-h">Schicksalsgruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Repräsentiert dein Glück – kann für Würfe verwendet werden und regeneriert sich pro Sitzung.">Glück (GLK)</span></li>
+</ul>
+
+<h4 class="cyber-h">Körperliche Gruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie robust du bist: Körpermasse, Widerstandsfähigkeit, Schadenseinstecken.">Kraft (KRA)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Deine Koordination und Fähigkeit für physische Aufgaben, wie Nahkampf, Balance, Parcours.">Geschicklichkeit (GES)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie schnell du dich bewegst – Laufen, Springen, Schwimmen.">Bewegung (BEW)</span></li>
+</ul>
+
+<h4 class="cyber-h">Menschlichkeit (MEN)</h4>
+<p>
+  <span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Ein Maß für deine emotionale Stabilität. Nimmt durch Trauma oder Cyberware ab.">
+    Menschlichkeit
+  </span> wird aus 
+  <span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Fähigkeit, sich in andere hineinzuversetzen und sozial zu interagieren.">Empathie (EMP)</span> × 10 
+  berechnet.
+</p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr><th>Empathie (EMP)</th><th>Menschlichkeit (MEN)</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>1</td><td>10</td></tr>
+    <tr><td>2</td><td>20</td></tr>
+    <tr><td>3</td><td>30</td></tr>
+    <tr><td>4</td><td>40</td></tr>
+    <tr><td>5</td><td>50</td></tr>
+    <tr><td>6</td><td>60</td></tr>
+    <tr><td>7</td><td>70</td></tr>
+    <tr><td>8</td><td>80</td></tr>
+    <tr><td>9</td><td>90</td></tr>
+    <tr><td>10</td><td>100</td></tr>
+  </tbody>
+</table>
+<p>Sinkt die Menschlichkeit um mehr als 10 Punkte, sinkt auch <b>EMP</b> (z. B. bei 39 MEN fällt EMP auf 3).</p>

_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>