FyreVM-Web Cloak of Darkness with JavaScript UI

This culminates over a year of work, transitioning FyreVM to a web format using TypeScript (glulx-typescript), creating the EngineWrapper state machine, creating the page manager FyreVMWeb, the content transformation system, and then updating the I7 extensions to use formal objects for channel definitions.

Channels can now be added very easily:

my-channel is a channel with content name "myChannelContent" and content type "text".

You write to that channel using say:

say "[on my-channel]This text will show up in my new channel.[end]";

This text will show up in fyrevm.myChannelContent in the script of the web page.

The title is misleading since the the VM and the page manager are written in TypeScript, but the html page itself is scripted in simple JavaScript.

The example implementation uses Cloak of Darkness, which only seems appropriate.

Everything you need is included in my fyrevm-web GutHub repository, although the projects\Cloak of Darkness folder is entirely self-contained. That’s all you need to run the example.

To do so you’ll need to install Node and TypeScript.

Once you have those installed, open a command line prompt at:

(your local file system)\fyrevm-web\projects\Cloak of Darkness\javascript



You’ll also need to run the app from a server. This is easy enough:

[code]> npm install -g local-web-server


Then open a browser and use the url: localhost:8000.

This will display the story. Note that everything in this web page is directly placed in HTML. This is the template:

The results!

Great to see this come to completion!

Any idea how the core VM compares to Quixe in terms of performance?

Well the guy that wrote glulx-typescript said he was “quietly” working on the same JIT improvements done for Quixe, but I have no insight into that. Without that, any larger games would suffer pretty badly I think. I have not done any tests.

However, any reasonably-sized story without heavy computing would be entirely fine. Which means the vast majority of stories should be fine.

I have run Shadow in the Cathedral through it and it works fine outside of one spot (the transition from chapter 1 to 2).

One of the missing features is styling. I probably made the decision to remove the built-in styling from the old C# FyreVM (which followed the standard styles from Glulx/Glk). I don’t actually remember.

I think my thoughts were about creating a convenience library for styling text. So adding I7 substitutions for bold, normal, underline, italics, font-family, font-weight, font-size, but do so in a way that it directly translated to css. Alternatively, it would be easy enough to develop a css class method.

Adding it to the list. :frowning:

I’ve been trying to learn the mechanics of authoring games with FyreVM-Web output.

I adapted the i7 Example Glass, which is a single-room game. github.com/I7-Standard-Examples/Glass

With no extensions, you get no mainContent output in FyreVM-Web. So then I add the 3 extensions: Include FyreVM Core, FyreVM Banner Output, FyreVM Prologue. Now, with no other changes, I can play the game (Inform 7 generates a solution.txt for walkthrough that Emily Short programmed in). However, the “Room” title shows up as “undefined” and there is no display of “status” (which I expected). Notable that the game plays fine still in Inform 7’s built-in player with the extensions included in the game.

I also tried the i7 Example Bronze. github.com/I7-Standard-Examples/Bronze

With no extensions, you get no mainContent output in FyreVM-Web as expected from Glass experience. However, it behaves very different than Glass. Once you add the extensions (narrowed it down to just “Core” alone), suddenly the output no longer shows up in Inform’s built-in Glulx interpreter/VM. Just adding a single line of “Include FyreVM Core by David Cornelson.” kills the output in Inform 7. And FyreVM-Web doesn’t get output like it did with Glass.

Damnatio Memoriae from i7 Example: github.com/I7-Standard-Examples/Damnatio – this works but confuses room names?. Damnatio Memoriae seems to play well on FyreVM-Web using the solution.txt Walkthrough! But just adding extensions alters the behavior of the Inform 7 built-in interpreter/VM. It goes from 3 bold headlines to 2 bold headlines. I think this one shows us that the extensions have side effects? NOTE: I am putting the 3 Include FyreVM directives right after the 1st source code line, the Title line and before “The story headline is”.

Questions at this point to solve: Any idea why FyreVM-Web shows the Room as “Unknown” in Glass and how to solve this? What’s special about Bronze that the extension alone kills all output? I see it has complex status lines that Glass does not.

I actually would not recommend compiling any stories that didn’t target fyrevm. It’s a significant paradigm shift where UI is concerned and I left behind general compatibility a long time ago.