Anwendungsbeispiele für "uses" und "bar" Tag in Status Posts:
"bar" Tags:HP: [bar]8/8[/bar]HP:
Andere Möglichkeiten:
HP: [bar]5/8[/bar]
HP: [bar]-2/8[/bar]
HP: [bar]-10/5/10[/bar]
HP: [bar]-10/-5/10[/bar]HP:
HP:
HP:
HP:
Beispiel für einen Fehlerfall:
[bar]5/0[/bar][bar]5/0[/bar]
Grenzen überschneiden sich!"uses" Tags:Arcane Pool: [uses]6/6[/uses]Arcane Pool: ☐☐☐☐☐☐
Arcane Pool: [uses]1/6[/uses]Arcane Pool: ☒☒☒☒☒☐
Hallo,
mir sind einige wiederkehrende Elemente in Status Post aufgefallen, die zwar so auch ganz gut funktionieren, den Möglichkeiten aber nicht so ganz gerecht werden. Natürlich funktioniert es auch so ganz gut, ich möchte lediglich auf ein paar Optionen hinweisen.
SchriftartNachträglich noch eingefügt, halb Frage, halb Vorschlag:
Ich definiere meine Charakterbögen gerne in Textdateien, die ich dann gerne in einer Monospaced Schriftart poste.
Zwar kennt das Forum auch Tabellen, aber Plain-Text ist leichter zu verwalten. Dazu verwende ich bis jetzt immer \[font=Courier New\] Tags, was aber auf einem Mac- oder Linux-System zu anzeigeproblemen führen würde. \[font=monospaced\] funktioniert irgendwie nicht. Wie bekommt man das hin?
Smilies für verbrauchte und zur Verfügung stehende KräfteViele Benutzer verwenden ASCII-Art Bildchen um grafisch darzustellen, wie oft sie eine gegebene tägliche Kraft noch verwenden wollen.
Entweder [_] und [x] oder |_| und |X|. Es wäre schön, wenn das Smilies wären und in der Grundform durch einen stilisierten leeren und vollen Becher oder einfach eine leere und angekreuzte Checkbox ersetzt würden, dabei sollte die Gestaltung schlicht sein, man will den Benutzern ja keine komplexe Grafik aufzuwängen.
Darüber hinaus könnte es in der Smilie-Leiste Altrnativen geben. Voller und leerer Hexenkessel, brennendes und abgebranntes Lagerfeuer.
Mehrere der oben genannten Dinge auf einmalMan könnte Templates (oder wie auch immer man das nennt - Templates sind in phpBB Boards etwas anderes aber ich weiß nicht wie man es richtig nennt) definieren mit denen man mehrere dieser Kraftmarker auf einmal definieren könnte. [pa=2] (power available) für eine Kraft, die noch zweimal zur Verfügung steht. [pu=3] (power used) für eine Kraft die schon drei mal verbraten wurde.
Dabei sollte auch der Parameter "0" erlaubt sein. Dann wird gar nichts angezeigt.
Aber wenn man sowas hat wie:
Bardenlied: [pa=0][pu=4]
Dann muss man nur die Zahlen verändern wenn der Charakter sich ausruht.
ProzentbalkenIch habe vor einiger Zeit mal mit CSS3 experimentiert und dabei für einen Champions Online Charakter in einem Wiki (das blöderweise gerade nicht online ist) eine Übersichtsleiste erstellt. Dabei bin darauf gekommen, dass man mit linear-gradient CSS 3 Elementen sehr gut Prozentbalken darstellen kann.
Man könnte also beispielsweise [percent=18] Elemente gestatten, die so einen Balken darstellen. Oder [pointLevel=3/11] (falls ein Slash in einem Parameter erlaubt ist).
Wenn sowas gewünscht ist kann ich gerne eine JavaScript Funktion schreiben, die sowas macht (dann muss ich wissen was Input sein soll - zum Beispiel Zähler, Nenner und optional Start- und Endfarbe, Default rot nach grün, als umgekehrt von dem was unten zu sehen ist. Und die Ausgabe - in ein DOM Objekt verändern, in den Output schreiben, als String zurückgeben etc). Allerdings eine kleine Warnung: Internet Explorer 8 kennt keine Linear Gradients, was unter Windows XP Probleme machen kann. Außerdem müsste der Benutzer dann natürlich zwangsweise JavaScript angeschaltet haben, sonst funktionieren höchsten statisch vordefinierte Balken, und dann kann man auch gleich Bilder verwenden.
EDIT: Ich könnte natürlich auch eine PHP Funktion schreiben, die dann auf der Serverseite eingebaut werden kann. Ist vielleicht einfacher, weil das bb-Code Tag ja sowieso ersetzt werden muss und ich mit PHP viel besser vertraut bin als mit JavaScript. Wenn JavaScript würde ich wert auf jQuery legen.
Es ist durchaus möglich auch Text drüber zu schreiben, so dass man Sagen könnte:
HP: [pointLevel=3/11]
und die Funktion würde dann einen Balken machen in dem das auch noch einmal drin steht.
Nebenbei möchte ich anmerken, dass fast alles aus dem Beispiel unten CSS 3 ist, gerendert von Firefox. Die Schlagschatten, die abgerundeten Kanten und Rahmen, das automatische Alternieren der Hintergrundfarbe in der Tabelle (die Tabellenzellen unterscheiden sich nicht im HTML, auch nicht in der CSS Klasse, das ist alles mit CSS 3 Selektoren geregelt.)
Beispiel:
http://ubuntuone.com/1BYvtoYlFKcTFEt3kxh3mNdiv.rabenschwinge td.no {
}
div.rabenschwinge td.one {
background: linear-gradient(to right, green 0%, rgb(25, 229, 0) 10%, black 10%, black 10.5%, transparent 10.5%, transparent 100%);
}
div.rabenschwinge td.two {
background: linear-gradient(to right, green 0%, rgb(51, 204, 0) 20%, black 20%, black 20.5%, transparent 20.5%, transparent 100%);
}
div.rabenschwinge td.three {
background: linear-gradient(to right, green 0%, rgb(76, 178, 0) 30%, black 30%, black 30.5%, transparent 30.5%, transparent 100%);
}
div.rabenschwinge td.four {
background: linear-gradient(to right, green 0%, rgb(102, 153, 0) 40%, black 40%, black 40.5%, transparent 40.5%, transparent 100%);
}
div.rabenschwinge td.five {
background: linear-gradient(to right, green 0%, rgb(127, 127, 0) 50%, black 50%, black 50.5%, transparent 50.5%, transparent 100%);
}
div.rabenschwinge td.six {
background: linear-gradient(to right, green 0%, rgb(153, 102, 0) 60%, black 60%, black 60.5%, transparent 60.5%, transparent 100%);
}
div.rabenschwinge td.seven {
background: linear-gradient(to right, green 0%, rgb(178, 76, 0) 70%, black 70%, black 70.5%, transparent 70.5%, transparent 100%);
}
div.rabenschwinge td.eight {
background: linear-gradient(to right, green 0%, rgb(204, 51, 0) 80%, black 80%, black 80.5%, transparent 80.5%, transparent 100%);
}
div.rabenschwinge td.nine {
background: linear-gradient(to right, green 0%, rgb(229, 25, 0) 90%, black 90%, black 90.5%, transparent 90.5%, transparent 100%);
}
div.rabenschwinge td.ten {
background: linear-gradient(to right, green 0%, red 100%);
}
