ETA: Have figured out how to switch CSS files on the fly! I changed the title accordingly.I've been enjoying the study so far, getting excited over CSS capabilities that weren't available back when I studied HTML in college (or did I just never get far enough to see them?), and now I'm eyeing very basic JavaScript and/or JQuery commands.
Now, there's some stuff I'd like to do with Squiffy, and I'm just wondering if it's doable at all, and whether it's doable at my general level of skill. It may just be
way too early in my learning curve for me to be attempting this, but I do like to push out and see what I can accomplish (I'm a Spade-style gamer, and it figures I'd kinda code that way as well). But spending this much time picking up the code is getting in the way of my writing the story, and I'd like to get a bit more realistic and see if it's really out of my reach for now.
My current level of programming know-how is "hobbyist": I grew up on GW-BASIC and Q-Basic, bridged into Visual Basic and C++, and have sporadic exposure past that point. My skills are rusty at best right now, and my background in JavaScript is just barely sufficient to know that Java and JavaScript are two different languages. So while I'm pretty good at parsing an unfamiliar language (because hey, a lot of elements look very similar no matter which code you're perusing), longer sections tend to make my eyes cross and I lose focus quickly. Please bear that in mind while helping me.
But, my experimentation with CSS over the past few days has left me confident that I can mess around with attributes to turn elements into fancy boxes wherever I care to have them on the screen, so ignore that part of this. Mostly I'm after dynamic shifts to the classes and styles.
So please help me figure out how I might go about doing this, using Squiffy as a base:
I want to set my Squiffy game up with a certain visual style, thusly:
[list]
[*]Push the current Header off to one corner (where the Restart button will sit).[/*:m]
[*]Add a similar corner with contact info (technically a Footer but not on the bottom).[/*:m]
[*]Stick a Header in the middle, taking up maybe 60% of the screen, for the location and sublocation.[/*:m]
[*]Use a sidebar ("aside" element) on the left to display nonphysical status effects (mostly emotions) in a narrow Table that again gets updated as the character changes moods.[/*:m]
[*]Use another sidebar on the right to display physical status effects such as Hungry, Thirsty, Tired, Drunk, Nauseated.[/*:m]
[*]Have the main Squiffy text happen between the two sidebars. I'm not sure about percentages yet but maybe 60% is still reasonable.[/*:m][/list:u]
I want to be able to shift the element's attributes -- like having the stronger Anger ("Furious") display as bold, dark-red letters with a drop shadow.
ETA: The main problem I'm having right now -- besides one box that is mysteriously disappearing for some reason -- is that I'm trying to follow some standards for boxes that work with changing browser sizes (not absolute pixel-based stuff), yet I'm having trouble getting one box to butt up straight against another no matter the size -- they overlap and fail to go where I want them to go. I could really use some help on that.
ETA 2: Have totally figured out how to switch text on the fly, so updating the location and sublocation is working fine. I expect it'll work just as well with those sidebars, if I can get the sidebars working correctly.
ETA 3: Turns out shifting CSS files is a one-line bit of easily understandable code: Stick an id ("theme") into my existing reference to the CSS file, and use this:
document.getElementById('theme').setAttribute('href', newTheme);
...to point it to the new theme I'm after (just the name of a different file).
The amount of effort it took to find this out was not in any way proportionate to the amount of effort it takes to implement it. But, the past couple of days have been fruitful, so I'm not going to complain too much.
Now I can, indeed, have it shift between daytime and nighttime themes, along with dawn, sunset, rainy, snowy, forest, seaside, and even particular themes for particular locations. I am thrilled with this new capability and look forward to putting it to use. Now it's just setting up theme files and trying to choose appropriate
color combos.
I still think the colors will enhance the immersion (once the reader's over the bump of sudden style changes to begin with); it should work a bit like an establishing shot in film. And although I haven't yet experimented with weaving this capability into Squiffy, my better understanding of what's going on says this probably won't be difficult now, so I'm good there.
