How to use JS only?

Haelu786

I want to use JS and not twinescript, so I chose snowman.
Unfortunately I can't seem to make an object in the Story JavaScript which I can then access in any passage.
This seems to me the most basic thing we need to create player stats or inventories.

Is there a way to really use JS with Twine?

greyelf

You did not include an example of your code which makes it difficult to know exactly what you tried to do and why it did not work, so I am going to assume that you encountered a common issue that trips up people and that issue is Scope.

Variables (and some other things) you create in the Story Javascript area are not Gobally available to the rest of the story unless you make them so, and one way to do this is by adding the variables that need to be accessed globally to the browser's window object.

As an example add the following to the Story Javascript area of a Snowman 2 story:

window.player = {firstName: "John", lastName: "Doe"};

... and then add the following to the first/main passage:

Player Name: <%= player.firstName + " " + player.lastName %>

TheMadExile

Snowman also has state object (in-template shorthand: s), if you need to have it remember things in the checkpoints you can create.

An object based example (equivalent to greyelf's)
Put the following in the Story JavaScript:

story.state.player = { name : "John", surname : "Doe" };

And the following to a story passage:

Player Name: <%= s.player.name + " " + s.player.surname %>

Non-object based example (similar to greyelf's)
Put the following in the Story JavaScript:

story.state.playerName = "Jane";
story.state.playerSurname = "Doe";
​

And the following to a story passage:

Player Name: <%= s.playerName + " " + s.playerSurname %>

Haelu786

ah ok thanks guys.
One thing I was missing is the = to begin the code after <%.

ps - I didn't realise there is a Snowman 2. It has 1.1 in my copy of Twine. I'll have to look into that...

greyelf

Haelu786 wrote: »

ps - I didn't realise there is a Snowman 2. It has 1.1 in my copy of Twine. I'll have to look into that...

It may be confusing but 1.1 is the current released version of Snowman 2.

Haelu786

Is there any great benefit using version 2 right now? I notice on the bitbucket site it states that jQuery is included. Is that also true for 1.1?

TheMadExile

Haelu786 wrote: »

One thing I was missing is the = to begin the code after <%.

You only need that if you want output, otherwise you leave it off.

Since Snowman uses _.template(), you have three different template hooks you can use within normal passages (not Story JavaScript). For example:

<% … %>  : Run some JavaScript.
<%= … %> : Run some JavaScript and interpolate the result.
<%- … %> : Run some JavaScript and interpolate the HTML-escaped result.

Haelu786 wrote: »

ps - I didn't realise there is a Snowman 2. It has 1.1 in my copy of Twine. I'll have to look into that...

There are only two versions of Snowman, 1.0 and 1.1.

Snowman 1.1: Also known as Snowman 2, which should be read as Snowman (for Twine) 2, not Snowman (version) 2.

Snowman 1.0: Also known as Snowman 1.4, which should be read as Snowman (for Twine) 1.4.

Haelu786 wrote: »

Is there any great benefit using version 2 right now? I notice on the bitbucket site it states that jQuery is included. Is that also true for 1.1?

As noted above, the Snowman versions are 1.0 (for Twine 1.4) and 1.1 (for Twine 2). And, yes, both versions include the jQuery and Underscore libraries.

Haelu786

btw story.state.myObject isn't working for me, neither is using document.myObject which was suggested elsewhere. When I try to use either in the Story JS, it comes up as undefined. using window.myObject is the only thing that's working for me.

window.myObject = {
	health: 67,
};

and in the passage -

You currently have <%= myObject.health %> health

TheMadExile

1. You should probably never shiv objects into the document object. Beyond that, if you want to use globals, then you must add them to the window object.

2. story.state.… works. Did you follow my example exactly?

For example, if you did the following in your Story JavaScript:

story.state.myObject = {
	health : 67
};

Then in your passage you'd use:

You currently have <%= s.myObject.health %> health

Note the s. before myObject.

Haelu786

sorry, I must have made an error. I thought I had done that, but now when I checked another time it works fine.
Interestingly, there's a video on Youtube which said never use window. and instead said that document. should be used.

TheMadExile

In general, you should use locally scoped variables. However, due to various issues, that is a more complicated situation in most story formats than it should be. Because of that, sometimes you don't have much choice but to declare an auto-global (really just a property on window). The only real issue with auto-globals is the potential to clobber existing properties on window, so some care must be taken when creating them, but it's not particularly onerous. Beyond that, most story formats offer some kind of scoped state variable mechanism (you've seen Snowman's, for most others it's some form of $someVar), which you should probably prefer over auto-globals when possible.

As to the YouTube video. There are probably more people on the internet giving out bad advice than there are doing the opposite, so I'm not surprised. I'm not saying that most people want to give bad advice, but simply that many, in their exuberance to help others (or to show off), try to explain things that they themselves don't have a firm (or any, really) grasp on.

Most of these instances probably have their roots in Cargo Cult Programming, an unfortunate, but real, phenomenon.