15.2 - Die Erklärung
In Ordnung, schauen wir uns das Makro näher an. Beachte, dass jede Tabelle mit
border: 0px formatiert wird, damit es keinen störenden Rahmenabstand gibt. Um das Beispiel einfacher zu halten verzichten wir auf zentrale CSS-Angaben im Header oder in einem Stylesheet.
Code: Select all
[h: assert(hasImpersonated(), "Bitte erst einen Spielstein verkörpern.", 0)]
Zuerst prüfen wir mit
hasImpersonated() ob der User einen Token verkörpert hat. Diese Prüfung packen wir in eine
assert()-Abfrage. Sollte also kein Token verkörpert sein erscheint eine Fehlermeldung und das Makro wird abgebrochen.
Code: Select all
[frame("charbogen", "width=300; height=300; temporary=1"):
{
<html>
<head>
<title>
Charakterbogen
</title>
</head>
<body>
Hier erstellen wir ein Fenster, in diesem Fall ein
Frame, in dem der Charakterbogen angezeigt werden soll. Anschließend folgt der Anfang des HTML-Aufbaus inkl. dem Titel für das Fenster (Charakterbogen).
Code: Select all
<table style='border-spacing: 0px; background-color: #008000; width: 218'>
<tr>
<td style='text-align: center; padding: 6px'>
<img src='[r: getTokenImage(50)]'>
</td>
<td style='font-size: 14pt; font-weight: bold; color: #ffffff; width: 150'>
[r: getImpersonatedName()]
</td>
</tr>
</table>
Jetzt kommt die erste Tabelle, in der wir Tokenbild und Tokenname unterbringen. Für die Tabelle legen wir mit
width eine Breite von 218 Pixel fest und wählen mit
background-color ein dunkles Grün als Hintergrundfarbe.
Code: Select all
<td style='text-align: center; padding: 6px'>
<img src='[r: getTokenImage(50)]'>
</td>
Die erste Zelle im Detail: Wir zeigen mit dem HTML-Element
img das Tokenbild an. Um an die
asset-Adresse des Bildes zu kommen benutzen wir die Funktion
getTokenImage(), und geben als Parameter "50" an damit das Tokenbild in einer Breite von 50 Pixel angezeigt wird. Die Tabellenzelle selbst formatieren wir noch mit
text-align, damit das Tokenbild zentriert in der Zelle angezeigt wird, und mit
padding, damit das Bild noch einen etwas größeren Abstand zum Zellenrahmen bekommt. Das sieht einfach besser aus.
Code: Select all
<td style='font-size: 14pt; font-weight: bold; color: #ffffff; width: 150'>
[r: getImpersonatedName()]
</td>
Die zweite Zelle im Detail: Mit
getImpersonatedName() lassen wir den Tokennamen anzeigen. Der Tokenname soll sich deutlich abheben, also sorgen wir in der Tabellenzelle mit
font-size für eine etwas größere Schrift, mit
font-weight für fetten Text, und mit
color legen wir als Schriftfarbe "Weiß" fest. Außerdem legen wir mit
width eine Breite von 150 Pixel für die Zelle fest. Da die Tabelle selbst eine Breite von 218 Pixel hat, wird der restliche Platz also für die erste Tabellenzelle mit dem Tokenbild genutzt.
Code: Select all
<table style='color: #044004; border-spacing: 0px; border: 2px solid #008000; border-top: none; background-color: a4c8a4; width: 214'>
<tr>
<td valign='middle'>
Platzhalter für Tabelle mit Eigenschaftswerten
</td>
<td style='width: 20px'>
</td>
<td>
Platzhalter für Tabelle mit Kampfwerten
</td>
</tr>
</table>
Jetzt kommt die zweite Tabelle, die sich nahtlos an die erste anschließt. Im Charakterbogen ist also kein Abstand zwischen diesen beiden Tabellen zu erkennen. Die Tabelle hat eine Zeile mit drei Zellen und dient nur zur Struktur und zum Design.
In die erste Zelle tragen wir in Kürze eine weitere Tabelle mit den Eigenschaftswerten des Tokens ein. Die dritte Zelle benötigt in der Höhe mehr Platz, da es vier Kampfwerte aber nur drei Eigenschaftswerte gibt. Mit
valign='middle' sorgen wir also dafür, dass die Tabelle mit den Eigenschaftswerten in der ersten Zelle vertikal zentriert angezeigt wird.
Die zweite Zelle mit einer Breite von 20 Pixel soll nur als Abstandshalter zwischen Eigenschaftswerten und Kampfwerten dienen, deswegen ist in der Zelle nur ein Leerzeichen eingetragen.
Dann kommt die dritte Zelle, in der wir in Kürze die Tabelle mit den Kampfwerten eintragen werden.
In der gesamten Tabelle sorgen wir mit
color für eine andere Schriftfarbe, in unserem Fall ein sehr dunkles Grün. Mit
border legen wir einen zwei Pixel breiten Rahmen fest, dessen Farbe dem Hintergrund unserer ersten Tabelle mit Tokenbild und Tokennamen entspricht. So wirkt nachher alles wie aus einem Guss. Die obere Seite der Tabelle sollte natürlich keinen Rahmen bekommen, sonst wirken die Abstände in der ersten Tabelle nicht mehr richtig. Mit
border-top: none verhindern wir also die Anzeige des Rahmens an der oberen Seite.
Als Hintergrundfarbe für diese Tabelle bestimmen wir mit
background-color ein helles Grün, und mit
width legen wir eine Breite von 214 Pixel fest. Das sind vier Pixel weniger als die Breite der ersten Tabelle, aber wir dürfen ja auch nicht vergessen, dass noch der Rahmen links und rechts jeweils zwei Pixel breit ist.
Code: Select all
<table style='border-spacing: 0px'>
<tr>
<td>
Stärke
</td>
<td style='text-align: right'>
[r: Staerke]
</td>
</tr>
<tr>
<td>
Geschick
</td>
<td style='text-align: right'>
[r: Geschick]
</td>
</tr>
<tr>
<td>
Klugheit
</td>
<td style='text-align: right'>
[r: Klugheit]
</td>
</tr>
</table>
Das hier ist nun die Tabelle mit den Eigenschaftswerten, die den Platzhalter in der ersten Zelle der obigen Tabelle ersetzt. Die Tabelle hat drei Zeilen mit je zwei Zellen, in denen der Name der Eigenschaft und der Eigenschaftswert (durch Abrufen des passenden Properties) angezeigt wird. Die Zellen mit den eigentlichen Werten formatieren wir mit
text-align, damit die Werte rechtsbündig in der Zelle ausgerichtet werden. Das sieht besser aus falls einige Werte aus zwei Stellen, und andere Werte nur aus einer Stelle bestehen, denn die Werte werden ja untereinander angezeigt.
Code: Select all
<table style='border-spacing: 0px'>
<tr>
<td>
Angriff
</td>
<td style='text-align: right'>
[r: Angriff]
</td>
</tr>
<tr>
<td>
Verteidigung
</td>
<td style='text-align: right'>
[r: Verteidigung]
</td>
</tr>
<tr>
<td>
Rüstung
</td>
<td style='text-align: right'>
[r: Ruestung]
</td>
</tr>
<tr>
<td>
Hitpoints
</td>
<td style='text-align: right'>
[r: HP]
</td>
</tr>
</table>
Das hier ist die Tabelle mit den Kampfwerten, die den Platzhalter in der dritten Zelle der obigen Tabelle ersetzt. Die Tabelle ist genauso aufgebaut wie die Tabelle mit den Eigenschaftswerten. Eine nähere Erklärung spare ich mir also.
Jetzt kommen noch die abschließenden HTML-Tags und die Klammern zum Schließen des Fensters (Frame). Fertig, der Charakterbogen ist einsatzbereit!