GUI, midway

Week 58 is over. Last week was a fun one, despite being on the Interliber (Croatian/international book fair in Zagreb) most of the day, every day, I managed to squeeze some downtime to keep on redesigning the GUI.

The major goal here is to have a single interface that works well both on desktops and on phones. This sounds trivial, but is in fact anything but.

Major issue is the utterly variable amount of real estate and an inherent lack of space for scrollbars. Noone blinks twice when they have to swipe twenty times on a phone to read all of a web page content that would easily fit on half a PC screen, but what if you don’t have the luxury to place scrollbars? Fitting stuff is then akin to pouring a pitcher of water into a small glass.

Pics or it didn’t happen

Hello screen of proper size. We’ve covered the bottom bar in the last week’s Monolith Monday, but the change here is the Elder Info drawer. It used to be a right-side small drawer that would pop open and show some general info. Now I’ve moved it to the top of the screen so it always shows an overview of the current status; most importantly the omni and mana (+mana/tick) values.

With plenty of space on the screen, the chatbox can be easily resized to fit a lot of content. Events, chats, letters, you can have a nice and cozy overview. The box also has a maximize button (depicted with X due to a lack of Photoshop last week), which essentially resizes the box to fit all the way down to the bottom bar. clicking it again will minimize the chatbox to the size that was previously default, some 240px.

Mobiles are tough. From all the info that previously fit into the topbar, a small phone (320x480px) can display nothing but a single line of text. In this example – the trial status. That’s about it, there is no magic to make it fit more. You have to click the elder info button to view all the other info.

The bottombar will do its best to downsize the buttons in order to make room and to fit them all on screen.

A tablet-like interface fits more, naturally, but not everything. For example Atre Tendencies are missing from the topbar and as you slowly reduce the resolution more and more items go missing. Such is life.

What else?

I’m playing with different locations for other buttons. The map mode toggles, home/settlement/avatar location buttons, and the Goto/Find forms all need a sort-of-permanent button easily accessible from the main view, but on small phones there is simply no room for those. We have to have a drawer of sorts, but where do I put it to make it interfere the least with the other forms…

The screenshot above still shows the old (and broken) Map Drawer but ignore that, it’s temporary until I relocate the contained buttons elsewhere.


In other and unrelated news, frustrated by no Photoshop on my small laptop and no mobile data to grep the install last week, I turned back to the server side to fix some other issues. One of them is the MiniHof. MinoHof is a patch that would calculate game scoring on the fly – every tick if possible. However, doing hofs after the round is a long process (takes a few minutes to parse all the data) and requires quite a bit of manual intervention. Naturally, doing this live requires some preparation, preemptive selection and storage of interesting data and a method to export the said data so the website can access it easily.

Naturally, I have no desire to show anything delicate while the game is running (such as artifacts or avatar stats), but scoring can still take place and we can display that with some vague modifiers akin to:

Ruler Brbonja: 578 points ( 202 military, 54 spellcasting, 322 economy )

Minihof is still in early stages of development but it’s something I’ll be focusing whenever not doing Sokoban with the graphical elements.

That’s all for this week, thanx for reading!