Development thread for Bisquixe (asking for js/jquery code review)

Authoring Inform 7
1

I’ve been working on updating Quixe to allow it to easily do audiovisual tricks without requiring a server to be set-up.

The goal is for this to be a ‘dumbed down’ version of vorple, only requiring downloading a couple of files and only capable of a few simple things.

Right now, I’ve only explored the simplest features. Here is a demo:

Current features:

-Dynamically change background by typing CS followed by a color recognized by CSS.

Screenshots:
image
image
image

I’m not an expert in this, but I enjoy trying things like this. I might add it to my game Never Gives Up Her Dead by changing the background color in different ‘zones’ of the ship.

I started talking about this in a thread on BJ Best’s recent game. Feel free to ask for some feature requests here, and I’ll see what I can do. Right now I wouldn’t expect much outside of changing some CSS styling or adding other things that simple javascript can do!

10 Likes
2

Copying some feature requests from here:

Some things I think it would be cool to easily do, on par with the Twine level of “easily do”:

  • Hyperlinks–at a minimum, hyperlinks to other local or WWW HTML files. But perhaps hyperlinks to travel between rooms, or links that execute commands, too?
  • The ability to change colors of the page background, page text, prompt text, and status bar text and background.
  • The ability to change the fonts for the status bar, game text, and prompt, using Google fonts.
  • Probably a simple way to display images? I’ve never done this, so I don’t know how easy it is in Inform or if Vorple changes it appreciably.
  • An easy way to inject custom HTML or JS into the game? For example, in the project I’m working on, I’m creating and placing an HTML table via Vorple. (It sounds like JS might already be covered elsewhere, but there may also be a use for script tags within the page?)
  • Other CSS stuff: text decoration, transitions, borders, etc.

The first three would be my absolute top requests. I think they could be relatively simple and that authors could do a lot with those options to make games more styled without doing a lot of heavy lifting.

The final two could be fun but seem a little more niche. I’m realizing that ultimately what I think I’m asking is for an Inform game to be possibly a little more Twine-y in feel. I have no idea how easy any of it would be to accomplish, of course, so take the suggestions for whatever they’re worth. Very curious what others think!

3 Likes
3

Here’s the entire Inform code so far:

"Audiovisual" by Mathbrush

Test is a room.


Release along with a "Mathbrush" interpreter.

Colorsetting is an action applying to a topic. Understand "cs [text]" as colorsetting.

Carry out colorsetting:
	let temp be the topic understood;
	colorset temp;

To colorset (T - a text):
	(-
	if(glk_gestalt(311, 0)){
	glk($0170, Glulx_ChangeAnyToCString(TEXT_TY_Say, {T}));
	}
	-)

(the name ‘Mathbrush’ interpeter will be changed)

The Inform 6 code would be in an extension. So all you would need to do in your game is:
1-Install the extension
2-Download a ‘template’ folder (once)
3-Type colorset "yellow" or whatever color you want.

3 Likes
4

This all sounds really nice! I remember being in a panic a couple of days before Spring Thing because I was unhappy with the appearance of my website. A lot of this stuff probably seems pretty basic to some authors, but it’s over my head. I was frustrated with myself for not giving myself more time to work on presentation. I’d be very grateful for any tools that can simplify things.

Commands for players to change things is great, too. Typography is accessibility, and because different people have different needs, it’s good to empower players to make their own decisions.

Linking feelies in-game would be cool, too.

Thanks for looking into this! I’ll be following with interest.

4 Likes
5

Okay! I’ve been able to now get arbitrary css changes into this.

Here’s an example. This version (same link as above) has 4 new commands:

elset picks the name of the element or class that you are trying to change
feset picks the css element you want to change
atset picks the attribute you want to put into that element.

So, for instance, to change the text to italics in just the main window, begin by inputting the following:

image
image935×503 45 KB

then XYZZY applies it:

image
image864×510 45.7 KB

If your text uses commas, it won’t work, as I strip out the commas on the Javascript end.

@kamineko I didn’t even think about keeping this type (or a certain kind of this type) of command in game would be helpful! I was planning on just including phrases authors can use ‘behind the scenes’. But yeah, being able to adjust things in-game would be nice!

I had fun using this set of commands:

elset .BufferWindow
feset font-size
atset 50px
xyzzy

It would be fun to make a game that lets you mess with things like this, and then once it looks how you like, prints out a CSS file you can just add to your game. That would help people who don’t want the full special interpreter/extension but do want just the CSS.

I’ve seen both people who gave feedback mention adding links in-line. Changing just one word or couple of words in a block of text is significantly harder than what I’m doing. I’ll check on it, and hope it works out well! If I can add any link at all, it will be easy to allow links that execute commands.

Full inform code for this release (2):

Code 
"Audiovisual" by Mathbrush

Test is a room.

The release number is 2.

Release along with a "Mathbrush" interpreter.

Colorsetting is an action applying to a topic. Understand "cs [text]" as colorsetting.

Carry out colorsetting:
	let temp be the topic understood;
	colorset temp;

To colorset (T - a text):
	(-
	if(glk_gestalt(311, 0)){
	glk($0170, Glulx_ChangeAnyToCString(TEXT_TY_Say, {T}));
	}
	-)

Tempelement is some text that varies.

Tempfeature is some text that varies.

Tempattr is some text that varies.

tempelement is ".WindowFrame".
Tempfeature is "background-color".
Tempattr is "yellow".

Cssmessiness is an action applying to nothing. Understand "xyzzy" as cssmessiness.

Carry out cssmessiness:
	let Temp be "[tempelement],[tempfeature],[tempattr]";
	css-set Temp;

elsetting is an action applying to a topic. Understand "elset [text]" as elsetting.

Carry out elsetting:
	now tempelement is the topic understood;
	say "The element searched for is now [the topic understood].";

fesetting is an action applying to a topic. Understand "feset [text]" as fesetting.

Carry out fesetting:
	now tempfeature is the topic understood;
	say "The feature changed is now [the topic understood].";

atsetting is an action applying to a topic. Understand "atset [text]" as atsetting.

Carry out atsetting:
	now tempattr is the topic understood;
	say "The attribute value is now [the topic understood].";


To css-set (Temp - a text):
	(-
	if(glk_gestalt(311, 0)){
	glk($0171, Glulx_ChangeAnyToCString(TEXT_TY_Say, (+ Temp +)));
	}
	-)

(the ‘glk_gestalt’ checks if the interpreter supports this stuff. Then glk($0171… etc. sends things to my special function in Quixe, which splits up the values using comma separation, as I had difficulty getting it to accept multiple strings).

3 Likes
6

I feel so seen.

6 Likes
7

This is what I’ve been using for my Inform games; it basically just adds a dark mode toggle, and lets the author specify all the colors for both modes. That’s how I did the reddish-brown theme for IFComp.

6 Likes
8

Note that Glk stylehints are already supported by Parchment. Just switch to Parchment instead of Quixe. While this looks like it can let you do far more than you can with stylehints, I wouldn’t want people to think they have to use something this complex to get colours or font sizes working! (But note that you can’t change the colours of anything already on the screen with Glk stylehints. So that part of this is a new feature.)

1 Like
9

This already feels like sorcery. I hereby present to you the world’s ugliest status bar:

elset .GridWindow
feset background
atset #ff00ff
xyzzy
feset color
atset #00ff00
xyzzy
feset font-family
atset "Impact"
xyzzy

test
test798×184 11.9 KB

6 Likes
10

Any thoughts on Parchment supporting the Garglk Zcolors opcodes for that purpose?

1 Like
11

I’ve been poring over hyperlinks and how they are currently used. I was able to figure out how to use hyperlinks just with pre-existing glulx stuff, so they even work offline!

However…

The code is really messed up. For years there has been a bug where if you use the standard glulx hyperlinks for commands, it prints a blank line, and if you delete that, you have to do code to print the player’s command when doing manual input. There are years of forum posts saying ‘yes, we know this exists, and there’s really not a good solution to it’.

So…

Since I’m going for a ‘dumbed down’ extension and the majority of my changes will be used for web interpreters and will work offline anyway, I think I’m not going to use as little pre-existing hyperlink code as possible, and my hyperlinks won’t work in non-web interpreters. Once I start requiring a whole web of extensions it’ll just get complex again.

So I’m just checking in here to see if anyone is completely devastated if I do most of my hyperlink coding on the JQuery side instead of the glulx side.

I’ve done this before, and it’s pretty easy (you just manually call the quixe function that sends text back to the interpreter). But it means that hyperlinks won’t work or exist in the offline, non-web versions.

12

This is supposed to be a usable way to proceed, though. (If I understand what you’re talking about: glk_set_echo_line_event(mainwin, false).)

The player can’t see the difference between the auto-echoed command and you printing it.

13

But this turns off the ‘echoing’ for manual input, from what I’ve seen, so that it doesn’t work for ‘mixed’ games.

14

What I mean is: if you’re making a game that goes down this path, you turn off glk_set_echo_line_event() at the top and modify the parser code to print the player’s command after a line input event. This is what BTTY does.

15

Hmm, I’ll see how simple it is. I’ve had trouble getting the BTYT code to work before since PrintText() no longer works, but I’ll see if I can get the echoing part to run.

16

(Hanon’s usual wish-blathering ahead:)

For some reason, this has been the Holy Grail of parser adventures. There have been extensions that did off-site clickable hyperlinks before, that made non-clickable choice menus possible, Dialog which does allow click links for commands, but none of it’s done everything (except Dialog, which isn’t pick-up-and-implement how Inform 7 is.) Hybrid Choices for me was the closest, but the author and game must deliberately toggle between choice and parser mode.

The optimal thing in my mind would be to run the parser and the world model, but rooms/passages can also have links that either issue commands, or display text elements (basically “passages” - which would work like a room that doesn’t move the player - maybe appearing in a dismissible window?) where the author might choose to disallow parser entry temporarily. So you could implement an entire Harlowe-looking choice game on top of Inform’s world-model and rules where either interaction were valid at any point. Even if the game just stayed in basic parser mode but there was a command at any point that could pop up a window of “here are logical choices you can make here if you want to click one” that could either move the player/issue a parser command, or display another choice box with links…

I remember in the “blue sky” discussion of Inform 10(?) one of the goals was to enable clickable hyperlinks that could either be embedded in text or spelled out as a choice list alongside the normal parser prompt. If the description told you about a book, you could click that and the author could either display a special text string, potentially with more links, or possibly force a command >EXAMINE BOOK. Or below the text there would be a list of choices:

[Examine the interesting book.]
[Go North to the Kitchen]
[Go upstairs]

Kind of stuff. This would also enable another thing people always want which is an easy hint-system or “click for next step in the transcript”. The author could masquerade the game as pure parser unless the player typed a special action >CHOICES which could then, based on rules, present the next step the player needs as a choice, OR just logical things to try if they were stuck.

The “Examine Book” response could have pure text links in it that represent clickable chapters that you’d normally have to type >READ CHAPTER 5 for.

I have always pined for this, but the other thing is with Dialog (specifically The Impossible Bottle) I learned that it can be annoying to move between keyboard and mouse for touch-typists. Ideally everything you could do in the game would be implemented with typed commands or clickable links.

2 Likes
17

I feel like this line in inquiry always winds up here, where you realize you’re designing two complete games. And maybe it would be a better use of your time to cut one of them and focus on making the other one.

EDIT-ADD: This is a tangent to the color-and-style project though! I don’t mean to derail that.

3 Likes
18

I think it’s directly pertinent! My question is ‘what do people want to do with the web parser (with minimal effort)?’ so feedback like that is useful.

And I agree with you. There have been some neat experiments with blending the two over time, but I feel like one part usually outshines the others. I did like the Castle Balderstone games that use the twine part as a ‘hub’ to select the parser games, but that keeps a clear separation between the two.

1 Like
19

Okay, I haven’t uploaded it to itch yet, but I’ve gotten hyperlinks working in both the gblorb (with non-web interpreters) and the web version, with command echoing working correctly. I used the ideas in Echo Replacement here:
https://github.com/i7/counterfeit-monkey/blob/8bc9d427056668732dda38adc602f0bdc8f53e46/Counterfeit%20Monkey.materials/Extensions/Counterfeit%20Monkey/Echo%20replacement.i7x#L24 by angstsmurf. I had to change some parts so as not to use the whole extension, but I’ll contact him about credit.

Here’s an example in Gargoyle of going between two empty rooms, using a link for the first movement and typing for the second:

image
image516×575 30.2 KB

There’s still a little goofiness with line breaks, but that should hopefully be easier to modify.

Also I think my working title for this interpreter/extension combo will be ‘Bisquixe’.

5 Likes
20

It already does! But they don’t allow you to change the colour of existing text.

Also note that the next release of Inform 10 should hopefully make hyperlinks and input echoing much easier to handle. Here’s a test file I made:
suspending.ulx (597.3 KB)
(This was a version I just got from an old email, and looks a little buggy sorry. I’ll upload the latest version when I’m at my other computer.)

3 Likes