cas d'utilisation javascript pour les distinctions de Magdales

cas d'utilisation javascript pour les distinctions de Magdales - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : cas d'utilisation javascript pour les distinctions de Magdales (/showthread.php?tid=4954)

Pages : 1 2 3 4

RE: cas d'utilisation javascript pour les distinctions de Magdales - keke - 30-06-2010

Ter Rowan >>> J'illustre mon incompréhension espérant secrètement que quelqu'un parviendra à m'expliquer. J'ai compris l'intérêt d'AJAX et je l'utilise pour le Tchat en interne dans le jeu. Mais je suis très intrigué par certains phénomènes (que je trouve assez complexe) et pour parvenir à m'expliquer, j'illustre d'un exemple.

Anthor >>> merci pour le lien. Je vais essayer de voir si mon animation est correctement définie. Par contre j'ai l'impression qu'il s'agit d'une queue par élément. Dans mon cas, comme j'ai 2 éléments, ça peut poser des soucis. Il me faudra peut-être réunir mes 2 divs dans un div-mère et lancer les animations à partir de cette dernière ?

Grace à vos participations, je sens qu'on touche du doigt mon problème.
J'espère que mon aversion envers Javascript ne déteindra pas sur les petits nouveaux ^^. Sinon, je le répète, c'est uniquement un problème de compréhension de ma part ... faut s'y frotter pour comprendre.

Bonne journée à vous tous ^^

kéké qui a maintenant 2 pistes pour corriger son problème : la lecture des queues d'animation ET les fonctions CallBack.

RE: cas d'utilisation javascript pour les distinctions de Magdales - Sephi-Chan - 30-06-2010

J'attends que tu testes pour développer. Tu sais mieux que moi ce dont tu as besoin et je veux pas faire un hors sujet. :p

(30-06-2010, 11:22 AM)keke a écrit : T'imagine si la programmation en général faisait pareil ? moi oui ^^, exemple ... :
Je veux faire une addition puis une multiplication :
$x = 3
$y = 4
$z = 0;

$z = $x + $y
$resultat = $z * 2

echo $resultat

Et hop, au lieu du résultat attendu = 14, on afficherait $resultat = 0. Ben oui, car l'addition $x + $y a pris trop de temps, alors on est passé à la ligne suivant $resultat = 0 * 2.

Ca serait vraiment désagréable ... Mais bon, passons. Je vous tiendras bien évidement au courant.

C'est l'événementiel qui veut ça. Et là ça te choque car la syntaxe est procédural, mais si tu avais une fonctionne en guise de callback, ça ne jurerai pas.

Sinon, certains langages (OCaml par exemple) retardent le calcul effectif. C'est à dire que tes variables $z et $resultat ne seront calculées qu'au moment où on aura vraiment besoin de leur valeur. C'est plutôt malin.

Sephi-Chan

RE: cas d'utilisation javascript pour les distinctions de Magdales - Ter Rowan - 30-06-2010

j'osais pas dire le terme événementiel de peur de dire une connerie, mais c'est je pense cela qui te plante kéké de temps en temps dans ton approche de javascript

donc on est dans de l'événementiel, il se peut donc qu'un nouvel événement soit capté avant la fin du traitement du précédent

que l'événement soit un timer, ou quoi

RE: cas d'utilisation javascript pour les distinctions de Magdales - keke - 30-06-2010

(/me pense que la programmation évènementiel ne lui pose pas de problème conceptuel particulier, mais il peut se tromper)
Coucou Ter Rowan,
Dans notre cas, pas d'interférence avec d'autres évènements ... car il n'y a que mon traitement ^^.

par ailleurs, j'ai essayé de mieux comprendre :
Je me suis basé sur des fonctionnalités simple offerte par la documentation.
Ainsi, j'ai repris le code souflé précédement:
http://api.jquery.com/queue/

Code :
<!DOCTYPE html>

<html>

<head>

  <style>div { margin:3px; width:40px; height:40px;

        position:absolute; left:0px; top:30px; 

        background:green; display:none; }

  div.newcolor { background:blue; }

  span { color:red; }  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>

    <button id="show">Show Length of Queue</button>

  <span></span>

  <div></div>

<script>$("#show").click(function () {

      var n = $("div").queue("fx");

      $("span").text("Queue length is: " + n.length);

    });

    function runIt() {

      $("div").show("slow");

      $("div").html("debut du test");

      $("div").animate({left:'+=200'},2000);

      $("div").slideToggle(1000);

      $("div").slideToggle("fast");

      $("div").animate({left:'-=200'},1500);

      $("div").hide("slow");

      $("div").show(1200);

      $("div").html("fin du test");

      $("div").slideUp("normal", runIt);

    }

    runIt();</script>

</body>

</html>

auquel j'ai rajouté 2 élément pour modifier le contenu du Html.
Ce qui m'avait bien surpris, c'est que le code html est interprété immédiatement, alors que le animation sont traités séquentiellement dans une file d'attente. En utilisant des fonctions, on constate alors des phénomènes assez étranges :

Code :
<!DOCTYPE html>

<html>

<head>

  <style>div { margin:3px; width:40px; height:40px;

        position:absolute; left:0px; top:30px; 

        background:green; display:none; }

  div.newcolor { background:blue; }

  span { color:red; }  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>

    <button id="show">Show Length of Queue</button>

  <span></span>

  <div></div>

<script>$("#show").click(function () {

      var n = $("div").queue("fx");

      $("span").text("Queue length is: " + n.length);

    });

   function runIt() {

      $("div").show("slow", deux() );

    }

   function deux() {

       $("div").html("debut du test");

        $("div").animate({left:'+=200'},2000, trois() );

    }

   function trois() {

      $("div").slideToggle(1000, quatre() );

    }

   function quatre() {

      $("div").slideToggle("fast", cinq() );

    }

   function cinq() {

      $("div").animate({left:'-=200'},1500, six() );

    }

   function six() {

      $("div").hide("slow", sept() );

    }

   function sept() {

      $("div").show(1200, huit() );

    }

   function huit() {

      $("div").html("fin du test");

      $("div").slideUp("normal", runIt);

    }

    runIt();</script>

</body>

</html>

Bref ... il faut que je trouve une autre méthode pour gérer mon texte.
Je pense que finalement, je vais faire 1 div par distinctions, que j'afficherais les uns à la suite des autres ... Je vois pas comment contourner mon problème.

Dommage ^^.

kéké, toujours la volonté d'avancer...

Coucou,

j'ai finalement opté pour la dernière solution, malgré le mal que j'en disais. le code est plus simple, plus beau certains diront. Il est fonctionnel.

Code :
<!doctype html>

<html>

  <head>

    <script type="text/javascript" src="./scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="./scripts/jquery.timers-1.2.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var compteur = -1;

    var nb_distinction = 5;

//    var texte_id_distinction = "";

    var tableau_data = new Array();

    tableau_data[0] = 'test'; // Pourquoi devons nous initier cette variable ??? En tous les cas firebug semble pas apprecier sans.

    var liste_div = '';

    // Cette boucle tourne toutes les 5 secondes. Son but, afficher une liste de joueur avec des distinctions. Les données sont récupéré au début via de l'AJAX. Lorsque toutes les informations sont affichées, on va rechercher de la nouvelle donnée.'

    $(document).everyTime(3000, function() { // 5000 = 5 secondes

        if (compteur == -1 || compteur >= nb_distinction)

        {

            $.getJSON("ajax_liste_distinction_desc.php", {}, function(data) {

                // format result

                texte_id_distinction = "";

                tableau_data = data;

/*                texte_id_distinction = tableau_data.nb ;

                i = 2;

                texte_id_distinction = tableau_data[i].id_distinction_joueur ;*/

                nb_distinction = tableau_data.nb ;

                liste_div = '';

                // pour chaque élément, on créé un div

                for (i = 0; i < nb_distinction; i ++ )

                {

                    liste_div += '<div id="num_distinction'+i+'" style="display:none;" >Ligne'+i + ' : Le sage : ' + tableau_data[i].nom_joueur  + ' a reçu la distinction ' + tableau_data[i].nom_distinction + '</div>';

                }

                // ce message est à titre informatif ... il disparaitra par la suite

                $("#tableau_dynamique").html(liste_div);

                $("div#num_distinction0").show(500);

                for (i = 1; i < nb_distinction; i ++ )

                {

//                    $("div#num_distinction"+i).hide(500);

                }

                compteur = 0;

            }

            );

        }

        else

        {

            if (compteur + 1 < nb_distinction )

            {

                $("div#num_distinction"+(compteur+1)).show(500);

                $("div#num_distinction"+compteur).delay(1000);

                $("div#num_distinction"+compteur).hide(500);

            }

            compteur ++ ;

        }

    }); 

});

</script>

</head>

<body>

<h1>Page de test AJAX</h1>

<div id="tableau_dynamique">Info : Les quelques premières lignes seront pré-chargée en PHP. Ce bloc sera remplacé par Javascript dans quelques secondes.</div>

</body>

</html>

Je reste néanmoins sur un sentiment d'echec ... bha, ça ne fera qu'un apriori de plus la prochaine fois que je ferais du javascript ^^.
Peut-être manque-t-il juste une animation qui modifierait le html d'un objet du DOM ?

Je ne sais pas ... mais il faut que j'avance sur mon jeu ... arf.

Si certains veulent des commentaires sur la manière dont j'ai traité le sujet, ca sera avec plaisir ^^.

kéké

RE: cas d'utilisation javascript pour les distinctions de Magdales - jo_link_noir - 01-07-2010

(30-06-2010, 08:09 PM)keke a écrit : Peut-être manque-t-il juste une animation qui modifierait le html d'un objet du DOM ?

Il y a html(), mais je croit ne pas avoir comprit la question...

Par contre c'est peut-être voulu mais il y a 2 distinctions qui s'affichent, je trouve ça bizarre.

Je propose une autre façon de faire la chose : un div distinction existe à la fois (2 pendant la transition). Le code est peut-être plus clair aussi.



function liste_distinction_desc(){

	$.getJSON("ajax_liste_distinction_desc.php", {}, function(data){

			//index de data

		var i = 0,

			//recupère le div tableau_dynamique vider de son contenu

			$tableau_dynamique = $("#tableau_dynamique").empty(),

			//fonction qui affiche le bandeau des distinctions

			display = function(){

				//cache le premier élément puis le supprime

				$tableau_dynamique.children(":first").hide(500, function(){

					$(this).remove();

				});

				//div de la distinction qu'on cache grâce à hide();

				var $desc = $('<div>Ligne'+i+ ' : Le sage : ' + data[i].nom_joueur + ' a reçu la distinction ' + data[i].nom_distinction + '</div>').hide();

				//ajoute la distinction dans tableau_dynamique

				$tableau_dynamique.append($desc);

				//puis affiche la distinction avec un effet

				$desc.show(500, function(){

					//après l'annimation et dans 3 seconde en va afficher la distinction suivante ou faire list_distinction_desc()

					setTimeout((++i < data.nb) ? display : liste_distinction_desc, 3000);

				});



			};



		/*si on veux une animation dans la suppression du contenu de tableau_dynamique :

		si tableau_dynamique contient un enfant texte ou/et plusieurs balise utilisais ce code et enlever empty au début de la fonction

		si tableau_dynamique possède en enfant rien ou une balise et uniquement 1 seul enfant alors supprimer simplement empty au début de la fonction. Le $tableau_dynamique.children(":first").hide(500) de display s'en occupera

		$tableau_dynamique.hide(500, function(){

			$tableau_dynamique.empty().show();

			display();

		});*/

		display();

	});

}



$(function(){

	liste_distinction_desc();

});

RE: cas d'utilisation javascript pour les distinctions de Magdales - keke - 01-07-2010

(01-07-2010, 04:05 AM)jo_link_noir a écrit :
(30-06-2010, 08:09 PM)keke a écrit : Peut-être manque-t-il juste une animation qui modifierait le html d'un objet du DOM ?
Il y a html(), mais je croit ne pas avoir comprit la question...

C'est que je n'ai pas bien expliqué.
En fait, si tu fait :

toto.html('début de programme')
toto.animation()
toto.animation()
.
.
.
toto.html ('fin du programme')
Et bien, le texte dans toto sera tout le temps 'fin du programme' pendant les animations. il ne traite pas la balise html de manière séquentielle (et t'imagine pas le temps qu'il m'a fallu pour comprendre ce problème.)

(01-07-2010, 04:05 AM)jo_link_noir a écrit : Par contre c'est peut-être voulu mais il y a 2 distinctions qui s'affichent, je trouve ça bizarre.

En fait, ca faisait parti de ma demande d'origine.
J'affiche 2 ligne, celle du haut se fait écrasé, puis une nouvelle ligne s'affiche en bas et ainsi de suite. L'intérêt étant une certaine continuité dans la lecture.

J'essaye de vous montrer l'intégration de ce code sur ma page d'accueil prochainement. (ca va pulvériser mes stats de fréquentation ^^)

Kéké
PS : la notion de prochainement est assez floue car, je suis au ciné ce soir, je pars en We vendredi et je rentre lundi matin pour aller bosser ...

RE: cas d'utilisation javascript pour les distinctions de Magdales - Anthor - 01-07-2010

En fait ce serait plus simple si tu faisait un html complet que l'on puisse tester et éventuellement te donner le bon code.

Ce que tu souhaite faire existe depuis un bail, il ne devrait pas y avoir de problème pour l'implémenter.

RE: cas d'utilisation javascript pour les distinctions de Magdales - keke - 01-07-2010

Enfait, tout mes codes sont en HTML complet ... Je ne comprends pas la remarque. Seul la requête en PHP est marqué par ailleurs.

Par contre, tu as raison. Ca fait un bail que ça existe ... et pourtant, je n'ai pas réussi à m'en sortir comme je le voulais. Enfin, j'ai trouvé un palliatif moins joli. Et je vais m'en contenter ...

D'après la page :
http://www.drafts.fr/fiche-projet.php?Id=20
J'en suis à 40% de mon projet concernant les distinctions ^^.

kéké

RE: cas d'utilisation javascript pour les distinctions de Magdales - Anthor - 01-07-2010

Citation :Enfait, tout mes codes sont en HTML complet ... Je ne comprends pas la remarque. Seul la requête en PHP est marqué par ailleurs.

Pour moi un fichier HTML complet, c'est un fichier que tu nous balances en attachement et qu'il me suffit de lancer, de debugger et de retourner fonctionnel.

Entete, body, CSS inline. Debugger sur un bout de code sans avoir son style, et le reste des éléments autour en Javascript c'est juste perdre du temps.

RE: cas d'utilisation javascript pour les distinctions de Magdales - jo_link_noir - 02-07-2010

(01-07-2010, 11:36 AM)keke a écrit :
(01-07-2010, 04:05 AM)jo_link_noir a écrit :
(30-06-2010, 08:09 PM)keke a écrit : Peut-être manque-t-il juste une animation qui modifierait le html d'un objet du DOM ?
Il y a html(), mais je croit ne pas avoir comprit la question...
C'est que je n'ai pas bien expliqué.
En fait, si tu fait :

toto.html('début de programme')
toto.animation()
toto.animation()
.
.
.
toto.html ('fin du programme')
Et bien, le texte dans toto sera tout le temps 'fin du programme' pendant les animations. il ne traite pas la balise html de manière séquentielle (et t'imagine pas le temps qu'il m'a fallu pour comprendre ce problème.)

Ah ok, je comprend mieux maintenant. C'est vrai qu'au début, tout ce qui est temporisation est assez déroutant.
Il faut comprendre que les animations (et delay()) se déroulent en parallèle avec le programme. Si on veux effectué un code après l'animation il faut utilisais une fonction de callback.

Par exemple ceci affiche "fin du programme" quand la dernière animation ce fini

toto.html('début de programme')

toto.animation()

toto.animation()

.

.

toto.animation(opt, function(){

    //$(this) ou toto

    toto.html ('fin du programme')

})

Dans l'implémentation de mon précédent post, il y a en à 3 : une pour supprimer le message à la fin de l'animation, une pour commencé la temporisation avant le prochain message et la dernière est dans le gros pâté de commentaire et permet de commencé l'affiche des distinctions après avoir caché tout les textes.

Au passage tu peux lié les méthodes entrent-elles : toto.animation().animation().etc.