LVAB
// ==UserScript==
// @name LVAB
// @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
// @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 de 3 tableaux dédiés à la mise en forme HTML
// d) Construction du code HTML suivant le contenu du tableau "Fractelement_3D" en triant par zone les éléments à afficher.
// e) Ajout au code des balises HTML de fin du tableau
// f) Ajout au code de la carte des zones
// 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)
//Construction d'un tableau 1D contenant la couleur hexadécimale des cases, correspondant aux zones de la carte
// Note : pas de lettre I pour ne pas être confondu avec le chiffre un ou un L minuscule
var Couleurzone = [];
Couleurzone[0]='#000000'; // Noir pour la case centrale, celle où se trouve le personnage utilisant la longue-vue
Couleurzone[1]='#0033CC'; // Bleu foncé = Zone A = Pointe Nord-Ouest extérieure
Couleurzone[2]='#00FFFF'; // Bleu clair = Zone B = Pointe Nord-Ouest intérieure
Couleurzone[3]='#92D050'; // Vert clair = Zone C = Arc Ouest
Couleurzone[4]='#FF66FF'; // Rose = Zone D = Arc Est
Couleurzone[5]='#FFFF00'; // Jaune = Zone E = Pointe intérieure Sud-Est
Couleurzone[6]='#C00000'; // Rouge = Zone F = Pointe extérieure Sud-Est
Couleurzone[7]='#385723'; // Vert foncé = Zone G = Tronçon visible Nord-Ouest
Couleurzone[8]='#7030A0'; // Violet foncé = Zone H = Tronçon visible Nord-Est
Couleurzone[9]='#CC99FF'; // Violet clair = Zone J = Tronçon visible Sud-Es
Couleurzone[10]='#FF9933'; // Orange = Zone K = Tronçon visible Sud-Ouest
//Construction d'un tableau 1D contenant la couleur hexadécimal du texte des cases, correspondant aux zones de la carte
var Couleurtexte = [];
Couleurtexte[0]='#FFFFFF'; // Texte blanc
Couleurtexte[1]='#FFFFFF';
Couleurtexte[2]='#000000'; // Texte noir
Couleurtexte[3]='#000000';
Couleurtexte[4]='#000000';
Couleurtexte[5]='#000000';
Couleurtexte[6]='#FFFFFF';
Couleurtexte[7]='#FFFFFF';
Couleurtexte[8]='#FFFFFF';
Couleurtexte[9]='#000000';
Couleurtexte[10]='#000000';
//Construction et remplissage manuel d'un tableau 3D qui va associer à chaque couple (x,y) une coordonnée Lettre+Chiffre. La troisième dimension sert à stocker le numéro de la zone.
var Coordfract = [];
for (i = 0; i < 9; i++){
Coordfract[i] = [];
for (j = 0; j < 9; j++){
Coordfract[i][j] = [];
}
}
Coordfract[0][8][0]='A0'; Coordfract[0][8][1]=1;
Coordfract[0][7][0]='A1'; Coordfract[0][7][1]=1;
Coordfract[1][8][0]='A2'; Coordfract[1][8][1]=1;
Coordfract[0][6][0]='A3'; Coordfract[0][6][1]=1;
Coordfract[2][8][0]='A4'; Coordfract[2][8][1]=1;
Coordfract[0][5][0]='A5'; Coordfract[0][5][1]=1;
Coordfract[3][8][0]='A6'; Coordfract[3][8][1]=1;
Coordfract[0][4][0]='A7'; Coordfract[0][4][1]=1;
Coordfract[4][8][0]='A8'; Coordfract[4][8][1]=1;
Coordfract[1][7][0]='B0'; Coordfract[1][7][1]=2;
Coordfract[1][6][0]='B1'; Coordfract[1][6][1]=2;
Coordfract[2][7][0]='B2'; Coordfract[2][7][1]=2;
Coordfract[1][5][0]='B3'; Coordfract[1][5][1]=2;
Coordfract[3][7][0]='B4'; Coordfract[3][7][1]=2;
Coordfract[2][6][0]='B5'; Coordfract[2][6][1]=2;
Coordfract[0][3][0]='C0'; Coordfract[0][3][1]=3;
Coordfract[0][2][0]='C1'; Coordfract[0][2][1]=3;
Coordfract[0][1][0]='C2'; Coordfract[0][1][1]=3;
Coordfract[0][0][0]='C3'; Coordfract[0][0][1]=3;
Coordfract[1][0][0]='C4'; Coordfract[1][0][1]=3;
Coordfract[2][0][0]='C5'; Coordfract[2][0][1]=3;
Coordfract[3][0][0]='C6'; Coordfract[3][0][1]=3;
Coordfract[5][8][0]='D0'; Coordfract[5][8][1]=4;
Coordfract[6][8][0]='D1'; Coordfract[6][8][1]=4;
Coordfract[7][8][0]='D2'; Coordfract[7][8][1]=4;
Coordfract[8][8][0]='D3'; Coordfract[8][8][1]=4;
Coordfract[8][7][0]='D4'; Coordfract[8][7][1]=4;
Coordfract[8][6][0]='D5'; Coordfract[8][6][1]=4;
Coordfract[8][5][0]='D6'; Coordfract[8][5][1]=4;
Coordfract[7][1][0]='E0'; Coordfract[7][1][1]=5;
Coordfract[6][1][0]='E1'; Coordfract[6][1][1]=5;
Coordfract[7][2][0]='E2'; Coordfract[7][2][1]=5;
Coordfract[5][1][0]='E3'; Coordfract[5][1][1]=5;
Coordfract[7][3][0]='E4'; Coordfract[7][3][1]=5;
Coordfract[6][2][0]='E5'; Coordfract[6][2][1]=5;
Coordfract[8][0][0]='F0'; Coordfract[8][0][1]=6;
Coordfract[7][0][0]='F1'; Coordfract[7][0][1]=6;
Coordfract[8][1][0]='F2'; Coordfract[8][1][1]=6;
Coordfract[6][0][0]='F3'; Coordfract[6][0][1]=6;
Coordfract[8][2][0]='F4'; Coordfract[8][2][1]=6;
Coordfract[5][0][0]='F5'; Coordfract[5][0][1]=6;
Coordfract[8][3][0]='F6'; Coordfract[8][3][1]=6;
Coordfract[4][0][0]='F7'; Coordfract[4][0][1]=6;
Coordfract[8][4][0]='F8'; Coordfract[8][4][1]=6;
Coordfract[1][4][0]='G0'; Coordfract[1][4][1]=7;
Coordfract[2][5][0]='G1'; Coordfract[2][5][1]=7;
Coordfract[3][6][0]='G2'; Coordfract[3][6][1]=7;
Coordfract[1][3][0]='G3'; Coordfract[1][3][1]=7;
Coordfract[2][4][0]='G4'; Coordfract[2][4][1]=7;
Coordfract[3][5][0]='G5'; Coordfract[3][5][1]=7;
Coordfract[1][2][0]='G6'; Coordfract[1][2][1]=7;
Coordfract[2][3][0]='G7'; Coordfract[2][3][1]=7;
Coordfract[3][4][0]='G8'; Coordfract[3][4][1]=7;
Coordfract[4][7][0]='H0'; Coordfract[4][7][1]=8;
Coordfract[4][6][0]='H1'; Coordfract[4][6][1]=8;
Coordfract[5][7][0]='H2'; Coordfract[5][7][1]=8;
Coordfract[4][5][0]='H3'; Coordfract[4][5][1]=8;
Coordfract[5][6][0]='H4'; Coordfract[5][6][1]=8;
Coordfract[6][7][0]='H5'; Coordfract[6][7][1]=8;
Coordfract[5][5][0]='H6'; Coordfract[5][5][1]=8;
Coordfract[6][6][0]='H7'; Coordfract[6][6][1]=8;
Coordfract[7][7][0]='H8'; Coordfract[7][7][1]=8;
Coordfract[7][4][0]='J0'; Coordfract[7][4][1]=9;
Coordfract[6][3][0]='J1'; Coordfract[6][3][1]=9;
Coordfract[5][2][0]='J2'; Coordfract[5][2][1]=9;
Coordfract[7][5][0]='J3'; Coordfract[7][5][1]=9;
Coordfract[6][4][0]='J4'; Coordfract[6][4][1]=9;
Coordfract[5][3][0]='J5'; Coordfract[5][3][1]=9;
Coordfract[7][6][0]='J6'; Coordfract[7][6][1]=9;
Coordfract[6][5][0]='J7'; Coordfract[6][5][1]=9;
Coordfract[5][4][0]='J8'; Coordfract[5][4][1]=9;
Coordfract[4][1][0]='K0'; Coordfract[4][1][1]=10;
Coordfract[4][2][0]='K1'; Coordfract[4][2][1]=10;
Coordfract[3][1][0]='K2'; Coordfract[3][1][1]=10;
Coordfract[4][3][0]='K3'; Coordfract[4][3][1]=10;
Coordfract[3][2][0]='K4'; Coordfract[3][2][1]=10;
Coordfract[2][1][0]='K5'; Coordfract[2][1][1]=10;
Coordfract[3][3][0]='K6'; Coordfract[3][3][1]=10;
Coordfract[2][2][0]='K7'; Coordfract[2][2][1]=10;
Coordfract[1][1][0]='K8'; Coordfract[1][1][1]=10;
Coordfract[4][4][0]=''; Coordfract[4][4][1]=0;
//Étape 5 d)
for (l = 0; l < 11; l++){ // Boucle sur les zones
for (i = 0; i < 9; i++){ // Boucle sur les x
for (j = 0; j < 9; j++){ // Boucle sur les y
if (Coordfract[i][j][1] == l){ // Test s'il y a des éléments à afficher sont dans la même zone
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:'+Couleurzone[l]+'; text-align: center; border:solid #f0ede8; color:'+Couleurtexte[l]+'">'+Coordfract[i][j][0]+'</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 e)
texte_a_afficher +='</table></div></div></div>';
//Étape 5 f)
texte_a_afficher +='<div class="classresume" style="margin-left:50px;width:810px" ><div class="tableau"><div class="ttitre">Découpage des zones</div><br><div style="margin-left:50px;"><div style="text-align:center"><img src="https://i62.servimg.com/u/f62/19/83/53/72/carte310.png"></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
