CharakterCreator: Unterschied zwischen den Versionen

Aus Dunkelherzen Wiki
← Zum vorherigen Versionsunterschied
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(28 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<html>
<html>
<style>
<head>
  .creator-form {
  <meta charset="UTF-8" />
    max-width: 800px;
  <style>
    margin: auto;
    .creator-form {
    font-family: sans-serif;
      max-width: 800px;
   }
      margin: auto;
      font-family: sans-serif;
    }
    .creator-form label {
      font-weight: bold;
      display: block;
      margin-top: 10px;
    }
    .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>
</head>
<body>
  <div class="creator-form">
    <h2>Charakter Creator</h2>


  table.attr-table {
     <label for="name">Name:</label>
    width: 100%;
     <input type="text" id="name" placeholder="Name des Charakters">
     border-collapse: collapse;
     margin-top: 20px;
  }


  .attr-table th, .attr-table td {
     <label for="speziestyp">Speziestyp:</label>
     border: 1px solid #ccc;
     <select id="speziestyp">
     padding: 8px;
      <option value="">Keine</option>
    text-align: center;
      <option value="Humanoid">Humanoid</option>
  }
      <option value="Ätherer">Ätherer</option>
      <option value="Mensch-Ätherer">Mensch-Ätherer</option>
      <option value="Andere Ätherer">Andere Ätherer</option>
      <option value="Non-Humanoide / Andere">Non-Humanoide / Andere</option>
      <option value="Xeutano">Xeutano</option>
      <option value="Androidenartige">Androidenartige</option>
  <option value="Androidenartige">Androiden</option>
    </select>


  .creator-form label {
    <label for="rasse">Spezies:</label>
     font-weight: bold;
     <select id="rasse">
    display: block;
      <option value="">Keine</option>
     margin-top: 15px;
     </select>
  }


  .creator-form input, .creator-form select {
     <label for="subspezies">Subspezies:</label>
     width: 100%;
     <select id="subspezies">
     padding: 5px;
      <option value="">Keine (+20 GP Ausgleich)</option>
  }
      <option value="Waldelf">Waldelf</option>
      <option value="Stadelf">Stadelf</option>
    </select>


  .creator-form button {
     <label for="klasse">Klasse:</label>
     margin-top: 20px;
     <select id="klasse">
     padding: 10px;
      <option value="">Keine</option>
     width: 100%;
      <option value="Arbeiter">Arbeiter</option>
  }
      <option value="Barde">Barde</option>
      <option value="Bote">Bote</option>
      <option value="Gelehrter">Gelehrter</option>
      <option value="Gläubiger">Gläubiger</option>
      <option value="Kind">Kind</option>
      <option value="Krieger">Krieger</option>
      <option value="Schurke">Schurke</option>
      <option value="Schütze">Schütze</option>
      <option value="Seelenkünstler">Seelenkünstler</option>
      <option value="Soldat">Soldat</option>
      <option value="Techniker">Techniker</option>
      <option value="Vagabunde">Vagabunde</option>
     </select>


  .output {
     <label for="subklasse">Subklasse:</label>
     margin-top: 25px;
     <select id="subklasse">
     padding: 10px;
      <option value="">Keine (+15 GP Ausgleich)</option>
    background: #f8f8f8;
      <option value="Auserwählter">Auserwählter</option>
    border: 1px solid #ccc;
      <option value="Diener">Diener</option>
     white-space: pre-wrap;
      <option value="Drogenjunkie">Drogenjunkie</option>
  }
      <option value="Dummkopf">Dummkopf</option>
      <option value="Dunkler Künstler">Dunkler Künstler</option>
      <option value="Gesetzloser">Gesetzloser</option>
      <option value="Glücksspieler">Glücksspieler</option>
      <option value="Händler">Händler</option>
      <option value="Koch">Koch</option>
      <option value="Kopfgeldjäger">Kopfgeldjäger</option>
      <option value="Ödländer">Ödländer</option>
      <option value="Okkultist">Okkultist</option>
      <option value="Pazifist">Pazifist</option>
      <option value="Politiker">Politiker</option>
      <option value="Revolutionär">Revolutionär</option>
      <option value="Seefahrer">Seefahrer</option>
      <option value="Spion">Spion</option>
      <option value="Mutant">Mutant</option>
     </select>


  .points-info {
    <label for="gegenstaende">Gegenstände wählen:</label>
    font-weight: bold;
    <select id="gegenstaende">
    margin-top: 10px;
      <option value="0">Keine</option>
     color: green;
      <option value="1">1 Gegenstand (-10 GP)</option>
  }
      <option value="2">2 Gegenstände (-20 GP)</option>
      <option value="3">3 Gegenstände (-30 GP)</option>
     </select>


  .hint {
     <div class="points-remaining" id="punkteInfo"></div>
     font-size: 0.9em;
    color: #888;
    margin-top: 5px;
  }
</style>


<div class="creator-form">
    <label>Attribute:</label>
  <h2>Charakter Creator</h2>
    <div class="attribute-inputs" id="attributeInputs"></div>


  <label for="name">Name:</label>
    <button onclick="berechneCharakter()">Charakter berechnen</button>
  <input type="text" id="name" placeholder="Name des Charakters">
    <button onclick="exportiereCharakter()">Exportieren</button>


  <label for="klasse">Klasse:</label>
    <div class="output" id="ausgabe"></div>
  <select id="klasse">
   </div>
    <option value="">Wähle...</option>
    <option value="Krieger">Krieger (+2 Stärke, +1 Ausdauer)</option>
    <option value="Magier">Magier (+2 Intelligenz, +1 Wahrnehmung)</option>
   </select>


   <label for="subklasse">Subklasse:</label>
   <script>
  <select id="subklasse">
    const attributeListe = [
    <option value="">Keine</option>
      "Agilität", "Ausdauer", "Charisma", "Geschick",
    <option value="Paladin">Paladin (+1 Stärke, +1 Konstitution)</option>
      "Intelligenz", "Konstitution", "Resistenz",
    <option value="Hexer">Hexer (+1 Intelligenz, +1 Charisma)</option>
      "Stärke", "Wahrnehmung"
  </select>
    ];
    const basisPunkte = 160;


  <label for="rasse">Rasse:</label>
    const zeroBoni = () =>
  <select id="rasse">
      Object.fromEntries(attributeListe.map(attr => [attr, 0]));
    <option value="">Wähle...</option>
    <option value="Mensch">Mensch (+1 Charisma, +1 Konstitution)</option>
    <option value="Elf">Elf (+1 Geschick, +1 Intelligenz)</option>
  </select>


  <label for="subspezies">Subspezies:</label>
    const klassenBoni = Object.fromEntries([
  <select id="subspezies">
      "Arbeiter", "Barde", "Bote", "Gelehrter", "Gläubiger", "Kind", "Krieger", "Schurke",
    <option value="">Keine</option>
      "Schütze", "Seelenkünstler", "Soldat", "Techniker", "Vagabunde"
    <option value="Waldelf">Waldelf (+1 Wahrnehmung)</option>
     ].map(name => [name, zeroBoni()]));
     <option value="Stadtmensch">Stadtmensch (+1 Charisma)</option>
  </select>


  <div class="points-info" id="punkteAnzeige">Verfügbare Punkte: 160</div>
    const subklassenBoni = Object.fromEntries([
  <div class="hint">Hinweis: Du kannst theoretisch bis zu 3 Gegenstände wählen, die je 10 Bonuspunkte geben würden.</div>
      "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, zeroBoni()]));


  <table class="attr-table" id="attrTabelle">
    const speziestypBoni = Object.fromEntries([
    <thead>
      "Humanoid", "Ätherer", "Mensch-Ätherer", "Andere Ätherer",
       <tr>
       "Non-Humanoide / Andere", "Xeutano", "Androidenartige", "Androiden"
        <th>Attribut</th>
     ].map(name => [name, zeroBoni()]));
        <th>Wert</th>
      </tr>
    </thead>
    <tbody id="attrBody">
      <!-- Dynamisch befüllt -->
     </tbody>
  </table>


   <button onclick="berechneWerte()">Werte berechnen</button>
    Object.assign(speziestypBoni, {
   <button onclick="exportiereDaten()">Charakterdaten exportieren</button>
      "Humanoid":        { "Agilität": 0, "Ausdauer": 0, "Charisma": 1, "Geschick": 0, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
      "Ätherer":          { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 1, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
      "Mensch-Ätherer":   { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 1, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
      "Andere Ätherer":   { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 1, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
  "Andere":    { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 1, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
  "Xeutano":          { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 1, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
  "Androidenartige":  { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 1, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
  "Androiden":    { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 1, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 }
    });


  <div class="output" id="ausgabe"></div>
    const speziesNachTyp = {
</div>
      "Humanoid": [
        "Arcadier / Byzantone", "Astroma", "Caesaren", "Fijen", "Floratia",
        "Kalani", "Lugier", "Nore", "Pendräa", "Rubinnia", "Sowi", "Varene", "Zarcore"
      ],
      "Ätherer": ["Maggarn", "Sapiée"],
      "Mensch-Ätherer": ["Cilina", "Gaimane"],
      "Andere Ätherer": ["Matari"],
      "Non-Humanoide / Andere": [],
      "Xeutano": [],
      "Androidenartige": [],
  "Androiden": []
    };


<script>
    const rassenBoni = {
  const attribute = [
      "Mensch": { "Agilität": 0, "Ausdauer": 0, "Charisma": 1, "Geschick": 0, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 },
    "Agilität", "Ausdauer", "Charisma", "Geschick", "Intelligenz",
      "Elf":    { "Agilität": 1, "Ausdauer": 0, "Charisma": 0, "Geschick": 1, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 }
    "Konstitution", "Resistenz", "Stärke", "Wahrnehmung"
    };
  ];


  const basispunkte = 160;
    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 klassenBoni = {
    attributeListe.forEach(attr => {
    "Krieger": { "Stärke": 2, "Ausdauer": 1 },
      const input = document.createElement("input");
    "Magier": { "Intelligenz": 2, "Wahrnehmung": 1 }
      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);
    });


  const subklassenBoni = {
    function getBonus(boni, key) {
    "Paladin": { "Stärke": 1, "Konstitution": 1 },
      return boni[key] || zeroBoni();
     "Hexer": { "Intelligenz": 1, "Charisma": 1 }
     }
  };


  const rassenBoni = {
    function sumUserInput() {
    "Mensch": { "Charisma": 1, "Konstitution": 1 },
      return attributeListe.reduce((sum, attr) => {
     "Elf": { "Geschick": 1, "Intelligenz": 1 }
        const val = parseInt(document.getElementById(`attr_${attr}`).value) || 0;
  };
        return sum + val;
      }, 0);
     }


  const subspeziesBoni = {
    function updateRemainingPoints() {
    "Waldelf": { "Wahrnehmung": 1 },
      let total = basisPunkte;
    "Stadtmensch": { "Charisma": 1 }
      if (!document.getElementById("subspezies").value) total += 20;
  };
      if (!document.getElementById("subklasse").value) total += 15;
      total -= parseInt(document.getElementById("gegenstaende").value || "0") * 10;
      const used = sumUserInput();
      document.getElementById("punkteInfo").textContent = `Verbleibende Punkte: ${total - used} / ${total}`;
    }


  function berechneWerte() {
    function berechneCharakter() {
    const name = document.getElementById("name").value;
      const name = document.getElementById("name").value;
    const klasse = document.getElementById("klasse").value;
      const speziestyp = document.getElementById("speziestyp").value;
    const subklasse = document.getElementById("subklasse").value;
      const rasse = document.getElementById("rasse").value;
    const rasse = document.getElementById("rasse").value;
      const subspezies = document.getElementById("subspezies").value;
    const subspezies = document.getElementById("subspezies").value;
      const klasse = document.getElementById("klasse").value;
      const subklasse = document.getElementById("subklasse").value;
      const gegenstaende = parseInt(document.getElementById("gegenstaende").value) || 0;


    let werte = {};
      const basisAttribute = {};
    attribute.forEach(attr => werte[attr] = 0);
      attributeListe.forEach(attr => {
        basisAttribute[attr] = parseInt(document.getElementById(`attr_${attr}`).value) || 0;
      });


    let bonus = 0;
      const gesamt = {};
    if (!subklasse) bonus += 15;
      attributeListe.forEach(attr => {
    if (!subspezies) bonus += 20;
        gesamt[attr] =
          basisAttribute[attr] +
          getBonus(speziestypBoni, speziestyp)[attr] +
          getBonus(rassenBoni, rasse)[attr] +
          getBonus(subspeziesBoni, subspezies)[attr] +
          getBonus(klassenBoni, klasse)[attr] +
          getBonus(subklassenBoni, subklasse)[attr];
      });


    const boniQuellen = [klassenBoni[klasse], subklassenBoni[subklasse], rassenBoni[rasse], subspeziesBoni[subspezies]];
      const daten = {
    boniQuellen.forEach(quell => {
        Name: name,
      if (quell) {
        Speziestyp: speziestyp,
         for (let attr in quell) {
        Spezies: rasse,
          werte[attr] += quell[attr];
        Subspezies: subspezies || "Keine (20 Punkte erhalten)",
         }
        Klasse: klasse,
       }
        Subklasse: subklasse || "Keine (15 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
       };


    let vergeben = Object.values(werte).reduce((a, b) => a + b, 0);
      document.getElementById("ausgabe").textContent = JSON.stringify(daten, null, 2);
     let gesamtPunkte = basispunkte + bonus;
     }
    let verbleibend = gesamtPunkte - vergeben;


     // Tabelle neu generieren
     function exportiereCharakter() {
    const attrBody = document.getElementById("attrBody");
      const daten = document.getElementById("ausgabe").textContent;
    attrBody.innerHTML = "";
      if (!daten) {
    attribute.forEach(attr => {
        alert("Bitte zuerst berechnen!");
      const row = `<tr><td>${attr}</td><td>${werte[attr]}</td></tr>`;
        return;
      attrBody.insertAdjacentHTML("beforeend", row);
      }
    });
      const blob = new Blob([daten], { type: "application/json" });
 
      const url = URL.createObjectURL(blob);
    document.getElementById("punkteAnzeige").textContent = `Verfügbare Punkte: ${verbleibend}`;
      const a = document.createElement("a");
 
      a.href = url;
    const daten = {
       a.download = "charakter.json";
      Name: name,
      a.click();
      Klasse: klasse,
       URL.revokeObjectURL(url);
      Subklasse: subklasse || "Keine",
      Rasse: rasse,
      Subspezies: subspezies || "Keine",
      Attribute: werte,
      Verfügbare_Punkte: verbleibend,
      Hinweis: "Du kannst zusätzlich 3 Gegenstände wählen, die je 10 Punkte geben würden."
    };
 
    document.getElementById("ausgabe").textContent = JSON.stringify(daten, null, 2);
  }
 
  function exportiereDaten() {
    const ausgabe = document.getElementById("ausgabe").textContent;
    if (!ausgabe) {
       alert("Bitte erst Werte berechnen.");
       return;
     }
     }


     const blob = new Blob([ausgabe], { type: "application/json" });
     document.getElementById("speziestyp").addEventListener("change", function () {
    const url = URL.createObjectURL(blob);
      const typ = this.value;
    const a = document.createElement("a");
      const rasseSelect = document.getElementById("rasse");
      rasseSelect.innerHTML = '<option value="">Keine</option>';
      if (speziesNachTyp[typ]) {
        speziesNachTyp[typ].forEach(spezies => {
          const opt = document.createElement("option");
          opt.value = spezies;
          opt.textContent = spezies;
          rasseSelect.appendChild(opt);
        });
      }
      updateRemainingPoints();
    });


     a.href = url;
     document.addEventListener("DOMContentLoaded", () => {
    a.download = "charakter.json";
      const inputs = document.querySelectorAll("select, input[type='number']");
    a.click();
      inputs.forEach(el => {
 
        el.addEventListener("input", updateRemainingPoints);
    URL.revokeObjectURL(url);
        el.addEventListener("change", updateRemainingPoints);
  }
      });
</script>
      updateRemainingPoints();
    });
  </script>
</body>
</html>
</html>

Aktuelle Version vom 29. Juli 2025, 19:59 Uhr

Charakter Creator

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