Surveillance des modifications récentes : drapeau jaune

Le traitement des modifications récentes est assez binaire : une édition est soit bonne, soit à révoquer¹.
Mais lorsque l’on est pas sûr ? Le gadget DrapeauJaune, par 0x010C, permet de signaler une modification pour vérification.

La fonctionnalité se présente comme une ligne supplémentaire dans les diffs : « [Demander une seconde relecture] »

 

On entre un commentaire expliquant le souci.

 

Et les personnes utilisant le gadget verront la remarque s’afficher en regardant le diff.

La liste des modifications à relire est stockée sur Wikipédia:Patrouille RC/Modifications à relire.
Cette fonctionnalité est apparemment intégrable avec LiveRC, mais n’utilisant pas ça j’en sais pas plus :)

Pour ajouter ce script, direction common.js et copiez/collez y :

 //si 'true', ajoute un lien vers la liste des modifications marquées, dans le menu de gauche
 var DJparam_sidebarlink = true;
 importScript('Utilisateur:0x010C/script/DrapeauJaune.js');

—-
1 : ou soit demander conseil sur IRC… mais soyons honnêtes, ça prend pas mal de temps s’il faut le faire à chaque modif un peu zarb. L’avantage que je vois à DrapeauJaune est d’éviter la tentation du « dans le doute, révoque » qu’on peut avoir en patrouille, surtout durant les pics d’activité. Révoquer une bonne contribution d’un nouveau, c’est risquer qu’il se barre furieux et dégouté.

Fusionneur de contribs.

Il m’a fallu réparer mes scripts de fusion de contributions, cassés par cette modification de MediaWiki ; je me suis dis que c’était le bon moment pour les re-présenter au public, donc voila.

—

Fin 2010, j’ai créé deux versions d’un script permettant de fusionner visuellement les éditions de plusieurs contributeurs.
Il s’agit d’outils d’aide à la chasse aux faux-nez.

Fusionneur 1.0

Le résultat du fusionneur 1.0 se présente comme une liste de contributions quasi-standard, sauf qu’il y a, vous l’aurez deviné, les contributions de plusieurs personnes dedans.
Chaque personne est surlignée d’une couleur spécifique pour séparer ses contribs du reste.

J’avais pas trop d’idée donc j’ai pris la liste des CU actifs.

Ce script est utilisable en ajoutant la ligne suivante dans votre votre sous page .js personnelle ( /vector.js ou /monobook.js selon le skin utilisé )

importScript('Utilisateur:Darkoneko/nekotb_fc_1.0.js')

Il est accessible par un nouveau lien inséré dans le menu de gauche.
 

Fusionneur 1.1

Le Fusionneur 1.1 travaille à un niveau plus global : il permet de comparer, sur plusieurs mois, les plages horaires sur lesquelles éditent ces contributeurs.
L’unité est l’heure. « _ » représente 0 edits, [1-9] … le nombre d’éditions correspondant, « X » signifie « 10 et plus ».

Import du script :

importScript('Utilisateur:Darkoneko/nekotb_fc_1.1.js')

fusionneur 1.2 ?

La 1.2 était supposé rassembler les deux types de visualisation et permettre de naviguer facilement entre elles.
Mais j’ai eu une grosse flemme.

Ça arrive.

Annonce technique : JavaScript

Bien le bonsoir,
Si vous avez des soucis JavaScript en ce moment, cette note est pour vous :

La librairie Sajax, ainsi que la commande document.write ne sont plus utilisable sur les wikis.
Une liste des pages s’en servant encore est disponible pour chaque, respectivement ici et ici.

Woops ya deux sous pages à moi, tiens.

(source)

edit : et évidemment, c’est le moment que choisit Phabricator pour tomber en rade. Les 2 liens listes ne fonctionnent donc temporairement pas.
edit2 : ils ont réparé.

Gribouillage 30 : référencement Google.

—

…suite à quoi j’ai tout supprimé.
Et moi qui me demandais pourquoi des IP passaient parfois les modifier -_-

L’anecdote a bien 8 ans. MediaWiki ayant amélioré sa gestion du référencement depuis (notamment, les pages utilisateurs sont maintenant balisées « noindex« ), je suppose qu’un tel problème ne peut plus survenir.

—

J’ai finalement réduit ma file d’attente à une taille raisonnable. Le rythme de parution des gribouilles devrait ralentir un peu.

[html5] zombies – intro

Ce billet fait parti de la série « bidouillons avec HTML5« .

Billet en retard. Pour me changer les idées, j’ai commencé à coder un jeu simple. Il fait trop chaud pour coder correctement donc ça traîne, mais voici l’idée générale :

• Le but du jeu est de tuer tous les zombies de la carte sans se faire dévorer.
• Le jeu fonctionne au tour par tour. Chaque cycle (tour), le joueur et les zombies peuvent soit se déplacer d’une case, soit attaquer.
• Le joueur commence au bord gauche de la carte. Les zombies sont positionnés aléatoirement, en tenant compte d’une « zone de sécurité » pour éviter qu’un zombie démarre trop près  du joueur.
• Les zombies n’attaquent qu’à bout portant (case adjacente au joueur).
• Le joueur possède une arme à feu (munitions illimitées) pouvant tirer à une distance X. Pour simplifier, l’arme fait pour l’instant mouche à tous les coups. À terme, je compte changer ça vers quelque chose de plus subtil, tel 90% max de faire mouche + un malus en fonction de la distance à la cible.
• Les zombies sont aveugles, fonctionnent à l’oreille. S’ils entendent le joueur (coup de feu ou déplacement), ils se dirigeront vers cette position.

exemple de carte. Point jaune = joueur, point rouge = zombie

La version actuelle du code est disponible ici.
Il manque encore la gestion de l’IA zombie, la détection du bruit, la gestion des tirs, et le test de condition de fin du jeu (zombie est au contact = perdu, 0 zombies restant = gagné). Je compte aussi ajouter 2/3 effets (pour les tirs notamment), mais ça demandera la gestion d’un 2nd calque mais j’ai atteins mon but (apprendre), donc j’arrête ce projet ici. D’autres suivrons !

[html5] carte 3 – hexagones et repère carthésien

Ce billet fait parti de la série « bidouillons avec HTML5« .

Mon précédent article a vu la création d’une carte à cases hexagonales. Aujourd’hui vous allons voir, en pratique, comment ajouter quelquechose dans cette carte.

Système de coordonnées ?

En programmation, les données d’une carte sont typiquement stockées dans un tableau à deux dimensions, chaque case du tableau correspondant à une case de la carte. Ça fonctionne très bien avec des cases carrées, mais comment faire avec une carte hexagonale ? (mes coupains twittos se souviendrons de mon raclage de cerveau sur le sujet)

À ma grande surprise, cela reste similaire. C’est toujours un système de coordonnées cartésiennes, sauf qu’il n’est pas orthonormé : au lieu d’avoir un axe horizontal, l’axe des X est parallèle avec les rangées d’hexagones. Ce qui nous donne :

Pour les curieux, le code utilisé pour générer l’image des coordonnées est disponible ici (trop long pour être sur la page), et une animation de l’algo est visible là.

Position d’une case

Nous disposons maintenant un système de coordonnées pour les cases. Voyons maintenant comment faire une translation de ce système de coordonnées vers celui du canvas.

• La position d’une case est ici définie par les coordonnées  du centre de celle ci.
• Le système de coordonnées cartésiennes utilisé pour la carte sera ci dessous  appelé « plan hexagonal ».
• Le système de coordonnées orthonormé utilisé par le canvas sera ci dessous appelé le « plan canvas ». Le point d’origine du canvas est en haut à gauche, ce qui fait que l’axe des Y est inversé.
• « A » désigne ici la longueur d’un côté d’un hexagone.

        

Écart vertical

Les axes Y du plan hexagonal (en vert) et du  plan canvas sont parallèles, donc rien de sorcier.
Les coordonnées « plan hexagonal » [1;0] et [0;0] sont séparées par une distance canvas de [ 2 * A * cos(30°) , 0].

Écart horizontal

Là par contre, ça coince un peu. L’axe X du canvas est horizontal, alors que celui du plan hexagonal (en rouge) non.
Quelle distance sépare les coordonnées « plan hexagonal » [0;0] et [0;1], en équivalent canvas ?

• y : A * cos(30°)
• x : A + A * sin(30°)

Pratiquons

Code

//ici le code traçant les hexagones et les lignes de repère *snip*
(...)
//point d'origine du plan canvas, defini manuellement
var origin_y = 5 * cos_unit; // 3eme bloc en partant du haut (donc 2.5 block de haut pour être au milieu)
var origin_x = sin_unit + unit/2; //centre du 1er bloc en partant de la gauche

pinceau.beginPath();
pinceau.font = '12pt Calibri';
pinceau.textAlign = 'center';
pinceau.fillStyle = 'green';

var coord = coordinates_hexa_to_canvas(0, 0 )
pinceau.fillText("0+0", coord.x, coord.y); //du texte, mais ça pourrait être une image ou autre.

coord = coordinates_hexa_to_canvas(1, 2 )
pinceau.fillText("y1;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(3, 2 )
pinceau.fillText("y3;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(4, 4)
pinceau.fillText("y4;x4", coord.x, coord.y);

function coordinates_hexa_to_canvas(wanted_y, wanted_x ) {
   //variables "globales" utilisées : cos_unit, sin_unit, unit, origin_y, origin_x
  var coordinates = [];
   //vertical part. canvas system has Y inverted, so goes down as hexa coordinates go up.
   coordinates.y = origin_y - (wanted_y * (2 * cos_unit));
   //"horizontal" part
   coordinates.y += (wanted_x * cos_unit);
   coordinates.x = origin_x + (wanted_x * (unit + sin_unit));

   return coordinates;
}

(code complet ici)

Affichage

Et voilou !

[html5] carte 2 – carte hexagonale

Ce billet fait parti de la série « bidouillons avec HTML5« .

Suite à mon précédent article, je passe maintenant aux cases hexagonales.
La base HTML reste la même :

<!DOCTYPE html5>
<html>
<body>
<canvas id ="canvas1" width="400" height="300" style="border:5px solid black;">
</canvas>
</body>
</html>

Dessine moi un hexagone

Mathématiquement

Bon pour commencer, ça se dessine comment exactement, un hexagone ?
N’oubliez pas que sur un canvas, l’origine [0;0] est en haut à gauche. L’axe vertical est inversé, donc « y » est à son minimum au point d’origine.

Trait par trait (d’une longueur A), d’en haut à gauche et dans le sens des aiguilles d’une montre, ça donne ça :

• Position de départ : [x, y]
• Trait horizontal du haut : [+A, +0]
• diagonale côté haut droit : [+A*sin(30°), +A*cos(30°)]
• diagonale côté bas droit : [-A*sin(30°), +A*cos(30°)]
• Trait horizontal du bas : [-A, -0]
• diagonale côté bas gauche : [-A*sin(30°), -A*cos(30°)]
• diagonale côté haut gauche : [+A*sin(30°), -A*cos(30°)]

Et niveau code ?

Notez que contrairement à la liste (ou la position est indiquée incrémentalement, par rapport à celle de la fin du trait précédent), le code ci dessous garde tout du long la position de départ comme référentiel :

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau =c1.getContext("2d");

initial_h = 100; //position verticale de base
initial_w = 100; //position horizontale de base

unit = 50; //longueur d'un coté de l'hexagone
//pour ne pas avoir à le recalculer à chaque fois
sin_unit = unit * Math.sin(30*Math.PI/180); 
cos_unit = unit * Math.cos(30*Math.PI/180);

pinceau.moveTo(initial_w                  , initial_h); //point de départ
pinceau.lineTo(initial_w + unit           , initial_h);
pinceau.lineTo(initial_w + unit + sin_unit, initial_h + cos_unit);
pinceau.lineTo(initial_w + unit           , initial_h + 2 * cos_unit);
pinceau.lineTo(initial_w                  , initial_h + 2 * cos_unit);
pinceau.lineTo(initial_w - sin_unit       , initial_h + cos_unit);
pinceau.lineTo(initial_w                  , initial_h); //retour au point de départ
pinceau.stroke();
</script>

Comme sur des roulettes ! Passons au remplissage

Tracer la carte

Tracer chaque hexagone de la carte étant fastidieux et inefficace, j’ai décidé de tracer les diagonales par colonnes, puis d’ajouter les traits horizontaux manquants.

Code

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

var unit = 40;
var sin_unit = unit * Math.sin(30*Math.PI/180);
var cos_unit = unit * Math.cos(30*Math.PI/180);

//trace the diagonals
var count = 0;

for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
   if( count % 2 == 0) {
      pinceau.moveTo(w , 0); //point de depart
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.lineTo(w + sin_unit , h + cos_unit); /* \ */
         pinceau.lineTo(w, h + 2 * cos_unit);        /* / */
      }
   } else {
      pinceau.moveTo(w + sin_unit, 0); //point de depart
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.lineTo(w, h + cos_unit);               /* / */
         pinceau.lineTo(w + sin_unit, h + 2 * cos_unit); /* \ */
      }
   }
   count++;
}

//trace the lines
count = 0;

for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
   if( count % 2 == 0) {
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.moveTo(w + sin_unit, h + cos_unit);
         pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
      }
   } else {
      for(var h = cos_unit ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.moveTo(w + sin_unit, h + cos_unit); 
         pinceau.lineTo(w + sin_unit + unit, h + cos_unit);
      }
   }
   count++;
}
pinceau.stroke();
</script>

Visuellement

Étape 1 :

Étape 2 :

[html5] carte 1 – base et quadrillage

Ce billet débute la série « bidouillons avec HTML5« .

Mais le HTML5 ça ajoute quoi par rapport à HTML en fait ? *ouvre un tutorial*
Ok, donc ya une balise <canvas> et on peut gribouiller des trucs dedans. Commençons par ça.

Ça tombe bien, je m’amuse ces temps ci à réfléchir aux algos utilisés dans les jeux au tour par tour, notamment ceux utilisant une carte avec des cases hexagonales (tels que Battle Isle et Wesnoth). Traçons une carte ! Je garde les hexagones pour plus tard, voyons déjà si j’arrive à faire des cases carrées.

Tout d’abord, squelette de page avec un canvas de 400 de large pour 300 de haut.

<!DOCTYPE html5>
 <html>
 <body>
     <canvas id="canvas1" width="400" height="300" style="border:5px solid black;"></canvas>
 </body>
 </html>

Jusque là, rien de sorcier. Il manque un certain nombre de trucs pour que ça soit propre (comme avoir le CSS et le JS dans une page à part, indiquer le le charset, etc.), mais ça suffira pour l’exercice.

Voyons le gribouillage maintenant.
« HTML5 » gère le dessin sur canvas via des méthodes JavaScript spécifiques. en ce qui me concerne :

• x.moveTo(x, y) permet de positionner le curseur/pinceau
• x.lineTo(x,y) permet de tracer un trait entre la position actuelle et celle spécifiée en paramètre.
• x.stroke() finalise le ou les tracés.

Sachant que le point d’origine [0;0] du canvas se trouve en haut à gauche, tentons une première ligne 50 pixels plus bas.

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

pinceau.moveTo(0, 50); 
pinceau.lineTo(c1.width, 50); 
pinceau.stroke();
</script>

Magnifique !
Avec un soupçon d’algorithmie, traçons maintenant le reste de la grille.

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

var ecart = 50; //largeur d'un côté des cases
//lignes
for(var h = ecart ; h < c1.height ; h += ecart) {
   pinceau.moveTo(0, h); //déplacer le pinceau à (x,y) sans tracer
   pinceau.lineTo(c1.width, h); //tracer jusqu'à (x,y)
}
//colonnes
for(var w = ecart ; w < c1.width ; w += ecart) {
   pinceau.moveTo(w, 0);
   pinceau.lineTo(w, c1.height);
}
pinceau.stroke();
</script>

Et voilou ! Bien sur, le but à terme sera de remplir ces cases avec des textures de terrain et/ou de combattants ! Mais ça sera pour plus tard.
Prochain billet, encore une carte vide, mais cette fois avec des cases hexagonales. Ça s’annonce plus tendu :)

le HTML5, c’est fun

Aloha !

Je me suis mis récemment au HTML5 (utile dans ma branche de métier), et me suis dit que ça serait cool de partager ça ici.
Et puis, ça fera toujours un peu d’activité sur ce blog.

Ces prochains jours/semaines, je vais donc poster des bout de code/algo et en expliquer les grandes lignes. Pas vraiment un tutoriel, mais si vous maîtrisez un peu HTML et JavaScript, vous devriez comprendre sans trop de souci :)

À bientôt donc.

Personnalisons Wikipédia : vous avez un nouveau message (update)

Ce billet fait partie de la série « Personnalisons Wikipédia« .

Suite à une modification sur MediaWiki, mon  bout de code permettant de changer le texte du bandeau « vous avez un nouveau message » ne fonctionne plus. Corrigeons ça.

Le nouveau message ressemble à ceci :

Soit structurellement, texte1/lien1/texte2/lien2/texte3.

Je n’utilise que texte1 et lien2 (lien1 et texte2 deviennent vides, texte3 n’est pas touché), mais l’endroit ou est modifié chaque élément est spécifié en commentaire pour que vous puissiez changer ça si ça vous dit :)

Nouveau code (n’oubliez pas d’effacer l’ancien le cas échéant !)

function youHaveANewInsultingMessage() {
  div = document.body.getElementsByClassName("usermessage")[0]
  if( !div) return

  div.firstChild.nodeValue = " Rhaaah tu as fait une connerie (" //texte1

  a = div.getElementsByTagName("a")
  a[0].firstChild.nodeValue = "" //lien1
  a[0].nextSibling.nodeValue = "" //texte2
  a[1].firstChild.nodeValue = "bâtard" //lien2
}

addOnloadHook(youHaveANewInsultingMessage)