GUI Improvements
As you can see above I’ve got the expandable lists for the account working now. Each sub-list is indented and there’s also dotted line that traces down to each option to make it extra clear where they belong.
If you compare the above gifs to this picture of the old version directly above you can also see I switched the [ + ] / [ – ] signs from the right side to the left side. I originally placed these signs on the right to preserve the text alignment for each button (to make it easier to scan the list) but I ultimately decided it’s weird to have the expand-y thing on the right when combined with the sub-list’s indentation. I solved the text alignment problem by just indenting non-expandable items such that they line up with those that do expand.
Column Headers Are Now Contextual
When the contents of a column changes it’s natural that you’ll want different options for that content. Previously when columns would load new data the actual header wouldn’t change. This isn’t because it’s hard to change the column header along with the column body — that part is easy. The problem was that I didn’t know where to store all the headers for each different column type.
If you look at column headers even the most busy ones only contain a tiny bit of data. Take a look at this for example:
The total code for this in the end might be something like:
This is an awkward chunk of data. It’s HTML so I don’t really want to store it as a string in a variable because then I lose my syntax highlighting and it’s pretty long for a string that’s embedded in a code file. So maybe I could just store this in its own little file. My column files already follow a simple naming convention that goes [mode name]_[type of content] and it’s easy enough to just add “_head” to the end for header files.
But having a separate file is a pain in the ass for two reasons. The first one is that I use a single directory for all of my templates because there’s not really enough templates to justify partitioning it into a bunch of sub-directories. It’s a little long but it’s manageable and it’s easy to read/access from my editor. But if every column template now has an associated file with the same name but suffixed with “_head” … that’s not so easy to read. Column templates make up most of the templates so I’d effectively be doubling the number of files in the template directory. This is why I’ve been putting it off.
The solution I came up with is the product of mulling over the second annoyance that comes from storing the headers in separate files: namely, now it’s in another file and you can’t see it! This makes editing a particular column a disjointed experience. I kept thinking, “I wish I could just put the headers at the top of the column’s body file so that the data mirrors visual representation of the column” so eventually I just did that:
The header doesn’t directly proceed the column body in the rendered site, so I need a way to separate the header and body later to allow for sticking them where they belong. To separate the header from the body I place three &’s (highlighted in pink above) to act as a symbol that says “the header ends here”. My code renders this file into a string containing HTML, then takes the string and splits it into two pieces at the “&&&”, and uses the first piece as the header and the second as the body. The pseudocode is something like this:
We test to see whether parts has a length of 2 because some columns have nothing in the header. I don’t want to have to edit a bunch of files so I just say “if there’s only one part after splitting we’ll assume that’s the body and there was no header”. If a column has no header I just omit the “&&&”. Done!
Lastly, what happens if “&&&” appears randomly on the page because of something unrelated to column headers, such as in a forum post or a user’s display name? Well, that’s fine. When a template is rendered all user data has any special characters it contains replaced to prevent cross-site scripting (XSS) attacks. Characters like “>”, “<”, “&”, and so on are replaced in the source code with “>”, “<”, and “&”. So if a user makes their name “&&&” it will display normally but in the source code you’ll see “&&&”. This means the only way for “&&&” to appear in the rendered HTML is if I explicitly put it there. Also, I just realised I could split the file prior to rendering. I’ll probably do that after writing this.
StoryDevs is a place for developers of visual novels and story-focused games to find each other and collaborate. The site is under development but handle reservations are open: www.storydevs.com/reserve
Website: www.storydevs.com
Twitter: https://twitter.com/storydevs
Discord: https://discord.gg/A2jtNqE
Email: support@storydevs.com
