probleme barres d'energie

[kevin74]

[Sephi-Chan]

Je te conseille de faire en sorte de renvoyer une sortie HTML de ce genre :

Le CSS :

Code :

.barrePourcentage {
   width: 100px;
   border: 1px solid #000;
   background: #fff;
}

Le HTML :

Code :

<div class="barrePourcentage"><img src="barreRouge.jpg" width="<?php echo $pourcentage;?>" alt="<?php echo $pourcentage;?>% de vie"/></div>

Sephi-Chan

[Anthor]

Bonsoir,
je vous propose ma solution.



Le résultat de l'exemple est visible ici : http://snippets.anthor.net/progressbar.htm

Le code ( 100% compatible tous navigateurs )

Code PHP :

<?php 

<style type="text/css">

.progressbar{

    border: 1px solid #000000;

    width: 190px;

    height: 18px;

    position: relative;

    color: #000000;

    font-weight: bold;

}

.progressbar div.progress{

    position: absolute;

    width: 0;

    height: 100%;

    overflow: hidden;

    background-color: #B00000;

}

.progressbar div.progress .text{

    position: absolute;

    text-align: center;

    color: #FFFFFF;

}

.progressbar div.text{

    position: absolute;

    width: 100%;

    height: 100%;

    text-align: center;

}

.progressbar span.text{

    width: 190px;

}



/* Couleur spécifique */

.green{

    border: 1px solid #FF0000;

    color: #000000; 

}

.green div.progress{

    background-color: #00FF00;

}

.green div.progress .text{

    color: #FF0000;

}



/* Image */

.image{

    border: 1px solid #000000;

    color: #000000; 

}

.image div.progress{

    background-color: #00FF00;

    background-image: url(_img/barre3d.jpg);

}

.image div.progress .text{

    color: #FF0000;

}

</style>



<!-- Version Normale -->

<div class="progressbar">

    <div class="text">Parle : 80/200</div>

    <div class="progress" style="width: 40%;">

        <span class="text">Parle : 80/200</span>

    </div>

</div>



<br />



<!-- Version Couleur Spécifique -->

<div class="progressbar green">

    <div class="text">Parle : 80/200</div>

    <div class="progress" style="width: 40%;">

        <span class="text">Parle : 80/200</span>

    </div>

</div>



<br />



<!-- Version Image -->

<div class="progressbar image">

    <div class="text">Parle : 80/200</div>

    <div class="progress" style="width: 40%;">

        <span class="text">Parle : 80/200</span>

    </div>

</div> 

[Sephi-Chan]

Le fait que le texte apparaisse deux fois dans la source n'est pas très sémantique. Mais c'est vrai que la solution est pas mal, d'autant qu'elle pourrait permettre la mise en place d'une barre entièrement graphique.

Pour résumer je dirais que ça fait un peu usine à gaz (beaucoup de ligne pour pas grand chose) mais que ça peut fournir une bonne base pour mettre en place une barre (et son cadre) graphique.


Sephi-Chan

[Anthor]

Je nu'tilise jamais ce code tel quel, mais avec jQuery afin qu'il garde toute la sémantique

Code PHP :

<?php 

<script type="text/javascript" src="_js/jquery.pack.js"></script>

<script type="text/javascript" src="_js/jquery.progressbar.js"></script>

<script type="text/javascript">

    $().ready(function() {

        $(".progressbar").each(function(){

            $(this).reportprogress($(this).attr('progress'), $(this).html());

        });

    });

</script>

<div class="progressbar" progress="40">Parle : 80/200</div> 

[Sephi-Chan]

Et puis c'est comme tout, moins tu as de ligne, moins tu auras un comportement plus complexe.

Il n'y avait que le texte par dessus, on peut pas dire que ce soit un comportement complexe.

Par contre je dois reconnaître que cette automatisation vaut le coup. Le script qui donne les raccourcis syntaxiques JQuery sont légers ?


Sephi-Chan

[Anthor]

jQuery fait 14ko en version gZip et le script de progressbar ne fait que 10 lignes.

Je parle de plus complexe car le texte change aussi de couleur en fonction du remplissage de la barre

[kevin74]

J'ai trouvé ma solution !!! :good:

Code PHP :

<?php

$requete = mysql_query("SELECT * FROM joueurs WHERE pseudo='$pseudo'");

$table=mysql_fetch_assoc($requete);



$x=$table['santé'];

$pourcentagesante = $x*2;

$y=$table['moral'];

$pourcentagemoral = $y*2;

?>

[Kassak]

Tu crée d'abord une variable $taillemax=100, ensuite dans ton tableau tu dis que la plus grande cellule disons fasse $taillemax de longueur.

Et ensuite quand tu bois une potion qui te donne 5pv, et que tu en a deja 100 soit le max, ce chiffre doit rester a 100, pas 105, donc lorsque tu boit la potion, tu récupères les pv du joueur, et si les pv sont différents des pvmax tu peut boire l'objet

Et tant qu'on y est, vérifie que les pv du joueur + les pv de la potion ne dépasse pas les pv max, si ça dépasse, alors après avoir bu la potion, le joueur aura pv max!


C'est confus non?^^

[Plume]

C'est confus pour peu de choses

Tu fais juste :
PVMax = 100;
PVNew = PVActuel + PVGagné
Si PVNew > PVMax
Alors PVNew = PVMax

Et voilà, c'finis

Lex