Web Interactive Fiction: FyreVM-Web App Dev Begins

Web Interactive Fiction: FyreVM-Web App Dev Begins

http://ift.tt/1W97IXA

It’s been a little over a year since I commissioned a Typescript version of FyreVM. The plan was to develop an app development model for IF stories that’s more “web” and less “IF”. Progress has been made and I’m going to talk about that here…

There are several moving parts to the technology under fyrevm-web. First there’s glulx-typescript, which is the basic Glulx virtual machine, coded in Typescript. Then there’s a layer on top of that called EngineWrapper, also written in Typescript. This first layer puts a sort of controller/state-machine on top of the interactions of glulx-typescript. It allows you to just load a story, send commands, and receive data. There’s now a third piece (second layer) on top of that called FyreVM.Manager, also written in Typescript. This second layer is what is implemented in an HTML page and handles the integration between HTML and data coming from FyreVM.

One of my visions was to simplify the data side of FyreVM, to make the story bits more accessible to web developers. FyreVM.Manager does this with a combination of a new I7 extension for FyreVM called FyreVM Content Management. It’s a simple idea. There’s a channel CMGT that is reported when play begins. It contains a semi-colon delimited list of descriptions of all of the data. So the main data, MAIN in FyreVM, is defined as “MAIN,text,mainContent;” The Manager will note that, take the data coming out keyed to MAIN and add it to the DOM as document.fyrevm.mainContent. The extension has all of the FyreVM required data defined and any extensions adding new data should add the bits to append their descriptors to CMGT.

In the WebStorm debugger, you can see how this comes through below. Note document = #document and then fyrevm and then all of the properties of fyrevm. This is all of the data for the sample story I’m executing. It even has the story information broken out into a sub-object.

The inline JavaScript code in the HTML page is fairly simple for a standard template. The template has to identify where the user is typing in commands and implement the line or key input switch (if the engine requests a key, then the template should send the key to the VM immediately, otherwise we wait for an Enter or whatever the UI requires for “execute command”. The template will have DIV tags for all of the content types it wants to display. The page will directly bind fyrevm values to the template or set the element directly.

There will be special cases where content is in JSON form and requires “logic”. I’m working on a sound extension that would qualify. The page has to take the sound “logic” from the story and implement that in the browser. It’s a marriage, similar to transposing the channel data into usable content types. But the story controls the sound, which is what we want.

Next steps are to implement Cloak of Darkness using plain JavaScript, Angular2, and React. The Angular2 implementation will come first and along with it the ability to auto-release as you edit in I7, push this to the app folder, and restart the story to see how it looks. It’s kind of cool to implement a new channel and see it just “appear” in document.fyrevm.

Add a Comment

Gamebook blogs

http://ift.tt/1W97IXA
via Planet Interactive Fiction http://planet-if.com/

May 21, 2016 at 06:08PM