I have the latest version of Twine and using the story format SugarCube 2.36.1. My Twine projects open up in Chrome. I have a basic understanding of HTML/CSS and figured I would learn JavaScript as I work through my project which has been working decently so far.
However, I am running into an issue that I can’t figure out no matter how much I research. I even attempted to use ChatGPT to see if it could assist me with no such luck. I’m hoping someone here can help.
I have the following passages for my story; Gifts, Gift 1, Gift 2, Gift 3, and Character Home.
When I have my story starting at Gifts, the button that gives the character three random Gifts from an array and assigns them to variables which works flawlessly. It flows through Gifts 1-3 without an issue, but I wanted to add a passage before Gifts called Character Home. When my story starts from Character Home, the button in Gifts is no longer clickable unless I refresh the page manually. Changing the starting point back to Gifts allows the button to work. I just can’t have any passage leading into it.
Can someone help me understand why that is happening and how I can fix it? Here is all my coding:
:: StoryInit
<<set $gift1 to {}>>
<<set $gift2 to {}>>
<<set $gift3 to {}>>
<<set $gift1bg to "">>
<<set $gift2bg to "">>
<<set $gift3bg to "">>
<<set $home to "">>
:: Character Home
What does your home look like? What is it made out of? What does it look like inside? You will need a good strong fire, candles to make light after dark, and a decently sized workbench. You’ll also need a warm comfortable place to sleep and dream.
<<textarea "$home" "">>
<<button "Submit">><<goto "Gifts">><</button>>
:: Gifts
You get three different starting gifts that are chosen at random.
`<button id="creategiftsButton" type="button">Gifts</button>`
:: Gift 1
You have received $gift1.name as a gift. How did you get this? What does it mean to you?
<<textarea "$gift1bg" "">>
<<button "Submit">><<goto "Gift 2">><</button>>
:: Gift 2
You has received $gift2.name as a gift. How did they get this? What does it mean to them?
<<textarea "$gift2bg" "">>
<<button "Submit">><<goto "Gift 3">><</button>>
:: Gift 3
You has received $gift3.name as a gift. How did they get this? What does it mean to them?
<<textarea "$gift3bg" "">>
:: Story JavaScript
// Define an array of possible origin gifts (only names)
var originGifts = [
"Round Stone",
"Spool of Gold Thread",
"Delicate Chain",
"Sprig of Red Ivy",
"Dingy Cord",
"Hollow Reed Flute",
"Three Drops of Perfume",
"Spider-Linen Gloves",
"Talon Needle",
"Carved Jade Pendant",
"Cottle-Buttons",
"Ghost Dust",
"Sand",
"Blue Paper",
"Pouch of Moth Teeth",
"Cracked Teapot",
"Lingering Bead",
"Wish Folio",
"Sky-Blue Shard",
"Bottle of Green Ink",
"Moon Seed",
"Bright",
"Tangled Knot",
"Old Tin Coin",
"Blooming Scarf",
"Burnished Fingerbone",
"Wooden Key",
"Winter Grease",
"Bound Egg",
"Lucky Thimble",
"Lost Ember",
"Bag of Seeds",
"Silver Paw",
"Twisted Root",
"Fish Amber",
"Hare-Hair Paintbrush",
];
// Function to shuffle an array (Fisher-Yates algorithm)
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Function to randomly select three origin gifts
function getRandomOriginGifts() {
// Shuffle the array to randomize the order
originGifts = shuffleArray(originGifts);
// Select the first three gifts
var gift1 = originGifts[0];
var gift2 = originGifts[1];
var gift3 = originGifts[2];
// Return the selected gifts
return [gift1, gift2, gift3];
}
// Function to handle character creation
function handleGiftCreation() {
// Get random origin gifts
var randomGifts = getRandomOriginGifts();
// Assign the selected gifts to Twine variables
State.variables.gift1 = { name: randomGifts[0] };
State.variables.gift2 = { name: randomGifts[1] };
State.variables.gift3 = { name: randomGifts[2] };
// Display the selected gifts (optional)
alert(
"You received the following origin gifts:\n1. " +
State.variables.gift1.name +
"\n2. " +
State.variables.gift2.name +
"\n3. " +
State.variables.gift3.name
);
// Move to the next passage (e.g., "Gift 1")
State.display("Gift 1");
}
// Wait for the story to fully load before setting up the button click event
$(document).one(":passagedisplay", function (event) {
// Find the button with the specific ID and attach the click event
$("#creategiftsButton").on("click", handleGiftCreation);
});