HomeCurrent date/time is May 3rd 2024, 12:54 am
Search found 1 match for d1ba88
About an incomplete code
Hello everyone,I am posting here again (after a long time) for a problem yet to be totally resolved. I was helped on it by Occultist (and I thank him again, he did a lot for my forum), but he probably has no time to finish this problematic piece of code now (which I can understand).
Let's try to cut to it :
I wanted scrollable character sheets, which I got like that thanks to Occultist : https://prnt.sc/s5tybu
As you can see, there is 3 tabs : "Stats" "Bio" and "Inventaire" (which means inventory in french)
Occultist's code, made it possible to display the power, dexterity, will power and so on, stats on the "Stats" tab. And I can't figure out (even months after) how to display the others stats. At the moment, the others tabs just display their names like that : http://prntscr.com/s5u1ry
I would need in the "Bio" tab, the stats called : "Statut"; "Latéralité"; "Taille"; "Poids"; "Date de naissance"
In the tab called "Inventaire", I would need : "Argent"; "Argent" (there is 2); "Inventaire"; "Ceinture"; "Armes"; "Armures"
Here are the javascript for now :
- JAVASCRIPT:
- var exp=1000*60*60*24, ver=10;
var d=document, q=e=>{
return d.querySelector(e);
}, _q=e=>{
return d.querySelectorAll(e);
}, get=(url, callback)=>{
fetch(url).then(data=>{
return data.text();
}).then(data=>callback(data));
}, wait=(t, f)=>{
return setTimeout(f, t);
}, parser=new DOMParser(), domify=string=>{
return parser.parseFromString(string, "text/html");
};
var ls={
set:(name, data, expiry)=>{
localStorage.setItem(name+"v"+ver, JSON.stringify({
data:data,
expiry:(new Date).getTime()+expiry,
}))
},
get:name=>{
if(!localStorage.getItem(name+"v"+ver)) return null;
var data=JSON.parse(localStorage.getItem(name+"v"+ver));
if(parseInt(data.expiry)>(new Date).getTime()) return data.data;
return null;
}
};
var store=[];
var g=0;
document.addEventListener("DOMContentLoaded", ()=>{
var links=_q(".postprofile-rpg>a"), _ids=Array.from(links).map(e=>parseInt(e.getAttribute("href").match(/\d+/))), len, ids=[];
_ids.forEach(e=>{
if(ids.indexOf(e)==-1) ids.push(e);
});
len=ids.length;
ids.forEach(e=>store[e]=null);
ids.forEach((e, i)=>{
if(store[e]) return;
store[e]=ls.get(e);
if(!store[e]){
g++;
store[e]=1;
wait(100*g, ()=>{
get("/u"+e+"rpgsheet", data=>{
data=domify(data);
data=prep(domify(data.querySelector(".panel").innerHTML));
store[e]=data;
ls.set(e, store[e], exp);
if(i==len-1){
links.forEach((e, i)=>{
e.parentElement.innerHTML=render(store[parseInt(e.getAttribute("href").match(/\d+/))]);
});
evs();
};
});
});
} else {
if(i==len-1){
links.forEach((e, i)=>{
e.parentElement.innerHTML=render(store[parseInt(e.getAttribute("href").match(/\d+/))]);
});
evs();
};
};
});
});
var evs=()=>{
var handlees=_q(".prt-menu>span"), tabs=_q(".prt-tab"), f;
Array.from(handlees).forEach((e, i)=>{
l(e, "click", ()=>{
Array.from(e.parentElement.children).forEach(c=>{
if(c.classList.contains("prt-m-active")) c.classList.remove("prt-m-active");
});
e.classList.add("prt-m-active");
f=e.parentElement.parentElement;
while(!f.classList.contains("prt-tab-active")) f=f.nextSibling;
f.classList.remove("prt-tab-active");
tabs[i].classList.add("prt-tab-active");
});
});
};
var render=data=>{
var html="<div class='prof-rpg-top'><span class='prt-title'>Feuille de personnage</span>"+
"<div class='prt-menu'><span class='prt-m-active'>Stats</span>"+
"<span>Info</span><span>Argent</span><span>Ceinture</span><span>Armes</span><span>Armures</span></div></div>"+
"<div class='prt-tab prt-tab-active'>";
data[0].forEach(e=>{
html+="<div class='field f1'>"+e.img+"<span class='f1-value'>"+e.val+"</span><span class='f1-imgs'>"+e.imgs+"</span></div>";
});
html+="</div><div class='prt-tab'>Info</div><div class='prt-tab'>Argent</div><div class='prt-tab'>Ceinture</div><div class='prt-tab'>Armes</div><div class='prt-tab'>Armures</div>";
return html;
};
var prep=data=>{
var fsets=data.querySelectorAll("fieldset");
var field1=[], dom;
Array.from(fsets[0].children).forEach((e, i)=>{
dom=domify(e.innerHTML);
Array.from(dom.querySelectorAll("dd div img")).forEach((e, i)=>{
if(i==1 || i==2) e.setAttribute("width", parseInt(e.getAttribute("width"))/2);
});
field1.push({
img:dom.querySelector("label img").outerHTML,
imgs:dom.querySelector("dd div").innerHTML,
val:"("+dom.querySelector("dd>div").nextSibling.nodeValue.split("(")[1],
});
});
return [field1, null];
};
And here is the CSS :
- CSS:
- /* RPG FICHE SCROLLABLE */
.inner{
}
.f1-imgs{
display:flex;
transform:scaleX(1.5);
position:relative;
left:30px;
}
.f1-value{
position:relative;
top:-11px;
left:3px;
}
.f1{
padding:5px;
}
.prt-menu>span{
display:inline-table;
padding:10px;
border-bottom:2px solid transparent;
cursor:pointer;
}
.prt-m-active{
border-bottom:2px solid #d1ba88 !important;
}
.prt-tab{
display:none !important;
}
.prt-tab-active{
display:table !important;
}
.postprofile-rpg{
margin-top:2px;
background:rgba(0, 0, 0, .76);
}
.postprofile-rpg:empty{
display:none !important;
}
.prof-rpg-top{
position:sticky;
top:0px;
width:100%;
background:black;
z-index:999;
}
.prt-title{
padding:20px;
}
.postprofile-rpg dl, .postprofile-rpg, .postprofile-rpg>div, .postprofile-rpg .column2 dt, .postprofile-rpg .column2 dd{
display:table;
}
.postprofile-rpg .column2{
position:relative;
width:100% !important;
}
.column1{
border:none !important;
}
.column1 dl, .column2 dl{
display:table !important;
}
.postprofile-rpg label{
width:100%;
}
.postprofile-rpg .column2 dl{
width:100%;
}
.postprofile-rpg .column2 dl>*{
position:relative;
margin:0 !important;
}
.postprofile-rpg .column2 dd{
position:relative;
top:8px;
}
.postprofile-rpg{
display:block !important;
width:100%;
height:250px;
overflow-y:scroll !important;
overflow-x:hidden !important;
}
.postprofile-rpg:empty{
display:none;
}
You can connect to the forum with the account :
Name: Guest
Password: conti123
So yep, hope someone can help ! Thanks in advance !
- on April 25th 2020, 8:19 pm
- Search in: Garbage
- Topic: About an incomplete code
- Replies: 1
- Views: 419
Facebook
Twitter
Pinterest
Youtube
