I created a single-file page to quickly glance your shelves using the widget feature

Simply put, this is a way to quickly glance the contents of your various shelves. It’s split into tabs so you can categorize your shelves should you wish to.

Setup is a bit involved, but easy if you know a bit of CSS/HTML. It uses the shelf widget feature from Grouvee and builds upon it.

This was mostly made for personal use, so I could choose what to play next by seeing my backlog and on hold games quickly, so it’s not terrifically well documented, feel free to throw any questions at me here.

UPDATE: Heavily simplified the configuration, now you just populate a JS object with your shelves

UPDATE 2: Added settings to show/hide tab bar and empty shelves


I think this could be a lot more popular, if you made it into online service.
The way I see it, you go to GrouveeSherves.com/?username=yourusername and get a result.

this is cool. how do you use this? Do you have like a blog or personal website that you look at the widget through? or on your phone or something else? IT would be nice to have something like this native on profile pages in grouvee. even if it’s just a quick jump to the playing shelf.

i did a bit of googling after you posted this and gave up (i’m very illiterate when it comes to coding. it would be handy to have it as an app on the phone.

You’re right, but running a website is more work and money than I’m willing to put into this at this point, and I’d have to create a UI for selecting which shelves go where.

However, this is also the reason I licensed this under the MIT license, so anyone should be able to take the code and make it into a website.

Alright, so just visit the github page linked in the post and download Games.html.

Open it in a text editor (such as notepad or wordpad, not MS Word) and near the top you’ll see

var shelfTabs = { "Active": [[141977,142193,142000,141979],[141976,141978]], "Archived": [[141975,148530]] };

Those numbers are shelf ids. Find your own as per the instructions on github and replace them.

Each tab is defined by a title (e.g. “Active”), followed by a colon and square brackets. The square brackets include an inner set of comma-separated square brackets which define each column. In each column are comma-separated shelf ids. The tabs are also comma-separated.

When you’re done, open Games.html in any modern browser such as recent versions of Firefox and Chrome. For me at least, it also works on mobile. On mobile, you should also be able to create a widget tomput on your home screen and boom: instant app :stuck_out_tongue:

1 Like

I could wrap this into a mobile app, if I get enough likes on this post.
UPD: Nvm, now we have tiled view mode in Grouvee.