Allgemeines > Fragen und Anregungen

[Mod] Uses/(Health-)Bar

(1/12) > >>

Feuerrabe:
Anwendungsbeispiele für "uses" und "bar" Tag in Status Posts:

"bar" Tags:

--- Code: ---HP: [bar]8/8[/bar]
--- Ende Code ---
HP: 8 / 8

Andere Möglichkeiten:

--- Code: ---HP: [bar]5/8[/bar]
HP: [bar]-2/8[/bar]
HP: [bar]-10/5/10[/bar]
HP: [bar]-10/-5/10[/bar]
--- Ende Code ---

HP: 5 / 8
HP: -2 / -16
HP: 5 / 10
HP: -5 / -10

Beispiel für einen Fehlerfall:

--- Code: ---[bar]5/0[/bar]
--- Ende Code ---
[bar]5/0[/bar]Grenzen überschneiden sich!

"uses" Tags:

--- Code: ---Arcane Pool: [uses]6/6[/uses]
--- Ende Code ---
Arcane Pool: ☐☐☐☐☐☐


--- Code: ---Arcane Pool: [uses]1/6[/uses]
--- Ende Code ---
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.

Schriftart
Nachträ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äfte
Viele 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 einmal
Man 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.

Prozentbalken
Ich 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/1BYvtoYlFKcTFEt3kxh3mN


--- Code: ---div.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%);
}
--- Ende Code ---

Daishy:
Kriegst im laufe des Tages ne Antwort und ne PM :)

Daishy:
@Schriftart
Ich vermute mal auf dem Server bzw. dem SMF muesste eine monospace-Schriftart installiert werden. Wie du aber schon richtig gesagt hast, duerfte das nur uebers CSS formatiert werden, so das es immernoch darauf ankommt, ob der Client, der sich deinen Post gerade anguckt, die Schriftart installiert hat. Da muesste man dann also wohl eine Schriftart nehmen, die per Default auf jedem System vorhanden ist und dazu noch Monospaced (Bei Gelegenheit gucke ich mal nach, ob der Server sowas in die Richtung hat)


@Smilies/Verbraucht/Unverbrauch:
Das ist eine nette Idee, wobei man ueberlegen muesste, welche Grafiken/Bausteine man benutzt bzw. wie die fuer den Nutzer waehlbar macht. Bin mir jetzt schon relativ sicher, dass hier keine einheitliche Praeferenz besteht. Ansonsten sollte das relativ leicht ueber einen Mod zu implementieren sein (Naeheres dazu in der PM)


@Prozentbalken:
Auch das klingt nach einer netten Idee, die sich umsetzen liesse. Das mit dem CSS3 ist ansich kein Problem, da ich persoenlich hier im Gate keine Ruecksicht auf den IE 6/8 genommen habe und dies auch weiterhin nicht plane zu tun. Zu dem Rest auch per PM mehr.

Idunivor:

--- Zitat von: Daishy am 05.09.2013, 09:57:26 ---@Smilies/Verbraucht/Unverbrauch:
Das ist eine nette Idee, wobei man ueberlegen muesste, welche Grafiken/Bausteine man benutzt bzw. wie die fuer den Nutzer waehlbar macht. Bin mir jetzt schon relativ sicher, dass hier keine einheitliche Praeferenz besteht. Ansonsten sollte das relativ leicht ueber einen Mod zu implementieren sein (Naeheres dazu in der PM)
--- Ende Zitat ---

Dazu kann ich schonmal sagen: Gateler sind Gewohnheitstiere. Ich bin mir sehr sicher, dass einige hier es gern so behalten würden, wie es jetzt ist. D.h. es sollte auf keinen Fall automatisch jedes [X] in was anderes umgewandelt werden.

Feuerrabe:
Also für die Grafiken denke ich, kann ich mir was eigenes machen. Also gerade simple Sachen wie ein stilisierter Becher oder eine Checkbox werde ich gerade noch hinkriegen.


--- Zitat von: Idunivor am 05.09.2013, 10:55:57 ---
--- Zitat von: Daishy am 05.09.2013, 09:57:26 ---@Smilies/Verbraucht/Unverbrauch:
Das ist eine nette Idee, wobei man ueberlegen muesste, welche Grafiken/Bausteine man benutzt bzw. wie die fuer den Nutzer waehlbar macht. Bin mir jetzt schon relativ sicher, dass hier keine einheitliche Praeferenz besteht. Ansonsten sollte das relativ leicht ueber einen Mod zu implementieren sein (Naeheres dazu in der PM)
--- Ende Zitat ---

Dazu kann ich schonmal sagen: Gateler sind Gewohnheitstiere. Ich bin mir sehr sicher, dass einige hier es gern so behalten würden, wie es jetzt ist. D.h. es sollte auf keinen Fall automatisch jedes [X] in was anderes umgewandelt werden.

--- Ende Zitat ---

Also man sollte die Leute jedenfalls nicht plötzlich damit überfallen. Vielleicht baut man es erst einmal anders ein (also beispielsweise :x: und :_:) und wartet ab, was die Leute dazu sagen, wenn sie sich erst einmal daran gewöhnt haben.

Navigation

[0] Themen-Index

[#] Nächste Seite

Zur normalen Ansicht wechseln