Fiche personnage web

Questions et discussions autour du système de jeu.
Avatar de l’utilisateur
Yueyehua
Messages : 174
Inscription : 24 janv. 2012, 12:46

Fiche personnage web

  •    
  • Citation

Message par Yueyehua » 11 févr. 2012, 23:50

Salutations à toutes et à tous !

Depuis quelques temps déjà, je développe à mes heures perdues une fiche de personnage complète, imprimable, avec les formules automatisées et des fonctions de sauvegarde et chargement.

Je n'ai pas fini mon travail, loin de moi cette idée, j'ai encore tellement à faire que j'aimerai même obtenir l'aide de mon chat pour venir à ma rescousse.
Toutefois, j'ai un premier jet (avec pas mal de bugs) dont je dépose, ici-même, le lien :

http://jdr.yueyehua.net/esteren/fiche/

Pour le moment, toutes les formules ne sont pas automatisées.
Les bonus et malus d'avantages ou de désavantages ne sont pas implémentés.
Les équipements ne sont pas tenus en comptes.
Le choix des métiers, milieux et classes sociales non plus.
La sauvegarde et le chargement sont fait et permettront de sauvegarder localement les informations de son personnage.
La feuille de style pour l'impression est encore très incomplète.
Tout ce qui n'est pas encore fait peut, pour le moment, être remplit de façon manuelle.

Cette fiche étant faite durant le peu de temps libre que j'ai, je n'avance que de façon parcimonieuse.
J'espère que même à l'état actuel, ça pourra aider voire inspirer quelqu'un. :)

[ETAT DES TRAVAUX : EN COURS]
Dernière modification par Yueyehua le 16 févr. 2012, 03:53, modifié 1 fois.
故能而示之不能,用而示之不用,近而示之遠,遠而示之近。
(孫子)

Quand vous êtes capable, feignez l’incapacité. Quand vous agissez, feignez l’inactivité. Quand vous êtes proche, feignez l’éloignement. Quand vous êtes loin, feignez la proximité.
(Sun Tzu)

Avatar de l’utilisateur
Pierstoval
Web developer
Messages : 1480
Inscription : 03 août 2011, 19:09
Localisation : Aix-en-Provence
Contact :

Re: Fiche personnage web

  •    
  • Citation

Message par Pierstoval » 13 févr. 2012, 10:43

Sympa tout ça ! Mais je pense à un truc : tu vas "sauvegarder" comment les personnages ? Parce qu'à part les <select> et les <input> pour les boutons, tu n'as aucun input (même hidden, et même dans la source DOM) qui stocke les valeurs. Pour l'instant, elles flottent sur la page.


Pour l'impression, j'ai testé, et ça ne marche pas terrible... C'est pas joli, et je crois qu'il n'y a pas vraiment de moyen d'imprimer bien. Tu devrais peut-être te tourner vers la création d'images en utilisant PHP (de mon côté, pour le format imprimable, je ferai très certainement ça..)

Sinon, je constate aussi que ta page HTML est chargée en texte, de même pour ta source javascript. As-tu pensé à utiliser jQuery ? C'est un outil qui permet de faire des merveilles ! (et tu peux voir un guide de néophyte ICI)

En tout cas, ta fiche est plus complète que la mienne, mais on verra qui de nous deux fera le meilleur score :twisted:

Cheers

CramaL
Messages : 21
Inscription : 31 janv. 2012, 09:48

Re: Fiche personnage web

  •    
  • Citation

Message par CramaL » 13 févr. 2012, 11:23

Déjà, bravo.
J'ai toujours apprécié les fiches remplies sur l'ordi, surtout quand on permet des sauvegarde, parce que les fiches de perso remplies au crayon, ça devient vite crade.

Pierstroval : dans ta fiche, il y a un problème dans le calcul de l'attaque qui ne prends pas en compte le domaine. Enfin peut-être est-ce volontaire.

Pour des fiches jolies à imprimer, le mieux que j'ai vu c'est d'écrire par dessus une image de fond (qui reprends la fiche de perso officielle par exemple, issue d'un scan ou d'un document pdf)

Avatar de l’utilisateur
Yueyehua
Messages : 174
Inscription : 24 janv. 2012, 12:46

Re: Fiche personnage web

  •    
  • Citation

Message par Yueyehua » 13 févr. 2012, 11:40

Salutations à vous !

@Pierstoval

Pour la version imprimable, c'est tout à fait faisable. Je n'ai juste pas fini de faire ma feuille css qui est un peu laissée en plan. :lol:
Je ferai également une transformation pdf si j'en ai le temps. (Il doit certainement y avoir une lib php pour ça, non ?)

Pour la sauvegarde, je pensais à un window.open("save.php", "_blank") pour charger une page qui permet de télécharger la page en cours à laquelle on concatènerait un xml rempli avec les informations de la fiche. Pour ce faire, je ferai juste une fonction js pour chercher toutes les informations et structurer sous forme de xml.

Pour le chargement, je ferai le travail inverse. Mais je n'y suis pas encore. :lol:
Pierstoval a écrit :Sinon, je constate aussi que ta page HTML est chargée en texte, de même pour ta source javascript. As-tu pensé à utiliser jQuery ? C'est un outil qui permet de faire des merveilles ! (et tu peux voir un guide de néophyte ICI)
Je n'ai pas bien compris la notion de "chargée en texte" mais effectivement, je n'ai pas pensé à utiliser JQuery. Au début, je pensais que ce serait plus simple et que je n'avais pas besoin d'une lib aussi lourde que JQuery pour faire la fiche mais, au final, je me demande si ce serait pas plus pratique. Mais pour maintenant, j'avoue avoir un peu la flemme d'inclure JQuery et devoir retoucher tout le reste. :lol:

Enfin, je n'ai aucune intention de faire un duel de pokemon entre nos deux fiches (mais comme j'aime pas perdre, je risque de relever le défi). :lol:
Je serais plutôt d'avis de mettre en commun nos travaux (une fois terminé) pour donner aux joueurs et meneurs les meilleurs outils pour la création et l'évolution de leur personnage. En ce sens, il serait peut-être intéressant qu'on discute d'une dtd ou d'un rng pour rendre compatible entre nos deux fiches toutes les extractions (de type xml) de personnages.
Qu'en penses-tu ?

@CramaL

Merci. :)
En effet, je comptais mettre une image de fond (plus tard).
Toutefois, pour le moment, j'ai préféré me consacrer en priorité aux fonctionnalités.
Pour le côté sauvegarde, je tenterai de faire ça au plus vite. Ça permettra à tout le monde de l'utiliser sans avoir à tout retaper.
故能而示之不能,用而示之不用,近而示之遠,遠而示之近。
(孫子)

Quand vous êtes capable, feignez l’incapacité. Quand vous agissez, feignez l’inactivité. Quand vous êtes proche, feignez l’éloignement. Quand vous êtes loin, feignez la proximité.
(Sun Tzu)

Avatar de l’utilisateur
Pierstoval
Web developer
Messages : 1480
Inscription : 03 août 2011, 19:09
Localisation : Aix-en-Provence
Contact :

Re: Fiche personnage web

  •    
  • Citation

Message par Pierstoval » 13 févr. 2012, 12:57

CramaL a écrit :Pierstroval : dans ta fiche, il y a un problème dans le calcul de l'attaque qui ne prends pas en compte le domaine. Enfin peut-être est-ce volontaire.
C'est "Pierstoval" :) Mais oui, c'est tout-à-fait volontaire étant donné que l'attaque peut être faite au CàC ou à distance, et qu'il y a deux domaines pour ça :)
Lorsque j'aurai implémenté le système d'armes, une fois que ton arme sera affichée, tu verras le bonus à ajouter (donc arme + domaine) à côté, mais pour l'instant, je dois commencer à créer la section psychologie :)

CramaL a écrit :Pour des fiches jolies à imprimer, le mieux que j'ai vu c'est d'écrire par dessus une image de fond (qui reprends la fiche de perso officielle par exemple, issue d'un scan ou d'un document pdf)
Tout-à-fait, grâce aux fonctions createimage() de PHP, on peut récupérer une image existante, et ajouter du texte à certaines coordonnées. Ainsi, l'image est créée "sur place" par PHP (via une page indépendante) et les fonctions ajoutent le texte à l'image. Une fois fait, le navigateur charge la page PHP avec un ContentType = "image/(png|jpg)". Ou alors, on peut l'enregistrer en changeant le header en tant que download.

Yueyehua a écrit :Salutations à vous !

@Pierstoval

Pour la version imprimable, c'est tout à fait faisable. Je n'ai juste pas fini de faire ma feuille css qui est un peu laissée en plan. :lol:
Je ferai également une transformation pdf si j'en ai le temps. (Il doit certainement y avoir une lib php pour ça, non ?)
Voir ci-dessus :)

Yueyehua a écrit :Pour la sauvegarde, je pensais à un window.open("save.php", "_blank") pour charger une page qui permet de télécharger la page en cours à laquelle on concatènerait un xml rempli avec les informations de la fiche. Pour ce faire, je ferai juste une fonction js pour chercher toutes les informations et structurer sous forme de xml.

Pour le chargement, je ferai le travail inverse. Mais je n'y suis pas encore. :lol:
Pourquoi n'optes-tu pas pour une base de données SQL ? Tu sembles avoir un hébergeur, tu devrais en profiter pour créer une BDD (si tu veux, je peux te refiler un dump de la mienne, pour que justement on puisse faire marcher la compatibilité entrer nos applis plus tard :) )

Yueyehua a écrit :
Pierstoval a écrit :Sinon, je constate aussi que ta page HTML est chargée en texte, de même pour ta source javascript. As-tu pensé à utiliser jQuery ? C'est un outil qui permet de faire des merveilles ! (et tu peux voir un guide de néophyte ICI)
Je n'ai pas bien compris la notion de "chargée en texte" mais effectivement, je n'ai pas pensé à utiliser JQuery. Au début, je pensais que ce serait plus simple et que je n'avais pas besoin d'une lib aussi lourde que JQuery pour faire la fiche mais, au final, je me demande si ce serait pas plus pratique. Mais pour maintenant, j'avoue avoir un peu la flemme d'inclure JQuery et devoir retoucher tout le reste. :lol:
Dommage, parce que quand je dis "chargé en texte", je te dis que j'ai environ 15000 caractères de code javascript (compressé sur http://javascriptcompressor.com/) , et toi 11000 alors que tu as moins de fonctionnalités (puisque tu n'as pas de système pour gérer les métiers & co). D'où l'intérêt de passer à jQuery, pour pouvoir par exemple remplacer ça :

Code : Tout sélectionner

function doubleDesavantagesRefractor(){
  var doubled = 0;
  for(i = 1; i <= 5; i++){
    if(document.getElementById('double_desavantage' + i).checked){
      doubled = i;
    }
  }
  if(doubled != 0){
    for(i = 1; i <= 5; i++){
      if(doubled != i){
        document.getElementById('double_desavantage' + i).disabled = true;
      }
    }
  }else{
    for(i = 1; i <= 5; i++){
      document.getElementById('double_desavantage' + i).disabled = false;
    }
  }
}
par ça :

Code : Tout sélectionner

function doubleDesavantagesRefractor() {
	var doubled = 0,
		i = 0,
		dbldesv = '#double_desavantage' + i;
	for (i = 1; i <= 5; i++) { if ($(dbldesv)[0].checked) { doubled = i; } }
	if (doubled != 0) {
		for (i = 1; i <= 5; i++) { if (doubled != i) { $(dbldesv)[0].disabled = true; } }
	} else { $(dbldesv)[0].disabled = false; }
}
On passe de 19 lignes et 485 caractères à 9 lignes et 339 caractères en non compressé, ce qui n'est carrément pas négligeable :)


Si je peux me permettre d'apporter une optimisation aussi, je vois ta fonction calculateGlobalDisciplineTotals() qui est assez longue.
Je te proposerais de la remplacer par ceci :

Code : Tout sélectionner

function calculateGlobalDisciplineTotals(){
	var i = 0;
	for (i = 0; i <= 16; i++) { calculateDisciplineTotal('discipline' + i); }
}

Je t'invite également à beaucoup utiliser http://www.jslint.com/ pour valider ton javascript. Y'a pas de norme W3C, mais JSLint permet de vérifier les éventuelles erreurs de variables non déclarées, des variables non utilisées, des problèmes de "{" ou "}" en trop et/ou manquants, de voir les fonctions déclarées avant ou après certaines autres (crée des problèmes sur IE et parfois Opera).
Après, l'avantage que tu as, c'est que si tu restes simple dans ton appli, elle sera certainement compatible avec beaucoup plus de navigateurs que la mienne (qui utilise presque à outrance le javascript, et donc n'est pas compatible avec IE8 par exemple).

Ah aussi, penses à faire valider ta page au W3C au moins de temps en temps pour éviter les trucs moche ! :D
Yueyehua a écrit :Enfin, je n'ai aucune intention de faire un duel de pokemon entre nos deux fiches (mais comme j'aime pas perdre, je risque de relever le défi). :lol:
Je serais plutôt d'avis de mettre en commun nos travaux (une fois terminé) pour donner aux joueurs et meneurs les meilleurs outils pour la création et l'évolution de leur personnage. En ce sens, il serait peut-être intéressant qu'on discute d'une dtd ou d'un rng pour rendre compatible entre nos deux fiches toutes les extractions (de type xml) de personnages.
Qu'en penses-tu ?
Je sais que ça va te paraître vieux chieur, mais je continuerai dans tous les cas mon site, quoiqu'il advienne. Je préfèrerais clairement que l'on s'entre-aide chacun l'un et l'autre, car je suis vraiment trop intransigeant pour laisser quelqu'un toucher à mon travail, et ma méthode risque de ne pas être compatible avec la tienne (puisque tu penses à utiliser du xml, et moi je stocke tout dans une BDD).

En plus de ça, j'ai l'intention d'implémenter une pléthore d'autres systèmes, notamment de la modification, un système de gain d'xp, de liste de parties avec quel personnage est dans quelle partie, de sorte que le MJ puisse modifier également chaque personnage, rajouter lui-même de l'xp à ses personnages, etc.
Et tout un tas d'autres idées qui ne me sont pas encore venues en tête, mais dont je sais pertinemment qu'elles apparaitront à un moment ou un autre dans mon crâne-boite-à-idées :)

Avatar de l’utilisateur
Yueyehua
Messages : 174
Inscription : 24 janv. 2012, 12:46

Re: Fiche personnage web

  •    
  • Citation

Message par Yueyehua » 13 févr. 2012, 13:52

Merci @Pierstoval pour ton retour.

Concernant la base SQL, c'est délibérément que je n'ai pas ouvert de base. Du moins, pas encore.

En effet, n'ayant pas encore fini de faire les différentes fonctions de ma fiche, je n'ai pas voulu modéliser de base de données, celle-ci pouvant être remplies d'informations diverses qui pourraient être calculées. Le gain de place à ce niveau doit être du même ordre que ce dont tu me parles pour le js.

Je pense créer la base de donnée une fois tout le travail terminé. En attendant, je privilégie un moyen de conserver le personnage en local tout en ayant la possibilité de travailler sans internet au cas où l'accès au réseau est temporairement indisponible (je songeai à créer un pack html/js téléchargeable pour ça. :) ).

Par contre, je veux bien avoir ton dump de BDD. Ce sera certainement plus simple pour créer une base de donnée compatible entre nos deux outils si j'ai une base de ton travail sur lequel m'appuyer. ;)

Pour JQuery et la compression de code, j'avoue ne pas y avoir passé énormément de temps.
A vrai dire, je ne suis clairement pas spécialiste du développement web et encore moins de javascript que j'ai toujours peu apprécié (en fait, je voulais dire "que j’exècre" mais par respect pour ce langage que j'exploite en ce moment, je n'ai pas osé le faire :lol: ) car trop permissif selon moi (j'ai une préférence pour des langages fortement contraint comme c++, java, etc).
De là, à se demander pourquoi je fais une fiche entièrement en js sans aucun appel à php (si ce n'est le découpage les différentes partie de ma fiche pour un peu plus de clarté), il ne s'agit que de ma volonté de privilégier la puissance de calcul de l'ordinateur client et non celui du serveur.

Bref, me plonger dans une optimisation de js m'effraie tant par mon inculture quant à ce langage que par ma méconnaissance des moyens pour y arriver (et encore, je ne parle même pas de ma flemmardise. :lol: ). Si, par contre, tu acceptes de m'aider sur le sujet, c'est avec joie que j'apprendrai à le faire. ;)

D'ailleurs, j'avoue que ta simplification de la fonction abrège fortement mon code. Mais je dois dire que bon nombre de mes fonctions ont été codée entre 2h et 4h du matin alors que mes yeux se ferment malgré moi. Mon cerveau n'a pas totalement imprimé mon travail et je ne pense pas être en mesure de me rappeler 50% de ce à quoi je pensais quand j'ai codé la plupart de mes fonctions. :lol:
En tout cas, je relirai et corrigerai dès que possible. Merci. ;)

Pour la vérification w3c ou le parsing du js, j'utilise le module web developer de Firefox. Il me dit lors du chargement de ma page s'il est conforme ou s'il est buggué.
Il vérifie également les css, ce qui peut aider parfois (d'ailleurs, je bug en css... :? ).
Pierstoval a écrit :Je sais que ça va te paraître vieux chieur, mais je continuerai dans tous les cas mon site, quoiqu'il advienne. Je préfèrerais clairement que l'on s'entre-aide chacun l'un et l'autre, car je suis vraiment trop intransigeant pour laisser quelqu'un toucher à mon travail, et ma méthode risque de ne pas être compatible avec la tienne (puisque tu penses à utiliser du xml, et moi je stocke tout dans une BDD).
Bien entendu ! :D Je ne parle pas de mettre en commun immédiatement le travail, mais de le rendre compatible. Tout comme toi, je n'ai nulle intention de laisser tomber mon travail. Je suis bien trop perfectionniste pour laisser un travail inachevé.
Concernant la compatibilité xml/sql, je pense qu'on pourrait créer une interface php pour extraire de la base sql puis écrire un xml et, inversement, pour extraire de l'xml et remplir le sql.

J'ai également songé à un système de gain d'expérience géré par le meneur mais comme tu peux t'en douter, tant que je n'ai pas de base de donnée, c'est un travail qui ne me sera pas aisé. Je m'y plongerai, je pense, plus tard.
故能而示之不能,用而示之不用,近而示之遠,遠而示之近。
(孫子)

Quand vous êtes capable, feignez l’incapacité. Quand vous agissez, feignez l’inactivité. Quand vous êtes proche, feignez l’éloignement. Quand vous êtes loin, feignez la proximité.
(Sun Tzu)

Avatar de l’utilisateur
Pierstoval
Web developer
Messages : 1480
Inscription : 03 août 2011, 19:09
Localisation : Aix-en-Provence
Contact :

Re: Fiche personnage web

  •    
  • Citation

Message par Pierstoval » 13 févr. 2012, 14:07

Yueyehua a écrit :Concernant la base SQL, c'est délibérément que je n'ai pas ouvert de base. Du moins, pas encore.

En effet, n'ayant pas encore fini de faire les différentes fonctions de ma fiche, je n'ai pas voulu modéliser de base de données, celle-ci pouvant être remplies d'informations diverses qui pourraient être calculées. Le gain de place à ce niveau doit être du même ordre que ce dont tu me parles pour le js.

Je pense créer la base de donnée une fois tout le travail terminé. En attendant, je privilégie un moyen de conserver le personnage en local tout en ayant la possibilité de travailler sans internet au cas où l'accès au réseau est temporairement indisponible (je songeai à créer un pack html/js téléchargeable pour ça. :) ).

Par contre, je veux bien avoir ton dump de BDD. Ce sera certainement plus simple pour créer une base de donnée compatible entre nos deux outils si j'ai une base de ton travail sur lequel m'appuyer. ;)
Pas de souci, je t'enverrai ça :)
Yueyehua a écrit :Pour JQuery et la compression de code, j'avoue ne pas y avoir passé énormément de temps.
A vrai dire, je ne suis clairement pas spécialiste du développement web et encore moins de javascript que j'ai toujours peu apprécié (en fait, je voulais dire "que j’exècre" mais par respect pour ce langage que j'exploite en ce moment, je n'ai pas osé le faire :lol: ) car trop permissif selon moi (j'ai une préférence pour des langages fortement contraint comme c++, java, etc).
De là, à se demander pourquoi je fais une fiche entièrement en js sans aucun appel à php (si ce n'est le découpage les différentes partie de ma fiche pour un peu plus de clarté), il ne s'agit que de ma volonté de privilégier la puissance de calcul de l'ordinateur client et non celui du serveur.

Bref, me plonger dans une optimisation de js m'effraie tant par mon inculture quant à ce langage que par ma méconnaissance des moyens pour y arriver (et encore, je ne parle même pas de ma flemmardise. :lol: ). Si, par contre, tu acceptes de m'aider sur le sujet, c'est avec joie que j'apprendrai à le faire. ;)
T'inquiète pas que je n'aime pas javascript non plus (puisque c'est un langage client, et pas serveur...), mais pour certaines choses, c'est vraiment le seul moyen de faire marcher un peu tout ça...
Yueyehua a écrit :Pour la vérification w3c ou le parsing du js, j'utilise le module web developer de Firefox. Il me dit lors du chargement de ma page s'il est conforme ou s'il est buggué.
Il vérifie également les css, ce qui peut aider parfois (d'ailleurs, je bug en css... :? ).
Idem, j'utilise WebDeveloper, très pratique, mais je m'en sers essentiellement pour les bugs javascript. JSLint me permet surtout d'avoir un code strict (d'où le "use strict"; visible dans mes fonctions) qui maximise la compatibilité théorique avec les navigateurs (même si c'est toujours pas compatible avec IE8).
Yueyehua a écrit :Concernant la compatibilité xml/sql, je pense qu'on pourrait créer une interface php pour extraire de la base sql puis écrire un xml et, inversement, pour extraire de l'xml et remplir le sql.
Excellente idée ! Passer du XML au SQL ou l'inverse est très simple ! Il suffira de créer deux applis, de faire un max de parsing et de regex replace et on s'en sortira :).

De cette façon, chaque joueur pourra décider quelle fiche il utilisera :)

Avatar de l’utilisateur
Nelyhann
Coordinateur général, auteur & illustrateur
Messages : 3177
Inscription : 10 juil. 2010, 10:37
Contact :

Re: Fiche personnage web

  •    
  • Citation

Message par Nelyhann » 13 févr. 2012, 14:17

C'est vraiment bien tout ça, entre le boulot de Pierstoval et celui de Yueyehua, nous pourrons proposer différentes aides de jeu aux joueurs et meneur des Ombres qui auront l'embarras du choix :D
«Patience et longueur de temps Font plus que force ni que rage.»
Le Lion et le Rat - Jean de la Fontaine

Avatar de l’utilisateur
Oberon
Messages : 608
Inscription : 03 nov. 2010, 10:19
Localisation : Namur (Belgique)

Re: Fiche personnage web

  •    
  • Citation

Message par Oberon » 13 févr. 2012, 18:40

Il pourrait être intéressant de mettre en place un format XML qui permettrait d'échanger des données entre les différentes applications développées.

On pourrait imaginer qu'un personnage créé avec l'application A puisse être utilisé dans l'application B. Cela permettrait aux utilisateurs de pouvoir "promener" leur perso entre différentes applications qui auraient décidé d'utiliser ce format XML d'échange.

Un simple module d'importation/exportation de personnages à ajouter à votre application et c'est parti.

Si cela intéresse des développeurs je veux bien créer un post à ce sujet et y réfléchir.

Avatar de l’utilisateur
Avrock
Messages : 117
Inscription : 11 août 2010, 19:57
Localisation : Trier (Allemagne)

Re: Fiche personnage web

  •    
  • Citation

Message par Avrock » 14 févr. 2012, 09:53

Le tout est de creer un DOM et de s'y tenir...
Enfin bref, "jouer" avec vous sur ces creations de fiche de perso m'interesse aussi. A moi de trouver le temps de creer quelque chose ;)

@Oberon : pourquoi faire un module d'import/export ? Si les applications sont des applis web, elles sont consultables de partout je ne vois alors pas l'interet d'exporter ou d'importer. Evidement, il faut voir s'il l'utilisateur ou les differents systemes ont les droits necessaires pour y acceder de n'importe ou... Ce qui evidement, si l'on a des systemes bloques, necessite de pouvoir importer ou exporter. Et la je crois que j'ai repondu moi meme a ma question. :?
Lorsque frapper fort ne suffit pas, passe au plan B : frapper PLUS fort ! ! !

Répondre