diff --git a/Succes/code_sample.html b/Succes/code_sample.html
new file mode 100644
index 0000000000000000000000000000000000000000..99da11656ee1de2f8fd309b8bbda73d3649f3687
--- /dev/null
+++ b/Succes/code_sample.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>SVG Test</title>
+ <meta charset="utf-8" />
+ </head>
+ <body>
+ <h2>Test 1</h2>
+ <table>
+ <tr>
+ <td><object data="succes-01.svg" type="image/svg+xml"
+ id="s01" width="256px"></object></td>
+ <td><object data="succes-02.svg" type="image/svg+xml"
+ id="s02" width="256px"></object></td>
+ <td><object data="succes-03.svg" type="image/svg+xml"
+ id="s03" width="256px"></object></td>
+ <!-- ICITE l'élément qu'on modifie -->
+ <td><object type="image/svg+xml" id="bigS" width="512px"></td>
+ </tr>
+ <tr>
+ <td><button id="b1">Doubler</button></td>
+ <td><button id="b2">Doubler</button></td>
+ <td><button id="b3">Doubler</button></td>
+ <td><label for="success">Succès</label><select id="success" name="success"></select>
+ <label for="niveau">Niveau</label><select id="niveau" name="niveau"></select>
+ <label for="nbpoints">Points</label><input name="nbpoints" id="nbpoints" value="25" /></td>
+ </tr>
+ </table>
+ <script>
+ var s1 = document.getElementById("s01");
+ var s2 = document.getElementById("s02");
+ var s3 = document.getElementById("s03");
+
+ document.getElementById("b1").onclick=function(){
+ var text = s1.contentDocument.getElementById("level");
+ text.innerHTML=parseInt(text.innerHTML)*2;
+ };
+ document.getElementById("b2").onclick=function(){
+ var text = s2.contentDocument.getElementById("level");
+ text.innerHTML=parseInt(text.innerHTML)*2;
+ };
+ document.getElementById("b3").onclick=function(){
+ var text = s3.contentDocument.getElementById("level");
+ text.innerHTML=parseInt(text.innerHTML)*2;
+ };
+ //blabla
+ var successTag = document.getElementById('success');
+ var levelTag = document.getElementById('niveau');
+ var pointsTag = document.getElementById('nbpoints');
+ //ICITE l'élément qu'on modifie
+ var badge = document.getElementById('bigS');
+ //ICITE chargement des succès json
+ var successes;
+ fetch("success_list.json")
+ .then(response => response.json())
+ .then(json => init(json));
+
+ //blabla
+ function init(json){
+ successes = json;
+ create_content();
+
+ for (const [succes, content] of Object.entries(successes)) {
+ let opt = document.createElement("option");
+ opt.value = succes; // the index
+ opt.innerHTML = succes;
+ successTag.append(opt);
+ }
+ successTag.onchange = list_levels;
+ levelTag.onchange = create_content;
+ pointsTag.onchange = create_content;
+ badge.onload = update_values;
+ }
+
+ //blabla
+ function list_levels(){
+ levelTag.innerHTML = "";
+ if (successTag.value != "Zero"){
+ for (let i = 0; i <= successes[successTag.value].levels.length +1;i++){
+ let opt = document.createElement("option");
+ opt.value = i; // the index
+ opt.innerHTML = i;
+ levelTag.append(opt);
+ }
+ }
+ create_content();
+ }
+
+ //Change le texte de l'item
+ function update_values(){
+ let content = parseInt(pointsTag.value);//La nouvelle valeur du contenu (devrait être un paramètre de la fonction plutôt que récupéré)
+ let famille_succes = successTag.value;//La valeur de la famille de succès (devrait être un paramètre de la fonction)
+ let num_succes = parseInt(levelTag.value); //Le numéro du succès dans sa famille (devrait être un paramètre de la fonction)
+ if ((famille_succes != "Zero") &&(num_succes > 0)){
+ //On calcule le ratio des dimension entre les coordonnées dans le svg et l'affichage
+ var svg_spec_width = badge.contentDocument.getElementsByTagName('svg')[0].viewBox.baseVal.width ;
+ var svg_actual_width = badge.getBoundingClientRect().width ;
+ var ratio = svg_spec_width/svg_actual_width ;
+ //On récupère l'élément qui contient le texte
+ var txt = badge.contentDocument.getElementById("level");
+ //On le mesure
+ var w = txt.getBoundingClientRect().width;
+ //On le modifie
+ txt.innerHTML = content;
+ //On le remesure et on modifie la matrice en conséquence pour centrer le texte
+ txt.transform.baseVal[0].matrix.e = txt.transform.baseVal[0].matrix.e - ratio/2 * (txt.getBoundingClientRect().width - w);
+ }
+ }
+
+ //Charge le bon item d'après le json
+ function create_content(){
+ let famille_succes = successTag.value;//La valeur de la famille de succès (devrait être un paramètre de la fonction)
+ let num_succes = parseInt(levelTag.value); //Le numéro du succès dans sa famille (devrait être un paramètre de la fonction)
+ if((famille_succes == "Zero") || (isNaN(num_succes))){
+ badge.data=successes["Zero"];
+ }
+ else if (num_succes > 0) {
+ badge.data = successes[famille_succes].directory+"/"+successes[famille_succes].levels[num_succes - 1];
+ }
+ else{
+ badge.data=successes["Zero"];
+ }
+
+ }
+ </script>
+ </body>
+</html>
diff --git a/Succes/success_list.json b/Succes/success_list.json
index 2cc0b8eef3153049b78bf68b1fb16c24c933d688..584fef6f8b9bdd8c6584f7a1e00fc301c86f4e2d 100644
--- a/Succes/success_list.json
+++ b/Succes/success_list.json
@@ -2,11 +2,6 @@
"Zero":"niveau zero/niveau zero__0.svg",
"Acolyte":{
"directory":"Acolyte anonyme",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":59.3434,"f":141.8864},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":52.8488,"f":141.8864},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":46.3541,"f":141.8864}
- },
"levels":[
"Acolyte anonyme__2.svg",
"Acolyte anonyme__5.svg",
@@ -18,11 +13,6 @@
},
"Altruiste":{
"directory":"Altruiste",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":59.3434,"f":141.8862},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":51.3959,"f":141.8862},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":44.9013,"f":141.8862}
- },
"levels":[
"Altruiste__1.svg",
"Altruiste__5.svg",
@@ -34,11 +24,6 @@
},
"Commentateur":{
"directory":"Commentateur sportif",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":59.3434,"f":141.8863},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":52.614,"f":141.8863},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":46.3542,"f":141.8863}
- },
"levels":[
"Commentateur sportif__2.svg",
"Commentateur sportif__5.svg",
@@ -50,11 +35,6 @@
},
"Gardien":{
"directory":"Gardien du savoir",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":59.3434,"f":141.8865},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":51.6065,"f":141.8863},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":46.3541,"f":141.8865}
- },
"levels":[
"Gardien du savoir__1.svg",
"Gardien du savoir__10.svg",
@@ -65,11 +45,6 @@
},
"Labelliciste":{
"directory":"Labelliciste",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":58.2184,"f":141.8865},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":45.324,"f":141.8865},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":40.0716,"f":141.8865}
- },
"levels":[
"Labelliciste__1.svg",
"Labelliciste__5.svg",
@@ -81,11 +56,6 @@
},
"TimeMaster":{
"directory":"Maitre du temps",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":56.8422,"f":138.8785},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":51.5605,"f":138.8785},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":46.5605,"f":138.8785}
- },
"levels":[
"Maitre du temps__2.svg",
"Maitre du temps__5.svg",
@@ -96,11 +66,6 @@
},
"Messager":{
"directory":"Messager",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":58.2183,"f":141.8865},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":51.6065,"f":141.8865},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":46.3736,"f":141.8865}
- },
"levels":[
"Messager__1.svg",
"Messager__5.svg",
@@ -112,11 +77,6 @@
},
"Vocabulord":{
"directory":"Vocabulord",
- "transforms":{
- "1-digit":{"a":1,"b":0,"c":0,"d":1,"e":59.3433,"f":141.8865},
- "2-digits":{"a":1,"b":0,"c":0,"d":1,"e":52.8194,"f":141.8865},
- "3-digits":{"a":1,"b":0,"c":0,"d":1,"e":46.3541,"f":141.8865}
- },
"levels":[
"Vocabulord__1.svg",
"Vocabulord__10.svg",