Variabler "XP-Balken" als Ranggrafik je nach Punkten des Nutzers

Rabe · January 24, 2016 at 2:16 PM

Hallo zusammen,

ich würde unheimlich gerne sogenannte XP-Balken, wie in einem Computer- oder Browserspiel, als Ranggrafiken haben. Natürlich könnte ich einfach sehr viele verschiedene Ränge erstellen mit jeweils einem etwas mehr gefüllten Balken und darunter stehendem "Level" erstellen, aber... ich hätte es lieber, wenn es eine Möglichkeit gäbe, die Punkte, die ein Benutzer hat, auszulesen und damit zu arbeiten.

Beispiel: Von 0-100 Punkten ist man "Level 1", der Balken, der als Ranggrafik dient, füllt sich bis 99%, ab 100% ist man "Level 2" mit einem Balken mit 0% Fortschritt. So geht das alle 100 Punkte weiter.

Ist das annähernd "einfach" zu lösen? Meine Kenntnisse in dem Bereich sind einfach viel zu rudimentär, um es wirklich umzusetzen, und ich finde leider auch keine ähnlich gelagerten Beispiele, aus denen ich "abschreiben" könnte.

Danke und liebe Grüße,
der Rabe

Rebooto · January 24, 2016 at 2:33 PM

Wenn du es wirklich "einfach" halten willst, kannst du einen Template-Listener auf die messageSidebar setzen (je nachdem wo das ganze dann erscheinen soll) und darin die Aktivitätspunkte des Users auslesen und durch 100 teilen lassen. Damit hättest du schon mal das Level und via Restrechnung bekommst du dann auch noch den aktuellen Fortschritt raus. Den Balken ansich kannst du dann per CSS oder JavaScript bauen.

Also:

Abrunden(AP / 100) = Level

AP % 100 = Fortschritt (zur nächsten 100)

% -> Zeichen zur Restrechnung

Rabe · January 24, 2016 at 2:36 PM

Das macht Sinn - allerdings habe ich keine Ahnung, wie ich das tatsächlich einbaue.

Wäre es möglich, dass du mir da ein wenig beim eigentlichen CSS und dem Hinbasteln hilfst? Ich traue mir ja tatsächlich zu, das Design der Balken mit CSS selbst zu verändern, aber solche Sachen mit Auslesen... huh, da bin ich überfragt und muss mir helfen lassen.

Rebooto · January 24, 2016 at 3:14 PM

Du könntest dir einfach folgendes Plugin installieren:

woltlab.com/pluginstore/file/1494/

Und unter Darstellung -> Templates -> Template-Listener hinzufügen folgendes eintragen:

Code

{assign var=level value=$userProfile->activityPoints / 100}
{assign var=progress value=$userProfile->activityPoints % 100}
<strong>Level {$level|floor}</strong>
<br />
<progress max="100" min="0" value="{$progress}"></progress><br />
<span>{$progress} XP / 100 XP</span>

Daraus wird dann:

Die Details kannst du ja dann noch selber anpassen

Rabe · January 24, 2016 at 3:27 PM

Ha, perfekt! Das hat soweit alles geklappt. Vielen Dank!

Letzte Frage: Wie setze ich das dann als Rang-Grafik ein? Dafür bin ich noch etwas zu doof gerade.

Rebooto · January 24, 2016 at 3:33 PM

Eine Ranggrafik ansich brauchst du ja dann eigentlich gar nicht mehr

Oder was meinst du damit?

Rabe · January 24, 2016 at 3:40 PM

Ich meine, wie ich dafür sorge, dass es als Ranggrafik (bzw. hier eher anstatt der Ranggrafik) unter den jeweiligen Avataren der Nutzer eingeblendet wird.

Sorry für die dämliche Fragerei, ich wette, die Antwort ist entsprechend simpel...

Rebooto · January 24, 2016 at 3:44 PM

Ach unter dem Avatar..ja dazu musst du eig nur das Feld Event von header auf beforeCredits ändern

T1N0 · January 24, 2016 at 3:45 PM

Vielen Dank @Rebooto

Rabe · January 24, 2016 at 3:47 PM

Ich sag ja, es war super einfach...

Vielen Dank! Klappt alles wunderbar.

Rebooto · January 24, 2016 at 3:57 PM

Ach keine Ursache

Für weitere Informationen wie man die Progressbars weiter stylen kann siehe zb: https://css-tricks.com/html5-progress-element/

Rabe · January 24, 2016 at 9:57 PM

Ha, ich habe noch ein "Problem" entdeckt, auf das ich auch mit verschiedenen Styles des Progress Bars keine Lösung finden konnte.

In Microsoft Edge (ja, den benutzen ja angeblich einige Leute) geht der Progress Bar einfach nach rechts in jeden Post rein. Ich probiere gerade weiter rum, ob ich das irgendwie abstellen kann bzw. eine maximale Breite angeben kann, aber so recht will es noch nicht.

Hast du da noch eine Idee?

T1N0 · January 24, 2016 at 10:17 PM

CSS

progress {
	max-width: 70%;
}

Breite der Progressbar bitte selbst anpassen ob % oder px

Rabe · January 25, 2016 at 12:40 PM

...da hätte ich auch selbst drauf kommen können. *Kopf -> Tisch*

Vielen Dank nochmal! Ich finde die Hilfe, die man hier im Forum auch als ziemlicher CSS- und genereller Codenoob bekommt, immer wieder toll.

T1N0 · January 25, 2016 at 12:45 PM

Ich bin in Sachen CSS auch ein noob. Aber lerne auch immer durch Experimente

Fabi_995 · January 25, 2016 at 1:05 PM

Quote from T1N0

Ich bin in Sachen CSS auch ein noob

Is aber 1000x leichter als php

Rabe · January 25, 2016 at 7:43 PM

Ich habe direkt noch eine Frage. Ich mache mal kein neues Thema auf, weil mir bestimmt einer von euch die Antwort geben kann und ich dann nicht alles mit doofen Fragen zuspamme.

Wir arbeiten mit dem VieCode Lexikon. Wie bekomme ich es hin, dass Schlagworte bzw. Synonyme auch in der Seitenleiste (messageSidebar) im Forum erkannt und automatisch ein Link daraus gemacht wird?

mcburn · January 25, 2016 at 7:57 PM

Dann wende dich damit mal an VieCode. Denn das was du willst hat mit dem Thema hier rein gar nichts zu tun.

T1N0 · February 11, 2016 at 6:29 AM

Für die Faulen als Paket

WBB4.0/4.1 Tauglich

norse · February 11, 2016 at 9:02 AM

Warum wird das WBB als benötigtes Paket angegeben? Das ist m. E. nicht richtig.

Gruß norse

Participate now!