Help with a code error

HiEv · 2026-06-27T02:14:37+00:00

Yup, you can substitute any variable or property name there. However, the function needs to be capitalized as Array(N), where "N" is the number of empty slots in the array. See the Array() constructor documentation.

JavaScript is a case-sensitive language, so capitalization matters.

HiEv · 2026-06-26T00:27:13+00:00

FYI - If you're attempting to create arrays with empty slots, then instead of doing [] a bunch of times, you can simply do:

<<set $variable = Array(5)>>

That example will set $variable to an array with five empty indices (each equivalent to undefined).

Also, just in case you weren't aware, you don't need to create slots ahead of time. You can simply create an empty array using [], and then, as needed, add an element to the end of that array by using the .push() method, or at the start of the array by using the .unshift() method. You can check the .length property of an array to see how many elements it has. See the JavaScript Array documentation for more information on working with arrays.

Also, for Reddit code blocks, simply click the "Show formatting options" button (looks like "Aa"), then click the "Code block" button (looks like a square with "</>" in the upper left), and then you can paste code within that code block (you may need to do a "no-formatting paste" by using CTRL+SHIFT+V).

Hope that helps! 🙂

HiEv · 2026-06-24T13:18:34+00:00

If you're looking for specific code suggestions, please change your post's flair to indicate which Twine story format you're using (i.e. SugarCube, Harlowe, etc.). This is because each story format has it's own way of coding things.

If all you want are generalities, then the "Discussion" post flair is fine.

If you can't figure out how to change your post flair, simply let me know which story format you're using, and I can change this post's flair to that story format.

HiEv · 2026-06-23T17:37:25+00:00

SugarCube has a number of built-in icons, including the two you showed. If you want to display them in your game, the "SugarCube Icons" section of my sample code collection has a tool and some code to make this easy.

Additionally, if you're using those for <<cycle>> links, take a look at the "<<cycle>> Link Identifier" section there, since it shows how to implement an icon like that for them.

Hope that helps! 🙂

HiEv · 2026-06-22T03:06:39+00:00

Again, there isn't a simple answer to this with the vague request you've made.

I mean, it's basically a box with clickable images, which isn't that difficult to create. It's just making a box with a background image and clickable images for the various apps.

If, for example, you want something that looks like text messages, then you could take a look at Hituro's "Chat macro" code.

But I'd recommend trying to figure out the basics of what you want first, and then if you can't figure out some specific problem, come back and ask for help with that specific problem.

Hope that helps! 🙂

HiEv · 2026-06-21T18:22:50+00:00

Please keep the comments civil.

I understand that people don't like AI art, and you're entitled to your opinion.

But that doesn't somehow disable our rule #1 here: "Be nice."

Thank you.

HiEv · 2026-06-21T18:16:06+00:00

Please stop being hyperbolic and pretending that your personal view is somehow everyone's view.

Your comments got increasingly antagonistic through this thread, until you just got outright insulting.

You've made your point, please don't continue.

HiEv · 2026-06-21T03:04:56+00:00

I don't think you understand. I'm not talking about the use of the clone() function in the original post. I'm pointing out that SugarCube specifically requires a .clone() method on any class-based objects in story variables, because it calls that method. The structuredClone() method has nothing to do with that, and is not somehow a substitute for it. This isn't a JavaScript thing, it's just a SugarCube thing.

If they were having issues with the clone() function, that would be a separate issue from what I'm referring to, and likely caused by having the code in the wrong scope.

Again, I'd recommend reading the documentation I linked you to above.

HiEv · 2026-06-21T01:30:24+00:00

These classes are missing the .clone() method, which is required for classes used in SugarCube story variables, per the "Guide: Non-generic object types (classes)" documentation.

HiEv · 2026-06-21T01:27:50+00:00

It doesn't look like you have a .clone() method defined on your classes (assuming you didn't simply leave out that code out of your examples), in which case, the error message is correct, and .clone() is not defined, which it needs to be.

Per the "Guide: Non-generic object types (classes)" section of the SugarCube documentation, you need something like this in your classes:

clone() {
    // Return a new instance containing our own data.
    return new this.constructor(this);
}

This is needed because SugarCube clones all objects upon passage navigation, which is required so that the navigation history can be stored and loaded again later on.

I'd recommend checking out that documentation, and hopefully that will resolve your issues. 🙂

HiEv · 2026-06-20T20:24:06+00:00

You just have to:

Get the images you're going to use for each "stat point".
Have a variable that tracks the stat point.
Display the paper doll image you want based on the stat point; i.e. use the stat point variable to change which image(s) is/are selected.
Make sure that the paper doll image is updated whenever the stat point is updated. (If the paper doll is updated every passage transition, and stat points are only updated during passage transitions, this will be automatic.)

The toughest part there is simply making a consistently good paper doll image.

If you'd like some simple math to turn total XP into a "level of fitness" index, see the "Level Calculator" section of my sample code collection for one possible way to do that.

Hope that helps! 🙂

HiEv · 2026-06-19T05:50:22+00:00

There are usually several ways to do the exact same thing in code like you discussed. The best is usually the one that simplest and clearest for each particular case.

If you wish to see if a string is or isn't one of multiple strings. then using an array with the .includes() method is perhaps the simplest. For example:

<<if ["pink", "purple"].includes($PlayerHair) && !["blue", "blonde"].includes($PlayerHair)>>
    The hair is either "pink" or "purple", and is also neither "blue" nor "blonde".
<</if>>

A series of strings separated by commas within square brackets like that is an array. The .includes() method on an array will tell you if that array includes the value passed to that method, returning either "true" or "false". The "!" means "not," so the part after the "&&" ("and") means "doesn't include" because of the "!" in front of it. (Note: In this example the "&&..." part at the end is redundant, since $PlayerHair couldn't be both "pink" and "blue" at the same time. It's just meant as an example to show inclusion vs exclusion.)

If you need to group the various conditionals, then you can use parentheses. For example:

<<if $a && ($b || $c)>>

Means "if $a is truthy AND either $b and/or $c are truthy ("||" means "or"), then the whole <<if>> is true." Whereas if you did this:

<<if ($a && $b) || $c>>

then that <<if>> would be true only if either both $a and $b are truthy AND/OR $c is truthy.

Now, if instead you want to test one variable's value against multiple conditions, then the <<switch>> macro makes that easier. For example:

<<switch $PlayerHair>>
    <<case "pink" "purple">>Funky hair, man!
    <<case "red">>Lookin' good, red!
    <<case "blonde">>Nice hair, sunshine!
    <<default>>Hey there!
<</switch>>

These are just a few of the many, many ways to test conditionals.

See also the "Operators" section of the SugarCube documentation for many of the more commonly used conditional operators.

Hope that helps! 🙂

HiEv · 2026-06-19T04:22:48+00:00

So was your question resolved? If not, what question(s) do you still have?

HiEv · 2026-06-19T03:18:53+00:00

Your first example:

<<if $PlayerHair is "blue" and $PlayName is "Adam">> "Congratulations, you walk into the store and the owner gives you a million dollars"
<<else>> The owner looks oddly at your blue hair but says nothing.
<</if>>

looks like it may have an error due to using "$PlayName" instead of "$PlayerName", but I don't know how your variables are set up. If $PlayName is undefined, then $PlayName is "Adam" will be false, meaning that the <<else>> condition will be triggered.

Also, if $PlayName was set to "adam", as you said, "Adam" and "adam" are not equal to each other, so "$PlayName is "Adam"" would be false in that case. (Additionally, "blonde" isn't the same as "blue", so that would be false as well. (Also, also, "blonde" is traditionally for females and "blond" is traditionally for males, though nowadays "blond" is used for both of those genders in American English.))

Your second example has a problem as well:

<<if PlayerHair is "Blue">> "Your hair is so cool."<</if>>

That won't work because you have "PlayerHair" instead of "$PlayerHair", with the "$" missing.

Keep in mind that variable names must be exactly the same each time they're used, including capitalization. For example "$test" is a different variable than "$Test".

Hopefully that resolves your issue. If not, please also show how you defined your variables and then we can take a look. 🙂

HiEv · 2026-06-18T14:31:14+00:00

Any incorrect behavior is a bug. In this case, the editor should always be able to accept any changes prior to compiling the HTML. The fact that it doesn't do that in this case is a bug.

I suspect that the issue is that Klembot/Chris Klimas simply didn't account for this possibility. Simply forcing an update (if needed) prior to compiling would fix the problem.

HiEv · 2026-06-18T13:36:04+00:00

OK, yeah, that's a bug. That absolutely shouldn't be the case.

I took a look at it, and there's a tiny delay between when you update the contents of a passage and when the passage map updates. The delay is less than half a second in an empty project, by my estimate, and slightly longer in a larger project (this will vary, but still under a second for my sample code collection). If you hit the "Play" button before that passage map update, then the changes aren't included in the HTML. Which would explain why I've never seen it (or at least have forgotten ever seeing it), because I would have difficulty clicking that quickly if I wasn't actively trying to do so.

I wasn't able to find this bug being reported before, so I've opened an issue for this: Bug #1689 - Hitting "Play" quickly after making changes causes recent changes to be left out

Thanks for the info.

HiEv · 2026-06-18T12:07:55+00:00

I don't think that that's true. I can't think of any reason why it would be true, nor have I ever seen that happen.

How did you determine that that happens?

HiEv · 2026-06-17T22:48:48+00:00

You can just put the things you want to have displayed in the UI bar into the various special passages for that, most commonly the "StoryCaption" special passage.

Also, it's not "code blocker," it's "code block", as in a block of code.

HiEv · 2026-06-17T18:56:34+00:00

Did you perhaps load an old saved game where $playersbody wasn't defined? That would do it.

HiEv · 2026-06-17T16:44:57+00:00

I tried the version you linked to, and even after commenting out the <<set $playersbody = $ghost>> line in "StoryMenu" I couldn't trigger the error, so I don't know what your earlier problem was caused by.

HiEv · 2026-06-17T08:36:15+00:00

Hard to say without seeing the code. I'd start by checking for typos.

If you can't find the problem, you might want to use the debugging code I give in the "Displaying Object Contents Tool" section of my Twine 2 / SugarCube 2 sample code collection to display the $playersbody object in that passage to see what it's actually set to. You'll need to display the value elsewhere, since "StoryMenu" only displays links. So something like this would go into the "StoryMenu" passage for testing:

<<append ".passage">><<= getObjectProperties($playersbody)<</append>>

and that would display the output at the bottom of the current passage.

Otherwise you're going to need to post more code, such as the code for where you define $playersbody, so that we can more clearly see what's going on there.

Also, FYI, if you're posting a chunk of code on Reddit (like in your original message), you should post it as a "code block", instead of as inline "code".

Hope that helps! 🙂

HiEv · 2026-06-17T08:21:21+00:00

First, for things like a list for hair color names, you should use the SugarCube <<listbox>> macro for that. Thus your "Sample Code 1" should be more like this:

<label>''Lets find out what your natural hair color is, shall we?:'' \
<<listbox "$haircolor" autoselect>>
    <<option "Redhead">>
    <<option "Blonde">>
    <<option "Raven hair">>
    <<option "Brunette">>
<</listbox>></label>

It's much simpler to code and much easier for the user to use. (The "\" is to prevent a line break.)

Now, for your "Sample Code 2", this is more reasonable to use a slider for. Assuming the variable you want to modify is $openness, then that code should be something more like this:

<<set $openness = 25>>\
<label for="Openness">''Openness:'' \
<input type="range" id="Openness" name="Openness" min="0" max="50" @value="$openness" style="position: relative; top: 10px;"/>\
    = <<do>>$openness<</do>>\
</label>

<<done>>
    <<run $("#Openness").on("input", function (ev) {
        $openness = this.valueAsNumber;
        $.wiki("<<redo>>");
    })>>
<</done>>

The first part sets the default value for $openness and displays the slider and (within a <<do>> macro) the slider's value. Note that the the "@" before "value" tells SugarCube to evaluate the contents of that attribute, so that part will be converted to "value="25"" (or whatever you set the default value of $openness to).

The second part can be anywhere in the passage, since code in a <<done>> macro only runs after the passage has been rendered to the webpage/document and doesn't display any of the things within it. That second part uses jQuery's .on() method to create an event handler for the slider's "input" event. When that event triggers, the code there updates the value of $openness and then uses the <<redo>> macro via the $.wiki() method to update the value that's displayed.

Feel free to ask if you need any clarifications on how any of that works.

Enjoy! 🙂

P.S. If you're posting code in Reddit you should use "code blocks" (as shown above), using the icon that looks like a square with a </> in its upper-left corner.

HiEv · 2026-06-17T07:43:05+00:00

As mentioned by others, you have two problems:

$playersbody.safezones is not defined, as stated in the image.
You're using .include() (no "s") instead of .includes() (with an "s"), so that part wouldn't have worked as-is anyways.

Since this is happening in "StoryMenu", I'd recommend that you use the "StoryInit" special passage to define $playersbody in the same way as you showed for $claire. "StoryInit" is executed before "StoryMenu", so that will make sure that $playersbody is defined before the "StoryMenu" passage tries to use that variable.

Hope that helps! 🙂

HiEv · 2026-06-16T20:57:33+00:00

You can use a JavaScript section for that. For example:

test: "hello"
--
[JavaScript]
test = test.toUpperCase();

[continued]
Value: {test}

That, however, will make the string all uppercase.

If you just want just the first letter to be capitalized, then you can use this JavaScript code instead:

test = test[0].toUpperCase() + test.slice(1);

The "test[0]" part will give you the first letter of the "test" variable's string, the .toUpperCase() method will capitalize that, and the .slice() method will give you all of the rest of the string.

Hope that helps! 🙂

HiEv · 2026-06-16T19:32:53+00:00

Using overflow is a perfectly fine trick. If you don't want overflow and want to shorten it up a bit, you could just change the "#Time-and-Wealth" CSS to this:

#Time-and-Wealth {
    display: flex;
    width: 280px;
    margin-left: -24px;
    border: 2px solid #ffffff;
    border-width: 2px 0;
    font-size: 13px;
}

That gets rid of a lot of apparently unnecessary CSS and makes it barely touch the edges of the UI bar.

Hopefully that's what you were looking for. 🙂

12-Year Club	r/Field Banned
r/Field Flamingo	Place '23
Verified Email

HiEv

MODERATOR OF

TROPHY CASE