New Parchment for Inform 7 template: now with Quixe and stylehints

Hello! I am pleased to announce that I have prepared a new Parchment template for Inform 7. This template is for both Z-Machine and Glulx. Get it here and then unzip into your Inform/Templates/ folder (or your story’s .Materials/Templates/ folder).

parchment-for-inform7.zip

Features:

This code will be the basis of online play support for Z-Machine and Glulx games in the upcoming IF Comp. There are likely to be bugs so let me know what issues you come across. It will also, hopefully very soon, be the basis of a brand new version of Parchment for iplayif.com, as well as bringing the stylehints and formatting features to Lectrote.

PS: the last major part of the Glk spec that GlkOte is missing is sound support. If anyone would like a programming challenge, that’s something that would be a great contribution you could make to the community. There’s an old pull request here that would be worth looking at too.

8 Likes

I’d be curious to test, but I’m not sure what you mean by “unzip into your Inform/Templates” folder.

The Inform folder has Documentation, Extensions, Projects, Telemetry, and Templates subfolders. On Windows Inform is a subfolder of your Documents folder, but I don’t know where it is in other OSes.

How can I use this Parchment to test someone else’s gblorb? I’m not working on a game right now.

At the moment that will take a little bit of manual work sorry, but only a little. Copy index.html and style.css into the Parchment folder. Then convert the .glorb to a .glorb.js file with this tool (or one of these other methods) and put it in the Parchment folder, and then edit index.html to refer to it instead of "./gargoyle-text.ulx.js". All the files need to be in one folder for it to work when running locally from a file: URL.

That “methods” link doesn’t seem to be right. It’s pointing to this comment:

Yep, that’s what I meant to link to. The following reply gives a one-liner for Linux, and the one after that links to a Python script. Sorry that it’s fiddly. You can’t just load a datafile when running from a file: URL, it needs to be converted to JS. Inform 7 normally takes care of this for you.

It, ah, turns out that the file has to have a .ulx.js suffix or Parchment won’t like it.

I’ve found my first Parchment bug! When I resize the browser window narrower, there’s a JS console error, and the game stops responding to input.

To reproduce:

Use this base64’d JS of The Wizard Sniffer. story.ulx.js.zip (535.1 KB)

Launch the game so you see some text. Now resize the browser window narrower and press the Enter key.

You’ll see a JS error on the console:

main.js:1 Uncaught RangeError: Invalid array length
    at ae (main.js:1)
    at ae (main.js:1)
    at Object.w [as accept] (main.js:1)
    at de (main.js:1)
    at _e (main.js:1)

And pressing keys in the game now just prints a console log message: Not sending repeated generation number: 2

(I’m on Google Chrome 83, on macOS 10.15.5.)

Next bug: images!

To reproduce: Use this Counterfeit Monkey. https://drive.google.com/file/d/15FxIZTbO_fz4aUw7uNafkudkXo2iU03B/view?usp=sharing

Launch the game, type “y” and then “andra.”

Expected: A map should appear on the left side of the screen
Actual: A big black rectangle where the map should be

(I encountered a similar problem with the 2018 Anchorhead release, but I can’t provide a sample copy of that, because it’s a commercial product.)

Thanks for the bug reports!

Also, I updated this tool, should be the easiest way to convert the JS file now:

https://iplayif.com/tools/zcode2js.html

1 Like

BTW, you might be wondering why I resized the browser window narrower. That’s because by default the game text is full width with teeny tiny margins.

It’s preferable to restrict the width of text to somewhere in the vicinity of 60ch to 80ch. I always link to Ian Millington’s Cheat Sheet for Better Typography for this.

I’d love it if Parchment (or at least iplayif) would offer me the sort of text preferences that Lectrote offers: fonts, zoom, color themes, margins.

2 Likes

I definitely want more options like that. For now this is meant to be a drop-in replacement for the Quixe template, so it will have a side bar, but otherwise use up the width of the window.

The problem with images not appearing is most likely because the blorb conversion strips the images out.

In order to get them back you need to run the blorbtool.py script, which extracts the images and generates the interpreter/resourcemap.js file.

The steps are explained in several different comments here. (Background here.)


Edit: although having said that, it appears that isn’t sufficient in this case. Trying it out on my own unreleased story that uses graphics it still doesn’t show any of them. (This appears to be that, as far as I can tell, there’s no way to set the image_info_map with the Parchment template.)

Also, the page title shows up as undefined.

1 Like

Fixed the bugs that have been reported:

  • undefined in the page title
  • rearrange events breaking things (caused by a very dumb typo)
  • image support (another dumb mistake, tested with the JSified Counterfeit Monkey.gblorb Dan provided, though I think it should also work with extracted images, you’ll just have to overwrite resourcemap.js with blorbtool.py like you would for the old Quixe template.)

I would’ve caught these errors if I’d tested a little more widely, so thank you for your patience with me!

Get the updated template from the same link in the first post.

Yep, images are working now, and layout seems to be behaving like Quixe. (Which is to say, still misbehaving on my particular story, but that’s probably something I’m doing wrong. Though it works ok in the IDE.)

Have you described those problems before? It could be that Quixe has a bug too.

Something else I’d like your opinions on is on styling. Currently this uses Quixe’s default tan-coloured status line. The new stylehints system can properly handle reverse styling in the main window and in the status window, though the stylesheet doesn’t currently enable that. I could enable it and keep the tan-colour, or I could switch to a more traditional black or dark-grey with white text. Any opinions on what would look best and be most readable? (The stylehints system will also allow for darkmodes, which I’m keen to add, but probably after IFComp.)

If you’re thinking about color themes, I think a good starting point might be the Visual Studio Code built-in color themes.

VSC’s default theme is a dark theme, but it has a handful of light themes built in; it seems intuitively right for Parchment to go with a light theme by default. Take a look at the Quiet Light and Solarized Light themes for inspiration. Look at their status bars in particular.

(Related: I don’t know whether this is required by some standard or other, but all of the popular IF interpreters I’m aware of render the status window in a monospace font. Why is that? It looks ugly/wrong.)

Well the interpreters have to use a grid window if the stories tell them to. And the stories tell them to because there’s no other way to align text. It would be possible to split the status window in two horizontally, with the left window being left aligned and the right right aligned, and then you could use buffer windows. But there’s a lack of interpreter support for text alignment (Gargoyle and Quixe don’t. Though I plan to add it to Quixe.) So it could be done, but it would be a lot of fiddly work for arguably not much benefit. Many years ago I started work on an extension to do it, but I stopped when I realised Gargoyle didn’t support it. But, maybe this can change in the future.

1 Like

I don’t know much/anything about this stuff. What’s a grid window? How does right alignment (and center alignment) work in a grid window today?