Using ideas from Harmonia in parser games

Harmonia is a beautiful game, and sets a new standard for text display.

I tried seeing what it would look like to make a parser game look like Harmonia. It was hard to figure out, so I asked Liza Daly about the font and margins and so on, and she provided me with some great information.

I used the same styling in a version of Color the Truth from 2016 IFComp. This is the result: https://drive.google.com/file/d/1XvxjtvJYqhxXalYj2WeW0nyA2gu6im-H/view?usp=sharing (this is an Inform Release folder with an index.html).

You can see a web-playable version of this in itch.io (the only site I know of that allows easy uploading of non-Twine IF), but it has a border making it look funny, and the full-screen version is a bit too much:

https://mathbrush.itch.io/color-the-truth

It would take a lot of work to get the nice title and variety of fonts used in Harmonia (and essentially impossible to do the marginalia) in a parser game, but I thought this was fun.

Edit:

I was able to remove the scrollbar in Chrome and Safari but not IE or Firefox. These were all of the changes I made (for the fonts, etc.) in the release folder files:

In style.css, change this:

#gameport { background: white; bottom: 0px; left: 0px; line-height: 1.4; margin: 0px; position: absolute; right: 0px; top: 0px; }
And in glkote.css:

[code]
.BufferWindow {
overflow: scroll; /* vertical scrollbar is mandatory /
overflow-x: hidden; /
but horizontal scrollbar is forbidden */
font-family: ‘Lora’, Georgia, serif;
line-height: 1.6em;
font-size: 18px;
padding: 6px 10px 6px 10px;
width: 55%;
margin: auto;
}

.BufferWindow .Input {
font-family: ‘Lora’, Georgia, serif;
line-height: 1.6em;
font-size: 18px;
}

.GridWindow {
width: 55%;
margin: auto;
}

.GridWindow .Input {
font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace; /* necessary! */
font-size: 14px;
}[/code]

And this:

.BufferWindow::-webkit-scrollbar { display: none; }

I dunno, Quixe is already beautiful as is… also Gargoyle. Anyway, it is nice to see games that customise the style.

Anyway, I think all the things Harmonia does are already possible to do using Vorple. But I can’t remember any game that do that… and, you are Mathbrush, so if you don’t know any, who would know? Maybe Emily, maybe it is worth ask Emily.

Regards.

Harmonia’s style is entirely possible using fyrevm-web. I just don’t have the front-end chops to get it there.

Hmm, it looks like the custom fonts I was using isn’t working, even after importing them into the header. I’ve been messing around with this for a while now; I can change color and such, and use standard fonts, but can’t get google fonts to load.

I seem to be doing something fundamentally wrong; maybe someone can help me.

I tried making a minimal html file to test out, and I can’t even get the font to display in this minimal file:

[code]

p {font-family: 'Cinzel+Decorative', Georgia, serif;}

Heyo

[/code]

This just uses Georgia instead of the custom font. What am I doing wrong?

The weird thing is that this example from googles own site works:

[code]

body { font-family: 'Tangerine', serif; font-size: 48px; }
Making the Web Beautiful!
[/code]

But not if you search and replace Tangerine with Lora or Cinzel+Decorative, two other google fonts.

Drop the “+”—that’s just an encoded space in the URL.

In other words, the font name is “Cinzel Decorative”: github.com/lizadaly/harmonia/bl … s.scss#L53

Thank you, the micro example works now. I’ll see if I can make it work in the full version. Thanks so much! My plan is to change the fonts once I get this working; I don’t want to completely rip off Harmonia in the long run! Except maybe its nice margins.

Woohoo! It works! The new version on itch.io now has a really neat banner-esque title at the beginning. I’m at a different computer and don’t have access to the inform code, but I’m going to add spacing there when I get back. I really like this; I could even do the ‘fancy font’ for transitions between characters.

Wow that looks terrific! Just changing a header to a different font makes a really big difference in making it feel more “web-like” rather than something like a terminal window embedded in a page.

Very nice. A new story to explore.

Thank you,
v/r
fos1

Thanks, Liza! Your advice was so helpful.

I’ll probably try some other stuff over the next few months. I’ll post my attempts to mess with stuff on this forum as it comes up.

@fos1: I hope you like it!

I just realized that I can also upload Quixe games with styling to textadventures.co.uk, so I uploaded it their, and I think it works a lot better without itch’s frame:

http://media.textadventures.co.uk/games/a–yrp74OUqokRFBxODefw/Release/index.html