Comment faire un chat graphique léger ?

[Sephi-Chan]

Pourquoi une div cachée ?
Tu peux simplement te faire une petite classe Balloon en Javascript avec une poignée de méthodes :

• Balloon.build(), qui crée les éléments DOM qui vont bien ;
  
• Balloon.setContent(), qui permet de créer/changer le contenu de la bulle ;
  
• Balloon.attachToCharacter(character_id), qui prend l'id d'un personnage, le trouve dans le DOM, récupère ses offsets et calcule ceux de la pub en la décalant comme tu le souhaite ;
  
• Balloon.show(), qui affiche effectivement la bulle, tu peux y mettre un effet d'apparition amusante, genre qui tombe du haut de la fenêtre, qui apparaît progressivement, etc.
  

C'est tout con en fait, puis c'est rigolow !


Sephi-Chan

[Wells]

le script que j'ai posté devrait répondre à ton besoin je pense.

[P0ulp0r]

Moi perso j'ai réutilisé ce chat là : http://blog.jaysalvat.com/articles/un-ch...jquery.php

Bonne chance

[Thedeejay]

@Sephi: oui mais justement, je voit la technique mais pas le code

@Wells: Exelent script mais malheureusement avec la carte en BDD ca risque de faire trop lourd, non? a moi que je ne mette des limites (1 délpacement/3 sec...)

@P0ulp0r: idem, vous pensez que la BDD est une bonne idée??

[Sephi-Chan]

Une base de données, c'est fait pour être interrogé ! Et puis…

Si tu utilises MySQL, tu peux utiliser le moteur Memory pour stocker les données volatiles (qui seront perdues si la machine reboot) telles que les messages.

Concernant le code, je peux te faire un exemple si tu veux. Par contre, ce sera avec jQuery, car noneed me prendre trop la tête.


Sephi-Chan

[Sephi-Chan]

Voilà donc un exemple simple, à toi d'être imaginatif pour gérer rendre ça plus sympa. Il y a notamment du travail pour gérer le chevauchement des bulles.

Pour l'exemple, je n'utilise pas la même notation pour mes deux classes : c'est pour montrer que les deux existent (et ont des différences).

/**

 * BalloonFactory va instancier des objets Balloon.

 * On l'utilise afin de conserver l'information des

 * bulles instanciées (pour qu'elles aient un 

 * identifiant unique). On a un tableau des bulles

 * instanciées (ça peut servir pour une méthode

 * qui les masque toutes, par exemple).

 */

var BalloonFactory = function(){

  // console.log('Power Rangers, instanciation !');

  this.last_generated_id = 0;

  this.ballons = [ ];

  

  this.create = function(){

    var ballon = new Balloon(this.last_generated_id++);

    this.ballons.push(ballon);

    return ballon

  };  

}

var Balloon = function(id){

  // console.log('Power Rangers, instanciation !');

  this.id             = id;

  this.opacity        = 'half';

  this.DomElement     = null;

  this.isReadyToShow  = false;

};



Balloon.prototype.build = function(){

  this.DomElement = $('<div />')

    .attr('id', this.id)

    .addClass('balloon')

    .css({

      background  : '#fff',

      border      : '1px solid #ccc',

      padding     : '5px',

      position    : 'absolute'

    })

  ;

  

  // Pour la classe !

  this.DomElement.css({

    '-moz-border-radius'                : '15px',

    '-moz-border-radius-bottomleft'     : '2px',

    '-webkit-border-radius'             : '15px',

    '-webkit-border-bottom-left-radius' : '2px',

  });

  

  /**

   * Bien sûr, tous ces styles peuvent (et doivent ?)

   * êtres définis dans une feuille de style !

   */

   

};



Balloon.prototype.setContent = function(content){

  this.DomElement.text(content);

};



Balloon.prototype.attachTo = function(character_id){

  var characterElement = $('#character_' + character_id)[0];

  

  if(characterElement != undefined){

    var CharacterElementOffset = $(characterElement).offset();

    this.DomElement.css({

      left  : (CharacterElementOffset.left + 10) + 'px',

      top   : (CharacterElementOffset.top - 35) + 'px'

    });

    

    this.isReadyToShow = true;

  }

};



Balloon.prototype.show = function(){

  if(this.isReadyToShow){

    $('body').append(this.DomElement);

  }

};

Ensuite, dans le code Javascript de l'application :

$(document).ready(function(){

  var balloonFactory = new BalloonFactory();

  var ballon_a = balloonFactory.create();

  var ballon_b = balloonFactory.create();

  var ballon_c = balloonFactory.create();



  ballon_a.build();

  ballon_a.setContent("Moi j'aime le jambon !");

  ballon_a.attachTo(3);

  ballon_a.show();



  ballon_b.build();

  ballon_b.attachTo(8);

  ballon_b.setContent("Moi j'aime le pâté !");

  ballon_b.show();



  ballon_c.build();

  ballon_c.attachTo(2);

  ballon_c.setContent("Ben… Moi non.");

  ballon_c.show();

});

Bien sûr, tu peux ajouter une méthode à la classe Balloon qui s'occupe de lancer les 3 autres (setContent(), attachTo() et show()) histoire de rendre le code plus cool. Elle pourrait alors comme argument l'id du personnage qui s'exprime et le message qu'il prononce.

Voilà comment j'ai représenté un personnage dans mon exemple :

<div id="character_3" style="background: blue;"></div>

<div id="character_8" style="background: red;"></div>

<div id="character_2" style="background: green;"></div>

Enfin, le rendu à l'écran (Safari) :




Sephi-Chan

[Thedeejay]

Super, en plus je suis en jQuery

Merci beaucoup Sephi, tu est vraiment le roi des jambons! \o/

[Sephi-Chan]

Ça c'est du compliment !?

Cela dit, fais attention, je suis loin d'être un gourou de Javascript. Ce que je fournis là n'est qu'une base : il y a sûrement plein de choses auxquelles je n'ai pas pensé. Même si ça marche, c'est très perfectible.


Sephi-Chan

[Thedeejay]

Oui c'est un compliment ^^

Et je vais le completer bien sûr, il me falait une base...