Yeah, that makes sense. I think part of the issue is that I feel a lot of things in the CSS aren’t intuitively named (from the author’s side; I imagine they make sense on the programming side). Based on name alone, it isn’t obvious that .GridWindow is the status line, for example. Or that in order to change the game’s CSS, you need glkote.css in the interpreter folder rather than the more expected style.css file in the Release folder.
Obviously all of this could be learned / overcome. But if Google fonts could be accounted for in the extension, I think that’s pretty much perfect–all CSS could be adjusted directly in Inform with no need to ever look at a CSS file if one would prefer not to. (I do think a cheat sheet of what the CSS elements are in layperson’s terms would be helpful–it took me a while to figure out the .Input and .Style_input stuff. I’d be happy to write something up, though I imagine there are those far more qualified than I. I mostly just hack things together until they work.)
Do the urls always follow a specific pattern? If the url always starts the same way then I might be able to make a function just for google fonts where you type on the last part of the url; that should fix it. Zarf gave me room for 16 functions and I’ve only used three.
A guide from you would be great, since even if others know more your audience would be people like you and me trying to get started, so you would better appreciate what is confusing and what is simple.
If the font name is a single word, then it’s family=Name. If there are two words or more, the words are separated by pluses: family=Font+With+Four+Words.
Google wants all of the fonts imported at once, so if there are two or more, those are joined by ampersands. For example:
Awesome! I’ll work on something and share. I also want to just kind of play a bit and see if there’s anything else interesting that could be done easily. But I bet a basic guide for folks for backgrounds, colors, and fonts would be enough for people to do some cool things.
One other idea: Would it be possible for an author to write something like:
css-set-fast "StatusLine; color; blue";
And have the extension replace “StatusLine” with “.GridWindow” behind the scenes? Some substitutions like that might aid in further readability.
Hmm, that should be easy. I can just make a bunch of special case functions. I have worried about tradeoffs; providing a lot of special cases makes it much easier for people who know of them all, but makes the extension more intimidating for new people. But it can’t hurt to try, so I’ll make them and see if people like it better or worse.
I can definitely make the google font thing, easy, except for the ampersand thing; if people want to use a lot of fonts, it’s not all going to fit. I’ll have to learn how to pass arrays of strings through glk if I’m going to get that to work. I’ll try it though!
Looking forward to any guide! There’s no real rush, so anything you do with it is great!
Cool. Yeah, I’d hope the phrases / words or whatever would actually make it easier–“StatusLine” is easier to remember than “.GridWindow”. Maybe something as simple as “Game” for “.BufferWindow”. I think good documentation will be crucial for either format. But it seems more Inform-y to me to use readable words.
For the fonts, in theory two would probably be sufficient (display font + body font), but heaven knows there’s a lot of potential fun to be had by having umpteen fonts at your disposal.
In experimenting, I’m noticing some weirdness with the vertical scrollbar, which appears to be within the original Quixe. (I think.)
In this post by @Draconis, there’s a fix. I wonder if it could be included here? (I tried to get that template up and running but ran into a variety of errors.)
I don’t know what the real issue is, of course, but the malfunctioning scrollbar really makes things unpleasant at times. And I really only want my web design skills to accomplish that.
What’s the scrollbar issue? I swear I remember something about it from before, but that post is not specific…
I know that you can change it from overflow: scroll to overflow: auto (scroll only when there is too much text) or scroll: hidden. But which issue are you referring to?
It’s weird. Basically the text goes below the edge of the window, and the cursor gets lost. To keep playing the game, I need to scroll down and also click back on the prompt.
The JS is simple and is included as a separate file:
function fix_height(){
document.getElementById("gameport").style.setProperty("height", "auto");
}
window.addEventListener('scroll', fix_height);
I don’t know if something else calls it or if it’s self-sufficient. I think it might be the latter. (I’ve got virtually no JS skills.) I tried setting #gameport in Inform, but no dice.
Oh, okay, that should work great. Event listeners check for something happening and then do something, so this should be good to just chuck into the “Template” files. Thanks! I’ll make sure to include it in the next release!
(For this and other reasons, I wish this had been branched from Parchment rather than Quixe. I’m pretty sure I’d fixed most of the scrollbar issues.
Though it’s not necessarily too late to switch.)
So, some of the issue for me personally is that I didn’t know Parchment was even an option for Glulx games: I had presumed (felt fairly confident, really) that Parchment was only for Z-code games. And in 6M62, the documentation says that Parchment is for Z-code, and Quixe is for Glulx.
I just tried Parchment for a Glulx game in 6M62, and I get an error message:
You asked to release along with a copy of the ‘Parchment’ in-browser interpreter, but this can’t handle story files which use the Glulx story file format. (The format can be changed on Inform’s Settings panel for a project.)
The documentation in I10 is now explicit that Parchment is for both. But my goal (insofar as I can have a goal, seeing as I’m doing none of the actual work here) would be to make it as easy as possible for beginners or those uncomfortable with CSS to style their releases. Since I7 or I10 defaults to Glulx and Quixe, it makes sense to me to target Quixe.
(Side note–I just tried releasing a small Glulx project with Parchment in I10, and it doesn’t work for me–the loading graphic just spins. It works fine with Quixe, though. Then I tried changing it to Z-code, and Parchment still won’t work for me in I10. It works in I7.)
But (don’t tell Quixe this) I think I like the Parchment defaults better. So perhaps this extension eventually being available to both would be ideal? Again, that’s very easy for me to say when I’m not doing the work.
I don’t mind looking at Parchment, but if it’s not very similar to Quixe, I simply won’t be able to understand it. I started trying to figure out how Quixe works in 2018, and I’m barely getting it now in 2023. Unless it has very similar techniques, it’ll most likely just be too hard to understand for me.
But…I’m not in a race to have the ‘best’ interpreter. If all that happens is that after I release my interpreter, everyone improves theirs to have even better functionality and mine just evaporates, I’d be happy.
With that said, I will look at parchment once I have things like sound working in Bisquixe.
"Audiovisual" by Mathbrush
[Significant chunks of code were first written by Petter Sjölund.]
The release number is 3.
Release along with a "Bisquixe" interpreter.
Include Simple Multimedia Effects by Mathbrush.
Sandbox is a room. "Hello! To try various features, try clicking links, typing Z to see text alignment, typing JUMP to see various colors used in the same paragraph, or typing I to hear a sound.
From here, you can go [boldnorth]."
To say right:
set-any-class "right_just";
To say left:
set-any-class "left_just";
To say center:
set-any-class "center_just";
Sound of bells is the file "Bells1.ogg".
When play begins:
css-set-fast ".Buffer_right_just;text-align;right";
css-set-fast ".Buffer_left_just;text-align;left";
css-set-fast ".Buffer_center_just;text-align;center";
import-google-fonts "Kalnia:wght@300&family=Rubik+Bubbles";
css-set-fast ".BufferLine;font-family;Kalnia";
upload-audio "Bells1" with internal name sound of bells;
Instead of taking inventory:
play sound of bells;
To say boldnorth:
hyperlink "north" as "north";
WeirdRoom is north from Sandbox.
The dog is in weirdroom.
Rule for printing the name of the dog:
hyperlink "dog" as "x dog";
Instead of jumping:
repeat with current running from 3 to 50:
let bigcurrent be current * 3;
let bigtemp be 255 - bigcurrent;
let temp be ".Style_user[current];color;rgb([bigtemp],[bigcurrent],[bigcurrent])";
css-set-fast temp;
let tempclass be "user[current]";
set-any-class tempclass;
say "M";
Instead of waiting:
say "[right]I am on the right!
[center]I am on the middle!
[left]I am on the left!";
Edit: Note that this is backwards compatible, so if you wrote code under the old version, it should still work.
I did focus: I clicked the link, I typed, but no sound. I understand the browser restriction that it won’t play sound on first load until interaction happens.
It looks like on Safari I get the error “unhandled promise rejection: notsupportederror: the operation is not supported”. There’s a few guides about that online that I can check out.
As for pictures, I plan on working on that next, but they’re a little tricky given all the information the game sends through glk for normal graphics stuff. It’s definitely in the works though!
You can download an updated Parchment for both 6M62 and 10.1 that supports Glulx. I think for 10.1 there was a bug that made it in to the release - very embarassing, but also a little odd that so few people reported running into it.
It’s almost identical, just with AsyncGlk instead of GlkOte. The GlkApi file that you added your new Glk functions into is basically unchanged.
I’ve now patched the audio problem and released a new version of the interpreter and extensions. The issue was that Inform only uses .ogg files, and safari can’t play them.
So this update requires both version of the sound files to be in the sounds directories; so each file needs both a .ogg version and a .mp3 version. If you aren’t planning on your game running in gargoyle or frotz and only doing a webversion, you can just make fake .ogg’s (like copying the mp3’s and changing the extension).
@HanonO can you confirm if audio works now at the same link? It does on mobile safari for me.