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

    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

    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

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


    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.

    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 ;)

    Edited once, last by Rebooto: Code als Text hinzugefügt ().

    Like 2

    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.

    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. :D


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

    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? :)

    ...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. <3

    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?

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

    Ich mache keine Fehler.......

    Ich erschaffe Katastrophen

    Like 1

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





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

    Like 1

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login