A version of Quixe that makes Inform games look like texts

I’ve been working on a version of Quixe that looks like Text messaging. It will probably take a lot of work before it’s done, but I’ve attached an image of what it might look like when done (the hardest part would be separating the input text from the message text).
Screenshot01.png

Maybe you could change the background colour of the inputs similar to the SMS text on a smartphone. Or could the arrow at the top be swapped to the right hand side. (again similar to SMS)

That’s what I’m working on right now! Everything in this image is the game output.

I’m trying to fix the input right now. I changed the input style for css to this:

.Input { /* This class mimicks the Style_input class. It also eliminates the usual decoration of an <input> field, as much as possible. */ border: none; outline-width: 0px; outline-style: none; font-weight: bold; width: 700px; margin: 5px; font-family: sans-serif; border-radius: 15px; background: LightBlue; padding: 20px; text-align: right; position: fixed; bottom: 0; }

This makes the input box look exactly the way I like. Unfortunately, as soon as I click the ‘more’ button, the input line shifts off-screen. I wish I knew how to fix this.

Ah! I figured it out. I was making the border-radius too big. I changed it to the following and it looks good:

border-radius: 5px; .Input { /* This class mimicks the Style_input class. It also eliminates the usual decoration of an <input> field, as much as possible. */ border: none; padding: 1px; width: 100px; outline-width: 0px; outline-style: none; background: LightBlue; border-radius: 5px; text-align: right; font-weight: bold; }

I’m recording more code here as a place to send people to see it. It’s not done yet.

The place in the quixe code that affects text getting printed is insert_text_detecting. So I replace the current definition with the following:

function insert_text_detecting(el,val){if(!detect_external_links){var html = "<div id='blah' class='box3 sb14'>"+val+"</div>"; $(html).hide().appendTo(el).fadeIn(350); return;}

The classes box3 and sb14 are borrowed from an online speech bubble tutorial. They are defined in CSS (specifically glkote.css) as follows:

.box3 {
  width: 700px;
  margin: 5px;
  font-family: sans-serif;
  border-radius: 15px;
  background: LightGrey;
  padding: 15px;
  text-align: left;
  position: relative;
}


/* speech bubble 13 */

.sb13:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid LightGrey;
  border-right: 15px solid transparent;
  border-top: 15px solid LightGrey;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}


/* speech bubble 14 */

.sb14:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid LightGrey;
  border-top: 15px solid LightGrey;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}

In style.css, I take the one-column format that’s hidden at the end for mobile browsers and make it the default.

Problems:

The carat > gets printed on its own line. I need to just eliminate it.

Other (bigger) problem:
The player’s input needs to be separated from the game’s output in appearance. My biggest goal will be searching the text for that.

A lot easier if done with fyrevm-web, but it still needs a front-end dev to make it workable.

The carat is printed by the game, not the interpreter, so it may not be wise to eliminate it; for example, my WIP movement extension replaces the > with a ] to indicate that you can press enter to take a default action (like continuing toward your previous destination).

For the latter part, would the .Style_Input selector be useful? It seems like that finds anything printed in glk Input style.

I figured out a way around those things too, but I couldn’t do any better on the carat besides checking if you’re going to print it then blocking it. I’ve put up a demo at itch.io. It had a lot problems but it’s fun. If anyone wants to improve on it, I can upload the source here.

mathbrush.itch.io/swigian

Perhaps for the caret, you could take the last line of text printed before requesting line input, and display that as a prompt in the text box?

Nice! I don’t really know JavaScript, but I could try that. I was secretly hoping to make something that is close to but not quite functional, so that the JavaScript savvy would be interested in finishing it.

Random, slightly OT comment: I kind of feel like we’re in an awkward transition period for parser IF, where local VMs are falling by the wayside in favor of browser-based games that allow much more customization at the expense of the author (or their collaborators) needing to be well versed in JavaScript and CSS. For future projects, I’m likely to concentrate on web-based parser games, without worrying overly about making them compatible with freestanding VMs. It looks to me that browser-based games are going to get a lot more casual play than anything requiring installation of an interpreter. The only compelling argument I see for not going in that direction is the difficulty of saving and coming back to longer games.

You can get quite a bit of bang out of just a bit of JavaScript/CSS, so it seems absolutely worth learning at least enough to be dangerous, but on the other hand it also raises the ante for would-be creators to get going on a project. Hopefully, some tools will come along to flatten that barrier at least for the most common use cases. From my perspective, Vorple seems to be a happy intermediate and a relatively painless way of moving in that direction.