Twine 2 integration

[Dinocanid]

I just tried it out today (thanks to Kesstryl for suggesting!) and I seriously like it.
For those who don't know, Twine is a free, open-source program used to make interactive/non-linear stories. Today, I'm just giving the instructions on how to integrate an exported project with mysidia.

-Step 1-
Download Twine 2 from twinery.org. You can possibly use the online version, but I'm unsure how reliable it is in this particular case.

Once you do that, read up on the documentation and go ahead with making your story/game. I recommend making something short and sweet at first before integration, just so you get the hang of it before making anything lengthy.

-Step 2-
Done? Now go ahead and export your story (export should be called "publish"). After that, it should save in the folder of your choice as an html file.
Open it up in a code editor, doesn't it look messy and crowded? Good, because that thing's getting cleaned.

Create a new folder in your root folder (presumably public_html) to hold all of your twine files. I called mine "explore". Inside, you're going to make a new file called twine.css.

-Step 2A-
1. Open up the exported html file then cut-paste that huge wall of code between these tags into twine.css (Do not copy the style tags themselves):

<style title="Twine CSS"></style>

Save it and close it.

2. Now you need twine.js, just download the file included in the attachments for this one. I edited it so the pop-up error no longer appears when you load the page, but make sure you exported your story with the Harlowe format!

-Step 3-
Now, inside of any old view file you want to use, paste the remaining code using a $document comment. Like so:

PHP Code:

$document->add(new Comment("
        <script src='/explore/twine.js'></script>
        <tw-story></tw-story>
<tw-storydata name='Blackridge Explore' startnode='1' creator='Twine' creator-version='2.1.3' ifid='E246C9E9-6630-46ED-847D-9305E3F80B59' format='Harlowe' format-version='2.0.1' options='' hidden>
<style>
        tw-sidebar tw-icon.redo {
                display: none;
            }
        tw-sidebar tw-icon.undo {
                display: none;
        }
    </style>
    <script role='script' id='twine-user-script' type='text/twine-javascript'></script>
        <tw-passagedata pid='1' name='Den' tags='' position='757,479.16666666666674'>
            <img src='https://cdn.pixabay.com/photo/2017/09/28/18/22/forest-2796414_960_720.jpg' style='height:400px; width:500px;'>
            You leave the densite and into the open world.
            </br><button type='button' class='btn btn-dark'>[[Head west]]</button>  <button type='button' class='btn btn-dark'>[[Head north]]</button> | [[Head east]]
        </tw-passagedata>
        <tw-passagedata pid='2' name='Head east' tags='' position='970,499.16666666666674'>
            <img src='http://www.rideouts.com/assets/eastgrandview.png' style='height:400px; width:500px;'>
            You head east into the hills. From there, a large lake is visible. While too large to swim across, you can see more of the large open world on the other side.

            You can head down and try fishing, otherwise you might as well [[go back-&gt;Den]].
        </tw-passagedata>
        <tw-passagedata pid='3' name='Head north' tags='' position='764.3333333333334,217.5'>
            You head north. After a few miles you can spot two bodies of water on either side of you from a high hill. You...
            [[Proceed to Dead Lake]] | [[Visit the large pond by the hills]]
        </tw-passagedata>
        <tw-passagedata pid='4' name='Head west' tags='' position='564.3333333333333,490.83333333333337'>
            Double-click this passage to edit it.
        </tw-passagedata>
        <tw-passagedata pid='5' name='Proceed to Dead Lake' tags='' position='570.9999999999999,222.5'>
            To the north of the lake is a tall, looming tree standing on it&#x27;s own. It looks old, but it&#x27;s withstood the weather this long.&lt;/br&gt;
            While not good for fishing, it does have a good amount of frogs.
            You can go frog fishing here, or you can [[go back-&gt;Head north]].
        </tw-passagedata>
        <tw-passagedata pid='6' name='Visit the large pond by the hills' tags='' position='956.6666666666666,224.16666666666666'>
                Double-click this passage to edit it.
        </tw-passagedata>
        </tw-storydata>

        
        ")); 


(Psst, I replaced the double quotes(") with single quotes('). Your code will break if you don't!)

-Step 4-
Aaaand that's it, you're done! If you didn't notice, I didn't even include the css file we made. That's because I didn't want it in my case, but you can use it if you wish. As far as I know, you'll never need to do step 2 again once finished, no matter how many files you use Twine in; as long as you remember to reference it that is.
What's oh so wonderful about this is you can style it however you want. I've started using bootstrap 4 with mine:

[Kesstryl]

Glad it worked out for you :)

[Dinocanid]

I just updated the OP. Now it includes an attachment for your twine.js file that you should use instead. The difference is that I removed some lines of code, and the annoying "the code is in a mess!" pop-up no longer appears now.

[Hall of Famer]

Its nice integration guide, thanks for posting this.