Custom widget Goals

[stazhopper]

Bonjour,
ça fait plusieurs heures que je tente de trouver un moyen de faire une barre de goals qui fonctionne avec un système de pourcentage et qui inclut les subs / resub (T1, T2 T3 et prime) et bits mais je ne trouve pas où je peux trouver des exemples de code du coup je me tourne vers la commu de Wizebot ^^’

je mets un exemple de ce que j’aimerais

[Dere011]

Bonjour,
Le modèle “custom” contient tout ce qu’il faut

J’ai modifié et supprimé les éléments inutiles pour obtenir presque le résultat souhaité :

HTML:

<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<div class="template">
    <div class="goal-bar-container">
        <div class="goal-bar-progress"></div>
        <div class="goal-values">
            <span id="current-value">0</span>
        </div>
    </div>
</div>

CSS:

.template {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    width: 90%;
    min-width: 400px;
    max-width: 800px;
}

.goal-bar-container {
    height: 47px;
    background-color: #e1e1e180;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.goal-bar-progress {
    position: absolute;
    height: 100%;
    background-color: #2bb702;
    width: 0%;
    transition: width 0.5s;
    z-index: 999;
}

.goal-values {
    position: inherit;
    font-size: 24px;
    text-align: center;
    height: 50px;
    margin-top: 5px;
    z-index: 1000;
}

.goal-values span {
    display: block;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 10px;
}

JS:

function updateGoalWidget() {
    let startValue                  = 0;
    let endValue                    = goal_ultime;
    let currentStepTitle            = '';

    for (let i = 0; i < steps.length; i++) {
        if (goal_value < steps[i].minimum && (steps[i].is_locked ?? 0) === 0) {
            endValue = steps[i].minimum;
            currentStepTitle = steps[i].title ?? '';
            break;
        }
    }

    if (steps.length === 0 || goal_value >= steps[steps.length - 1].minimum) {
        endValue            = goal_ultime;
        currentStepTitle    = '';
    }

    let percentage = (goal_value / endValue) * 100;
    if(percentage > 100)    { percentage = 100; }

    $('.goal-bar-progress').css('width', `${percentage}%`);
    $('#current-value').text(`${parseInt(percentage)}%`);
    $('#current-step-title').text(currentStepTitle);
}

function handleIncomingDatas(data) {
    goal_value  = data.goal_value;
    goal_ultime = data.goal_ultime;
    updateGoalWidget();
}

setInterval(callUpdatedDatas, 5000);
callUpdatedDatas();

Ce qui donne :