// ==UserScript==
// @name LVAB_XY
// @namespace http://metafract.forumactif.com/
// @author Watcha/Allegra Duccio à partir du code de Marthus et avec l'aide de "L'Arbre"
// @description Longue-Vue Anti-Brouillard avec coordonnées en X et Y
// @match https://www.fract.org/monde/index.php
// @match https://www.fract.org/monde/index.php?toit
// @require https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @version 04-03-2018
// @grant none
// ==/UserScript==
// *** Les étapes du script ***
//
// 0) Pour mieux comprendre comment ce script fonctionne, je vous invite à vous connecter à Fractal sur la page Carte, et veiller à ce que votre personnage ne soit pas dans un bâtiment.
// Puis à faire un clic droit n'importe où sur la page et cliquer dans le menu "Code source de la page" ou "Afficher le code source de la page".
// Garder cette nouvelle page ouverte pour vous y ré-ferrer si besoin.
//
// 1) Récupération d'un bout ("BoutCode") du code source des pages indiquées en "@match" ci-dessus, et plus exactement tout ce que contient la balise <div id="pcontenu">
//
// 2) Segmentation de "BoutCode" dans un tableau ("Comptage") à chaque fois qu'il y a le texte "fract_addElement" de manière à décompter combien il y aura d'éléments à afficher ensuite.
//
// 3) Segmentation de "BoutCode" dans un tableau ("Fractelement") en coupant ("split") à chaque fois qu'il y a un point-virgule ";"
//
// 4) Dans un nouveau tableau en 2D ("Fractelement_2D"), on récupère des éléments du tableau de la manière suivante :
// a) A partir de la ligne n°9 (= 10ième ligne) de "Fractalement", on coupe en 3 à chaque virgule. Tout ce qui est avant ne nous intéresse pas ici.
// La première dimension de "Fractelement_2D" correspond au n° de ligne "Fractelement", la deuxième dimension au contenu splité (= nombre de colonnes de notre tableau 2D).
// Par exemple ( /!\ le ' sert seulement à délimiter les expressions à la lecture), si la ligne 3 de "Fractalement" est 'fract_addElement (-4, -3, "../pix/hexa/c01.png")', ça donne dans Fractelement_2D :
// - Fractelement_2D[3][0] = 'fract_addElement (-4'
// - Fractelement_2D[3][1] = '-3'
// - Fractelement_2D[3][2] = ' "../pix/hexa/c01.png'
// b) On épure ensuite les éléments ci-dessus pour ne garder que les coordonnées, le nom de l'image, et un morceau du lien qui nous servira plus tard.
// En gardant le même exemple, on a à la fin :
// - Fractelement_2D[3][0] = '-4' ,
// - Fractelement_2D[3][1] = '-3' ,
// - Fractelement_2D[3][2] = 'c01'
// - Fractelement_2D[3][3] = '../pix/hexa/c01.png'
// c) Dans une cinquième colonne (ou indice n°4 puisqu'on a démarré de 0) on prépare et stocke des petits morceaux de code HTML qui seront plus tard assemblés en un seul gros morceau.
//
// 5) Dans un nouveau tableau en 3D ("Fractelement_3D") :
// a) On regroupe par couple de coordonnées (ou par case) les éléments à afficher. Ci-dessous le détail des dimensions :
// - La première dimension de "Fractelement_3D" correspond à la coordonnée x + 4 pour rester avec des indices de tableaux positifs
// - La deuxième dimension de "Fractelement_3D" correspond à la coordonnée y + 4 pour rester avec des indices de tableaux positifs
// - L'indice 0 de la troisième dimension correspond au nombre d'éléments sur la même case
// - Les autres indices de la troisième dimension différencie les éléments sur la même case.
// Exemple : il y a trois personnages A, B, C sur la même case que moi (0;0)
// - Fractelement_3D[0][0][0] = 3
// - Fractelement_3D[0][0][1] = 'détail du personnage A'
// - Fractelement_3D[0][0][2] = 'détail du personnage B'
// - Fractelement_3D[0][0][3] = 'détail du personnage C'
// b) On créé le début de notre gros morceau de code HTML qui sera inséré dans l'interface. Petit à petit, il va grossir à mesure qu'on y ajoutera d'autres morceaux.
// c) Construction du code HTML suivant le contenu du tableau "Fractelement_3D"
// d) Ajout au code des balises HTML de fin du tableau
// 6) Insertion du code HTML construit dans la page pour l'affichage, il s'agit du même code que Marthus a utilisé dans ses scripts.
//Étape 1
var BoutCode = document.getElementById("pcontenu").innerHTML;
//Étape 2
var Comptage = [];
Comptage = BoutCode.split('fract_addElement');
//Nombre de fract_addElement en enlevant la première "coupe" du code qui ne nous intéresse pas (-1)
var NbFractelement = Comptage.length-1;
//Nombre de fract_addElement en enlevant aussi le fract_addElement pour la position (0;0) qui apparait en double
var NbFractelement2 = Comptage.length-2;
//Étape 3
var Fractelement = [];
Fractelement = BoutCode.split(';');
//Étape 4
//Construction d'un tableau en 2D
var Fractelement_2D = [];
for (i = 0; i < NbFractelement; i++) { Fractelement_2D[i] = []; }
//Boucle sur les lignes, comme on part de la ligne 9, le NbFractelement est également augmenté de 9.
for (l = 9; l < (NbFractelement+9); l++){
//Étape 4 a)
Fractelement_2D[l-9]=Fractelement[l].split(',');
//Étape 4 b)
Fractelement_2D[l-9][0]=Fractelement_2D[l-9][0].substring(19, 21); // On récupère seulement le 19ième caractère et le 20ième caractère
Fractelement_2D[l-9][2]=Fractelement_2D[l-9][2].replace("\"", ""); // On enlève le premier guillemet
Fractelement_2D[l-9][2]=Fractelement_2D[l-9][2].replace("\"\)", ""); // On enlève le deuxième guillemet et la parenthèse à la fin
Fractelement_2D[l-9][3]=Fractelement_2D[l-9][2]; //On stocke ce résultat intermédiaire dans la quatrième colonne (=indice n°3) car on en aura besoin plus tard
Fractelement_2D[l-9][2]=Fractelement_2D[l-9][2].replace("../pix/hexa/", ""); // On enlève '../pix/hexa/' => quand l'élément n'est pas un personnage ou groupe
Fractelement_2D[l-9][2]=Fractelement_2D[l-9][2].replace("./png/", ""); // On enlève './png/' => quand l'élément est un personnage ou groupe
Fractelement_2D[l-9][2]=Fractelement_2D[l-9][2].replace(" ", ""); // On enlève l'espace au début
Fractelement_2D[l-9][2]=Fractelement_2D[l-9][2].replace(".png", ""); // On enlève le '.png' de la fin
// On a besoin pour la suite que les coordonnées (x,y) récupérées soient considérées comme des nombres et plus du texte :
Fractelement_2D[l-9][0]=Number(Fractelement_2D[l-9][0]);
Fractelement_2D[l-9][1]=Number(Fractelement_2D[l-9][1]);
//Étape 4 c)
//Création d'une "expression régulière" utile tout qui permet ici de reconnaitre si un texte commence par un chiffre
var reg = /^\d/;
//Le pourquoi des deux boucles if ci-dessous est un peu long à expliquer pour seulement un rendu plus propre, mais si vraiment ça vous intéresse, contactez moi :)
if (Fractelement_2D[l-9][0] > 3 || Fractelement_2D[l-9][0] < -3 || Fractelement_2D[l-9][1] > 3 || Fractelement_2D[l-9][1] < -3){
if (reg.test(Fractelement_2D[l-9][2])){Fractelement_2D[l-9][4]='<a href=\"popup.php?cazid='+Fractelement_2D[l-9][2]+'\&caztyp=1\" target="_blank"><img src=\"'+Fractelement_2D[l-9][3]+'\">';}
else {Fractelement_2D[l-9][4]='<a href=\"popup.php?quoi=caze&x='+Fractelement_2D[l-9][0]+'&y='+Fractelement_2D[l-9][1]+'\" target="_blank"><img src=\"'+Fractelement_2D[l-9][3]+'\">';}}
else { Fractelement_2D[l-9][4]='<a href=\"popup.php?quoi=caze&x='+Fractelement_2D[l-9][0]+'&y='+Fractelement_2D[l-9][1]+'\" target="_blank"><img src=\"'+Fractelement_2D[l-9][3]+'\">';}
}
//Étape 5
//Étape 5 a)
//Construction d'un tableau en 3D
var Fractelement_3D = [];
for (i = 0; i < 9; i++){
Fractelement_3D[i] = [];
for (j = 0; j < 9; j++){
Fractelement_3D[i][j] = [];
}
}
//On initialise la troisième dimension à 0
for (i = 0; i < 9; i++){
for (j = 0; j < 9; j++){
Fractelement_3D[i][j][0]=0;
}
}
//On commence la boucle à i=1 pour ne pas avoir le doublon de la coordonnée (0,0), elle est visible dans le code source si vous l'avez ouvert de votre côté.
for (i = 1; i < NbFractelement; i++){
Fractelement_3D[Fractelement_2D[i][0]+4][Fractelement_2D[i][1]+4][0]++;
Fractelement_3D[Fractelement_2D[i][0]+4][Fractelement_2D[i][1]+4][Fractelement_3D[Fractelement_2D[i][0]+4][Fractelement_2D[i][1]+4][0]]=Fractelement_2D[i][4];
}
//Étape 5 b)
texte_a_afficher = '<div class="classresume" style="margin-left:50px;width:810px" ><div class="tableau"><div class="ttitre">Nombre de trucs : '+NbFractelement2+'</div><br><div style="margin-left:50px;"><table style="border-collapse:collapse;">';
//Étape 5 c)
for (i = 0; i < 9; i++){ // Boucle sur les x
for (j = 0; j < 9; j++){ // Boucle sur les y
if (Fractelement_3D[i][j][0] > 0){ // Test s'il y a des éléments à afficher pour chaque couple de coordonnées
texte_a_afficher += '<tr>';
texte_a_afficher += '<td width="40" style="background-color:#bebebe; text-align: center; border:solid #f0ede8">'+(i-4)+'</td>';
texte_a_afficher += '<td width="40" style="background-color:#bebebe; text-align: center; border:solid #f0ede8">'+(j-4)+'</td>';
for (k = 1; k < Fractelement_3D[i][j][0]+1; k++){ // Bouche sur tous les éléments de la même case
texte_a_afficher += '<td width="40" style="background-color:#bebebe; text-align: center; border:solid #f0ede8">'+Fractelement_3D[i][j][k]+'</td>';
}
texte_a_afficher += '</tr>';
}
}
}
//Étape 5 d)
texte_a_afficher +='</table></div></div></div>';
texte_a_afficher +='<div class="classresume" style="margin-left:50px;width:810px" ><div class="tableau"><div class="ttitre">Grille de position</div><br><div style="margin-left:0px;"><div style="text-align:center"><img src="https://i58.servimg.com/u/f58/19/58/06/78/hexalv10.jpg"></div></div></div></div><br>';
// Étape 6
var sp1 = document.createElement("span"); // on crée une balise span
sp1.setAttribute("id", "Affichage"); // on y ajoute un id
var sp1_content = document.createTextNode('');
sp1.appendChild(sp1_content);
var sp2 = document.getElementById('pcontenu') ; // Lieu où on veut afficher
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(sp1, sp2.nextSibling);
var tableau = document.createElement("span");
tableau.innerHTML = texte_a_afficher; // Ce qu'on veut afficher
document.getElementById('Affichage').insertBefore(tableau, document.getElementById('Affichage').firstChild); // Affichage
