Skip to content
Snippets Groups Projects
Commit ac43bb45 authored by Mathieu Loiseau's avatar Mathieu Loiseau
Browse files

transforms inutiles et imprécis avec nouveau code

parent efc3f19f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Succes/code_sample.html 0 → 100644
+ 127
− 0
View file @ ac43bb45
<!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>
Succes/success_list.json
+ 0
− 40
View file @ ac43bb45
......@@ -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",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment