CharakterCreator: Unterschied zwischen den Versionen

Aus Dunkelherzen Wiki
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 5: Zeile 5:
     margin: auto;
     margin: auto;
     font-family: sans-serif;
     font-family: sans-serif;
  }
  table.attr-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  .attr-table th, .attr-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
   }
   }


Zeile 22: Zeile 10:
     font-weight: bold;
     font-weight: bold;
     display: block;
     display: block;
     margin-top: 15px;
     margin-top: 10px;
   }
   }


   .creator-form input, .creator-form select {
   .creator-form input,
  .creator-form select {
     width: 100%;
     width: 100%;
     padding: 5px;
     padding: 5px;
    margin-bottom: 10px;
   }
   }


   .creator-form button {
   .creator-form button {
     margin-top: 20px;
     margin-top: 15px;
     padding: 10px;
     padding: 10px;
     width: 100%;
     width: 100%;
  }
  .attribute-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
   }
   }


   .output {
   .output {
     margin-top: 25px;
     margin-top: 20px;
     padding: 10px;
     padding: 10px;
     background: #f8f8f8;
     background: #f8f8f8;
Zeile 44: Zeile 40:
   }
   }


   .points-info {
   .points-remaining {
     font-weight: bold;
     font-weight: bold;
    color: #b00;
     margin-top: 10px;
     margin-top: 10px;
    color: green;
  }
  .hint {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
   }
   }
</style>
</style>
Zeile 65: Zeile 55:
   <label for="klasse">Klasse:</label>
   <label for="klasse">Klasse:</label>
   <select id="klasse">
   <select id="klasse">
     <option value="">Wähle...</option>
     <option value="">Keine</option>
     <option value="Krieger">Krieger (+2 Stärke, +1 Ausdauer)</option>
     <option value="Krieger">Krieger</option>
     <option value="Magier">Magier (+2 Intelligenz, +1 Wahrnehmung)</option>
     <option value="Magier">Magier</option>
   </select>
   </select>


Zeile 73: Zeile 63:
   <select id="subklasse">
   <select id="subklasse">
     <option value="">Keine</option>
     <option value="">Keine</option>
     <option value="Paladin">Paladin (+1 Stärke, +1 Konstitution)</option>
     <option value="Berserker">Berserker</option>
     <option value="Hexer">Hexer (+1 Intelligenz, +1 Charisma)</option>
     <option value="Hexenmeister">Hexenmeister</option>
   </select>
   </select>


   <label for="rasse">Rasse:</label>
   <label for="rasse">Rasse:</label>
   <select id="rasse">
   <select id="rasse">
     <option value="">Wähle...</option>
     <option value="">Keine</option>
     <option value="Mensch">Mensch (+1 Charisma, +1 Konstitution)</option>
     <option value="Mensch">Mensch</option>
     <option value="Elf">Elf (+1 Geschick, +1 Intelligenz)</option>
     <option value="Elf">Elf</option>
   </select>
   </select>


Zeile 87: Zeile 77:
   <select id="subspezies">
   <select id="subspezies">
     <option value="">Keine</option>
     <option value="">Keine</option>
     <option value="Waldelf">Waldelf (+1 Wahrnehmung)</option>
     <option value="Waldelf">Waldelf</option>
     <option value="Stadtmensch">Stadtmensch (+1 Charisma)</option>
     <option value="Stadelf">Stadelf</option>
   </select>
   </select>


   <div class="points-info" id="punkteAnzeige">Verfügbare Punkte: 160</div>
   <div class="points-remaining" id="punkteInfo"></div>
  <div class="hint">Hinweis: Du kannst theoretisch bis zu 3 Gegenstände wählen, die je 10 Bonuspunkte geben würden.</div>


   <table class="attr-table" id="attrTabelle">
   <label>Attribute:</label>
    <thead>
  <div class="attribute-inputs" id="attributeInputs"></div>
      <tr>
        <th>Attribut</th>
        <th>Wert</th>
      </tr>
    </thead>
    <tbody id="attrBody">
      <!-- Dynamisch befüllt -->
    </tbody>
  </table>


   <button onclick="berechneWerte()">Werte berechnen</button>
   <button onclick="berechneCharakter()">Charakter berechnen</button>
   <button onclick="exportiereDaten()">Charakterdaten exportieren</button>
   <button onclick="exportiereCharakter()">Exportieren</button>


   <div class="output" id="ausgabe"></div>
   <div class="output" id="ausgabe"></div>
Zeile 113: Zeile 93:


<script>
<script>
   const attribute = [
   const attributeListe = [
     "Agilität", "Ausdauer", "Charisma", "Geschick", "Intelligenz",
     "Agilität", "Ausdauer", "Charisma", "Geschick",
    "Konstitution", "Resistenz", "Stärke", "Wahrnehmung"
    "Intelligenz", "Konstitution", "Resistenz",
    "Stärke", "Wahrnehmung"
   ];
   ];


   const basispunkte = 160;
   const basisPunkte = 160;


   const klassenBoni = {
   const klassenBoni = {
     "Krieger": { "Stärke": 2, "Ausdauer": 1 },
     "Krieger": { "Agilität": 0, "Ausdauer": 1, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 2, "Wahrnehmung": 0 },
     "Magier": { "Intelligenz": 2, "Wahrnehmung": 1 }
     "Magier": { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 0, "Intelligenz": 2, "Konstitution": 0, "Resistenz": 1, "Stärke": 0, "Wahrnehmung": 0 }
   };
   };


   const subklassenBoni = {
   const subklassenBoni = {
     "Paladin": { "Stärke": 1, "Konstitution": 1 },
     "Berserker":     { "Agilität": 1, "Ausdauer": 1, "Charisma": 0, "Geschick": 0, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 1, "Wahrnehmung": 0 },
     "Hexer": { "Intelligenz": 1, "Charisma": 1 }
     "Hexenmeister": { "Agilität": 0, "Ausdauer": 0, "Charisma": 2, "Geschick": 0, "Intelligenz": 1, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 }
   };
   };


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


   const subspeziesBoni = {
   const subspeziesBoni = {
     "Waldelf": { "Wahrnehmung": 1 },
     "Waldelf": { "Agilität": 0, "Ausdauer": 0, "Charisma": 0, "Geschick": 1, "Intelligenz": 0, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 1 },
     "Stadtmensch": { "Charisma": 1 }
     "Stadelf": { "Agilität": 0, "Ausdauer": 0, "Charisma": 1, "Geschick": 0, "Intelligenz": 1, "Konstitution": 0, "Resistenz": 0, "Stärke": 0, "Wahrnehmung": 0 }
   };
   };


   function berechneWerte() {
  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] || attributeListe.reduce((acc, attr) => (acc[attr] = 0, acc), {});
  }
 
  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 used = sumUserInput();
    const remaining = total - used;
 
    document.getElementById("punkteInfo").textContent = `Verbleibende Punkte: ${remaining} / ${total}
(Du kannst theoretisch 3 Gegenstände für je +10 Punkte auswählen.)`;
  }
 
  function berechneCharakter() {
     const name = document.getElementById("name").value;
     const name = document.getElementById("name").value;
     const klasse = document.getElementById("klasse").value;
     const klasse = document.getElementById("klasse").value;
Zeile 147: Zeile 166:
     const subspezies = document.getElementById("subspezies").value;
     const subspezies = document.getElementById("subspezies").value;


     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;
    if (!subklasse) bonus += 15;
    if (!subspezies) bonus += 20;
 
    const boniQuellen = [klassenBoni[klasse], subklassenBoni[subklasse], rassenBoni[rasse], subspeziesBoni[subspezies]];
    boniQuellen.forEach(quell => {
      if (quell) {
        for (let attr in quell) {
          werte[attr] += quell[attr];
        }
      }
     });
     });


    let vergeben = Object.values(werte).reduce((a, b) => a + b, 0);
     const gesamt = {};
    let gesamtPunkte = basispunkte + bonus;
     attributeListe.forEach(attr => {
    let verbleibend = gesamtPunkte - vergeben;
       gesamt[attr] =
 
        basisAttribute[attr] +
    // Tabelle neu generieren
        getBonus(klassenBoni, klasse)[attr] +
     const attrBody = document.getElementById("attrBody");
        getBonus(subklassenBoni, subklasse)[attr] +
    attrBody.innerHTML = "";
        getBonus(rassenBoni, rasse)[attr] +
     attribute.forEach(attr => {
        getBonus(subspeziesBoni, subspezies)[attr];
       const row = `<tr><td>${attr}</td><td>${werte[attr]}</td></tr>`;
      attrBody.insertAdjacentHTML("beforeend", row);
     });
     });
    document.getElementById("punkteAnzeige").textContent = `Verfügbare Punkte: ${verbleibend}`;


     const daten = {
     const daten = {
       Name: name,
       Name: name,
       Klasse: klasse,
       Klasse: klasse,
       Subklasse: subklasse || "Keine",
       Subklasse: subklasse || "Keine (15 Punkte erhalten)",
       Rasse: rasse,
       Rasse: rasse,
       Subspezies: subspezies || "Keine",
       Subspezies: subspezies || "Keine (20 Punkte erhalten)",
       Attribute: werte,
       Verwendete_Punkte: sumUserInput(),
       Verfügbare_Punkte: verbleibend,
       Gesamt_Punkte: basisPunkte + (subklasse ? 0 : 15) + (subspezies ? 0 : 20),
       Hinweis: "Du kannst zusätzlich 3 Gegenstände wählen, die je 10 Punkte geben würden."
       Hinweis: "Du kannst zusätzlich 3 Gegenstände für je 10 Punkte auswählen.",
      Attribute: gesamt
     };
     };


Zeile 191: Zeile 196:
   }
   }


   function exportiereDaten() {
   function exportiereCharakter() {
     const ausgabe = document.getElementById("ausgabe").textContent;
     const daten = document.getElementById("ausgabe").textContent;
     if (!ausgabe) {
     if (!daten) {
       alert("Bitte erst Werte berechnen.");
       alert("Bitte zuerst berechnen!");
       return;
       return;
     }
     }
 
     const blob = new Blob([daten], { type: "application/json" });
     const blob = new Blob([ausgabe], { type: "application/json" });
     const url = URL.createObjectURL(blob);
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     const a = document.createElement("a");
     a.href = url;
     a.href = url;
     a.download = "charakter.json";
     a.download = "charakter.json";
     a.click();
     a.click();
     URL.revokeObjectURL(url);
     URL.revokeObjectURL(url);
   }
   }
  updateRemainingPoints();
</script>
</script>
</html>
</html>

Version vom 26. Juli 2025, 08:09 Uhr

Charakter Creator

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