ID:2384722
 
Not a bug
BYOND Version:512
Operating System:Windows 10 Home 64-bit
Web Browser:Chrome 67.0.3396.99
Applies to:Dream Seeker
Status: Not a bug

This is not a bug. It may be an incorrect use of syntax or a limitation in the software. For further discussion on the matter, please consult the BYOND forums.
Descriptive Problem Summary:
When trying to display multiple images in a line on a statpanel, The output is scrambled and doesn't display properly.

I am trying to set up a statpanel that shows all of the current matches being played in the server. Every match in the game will output 2 lines in the statpanel.

The first line outputs an obj with a click() proc tied to it to spectate the game that displays the icon of the obj which represents the match type and then the names of the players layed out in a specific format.

The second line is meant to display the SOUTH facing state of each player's icon in the game along with their remaining HP.

A 1 vs 1 match should have an output looking something along the lines of...

[VS Icon] Player 1 -VS- Player 2
[P1 Icon] (LP: 8000) [P2 Icon] (LP: 8000)

A 2 vs 2 Match would output...

[VS Icon] Player 1 -VS- Player 2 -VS- Player 3 -VS- Player 4
[P1 Icon] (LP: 8000) [P2 Icon] (LP: 8000) [P3 Icon] (LP: 8000) [P4 Icon] (LP: 8000)

Instead... what I get is the 1st line working perfectly fine. But the second line shows the last player in the game's icon on the far left and only their icon with the (LP: 8000) text overlapping it all lined up on the lefthand side. (Pictures below since it's hard to describe)


Numbered Steps to Reproduce Problem:
I dont know about any real steps, It seems like it's just an output issue. The HTML being used is correct.

Code Snippet (if applicable) to Reproduce Problem:
        statpanel("Duels")

if(statpanel("Duels"))

var/duels = 0

var/list/d_stat_list = list()

for(var/client/D) if(D.mob) if(D.mob.isduel)
var/TO_Format = "OCG"
if(D.mob.C_Format) TO_Format = "TCG"
if(D.mob.C_Format == 3) TO_Format = "RANDOM"

var/obj/duel_obj/O = new()
O.d_mob = D.mob

if(D.mob.Opponents.len)
if(D.mob.rated)
var/dup_check = 0
for(var/obj/duel_obj/OO in d_stat_list)
if(findtext(OO.name,D.mob.name))
dup_check = 1

if(!dup_check)
O.name = {"<font color=#ff0000><b>[D.mob.name]</b></font>"}
O.stat_list = {"<IMG SRC='[D.mob.icon]' ICONSTATE="[D.mob.icon_state]" ICONDIR=SOUTH>(LP: [D.mob.LP])"}
if(D.mob.Partners.len) for(var/X in D.mob.Partners)
var/mob/M = D.mob.Partners[X]
O.name += {"<font color=#ff0000> and <b>[M.name]</b></font>"}
O.stat_list += {"<IMG SRC='[M.icon]' ICONSTATE="[M.icon_state]" ICONDIR=SOUTH>(LP: [M.LP])"}

for(var/XX in D.mob.Opponents)
var/mob/M = D.mob.Opponents[XX]
if(!findtext(M.name,O.name))
O.name += {"<font color=#ff0000> -VS- <b>[M.name]</b></font>"}
O.stat_list += {"<IMG SRC='[M.icon]' ICONSTATE="[M.icon_state]" ICONDIR=SOUTH>(LP: [M.LP])"}

if(M.Partners.len) for(var/X in M.Partners)
var/mob/MP = M.Partners[X]
if(!findtext(MP.name,O.name))
O.name += {"<font color=#ff0000> and <b>[MP.name]</b></font>"}
O.stat_list += {"<IMG SRC='[MP.icon]' ICONSTATE="[MP.icon_state]" ICONDIR=SOUTH>(LP: [MP.LP])"}


O.icon = 'd_stats.dmi'
O.icon_state = "rank"
O.spectate = 1
d_stat_list += O
else

var/dup_check = 0
for(var/obj/duel_obj/OO in d_stat_list)
if(findtext(OO.name,D.mob.name))
dup_check = 1
if(!dup_check)
O.name = {"<font color=#b54d4d><b>[D.mob.name]</b></font>"}
O.stat_list = {"<IMG SRC='[D.mob.icon]' ICONSTATE="[D.mob.icon_state]" ICONDIR=SOUTH>(LP: [D.mob.LP])"}

if(D.mob.Partners.len) for(var/X in D.mob.Partners)
var/mob/M = D.mob.Partners[X]
O.name += {"<font color=#b54d4d> and <b>[M.name]</b></font>"}
O.stat_list += {"<IMG SRC='[M.icon]' ICONSTATE="[M.icon_state]" ICONDIR=SOUTH>(LP: [M.LP])"}

for(var/XX in D.mob.Opponents)
var/mob/M = D.mob.Opponents[XX]
if(!findtext(M.name,O.name))
O.name += {"<font color=#b54d4d> -VS- <b>[M.name]</b></font>"}
O.stat_list += {"<IMG SRC='[M.icon]' ICONSTATE="[M.icon_state]" ICONDIR=SOUTH>(LP: [M.LP])"}

if(M.Partners.len) for(var/X in M.Partners)
var/mob/MP = M.Partners[X]
if(!findtext(MP.name,O.name))
O.name += {"<font color=#b54d4d> and <b>[MP.name]</b></font>"}
O.stat_list += {"<IMG SRC='[MP.icon]' ICONSTATE="[MP.icon_state]" ICONDIR=SOUTH>(LP: [MP.LP])"}


O.icon = 'd_stats.dmi'
O.icon_state = "full"
O.spectate = 1
d_stat_list += O

else
O.name = "<font color=#6bb54d><b>[D.mob.name] ([TO_Format]) - ([D.mob.x], [D.mob.y], [get_level(D.mob.x,D.mob.y,D.mob.z)])</b></font>"
d_stat_list += O
O.icon = D.mob.icon
O.icon_state = D.mob.icon_state
O.dir = SOUTH

duels++

if(!duels) stat("<font color=#F59A2F><b>No Players Dueling</b></font> [FindPlayersNum()] Online")
else
for(var/obj/duel_obj/O in d_stat_list)
stat(O)
stat(O.stat_list)
if(d_stat_list.len > 1)
stat("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")


I know that's a lot to dig through but it's the entire coding for that statpanel. But the main concern is the lines dealing with the O.stat_list var...

O.stat_list = {"<IMG SRC='[D.mob.icon]' ICONSTATE="[D.mob.icon_state]" ICONDIR=SOUTH>(LP: [D.mob.LP])"}


That's the starting one and the rest build off of that.

But instead of the image being placed in the correct location according to the text, it seems like every time an image code on the line is found, it moves it to the far left, and if there's already an image there, it replaces it with the more recent one in the line.

Expected Results:

[VS Icon] Player 1 -VS- Player 2
[P1 Icon] (LP: 8000) [P2 Icon] (LP: 8000)

Actual Results:
(a 2 player game)
https://i.imgur.com/a0Bd9ab.png

(a 4 player FFA game)
https://i.imgur.com/QP0OAUq.png

Does the problem occur:
Every time? Or how often?
every time
In other games?
dont know. it's coding for my game, I would assume this happens in other games though, but maybe im just stupid.
In other user accounts?
Every player on the server is seeing the same thing
On other computers?
See above

When does the problem NOT occur?
I havent gotten it to not happen yet.

Did the problem NOT occur in any earlier versions? If so, what was the last version that worked? (Visit http://www.byond.com/download/build to download old versions for testing.)
Brand new code I'm trying to implement. Didnt have this in place on earlier versions.

Workarounds:
None found so far aside from not using images.
Statpanels really don't allow you to use mixed HTML like that. What's happening is that the internal grid control that underlies the statpanel is interpreting your icon as a background for the cell.
Lummox JR resolved issue (Not a bug)
Is it not possible to have more than 1 image on a line in a stat panel then?
It is not. You should strongly consider switching to the grid control for this purpose.

[edit]
Actually, I suppose you could have an image in the prefix column and an image in the main column. Suffix is always text though.
After a lot of jiggery pokery with the code, I was able to get 2 images per line, but it was a formatting nightmare.

The image appears, but the text after it doesn't space itself after the image, it just overlays itself on top of it.

And byond handles the 2 images in different ways in the statpanel depending on whether it's an icon of an obj, or an icon in one of the panels. So if a player's icon is bigger than 32x32 is becomes a real kick in the balls to format it. One of them shows the icon in the full size, and the other will crush it down to 32x32.

Had to create a CSS for the statpanel to force it to show the bigger icons without crushing them, but then I ran in to the issue of the formatting being inconsistent between lines depending on players with 32x32 icons or larger icons.

So then I tried to use Crop() to just trim down the bigger icons for the display purposes which, while not ideal, did solve the formatting issues.

Unfortunately, after I implemented the new panel in to my test server and ran more extensive testing with more players on the server at once and more than 1 or 2 matches running in the game at a time, I ran into an issue of the panel causing minor screen stuttering on my personal PC which is a brand new, high end gaming PC. And then some of my players with lower end PC's were reporting the game was unplayable after the server ran for about an hour. I believe it was a memory issue.

So after all of this, I believe I've learned my lesson here. I've given up on the extensive display I had planned in the statpanel. I will now look in to the grid control and see about trying to use it since I haven't worked with it before.

I appreciate the help.