So I did this...

<script>
(function(){
function clickhandler(e) {
byond.fn.topic("action=look;value=" + e.target.getAttribute("data-ref"));
e.stopPropagation(); // stops handlers from below from triggering
e.preventDefault();
};

return {
fn: {
output: function(obj,sub) {
var e = this.elem, a, i, html;
// decode and fix up the json_encode'd list from the output
var string = byond.htmlDecode(obj.text);
var id, m, icon='';
string = string.replace(/\n+$/,'');
string = string.replace(/^\n+/,'');
string = string.replace(/<br\s*\/?>/gi,'');
// make a new array that will parse the fixed up string from above
var inv_array = JSON.parse(string);
html = '';
// loop through the parsed array to find the objects
for(var key in inv_array) {
if(string.hasOwnProperty(key)) {
// find the first key and parse it too, so that we can dig into the items actual data
var item = JSON.stringify(inv_array[key]);
item = JSON.parse(item);

id = item.ref;
if(id && (m=id.match(/\[0x([0-9a-f]+)\]/i))) {
id = parseInt(m[1],16);
icon = '<img atom='+id+'>';
}
console.log(icon);
// add the item's properties into it's own div!
html += '<div data-ref='+item.ref+' data-quality='+item.quality+' class=item >'+icon+'</div>';
}
}
console.log(html);

// set the inventory output to the bags div
e.innerHTML = html;

// cycle through all the existing .items and ensure there's a click listener
a = e.querySelectorAll('.item');
for(i=a.length; i--;) a[i].addEventListener('click', clickhandler);
byond.fillAtomIcons();
}
}
};
})()
</script>


But it seems that the src for each img is the same, even though the ID's are different... am I doing something wrong?

I'm picking up different icon_states: "stone" and "redstone", and it always shows the src for "stone"

I couldn't find any documentation on byond.fillAtomIcons(); to see if i was triggering it wrong either...

https://gyazo.com/8b8f6bb42d3bc4a6140ff3566d6a0223
Instead of this:

var item = JSON.stringify(inv_array[key]);
item = JSON.parse(item);

Do this:

item = inv_array[key];

That's not relevant to your issue, just a good idea in general.

For the icons not being different, that's really strange. If they do have different icon states and those states are represented in the icon, then the code that retrieves the img src should always be pulling the right one. If you can zip up your project into a little demo and send it to me, I can take a look.

I probably did forget to document byond.fillAtomIcons(); it's basically a way to tell the webclient to update images as soon as the atom and icon info it needs is available.
Is it possible to just get the URL of the atom=1231232 ?

I want to use the icon's src itself for using CSS background-image : url(src);
If the atom has already loaded, then calling this.atomIcon(1231232) should retrieve the URL. If the result is null, you'll have to wait for the icon to load.

The byond.fillAtomIcons() call basically sets up a situation where it fills in the atoms it can, and waits for the others; but obviously that only works with <img> tags, not CSS.
Worked perfectly, thank you so much!


var bgurl = this.atomIcon(id);  // gets the atom's icon and makes a url for it
html_items += '<div data-ref='+item.ref+' data-quality='+item.quality+' style=\'background-image: url('+bgurl+');\' class=item ></div>';
Just don't forget to account for the case when bgurl is null; in that event you'll need to make sure you setup some kind of callback or poll.
https://gyazo.com/27f029181ad5da991454715d80d60c2a

Making progress :D

Added inv sorting and remembering slot locations and bunch of other stuff...

tooltips and dropping next!
Page: 1 2