[See comments below for latest updates - DAC - 2016-12-28]

The work on a standard reusable template has begun with a target of mid-December for functional completion. Depending on how it looks, I may let a designer friend play with it before releasing, but extensions and documentation will all be published as soon as it’s feature complete.

The standard template will come with several options that are driven by I7 code. Some behavior will be different than most interpreters and this includes:

• Every turn is saved, along with turn data. This allows the story to be reloaded with history/scrollback/pages and allows the reader to jump to any historical turn and “branch” their play. If a player does page back to a previous turn and enter a different command, the previous line of story is saved as “branch 1” and stored separately from the “running branch”. The player can create as many branches as they wish. The player will be able to add/edit a description to each branch.
• We’re using ReactJS for the templating system and all of the front-end code will be simple with clear separation of concerns. Each portion of the template will be a self-contained component controlled by the larger template.

Some of the template feature choices include:

• Story Title Header (optional)
• Status Bar (optional)
  • Location Name (on/off)
  • Turn (on/off)
  • Time (on/off)
  • Score (on/off)
• Main Content (required, select one)
  • Scrolling
  • Paging
• Command Line (required, select one)
  • Embedded
  • Static Footer
• Menu (required)
  • Install New Story (required)
  • Save Story To File (required)
  • Start Story (required, must have installed stories or will be disabled)
  • General Help (required, provided but modifiable by author)
  • Story Help (optional, generated by I7 extension “FyreVM Story Help”)
  • Story Hints (optional, generalted by I7 extension “FyreVM Story Hints”)
  • About (optional, generated by I7 extension “FyreVM Story About”)

There are many features and options to add, such as turning off the command bar and making a choice-based selection list of links, allowing embedded directional links, embedding magic word links, embedding images, and creating more complex templates. I plan to publish a story with an alternate template and release it next year at some point, possibly for the 2017 IF Comp. Requests for features will be welcome, but I’d also encourage others to try their hand at creating their own components and templates. For anyone with basic HTML, CSS, and JavaScript knowledge, this will not be too difficult.

Sounds wonderful! One question about the branching: will the RNG be preserved across branches? Or could branches be used e.g. to explore what happens if the die falls differently? If the latter, will it be possible for authors to disable/prevent this for a game like Kerkerkruip?

Example:

Story is played 100 turns on default “running branch”. Player goes back to turn 50 and enters an alternate command. Branch 1 is created saving turns 1-100. running branch copies turns 1 to 49 and adds new command. Player plays 25 turns to 75 then…

if the player goes back to turn 40, they can choose to enter a command on the running branch or branch 1. If the player goes back to turn 60 and enters a new command, branch 2 is created.

The only “shared” data is prior to any branched command.

Does that make sense?

Ah, I was unclear, sorry! What I mean is: will FyreVM do a standard save-restore to get back to turn 49, or start with a new blank slate and simulate the player’s first 49 commands again? And if it’s doing a save-restore, will there be a way for authors to prevent it for randomness-heavy games like Reliques of Tolti-Aph or Kerkerkruip (which lock down the normal save-restore system as well)? It’s an edge case to be sure; I’m just thinking about interesting uses for this as a player.

No. It starts with the saved data for that turn. The meta data stored for an installed game will be a file with Quetzal and channel data for each turn. If the player enters a command at any historical turn. the game file would be reloaded, restored to turn - 1, then the new command entered. Since we have all of the channel data available, we can asynchronously build the UI and run the command and do branch work. All of the data would be placed in browser storage for easy retrieval, but the player can save anything externally and reload from a file later. All of the reloading would be done “quietly”.

Making progress (slowly). Nick has react pulled together and fyrevm-web merged in. The template work is next:

[code]
import React, { Component } from ‘react’;
import ‘./Story.css’;

class Story extends Component {
constructor(props) {
super(props);
const FyreVMWeb = window.FyreVMWeb;
const fyrevm = window.fyrevm;
this.fyrevm = new FyreVMWeb.Manager();
this.state = fyrevm;
}

outputReady() {
const fyrevm = window.fyrevm;
this.setState(fyrevm);
console.log(fyrevm);
}

componentDidMount() {
this.fyrevm.InputElement = document.getElementById(‘commandLine’);
this.fyrevm.OutputReady = () => this.outputReady();
this.fyrevm.LoadStory(process.env.PUBLIC_URL + “/Cloak of Darkness.ulx”);
}

render() {
let storyInfo;
if (!this.state.mainContent) {
storyInfo =

Loading story

return (
  <div className="Story">
    {storyInfo}
    <div className="Story-input">
      <input id="commandLine" type="text"/>
    </div>
  </div>
);

}
}

export default Story;

/** WEBPACK FOOTER **
** src/Story.js
**/[/code]

More progress…

Zach has integrated semantic-ui and re-implemented the sample app. The command line works now too. It’s still not the full standard template yet.

The new story.js. You can see the Score, Turn, and Time are a part of section that will later be react component, interchangeable and optional.

I won’t push this up until we’re further along, but you can clone fyrevm-web, make sure you have gulp installed (we’ll add it as a dependency shortly), and then in the projects\Cloak of Darkness\react folder (from a command line), run ‘npm install’, then ‘npm start’. You may have to run ‘gulp build’ in the semantic folder too.

[code]import React, { Component } from ‘react’;
import { Container, Header, Input, Grid, Menu } from ‘semantic-ui-react’

class Story extends Component {
constructor(props) {
super(props);
const FyreVMWeb = window.FyreVMWeb;
const fyrevm = window.fyrevm;
this.fyrevm = new FyreVMWeb.Manager();
this.state = fyrevm;
}

outputReady() {
const fyrevm = window.fyrevm;
this.setState(fyrevm);
this.fyrevm.InputElement.value = ‘’;
console.log(fyrevm);
}

componentDidMount() {
this.fyrevm.InputElement = document.getElementById(‘commandLine’).firstChild;
this.fyrevm.OutputReady = () => this.outputReady();
this.fyrevm.LoadStory(process.env.PUBLIC_URL + ‘/Cloak of Darkness.ulx’);
}

render() {
let storyInfo;
if (!this.state.mainContent) {
storyInfo =

Loading story

{this.state.mainContent}

return (
  <div>
  <Menu>
    <Menu.Item>
      FyreVM Prototype
    </Menu.Item>
  </Menu>
  <Grid divided id='story'>
    <Grid.Row>
      <Grid.Column width={4}>
        <Container textAlign='center'>
          <Header sub>Score</Header>
          <span>{this.state.score}</span>
          <Header sub>Turn</Header>
          <span>{this.state.turn}</span>
          <Header sub>Time</Header>
          <span>{this.state.time}</span>
        </Container>
      </Grid.Column>
      <Grid.Column width={8}>
        {storyInfo}
        <br/>
        <Input fluid placeholder='Command' id='commandLine' type='text'/>
      </Grid.Column>
    </Grid.Row>
  </Grid>
  </div>
);

}
}

export default Story;
[/code]

I’ve added a continuous deployment to: plover.net/~dave/fyrevm-web/standard/

Whenever we make changes to the standard template development and check it in, this site will show the results. Runs well and you can Inspect with browser dev tools to see what’s going on.