HTML Framework with Save/Load Functionality

[Tayruh]

Forgive me if this is not the place to share utilities, but I've seen others being shared, so I thought maybe it was okay.

One major hurdle that new users have with Ink is that it doesn't offer easy deployment right out of the gate. Compared to Twine or ChoiceScript, Ink dosen't offer saving and loading without additional coding, which only makes it viable for small games. Most writers don't want to be coders, so you lose a large portion of the user base without having this functionality from the start.

Having said all of that, I took the standard exported web page and tweaked it a bit by adding saving, loading, and autosaves. There are 5 save slots currently (more can be added by editing the HTML) and works independently of the autosave. The autosave saves at every choice and autoloads when you load/refresh the page or app. This is for when you accidentally close the tab or application. I was able to make an android app using cordova and everything works as expected.

I also added a function to switch between Ink's normal infinite scrolling method (the one seen in Inky and the standard exported web page) and a page clearing method similar to the one employed by Twine and ChoiceScript. This is done by calling inkgame.setPageClearing(true) in JS or the global tag # pageclearing: true in Ink to enable the Twine-like paging.

If the global tag # history is set to a number greater than 0, a back button will be enabled in the page and allow you to return to previous blocks of texts. The amount of "undos" that are available are specified by the value you set. The history is limited to the current session and is not saved.

Anyway, I think this will be really useful to new users, so I wanted share it. Anyone is free to use it (no credit necessary), and if you wanted to incorporate it into the main Ink project that's also okay. I would love it if Ink became as popular as Twine or ChoiceScript.

Here are the files: ink_project.zip

To use the project, just export your story.js file like normal and overwrite the one in the folder. The global tags # title and # author are supported, along with # theme: dark as in the original.

Extra: For Windows 10 users, you can use windows powershell in combination with inklecate to have windows watch a directory and automatically recompile the story.js file when your ink files are updated. This allows you to use an editor other than Inky without typing the compile command on the command line over and over. You can also use Inky and save your file by just pressing control+S without having to do control+alt+S and then manipulating the save window over and over.

To use, just drop the watch.ps1 file into the directory with your ink files and inklecate. Right-click on the script and choose Run with PowerShell. Closing the powershell window will kill all of its running processes after. Also, the main ink file it chooses to compile is story.ink by default. This can be changed easily in the script.

This is the script file: watch.zip

Updates 09/23/2019: Fixed bug preventing paragraph tags (CLASS, IMAGE, RESTART and CLEAR) from being read from the Ink story.

10/20/2019: Added directory watch script to ease accessibility.

10/30/2019: Made paragraph tags case insensitive. This only affects the tag, not the value assigned to it. Restarting now does a hard reload of the page and removes the autosave to ensure all data is fresh.

11/03/19: Fixed saving issue with Microsft Edge browser (emulating local storage using cookies). Fixed scrolling issue with Edge browser. Added a back button to undo choices and return to previous passages. Set # history to the amount of undos you would like to allow.

[Treraer]

Thank you so much for this. I've really waited a long time for a proper save/load feature for the html version. However I don't know if it is intentional or maybe a bug, but it seems like the custom css style and image classes don't work with the example files you provided because when I tried it neither the image nor the style classes showed up in the browser inspector, like they just weren't loaded in. So I was wondering if you could help me? Any help would be appreciated. Thanks in advance!

[Tayruh]

Thank you for letting me know! :) That was indeed a bug. It has been fixed now and the zip file has been updated.

[bellinitia]

Thank you for your utility! Seems very interesting. However, I have a problem with it and it's like three days I am struggling. That's why I am bothering you now :D

The thing is: my story is not being shown. Basically nothing is interted in the #story div apart from the .header div. I tried also to create a really basic story like:

->start === start === hi hi no -bye -> END

Exported for web, works normally. If I copy-paste the story.js from the exported folder or export only the story.js into your folder and launch your html, it simply doesn't show anything else than title, author and the save/load mini menu. Do you have any idea why? I tried many things, turned out to be the main.js, but honestly I can't get what's the reason. I think I am doing something wrong, but again I can't get what.

Thank you in advance for any help!

[Tayruh]

I'm not sure if this is your problem, but could you give the new version I just uploaded a try? When I tested your simple example, it errored on me and wouldn't show the updated change. The autosave kept trying to load the old data and caused some sort of conflict between the two stories, so I had to delete the localstorage data by hand and then your example worked. So I'm hoping the rework of the restart feature will fix the issue.

Could you please let me know if it fixes your issue? Thanks.

[bellinitia]

Of course! If I am not wrong I have already tried it, but it's worthing to give it a try. So, for easier debugging I'll report step by step what I am doing: download ink-project.zip, extract the files, open .ink file, extract the simple example in the extracted folder, overwrite story.js, launch Index.html. Blank page, Index_scrolling.html same. I opened the .ink file included in the folder with The Intercept, exported the story.js and re-overwrited it, launched Index.html and everything works. I am attaching you two screenshots with the results.

[bellinitia]

Update: I tried to use different browsers and it turned out that with Firefow it is working, but with Opera (my main browser), Edge and IE nothing is showed. Still can't get why: IE and Edge have their problems, but Opera never presented any issue in managing such stuff. Any idea?

Thank you!

[Tayruh]

So.. this is what I've got so far. It works in Chrome and Firefox for me (I use Chrome, so obviously it works there :P). I didn't have Opera on my PC, so I downloaded and installed it. It worked fine for me right off the bat. In fact, Opera uses the chromium engine which is what Chrome uses (which is why Chrome extensions work with it), so it's unsurprising that it works. It's more surprising that it doesn't work for you and I can't seem to replicate the issue. :(

As for IE and Edge, it looks like IE fails in the ink.js file. That part is out of my hands, I think. Edge seems to fail when trying to access localStorage. I've been trying to search for an answer, but it looks like this is a known issue but I'm not sure if it's been resolved yet. I may have to try using cookies to save as a backup to get around that.

Anyway, I unfortunately don't have a lot of time right now to try to fix Edge. Hopefully I can get a working version within the week.

As one last ditch effort (even though it should have been fixed in my last version), can you try deleting the Local Storage data from within the browser? In Opera, press F12, then go to the Application tab, then under Storage and Local Storage, click file://. It should populate a list to the right with all of your locally stored data. If you have a bunch, you can narrow it down by putting savedata_auto or ink into the filter box. Then just highlight the file and hit the delete key. Hopefully it'll work when refreshing the web page after.

Here's an image for reference of where I was trying to guide you with those instructions.

[bellinitia]

Yep, indeed since Opera uses chromium I haven't thought to check other browsers at first, since I assumed you tested the functionalities with Chrome (or with chromium-based browsers). I was right, but Opera was still not working :D Anyway! I deleted the local storage in the inspect tab and it is working now, thank you very much! And sorry to have created complications

PS: Edge is not a big deal, I think you can just skip it, it has problems even in showing shadows...

[bellinitia]

Sorry to bother you again, but I was thinking... with your code, we are halfway there to add a function to revert the story to the previous knot. I will try to do it myself and if I can get it to work I'll post it here so you can update your script for everyone who needs it. The thing is I am not really proficient with javascript, it might take a while but I'll be as quick as possible!

[Tayruh]

I have a good idea on how to implement an undo button. I may even be able to allow for a specified amount of "undo"s, similar to Twine's sugarcube. I'll see if I can get that working in the next day or so.

I'll probably also go ahead with doing the cookie thing anyway because it seems like a bad idea to lock people out of using the browser that every windows 10 user definitely has, even if it's one of the worst browsers.

[Tayruh]

Okay. As far as I can tell, I have it all working now with the back button and also saving in Edge. Please let me know if you find any errors. :)

BTW, I had to update nearly every file to implement this, so be sure to copy all of the new ones and not just main.js

[ladyisidore]

I think I'm going to try and incorporate this into the somewhat cobbled-together solution I had for an Electron wrapper for Ink projects.

[cproctor]

This doesn't address saving and loading state within a game, but some comments here have been discussing an easy way to deploy to the web. https://unfold.studio, an app I maintain for literacy-based CS education, might be useful to you.

[JLLMorales]

Thank you very much for this template. It is really helpfull for people like me that are using Ink but know nothing about programing. Thanks a lot.

[lunarcloud]

Should be easier when this gets merged: https://github.com/inkle/inky/pull/236

[Nimphradora]

Hello, I'm having an issue with this where if I replace your story.js with mine, the story content will not load at all.

Here are the steps I took:

1. extract ink_project.zip
2. export to web from my own inky file
3. delete story.js from ink_project extracted folder
4. copy over my own exported story.js
5. I also tried to export story.js only from inky which produces the same result

I have tested it on edge, firefox, and brave, all showing the same result.

Any ideas?

[bellinitia]

Could you tell me if there is any error message in the browser console?

[Selsynn]

hi, this thread was two years old. Save and load functionality are out of the box when you export to web from inky. It should also pick the good name for the file, and the good same version of the engine (if you picked the elements in this thread, it's two years old, we have now had some breaking changes in the new versions since)