Changing JavaScript

Authoring Twine
1

Twine Version: 2.36.1

So I have bumped into a Problem relating the JavaScript im using.

{
“id”: “uniqueMapID”,
“size”: {
“rows”: 3,
“cols”: 3
},
“zoom”: 100,
“r1c1”: {
“cssClass”: “player”
},
“r1c2”: {
“acts”: “[[Hit the Lever|Lever]]”,
“desc”: “There seems to be a lever here.”
},
“r2c1”: {
"cssClass”: “Something”
}
}

Something in the cssClass is a placeholder for “solid wall” Which will make the terrain unable to cross unless it is switched.

How would I change the cssClass? Would I change it with Set?

2

I don’t fully understand what you’re trying to accomplish, is this a JS map? Where is it, what is it for, and what do you want to accomplish?

to add or remove a css class from an element there’s the <<addclass>> <<removeclass>> and <<toggleclass>> macros. SugarCube v2 Documentation

but I can’t really make heads or tails of your code right now…

edit: I realized you must be using the Blocky Maps thing you found in a prev post Interesting Discovery about a Map Creator just putting this here for context. I have my own feelings that it’s weird to do pure js ui in twine, but i haven’t like…looked at it that close.

3

Please use the toolbar’s Preformatted text </> option when including a code example, instead of Blockquote, as </> stops the forum’s software converting Standard quote characters into invalid Typographical (curvy) quotes.

You supplied the JavaScript object definition…

{
	"id": "uniqueMapID",
	"size": {
		"rows": 3,
		"cols": 3
	},
	"zoom": 100,
	"r1c1": {
		"cssClass": "player"
	},
	"r1c2": {
		"acts": "[[Hit the Lever|Lever]]",
		"desc": "There seems to be a lever here."
	},
	"r2c1": {
		"cssClass": "Something"
	}
}

…without explaining what variable type (setup, Story variable, etc…) you are assigning it to. Nor did you state where in your project you initialise that variable (Story JavaScript or a Passage) during start-up, or where in your project you would like to alter the cssClass property of the object (Story JavaScript, a Passage, Somewhere else).

If you want to change the cssClass property during start-up, and the object is ‘static’ data that doesn’t change during play-through, then it is likely being defined on the special setup object within your project’s Story > JavaScript area. This means you can just manually edit the object definition before generating a new Story HTML file.

If on the other hand you want to dynamically change the cssClass property during play-through, in reaction to some sort of end-user interaction, then that object needs to be defined using a Story Variable, so that the change is tracked by History and included in Saves. In this case a <<set>> macro can be used.

The following example assumes the above object was assigned to a Story Variable named $map like so…

<<set $map to {
	"id": "uniqueMapID",
	"size": {
		"rows": 3,
		"cols": 3
	},
	"zoom": 100,
	"r1c1": {
		"cssClass": "player"
	},
	"r1c2": {
		"acts": "[[Hit the Lever|Lever]]",
		"desc": "There seems to be a lever here."
	},
	"r2c1": {
		"cssClass": "Something"
	}
}>>

And the following shows how to change the 1st cssClass property in the above object definition using either Dot Notation or Bracket Notation…

/* Dot Notation */
<<set $map.r1c1.cssClass to 'something-else'>>

/* Bracket Notation */
<<set $map['r1c1']['cssClass'] to 'something-else'>>

Please let us know if I’ve misunderstood your question.

2 Likes
4

I remember to do all of that when I need help LOL.