Tag: demos

Whew, the skin for the guidebook is finally done*. And the main site skin is very close to being at least presentably done too. It’s been 21 days since I started.

After that I’ve gotta test it in different browsers (already looks the same in mobile Chrome, which is a good sign), and remake the page for the actual story. But… since that will require a javascript recode too, I think I’ll put that off until I actually want to work on the story, and just finish the rest of the recode first.

Well, here’s what I just spent the past three or four days perfecting.

This is going to be the TOC for the fauna section in the guidebook, basically. Before this, I created an XML file to store the tree in and made the tree in XML, then I made a javascript to turn the tree into a nested HTML list (the code shown is the HTML) and used CSS generated content to create the lines.

I know this is kind of a quirky way to do things, but it has one really big advantage—I can retheme the presentation really drastically if I want to without having to rewrite/restructure the data itself, and since I can alter it at the HTML level I have more control than even with CSS. It’s also really easy for me to just add a creature/clade to the tree by putting a tag for it into the XML file and have it look great immediately, way easier than it’d be to try to wade around in all those confusingly similar ul’s and li’s every time.

I’m also going to make the creature/character pages the same way (one rethemeable page that pulls data from my master XML file), since it seems like the most practical option.

*incomprehensible programming nerd babble*

The other day I was thinking about some things I could do with the interface, and came up with this idea of some kind of a tree showing all the possible choices, which you could access after getting through a given chapter in order to see what all the alternate possibilities were.

I thought that due to Stolen Heart and his underlings’ story (I can’t say exactly why yet because spoilers XD), it might be interesting to have Kodėlgi or somebody at a monitor looking at the possibility map to kind of put things into context. As I was trying to illustrate at the top of the page, you’d click on some kind of jackal head icon to access it.

The second picture is a demo of how the tree would actually look in a browser (the paths and symbols are random, not actual spoilers or anything XD). In the HTML, the tree is actually just a list containing a number of other lists with images in them, and the lines are made entirely using :before and :after pseudo-elements. Also, because of the way I made it with inline-blocks, the tree neatly zooms in and out when the size of the attribute symbols changes. When it comes time to properly implement it in the story, I plan to put in a way to pan and zoom in/out with Javascript.

(On a totally unrelated note, when I typed “attmapz” into my phone for the message body while sending the first picture to my PC, it turned into “Autocry”.

I think the T9 on my phone might just end up being part of the Cleverbad eventually…)