CharakterCreator: Unterschied zwischen den Versionen
Aus Dunkelherzen Wiki
DRP (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
DRP (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 2: | Zeile 2: | ||
<style> | <style> | ||
.creator-form { | .creator-form { | ||
max-width: | max-width: 700px; | ||
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 10: | Zeile 22: | ||
font-weight: bold; | font-weight: bold; | ||
display: block; | display: block; | ||
margin-top: | margin-top: 15px; | ||
} | } | ||
.creator-form input, | .creator-form input, .creator-form select { | ||
width: 100%; | width: 100%; | ||
padding: 5px; | padding: 5px; | ||
} | } | ||
.creator-form button { | .creator-form button { | ||
margin-top: | margin-top: 20px; | ||
padding: 10px; | padding: 10px; | ||
width: 100%; | width: 100%; | ||
| Zeile 27: | Zeile 37: | ||
.output { | .output { | ||
margin-top: | margin-top: 25px; | ||
padding: 10px; | padding: 10px; | ||
background: #f8f8f8; | background: #f8f8f8; | ||
| Zeile 54: | Zeile 64: | ||
<option value="Elf">Elf (+1 Geschick)</option> | <option value="Elf">Elf (+1 Geschick)</option> | ||
</select> | </select> | ||
<table class="attr-table" id="attrTabelle"> | |||
<thead> | |||
<tr> | |||
<th>Attribut</th> | |||
<th>Wert</th> | |||
</tr> | |||
</thead> | |||
<tbody> | |||
<tr><td>Stärke</td><td id="stärke">5</td></tr> | |||
<tr><td>Intelligenz</td><td id="intelligenz">5</td></tr> | |||
<tr><td>Charisma</td><td id="charisma">5</td></tr> | |||
<tr><td>Geschick</td><td id="geschick">5</td></tr> | |||
</tbody> | |||
</table> | |||
<button onclick="berechneWerte()">Werte berechnen</button> | <button onclick="berechneWerte()">Werte berechnen</button> | ||
| Zeile 67: | Zeile 92: | ||
const rasse = document.getElementById("rasse").value; | const rasse = document.getElementById("rasse").value; | ||
// | // Basiswerte | ||
let werte = { | let werte = { | ||
Stärke: 5, | Stärke: 5, | ||
| Zeile 83: | Zeile 108: | ||
if (rasse === "Elf") werte["Geschick"] += 1; | if (rasse === "Elf") werte["Geschick"] += 1; | ||
// Anzeige aktualisieren | |||
document.getElementById("stärke").textContent = werte["Stärke"]; | |||
document.getElementById("intelligenz").textContent = werte["Intelligenz"]; | |||
document.getElementById("charisma").textContent = werte["Charisma"]; | |||
document.getElementById("geschick").textContent = werte["Geschick"]; | |||
// JSON-Ausgabe | |||
const daten = { | const daten = { | ||
Name: name, | Name: name, | ||
| Zeile 96: | Zeile 128: | ||
const ausgabe = document.getElementById("ausgabe").textContent; | const ausgabe = document.getElementById("ausgabe").textContent; | ||
if (!ausgabe) { | if (!ausgabe) { | ||
alert("Bitte erst | alert("Bitte erst Werte berechnen."); | ||
return; | return; | ||
} | } | ||
| Zeile 112: | Zeile 144: | ||
</script> | </script> | ||
</html> | </html> | ||
Version vom 26. Juli 2025, 07:30 Uhr
Charakter Creator
| Attribut | Wert |
|---|---|
| Stärke | 5 |
| Intelligenz | 5 |
| Charisma | 5 |
| Geschick | 5 |
