A "share your score to social media" feature?

Authoring Twine
1

Twine Version: 2.3.14 Sugarcube

Hi, I’m experimenting with a feature in my game that offers the player a link to share their game score on social media. Something like: “I completed The Princess of Vestria, here are my ratings:” (and then a list of different trait scores for wisdom, compassion, charisma etc.)

I posed this to Chat GPT last night, and it came up with something… that doesn’t work, and I have no idea if it’s even close :laughing: Here’s what Chat GPT gave me:

<ul id="score-list">
  <li>Ruler success: &emsp;4/5</li>
  <li>Magic: &emsp;&emsp;&emsp;&emsp;&emsp;$magickrating/5</li>
  <li>Ruthlessness: &emsp;&ensp;$ruthlessnessrating/5</li>
  <li>Wisdom:&emsp;&emsp;&emsp;&emsp; $wisdomrating/5</li>
  <li>Diplomacy: &emsp;&emsp;&emsp;$diplomacyrating/5</li>
  <li>Compassion: &emsp;&emsp;$compassionrating/5</li>
  <li>Charisma: &emsp;&emsp;&emsp; $herorating/5</li>
</ul>
<a id="share-button" href="#" onclick="shareScores(); return false;">Share your score</a>

(the &emsp indents are my own clumsy formatting, not Chat GPT’s fault)

And then in JavaScript:

// Initialize variables with values from Twine passage
var sv = State.variables;
var stabilityindex = sv.stabilityindex;
var magickrating = sv.magickrating;
var ruthlessnessrating = sv.ruthlessnessrating;
var wisdomrating = sv.wisdomrating;
var diplomacyrating = sv.diplomacyrating;
var compassionrating = sv.compassionrating;
var herorating = sv.herorating;

// Function to open Twitter share link
function shareScores() {
  var tweetURL = "https://twitter.com/intent/tweet?url=" + encodeURIComponent("https://k-paulo.itch.io/the-princess-of-vestria-beta") + "&text=" + encodeURIComponent("I completed The Princess of Vestria, here are my ratings: Ruler success: " + stabilityindex + "/5 Magic: " + magickrating + "/5 Ruthlessness: " + ruthlessnessrating + "/5 Wisdom: " + wisdomrating + "/5 Diplomacy: " + diplomacyrating + "/5 Compassion: " + compassionrating + "/5 Charisma: " + herorating + "/5 #ThePrincessOfVestria");
  window.open(tweetURL, "_blank");
}

There was a bit of back and forth where I told Chat GPT what error messages I was getting and it gave suggestions… In the end I felt we were just going around in circles though. The error message I get now testing the game is that “shareScores is not defined”

Can anyone help?

2

My personal experience has been that that error message is caused by a syntax error in the JavaScript function’s definition. Actually finding the error (often a typo) can be painful.

However, I found a step-by-step example of using SugarCube’s StoryShare interface to communicate with Twitter and Facebook at

I haven’t actually tried it, though, and I dunno if it’s been invalidated by the recent changes at Twitter.

1 Like
3

I strongly suggest not using Chat GPT (or any current AI) to find answers to Twine related questions, as it has no real knowledge about the unique runtime engines of the main Story Formats.

It will generally try to answer a Twine related question as if it was being asked in regards to a standard HTML plus JavaScript web-page, thus making mistakes like:

  1. the Scope related one it made when defining the shareScores() function.
  2. the one-time static assignment of the vars being used to hold the initial value of some State.variables properties.

I don’t have access to a Twitter account, so I can only give corrections to the SugarCube specific errors.

A: SugarCube by default executes all JavaScript within a Private Scoped context, thus the results of JavaScript executed in one context (a) are not available/accessible/visable to JavaScript being executed in another context.

Thus the shareScores() function you defined in the private scoped context of the Story JavaScript area is not available within the private scoped context that the web-browser uses when executing an on<event> HTML element attribute assigned handler like the one you assigned to the <a> element’s onclick attribute in the Passage example.

There are two methods for changing the Scope of something within a SugarCube project:

1: Define the thing on SugarCube’s special setup object, within the Story JavaScript area of your project…

setup.shareScores = function () {
    /* the code that the function executes... */
};

The above function would be call like so…

setup.shareScores()

warning: such things will be “globally” available within the private scoped contexts that SugarCube’s runtime engine uses to execute its own features. These things will not be available to the private scoped contexts that the web-browser itself uses to execute JavaScript!.

2: Define the thing on the web-browser’s own window interface/object, which causes things to become truly “global” like. Again this code would be placed within the project’s Story JavaScript area…

window.shareScores = function () {
    /* the code that the function executes... */
};

The above function would be call like so…

shareScores()

…and would now be available to be used in the <a> element’s event hander.

B: The vars being initialised in your JavaScript example should be done within the shareScores() itself. Because as they are currently initialised those initialisations will be done when the story first starts, so the values assigned to the relate Story variables with be their defaults.

window.shareScores = function () {
    var sv = State.variables;
    var stabilityindex = sv.stabilityindex;
    var magickrating = sv.magickrating;
    var ruthlessnessrating = sv.ruthlessnessrating;
    var wisdomrating = sv.wisdomrating;
    var diplomacyrating = sv.diplomacyrating;
    var compassionrating = sv.compassionrating;
    var herorating = sv.herorating;

    /* the "talk to Twitter" code that the function executes... */
};

…so that whenever that function gets call you will be sending the most current values of the related Story variables.

6 Likes
4

Many thanks for the replies guys, I’ve got something working now :slight_smile:

StoryShare special passage - I’m continually impressed by the functionality that exists in Twine.

I will use Chat GPT with caution from now on… However despite its limitations in Twine, and its failure to do what I want sometimes, it still feels like a gamechanger (to a Twine/coding newbie). I’m currently getting its help in CSS with some styling. It lowers the barrier to entry of these things massively.

2 Likes