Little problems with the RPG features (bars,boards etc)

First topic message reminder :

Hello everyone,

Long ago, I tried to configure a little bit rpg features of my RP forum, trying to have some fancy and original things. That ended up giving me something pretty cool : http://prntscr.com/p2ah6p

But, because there is always a but... there is this thing I can't fix, it should be pretty easy, but can't get my hand on. See the board at the right, how could I get it up, I know the process to do so for most of the case, but here, days I am trying without finding out

Secondo : see the bars in the left, they look fine right ? Actually they do, but only when they are half full or more (more or less), under that, it's all blurred, because the picture used is "crushed" ? I don't know if there is any solution for this, might not have any, but if they would be one, I'd love to hear it ! What I understand of it : I'd need to make a code, that would load the picture used for the bar, part by part, instead of loading it fully, but yeah I don't know how to code that at all, so if anyone can help

Some links so you can check what's wrong or not :

- The caracter sheet of Geralt, where the bar is well displayed (mostly for the board upping thing I suppose) : http://continentem.forumactif.com/u3rpg
- The caracter sheet where the bars isn't displayed well : http://continentem.forumactif.com/u96rpg

You might need an account to check those links, feel free to create one ! And tell me if I forgot anything, or if I can do anything to help you to help me !

It is not. I wonder if there is a solution for the problem with the bars...

Add this javascript code, placed on all pages:

Code:

;var d=document;
function q(e){
return d.querySelector(e);
};
function _q(e){
return d.querySelectorAll(e);
};
function l(e, ev, c){
e.addEventListener(ev, (f)=>{
c(f);
})
}
(function(){
if(!/u\d+rpg/.test(location.pathname)) return false;
var images=_q(".details div");
images.forEach((i)=>{
var e=i.children, f;
f=parseInt(e[1].getAttribute("width"));
e[1].style.width="200px";
e[2].style.width=(200-f)+"px";
[e[2], e[3]].forEach((e)=>{
e.style.left=(-200+f)+"px";
e.style.position="relative";
});
});
})();

This should make the bar image cover the whole bar, and the other image(the black-gray one), cover the part that shouldn't be visible.

Nothing changed hmm

Replace the code with this one:

Code:

;var d=document;
function q(e){
return d.querySelector(e);
};
function _q(e){
return d.querySelectorAll(e);
};
function l(e, ev, c){
e.addEventListener(ev, (f)=>{
c(f);
});
};
l(d, 'DOMContentLoaded', ()=>{
if(!/u\d+rpg/.test(location.pathname)) return false;
var images=_q(".details div");
images.forEach((i)=>{
var e=i.children, f;
f=parseInt(e[1].getAttribute("width"));
e[1].style.width="200px";
e[2].style.width=(200-f)+"px";
[e[2], e[3]].forEach((e)=>{
e.style.left=(-200+f)+"px";
e.style.position="relative";
});
});
});

Hmm, still the same grr; and by the way, the CSS code put on the header, didn't have any effect on this : http://prntscr.com/p7teri
I don't know if it should have any effect there though

Well, there's not much else that you could do. The bar went from:

To:

If we let the full image fill the space(what it was initially), it will look crammed, if we don't, only a part of the image will be seen(the way it is after you added my code).
If you have any better idea, let me know.

Hmm, the only idea I have, is what I proposed in the first message, but you told me it was really hard to do, so I don't know ( "What I understand of it : I'd need to make a code, that would load the picture used for the bar, part by part, instead of loading it fully" )

Gurufissu wrote:Yeah right, I put them there : http://prntscr.com/p2s5ju

By the way, have you seen my proposal about that ? "What I need, I think, would be a code that make the forum use this picture progressively, instead of utilizing it fully for the bar" ; don't you think that's the solution ?

Are you referring to this? That's pretty much what I did with that code.

Yes ! Hum, ok, right, that was that, I didn't even got it before you said it ! I think I understood the problem ! Maybe the problem is the quality of the pictures used. Like, I should try to have the same quality for the colored and the grey pictures ? I will try to make that hmm

That could make it a bit better, but I don't really know. Again, if you have any idea on how to make it better, let me know and I can help with the coding part.

I added it, it feels like the top and low borders are not disappearing anymore, but the problems stay the same and are even worse on topics ! Is your code including how it is shown on the topics and all ? Or only when the "rpg sheet" is opened ?

Ok I think I got it. With your code, it loads the colored picture, frame by frame, BUT it doesn't load the black and white picture frame by frame ! The solution, should then be this :

To code something that would make the loading this way :

- When the bar is at 0/200 ; it loads the black and white at full
- When the bar is at 1/200; it loads 0.5% of the colored picture, and 99.5% of the black and white (without the first 0.5% of the black and white)

I took the example of a bar with 200 points, because the first bar in my forum is at 200, but of course, it's just about percentages !

Is that possible ??

Sorry, I checked the time I post yesterday's message only too late ! Thought a full day had passed !

My code fully loads both of the bars, but resizes the second one and puts in on top of the first one, covering the part that should not be seen. The second bar is fully loaded, but resized after. I suppose I could let the bar stay unresized and hide the last part of it.

First remove this code from your CSS stylesheet(it makes the first bar a little bigger than it should be):

Code:

.column1 img:nth-child(2n){
object-fit:cover;
}

Then replace the javascript code from my last post with this one:

Code:

;var d=document;
function q(e){
return d.querySelector(e);
};
function _q(e){
return d.querySelectorAll(e);
};
function l(e, ev, c){
e.addEventListener(ev, (f)=>{
c(f);
});
};
l(d, 'DOMContentLoaded', ()=>{
if(!/u\d+rpg/.test(location.pathname)) return false;
var images=_q(".details div");
images.forEach((i)=>{
i.style.width="200px";
i.style.overflow="hidden";
var e=i.children, f;
f=parseInt(e[1].getAttribute("width"));
e[1].style.width="200px";
e[2].style.width="200px";
[e[2], e[3]].forEach((e, i)=>{
e.style.left=(-200-i*8+f)+"px";
e.style.position="relative";
});
});
});

I couldn't properly test this code with the original one in place, but hopefully it works.

The feeling is better I think, but there is new issues to it : http://prntscr.com/p8b6gg
The right border disappeared.

+ It doesn't seem to affect the sheet as it is visible on the posts and all : http://prntscr.com/p8b888

Replace the javascript code with this one:

Code:

;var d=document;
function q(e){
return d.querySelector(e);
};
function _q(e){
return d.querySelectorAll(e);
};
function l(e, ev, c){
e.addEventListener(ev, (f)=>{
c(f);
});
};
l(d, 'DOMContentLoaded', ()=>{
if(!/u\d+rpg/.test(location.pathname)) return false;
var images=_q(".details div");
images.forEach((i)=>{
i.style.width="200px";
i.style.overflow="hidden";
var e=i.children, f;
f=parseInt(e[1].getAttribute("width"));
e[1].style.width="200px";
e[2].style.width="200px";
[e[2], e[3]].forEach((e, i)=>{
var m=i?0:1;
e.style.left=(-200-i*8+f*m)+"px";
e.style.position="relative";
});
});
});

I actually knew that this issue would appear, intended to fix it, but forgot to
Edit:I forgot about the topics part. The structure of the bar there is slightly different than in the profile. I'll see what can be done about that later, or maybe tomorrow.

It is definitely better ! Thank you (again again and again) ! I will wait till tomorrow, or even later then

I bump this, maybe someone else than Occultist can help ahaha !

So the remaining problem is that rpg bars aren't "fully displayed" in the topics, as they are on the rpg sheets pages ! I will provide more informations, if you don't get it with what has been already written here !