CharakterCreator: Unterschied zwischen den Versionen

Aus Dunkelherzen Wiki
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
Zeile 1: Zeile 1:
<!DOCTYPE html>
<html>
<html lang="de">
<style>
<head>
  .creator-form {
  <meta charset="UTF-8">
    max-width: 800px;
   <title>Charakter Creator</title>
    margin: auto;
   <style>
    font-family: sans-serif;
     label, select, input, button {
   }
      display: block;
 
      margin: 5px 0;
   .creator-form label {
     }
    font-weight: bold;
   </style>
    display: block;
</head>
     margin-top: 10px;
<body>
  }
   <h1>Charakter Creator</h1>
 
  .creator-form input,
  .creator-form select {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
  }
 
  .creator-form button {
    margin-top: 15px;
    padding: 10px;
    width: 100%;
  }
 
  .attribute-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
 
  .output {
    margin-top: 20px;
    padding: 10px;
    background: #f8f8f8;
    border: 1px solid #ccc;
     white-space: pre-wrap;
  }
 
   .points-remaining {
    font-weight: bold;
    color: #b00;
    margin-top: 10px;
  }
</style>
 
<div class="creator-form">
   <h2>Charakter Creator</h2>


   <label for="name">Name:</label>
   <label for="name">Name:</label>
   <input type="text" id="name">
   <input type="text" id="name" placeholder="Name des Charakters">
 
  <label for="rasse">Rasse:</label>
  <select id="rasse">
    <option value="">Keine</option>
    <option value="Mensch">Mensch</option>
    <option value="Mutant">Mutant</option>
    <option value="Android">Android</option>
    <option value="Bestie">Bestie</option>
  </select>


   <label for="klasse">Klasse:</label>
   <label for="klasse">Klasse:</label>
Zeile 46: Zeile 73:
   <label for="subklasse">Subklasse:</label>
   <label for="subklasse">Subklasse:</label>
   <select id="subklasse">
   <select id="subklasse">
     <option value="">Keine</option>
     <option value="">Keine (+15 GP Ausgleich)</option>
     <option value="Auserwählter">Auserwählter</option>
     <option value="Auserwählter">Auserwählter</option>
     <option value="Diener">Diener</option>
     <option value="Diener">Diener</option>
Zeile 67: Zeile 94:
   </select>
   </select>


   <button onclick="zeigeCharakter()">Charakter anzeigen</button>
   <label for="rasse">Rasse:</label>
  <select id="rasse">
    <option value="">Keine</option>
    <option value="Mensch">Mensch</option>
    <option value="Elf">Elf</option>
  </select>


   <pre id="ausgabe"></pre>
   <label for="subspezies">Subspezies:</label>
  <select id="subspezies">
    <option value="">Keine (+20 GP Ausgleich)</option>
    <option value="Waldelf">Waldelf</option>
    <option value="Stadelf">Stadelf</option>
  </select>


   <script>
   <label for="gegenstaende">Gegenstände wählen:</label>
     const attributeListe = [
  <select id="gegenstaende">
      "Agilität", "Ausdauer", "Charisma", "Geschick",
     <option value="0">Keine</option>
      "Intelligenz", "Konstitution", "Resistenz",
    <option value="1">1 Gegenstand (-10 GP)</option>
      "Stärke", "Wahrnehmung"
    <option value="2">2 Gegenstände (-20 GP)</option>
    ];
    <option value="3">3 Gegenstände (-30 GP)</option>
  </select>
 
  <div class="points-remaining" id="punkteInfo"></div>
 
  <label>Attribute:</label>
  <div class="attribute-inputs" id="attributeInputs"></div>
 
  <button onclick="berechneCharakter()">Charakter berechnen</button>
  <button onclick="exportiereCharakter()">Exportieren</button>


    const basisPunkte = 160;
  <div class="output" id="ausgabe"></div>
</div>


     const klassenBoni = {
<script>
      "Arbeiter": {}, "Barde": {}, "Bote": {}, "Gelehrter": {}, "Gläubiger": {},
  const attributeListe = [
      "Kind": {}, "Krieger": {}, "Schurke": {}, "Schütze": {}, "Seelenkünstler": {},
    "Agilität", "Ausdauer", "Charisma", "Geschick",
      "Soldat": {}, "Techniker": {}, "Vagabunde": {}
    "Intelligenz", "Konstitution", "Resistenz",
     };
     "Stärke", "Wahrnehmung"
  ];
 
  const basisPunkte = 160;
 
  const klassenBoni = Object.fromEntries([
    "Arbeiter", "Barde", "Bote", "Gelehrter", "Gläubiger", "Kind", "Krieger", "Schurke",
    "Schütze", "Seelenkünstler", "Soldat", "Techniker", "Vagabunde"
  ].map(name => [name, Object.fromEntries(attributeListe.map(attr => [attr, 0]))]));
 
  const subklassenBoni = Object.fromEntries([
    "Auserwählter", "Diener", "Drogenjunkie", "Dummkopf", "Dunkler Künstler", "Gesetzloser",
    "Glücksspieler", "Händler", "Koch", "Kopfgeldjäger", "Ödländer", "Okkultist",
    "Pazifist", "Politiker", "Revolutionär", "Seefahrer", "Spion", "Mutant"
  ].map(name => [name, Object.fromEntries(attributeListe.map(attr => [attr, 0]))]));
 
  const rassenBoni = {
    "Mensch": { "Agilität": 0, "Ausdauer": 0, "Charisma": 1, "Geschick": 0, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
    "Elf":   { "Agilität": 1, "Ausdauer": 0, "Charisma": 0, "Geschick": 1, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 }
  };
 
  const subspeziesBoni = {
    "Waldelf": { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 1, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 1 },
    "Stadelf": { "Agilität": 0, "Ausdauer": 0, "Charisma": 1, "Geschick": 0, "Intelligenz": 1, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 }
  };
 
  const attributeInputs = document.getElementById("attributeInputs");
  attributeListe.forEach(attr => {
    const input = document.createElement("input");
    input.type = "number";
    input.min = "0";
    input.value = "0";
    input.id = `attr_${attr}`;
    input.oninput = updateRemainingPoints;
    const label = document.createElement("label");
    label.textContent = attr;
    label.htmlFor = input.id;
    attributeInputs.appendChild(label);
    attributeInputs.appendChild(input);
  });
 
  function getBonus(boni, key) {
    return boni[key] || Object.fromEntries(attributeListe.map(attr => [attr, 0]));
  }
 
  function sumUserInput() {
    return attributeListe.reduce((sum, attr) => {
      const val = parseInt(document.getElementById(`attr_${attr}`).value) || 0;
      return sum + val;
     }, 0);
  }
 
  function updateRemainingPoints() {
    let total = basisPunkte;
    if (!document.getElementById("subspezies").value) total += 20;
    if (!document.getElementById("subklasse").value) total += 15;
 
    const gegenstaende = parseInt(document.getElementById("gegenstaende").value) || 0;
    total -= gegenstaende * 10;
 
    const used = sumUserInput();
    const remaining = total - used;


     const subklassenBoni = {
     document.getElementById("punkteInfo").textContent = `Verbleibende Punkte: ${remaining} / ${total}`;
      "Auserwählter": {}, "Diener": {}, "Drogenjunkie": {}, "Dummkopf": {},
  }
      "Dunkler Künstler": {}, "Gesetzloser": {}, "Glücksspieler": {}, "Händler": {},
      "Koch": {}, "Kopfgeldjäger": {}, "Ödländer": {}, "Okkultist": {},
      "Pazifist": {}, "Politiker": {}, "Revolutionär": {}, "Seefahrer": {},
      "Spion": {}, "Mutant": {}
    };


     // Initialisiere alle Attribute mit 0 für jede Klasse und Subklasse
  function berechneCharakter() {
     for (const klasse in klassenBoni) {
     const name = document.getElementById("name").value;
      attributeListe.forEach(attr => klassenBoni[klasse][attr] = 0);
     const klasse = document.getElementById("klasse").value;
     }
    const subklasse = document.getElementById("subklasse").value;
    const rasse = document.getElementById("rasse").value;
    const subspezies = document.getElementById("subspezies").value;
     const gegenstaende = parseInt(document.getElementById("gegenstaende").value) || 0;


     for (const subklasse in subklassenBoni) {
     const basisAttribute = {};
      attributeListe.forEach(attr => subklassenBoni[subklasse][attr] = 0);
    attributeListe.forEach(attr => {
     }
      basisAttribute[attr] = parseInt(document.getElementById(`attr_${attr}`).value) || 0;
     });


     function zeigeCharakter() {
     const gesamt = {};
       const name = document.getElementById("name").value;
    attributeListe.forEach(attr => {
      const rasse = document.getElementById("rasse").value;
       gesamt[attr] =
      const klasse = document.getElementById("klasse").value;
        basisAttribute[attr] +
      const subklasse = document.getElementById("subklasse").value;
        getBonus(klassenBoni, klasse)[attr] +
        getBonus(subklassenBoni, subklasse)[attr] +
        getBonus(rassenBoni, rasse)[attr] +
        getBonus(subspeziesBoni, subspezies)[attr];
    });


      const werte = {};
    const daten = {
       attributeListe.forEach(attr => {
      Name: name,
        werte[attr] = basisPunkte +
      Klasse: klasse,
          (klassenBoni[klasse]?.[attr] || 0) +
      Subklasse: subklasse || "Keine (15 Punkte erhalten)",
          (subklassenBoni[subklasse]?.[attr] || 0);
      Rasse: rasse,
       });
      Subspezies: subspezies || "Keine (20 Punkte erhalten)",
      Gegenstände: `${gegenstaende} (${gegenstaende * 10} Punkte abgezogen)`,
       Verwendete_Punkte: sumUserInput(),
      Gesamt_Punkte: basisPunkte + (subklasse ? 0 : 15) + (subspezies ? 0 : 20) - (gegenstaende * 10),
       Attribute: gesamt
    };


      const ausgabe = {
    document.getElementById("ausgabe").textContent = JSON.stringify(daten, null, 2);
        Name: name,
  }
        Rasse: rasse,
        Klasse: klasse,
        Subklasse: subklasse,
        Attribute: werte
      };


      document.getElementById("ausgabe").textContent = JSON.stringify(ausgabe, null, 2);
  function exportiereCharakter() {
    const daten = document.getElementById("ausgabe").textContent;
    if (!daten) {
      alert("Bitte zuerst berechnen!");
      return;
     }
     }
   </script>
    const blob = new Blob([daten], { type: "application/json" });
</body>
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "charakter.json";
    a.click();
    URL.revokeObjectURL(url);
  }
 
   document.addEventListener("DOMContentLoaded", function () {
    const inputs = document.querySelectorAll("select, input[type='number']");
    inputs.forEach(el => {
      el.addEventListener("input", updateRemainingPoints);
      el.addEventListener("change", updateRemainingPoints);
    });
    updateRemainingPoints();
  });
</script>
</html>
</html>

Version vom 26. Juli 2025, 12:04 Uhr

Charakter Creator

Abgerufen von „https://wiki.dunkelherzen.dedyn.io/index.php?title=CharakterCreator&oldid=560“