Upcoming ChoiceScript Feature: Centering Stat Charts and Headings

Stat charts with section headers tend to look weird on big screens. The problem is that the headings are centered, but the data is left-aligned.

I had a few ideas about how to handle this, and a few questions for y’all about my ideas.

Headings with *heading

*heading Chapter Seven

As I’m imagining it, when you use the *heading command, we could show the text in bold, in a slightly larger font, and centered horizontally on the screen.

Question: Should *heading allow left-alignment, too? How?

I could imagine allowing left-aligned headers in two ways. We could say that left-aligned headings would have a special align=left code at the start, but normal headings would be centered.

*heading Chapter Seven (centered by default)
*heading align=left Chapter Seven (aligned left)

Or, we could require all users to specify whether they want the heading to be left-aligned or centered.

*heading center Chapter Seven
*heading left Chapter Seven

I think I kinda prefer centering by default. And maybe not even allowing left-aligned headings? (One less thing for new authors to learn about, right?)

Centered Stat Charts with *stat_chart center

When you use *stat_chart center, the stat chart would appear horizontally centered on the screen.

text lines would be wrapped to the width of a percent stat bar, left aligned within the centered box.

Unlabeled text in stat charts

Stat charts have always supported three types of content:

  • percent
  • opposed_pair
  • text

All of these include a label and a colon each line, even text.

*temp color "Blue"
*stat_chart
    text Color

That would appear in the stat chart like this:

Color: Blue

unlabeled_text would allow you to write anything in the stat chart, like this:

*stat_chart
    unlabeled_text You have no favorite color.

You could also use variables with ${} or @{}, like this:

*stat_chart
    unlabeled_text Your favorite color is ${color}.

Like text, unlabeled_text would be wrapped to the width of a percent stat bar.

If you don’t want your text wrapped, you can write the text outside of a *stat_chart, like this:

*stat_chart
    percent Strength

You don't have a favorite color.

… but then it won’t be centered or wrapped.

Question: Should we center stat charts by default?

To the greatest extent possible, I want stat charts to look great by default, without requiring authors to learn anything or understand anything about how to make them look great (or even that there are options available to them).

In my experience, it’s fine to have just one thing centered while everything else is uncentered, but if you have even a few things centered, it probably makes sense to center everything else on the same screen.

For example, if you have dozens of stats divided into three sections, and each section has a *heading (or a centered *image as its heading), then I’d recommend centering the stat charts, too.

But if most of the stat screen includes centered stat charts, it will make the screen look weird if there are just a few lines of text that are uncentered. In that case, authors would need to know to include those lines in a stat chart with unlabeled_text instead.

Is it better to center the stat charts by default?

29 Likes

To sort of offer my two cents, I’ve been so accustomed to left aligned stats and titles since playing COGs and HGs, I’ll probably be jarring to suddenly shift to centre align.

I personally wouldn’t be opposed with having centred headers and left - aligned stats, though it may vary depending what will be on the stats page for each respective story. As I haven’t attempted to try even conceiving one for my very own story concept, I’ll defer to other more experienced people and their opinion, but again, this is just my opinion.

3 Likes

I think it visually looks better to just have everything centered. I don’t see anything wrong with how it is now. What might also help is the ability to have two or three collumns. This could allow for better use of open space. Like put Arathusa’s and Kelvin’s name side by side (in your example). I think this would also help stat screen formatting.

2 Likes

I saw this and thought that you were letting us have different colors for the stats bar. So… can we please have different colors for the stats bars while you’re on this? :grinning:

I use image headings for my stats. Would centering stat shart by default also include the image? As of now if I want the image centered I have to enter the code *image png center. Would having it by default override the code entered?

5 Likes

Having a default for ease of use is fine; changing the status quo for another equally static quo would be like tilting at windmills.

The draw that Twine and other engines have over Choice Script is the customization in the UI.

I would appreciate the ability to left, center and even right align charts, headers and free-text.

Basic word processors have left, center and right align; a writer, a student, or even someone that just emails should be familiar enough with such ideas that if they chose, learning such should not deter them.

There really is no one style that fits all and looks the best, and I think it is time to increase the ability to satisfy more needs and not just change one style for another.

ymmv.

12 Likes

Everything here is just my opinion, but to avoid writing “in my opinion, it should…” all the time I’ll just talk in the imperative form.

Unlabeled Text

Instead of adding a new type to stat chart, overload the text type. If it takes a variable, it prints with a label, but if it takes a literal then it prints without label.

*stat_chart
   text name          // <= labeled text
   text {description} // <= unlabeled text
   text "This is also unlabeled."

Alignment Default

Make left align the default. Taste is subjective, and setting everything to center align for those authors who’d like that shouldn’t be that much trouble. It better fits the expected behaviour from ChoiceScript until now and in other parts of the game.

Heading Command and New Features

Heading Command and New Features

To be honest, as nice as it is to have more options, I think most people who use image as heading will continue to use them, because that way they can control font family and style.

Some people might start using this command just because it’s available (which is not a bad thing).

I guess what I’m trying to say is that this new command looks like a nice-to-have, but that no-one actually asked for. Meanwhile there are other features that would be more useful for writers/developers.

It would be nice to have a Enhancement Proposal template and a place where users could post and discuss them with no binding expectations they would actually be implemented. Enhancement Proposals are very common in programming languages. So, while you can be proactive in proposing new features, the community could also propose and discuss features they find more useful in an organized way.

Percent Type

To give an example, I’m not currently working on a wip, but I’ve always favored liner operations over fairmath. Fairmath is harder to reason with. To balance a game takes a lot of trial and error and guess-work. To change stats I’d have to use subroutines that clamps a value between 0 and 100.

So my suggestion would be to have a special variable type specifically for stats, which are very common in ChoiceScript games.

*comment startup.txt

*create name "Jane Doe" 
. 
. 
. 
*comment below values are automatically clamped
*comment this allows normal arithmetic operations 
*comment without worrying about the range
*percent wisdom 50
*percent intelligence 50
*percent charisma 50
*percent dexterity 50
*percent strength 50
*percent constitution 50

Alternatively a clamping function, similar to len.

*set myStat clamp(myStat + 10, 0, 100)
1 Like

Seconding the plea for the ability to have different colors for the stat bars (both the background and the percentage colors :smiling_face_with_tear:)

I agree with what a few people above have said – The default is not that important to me as long as we are given the option to center or left-align (or even right-align) stat charts.

Writers here all have different opinions on what visual alignment of stat charts and headings work best for their own story, so I don’t think it makes that much of a difference what we have as the status quo. What matters is that we can choose to switch amongst different options, which I’m really happy to see that you are considering and implementing!

If I had to choose a default, I would probably say that it would make sense to keep the current status quo of left-aligning stat charts and giving us the choice to center them through code. This way, people who are perfectly happy with the way things are won’t have to learn anything new, and people who would like to use centered stat charts will get the chance to have that. I don’t think that having to learn to center headings or stat charts in ChoiceScript the way you have described would be difficult.

I appreciate your effort to enhance the UI customization aspect of ChoiceScript, and hope that we see more in the future – I understand that CoG might not exactly be worried about competition with Twine, but to me, there is literally no drawback in allowing authors more options to customize their games.

5 Likes

I don’t think that would work on the mobile apps? There’s no empty space. Well, unless you make the text unreadably small.

3 Likes

It depends on application. If it is a list, it can still fit if it is 2 column. I play these games exclusively on my phone.

Example below. Those specialties could fit next to each other on my phone.

Lies Under Ice Menu Screenshot

Profile information here also has a lot of space on the right.

Wayhaven B3 Menu Screenshot

I like the addition of unlabeled_text. I’ve never used the text option in stat charts due to the way its formatted with the colon, so that option is nice.

I also vote for the options to have center + left-aligned (+ right-aligned) available. For simplicity’s sake, I’d leave the default as is (some stat screens that use longer paragraphs will look whack if suddenly crammed into the center) and would go with the formatting that already exists for images. So…

*image chapter_seven.png left Chapter Seven

*heading left Chapter Seven

5 Likes

You can change this but have to alter the code. (I think a few like choice of magic have been produced like this and I’ve certainly changed them for my little itch projects.) So you can for example change the stat bar to yellow of blue. (Or do you mean all of them different colours? I’d be down for that if it was possible to do, not sure how tricky the code would be to implement though. Same with being able to highlight words or headers with different colours.)

2 Likes

Oh cool, i didn’t know there were officially published games that had custom stat colors! Yeah i’ve messed around with the CSS a bit, but i guess i’ve always thought that wasn’t really an “officially” supported method. It would be nice for us to be able to set custom stat bar colors from our choicescript_stats file directly.

(I originally just meant setting three custom colors to replace the grey background color, red percentage color, and purple opposing pair color, but now that you mention it, being able to set different colors for different sections of our stat screen would be a lot more useful)

2 Likes

Are there any other instances of {param}={value} in CS?
I think it’s beneficial to keep syntax as consistent as possible.

5 Likes

Choice of magics did it somehow but I only know how to change all the stat bars to the same colour. (Like all to blue. I wish I knew how they did it!) I’m not sure if this multi colour change thing is something special for just this game or if it’s something COG is open to having in HG published games.

1 Like

Omg that looks so dope :eyes: … i am going to spend a lot of time futilely attempting to figure out how they managed that :relieved: (if anyone sees this and knows, please share haha)

1 Like

Yep, it just gives the game a lot more colour and pop. Not for all games, but I can see for ones like this the different colours just make everything look more appealing :slight_smile: (If you find out how to do it I’d love to know too :D)

1 Like

I’m taking a guess here. They probably tweaked ChoiceScript’s internals. You can see the stat bar is not like a normal stat. The labels sit outside the bar.

That said, you guys can try target the nth element using the special property nth-of-type in the css. It won’t look so good if you have dynamic stat charts (hidden under if statements) because the number of stat bars would change. Otherwise, I’m pretty sure this should work (haven’t tried it, just writing from the top of my head).

.statBar:nth-of-type(3) {
  background: lime;
}

@Jacic @dumpling-clouds

4 Likes

Just tried this out… it works great! Thank you so much @cup_half_empty ! I honestly didn’t expect CSS to be smart enough to have something like nth-of-type, my underestimate :smile:

The code that I tested with:

.statBar:nth-of-type(2) > .statValue {
    background-color: coral;
}

Adding a block like this to the stylesheet for each one of your stat bars, changing the number in the brackets accordingly, gives me this:

Woohoo!

(although you’re right, this only works up until any stat section that you hide under *if statements)

5 Likes

You can do this using the *script command, but unfortunately they don’t permit it in published games (I actually emailed COG to ask about it a while back, and they confirmed Choice of Magics is an exception.) I’d definitely like to see proper support added for changing the stat bar colours without *script, though. There are tons of neat things that could be done with it, and it’s a bit sad having things like this that already exist in published games seemingly arbitrarily being gated off from the rest of us.

The method @cup_half_empty mentioned is also a possibility, but much more limited in usage as noted.

Regarding the main topic of discussion, I don’t have much to add myself other than echoing everything @Eiwynn said. Whatever you do, please just give us options! There are already a fair amount of more “advanced” features in the language—stuff like multireplace and refs—and I don’t think I’ve ever seen a single complaint from a beginner that this kind of optional stuff makes it harder to learn the basics, so I’m not sure where this idea that we should be limiting options for more experienced authors so newcomers have less to “learn about” is really coming from. I’m sure just about every author who has made use of the new, more advanced features added to Choicescript in recent years would attest that they’ve been nothing but a boon to the language, and to their games!

7 Likes

You’re right, I was looking in the dev console for choice of magics and wasn’t able to find any changes the author made to any of the .js files to modify the stat chart, and it turns out I was looking in the wrong place.

The answer lies here: https://www.choiceofgames.com/magics/scenes/choicescript_stats.txt

It seems like the author made use of the *script command. Instead of using the regular *stat_chart command, they created a ChoiceScript gosub routine (called coloredbar) with the specific purpose of using *script to append their own custom stat bar elements to the document HTML.

the Choice of Magics author's script code, formatted for readability
* script
if (typeof document !== "undefined" && typeof setClass !== "undefined") {
	bg_color = "#F7F4F1";
	text_color = "#000000";
	if (document.body.classList.contains("nightmode")) {
		bg_color = "#242424";
		text_color = "#FFFFFF";
	} else if (document.body.classList.contains("whitemode")) {
		bg_color = "#FFFFFF";
	};
	target = document.getElementById('text');
	div = document.createElement("div");
	setClass(div, "statBar statLine");
	div.style.backgroundColor = bg_color;
	labelbox = document.createElement("span");
	labelbox.style.display = "inline-block";
	labelbox.style.color = text_color;
	labelbox.style.backgroundColor = bg_color;
	labelbox.style.lineHeight = "2em";
	labelbox.style.width = stats["textwidth_"];
	printx("\u00a0\u00a0" + stats["label_"], labelbox);
	div.appendChild(labelbox);
	statValue = document.createElement("div");
	setClass(statValue, "statValue");
	statValue.style.width = stats["width_"];
	statValue.style.backgroundColor = stats["colorhex_"];
	statValue.innerHTML = stats[stats["label_"].toLowerCase()].toString();
	statValue.style.color = stats["colorhex_"];
	statValue.style.left = "14ch";
	div.appendChild(statValue);
	target.appendChild(div);
}

textwidth_, label_, colorhex_, width_, and black_ are all ChoiceScript *param values passed in for their gosub routine

3 Likes