Hello, I am somewhat new to twine and I am hoping someone could guide me. I’m trying to make my game’s music and accessibility settings save even after the player reloads the tab. I’m using Harlowe 3, and I’m not sure what the best way to add this into my game without using (load-game: “settings”) and (save-game: “settings”).
Any advice would be really appreciated—thanks!
Harlowe automatically retains the “game state” when the browser tab/window is refreshed.
If you want to have multiple save game slots or retain the settings across new browser sessions, then you need to use the save and load macros.
If you want just one save state that automatically saves and loads without the user doing that action themselves, I believe the best method would be to use a footer tagged passage technique. Save the game into the first slot with every passage that is presented to the user in the footer passage. You only need one passage with the tag of footer and it is automatically applied to the end of every passage in the Harlowe story.
Then in your single startup tagged passage, you can load the first game slot, if it exists. The manual shows you exactly how to check if a save slot exists and load it. The start up only runs once before the story is rendered when the game is launched.
Hi there,
it would depend on how the accessibility settings are coded in the first place, and you might need a bit of JavaScript to help along the way. If you could share the code of your settings, it would help us 
(also I have a settings template that might help?)
Main settings passage
(align:"===><===")[SETTINGS]
(align: "===><===")[(dropdown: 2bind $Settings_list,"Accessibility Settings","Music Settings","Game stats")]
{
(align:"===><===")+(b4r:"outset","ridge","ridge")+(b4r-size:2,2,2)+(b4r-colour:black,black,black)[(link: "Go to setting")[(redirect: $Settings_list)]]
(align:"===><===")[(hook: "navigation")[(button: "===><===")[
(if: $Settingsback is 'off')[[Back->Start main menu]]
--------------------------------------------------------------------
(if: $Settingsback is 'on')[[Back->Start]]
(if: $Settingsback is 'game')[(link: "Back")[(Load-game:"Slot One")]
]]]]
}
accessibility passage
(align:"===><===")[''Background Images toggle'']
(text-color:"black")[(Dropdown: bind $Img_toggle, "ON","OFF")]
-------------------------------------------------------------------------
(align:"=><=")[Text Settings]
(align:"===><===")[''Text Size'']
(text-color:"black")[(dropdown: bind $Font_Size,"Small","Medium","Large")]
(align:"===><===")[''Text colour'']
(text-color:"black")[(dropdown: bind $txt_colour,"Black","blue","Yellow","green","red")]
-------------------------------------------------------------------------
(align:"===><===")[''Dark Mode'']
(if: $toggle)[
<label class="switch">\
<input type="checkbox" onclick="switch1(this)" checked>\
<span class="slider"></span>\
</label>\
](else:)[
<label class="switch">\
<input type="checkbox" onclick="switch1(this)">\
<span class="slider"></span>\
</label>\Toggle darkmode
]
I see, but how is $Font_Size and $txt_colour use in your project? Is there any JavaScript or CSS linked to those variables? or do your have simple conditional statements with every passage?
I asked because I have something like this for a font-size (in the template linked in my previous answer):
:: Startup [startup]
(set: $fontSize to 1.5)
-> this sets the default font-size (here 1.5em)
:: Setting Passage
(link-repeat: "−")[(set: $fontSize to it - 0.1)<script>settingFontSize($fontSize);</script>] /
(link-repeat: "+")[(set: $fontSize to it + 0.1)<script>settingFontSize($fontSize);</script>]
-> in the settings the player can adjust the size,
by clicking on + or -, which triggers a specific script that
updates the font side in real time
:: Header [header]
<script>settingFontSize($fontSize);</script>
-> this is so the font size chosen load properly every time
the page is refreshed or a save is loaded
:: JavaScript
window.settingFontSize = function(mode) {
$('tw-story').css( "fontSize", mode + "em" );
};
-> this is the JavaScript code which will update the font
size when it's changed in the settings.(live: 0)[(if:$Font_Size is "Small")[<style>
tw-story {
font-size: 150%;
}
</style>](if:$Font_Size is "Medium")[<style>
tw-story {
font-size: 225%;
}
</style>](if:$Font_Size is "Large")[<style>
tw-story {
font-size: 300%;
}
</style>
And the font code you provided just gives me a error
You don’t need to tag me every time, I get notified when you reply to the thread already 
Can I assume you forgot to paste one line? because it seems to be missing </style>] for the final (if:) in your code there.
Follow up question, where is this code located?
That strange? I went and double checked on my template, and it works just fine. The only differences is that the code I shared:
Setting Passage) and passage tags (like header), so it makes things clearerIts located in my header passage and the settings passage is called “accessibility settings”
Is the Header passage tagged with header?
I tested the code you provided here:
header)And… I dont get any problem with the reload. Like no problems at all. The Lorem Ipsum page loads with the correct font size. So I don;t see what is wrong with your code.
Do you reload the page when still on the settings? Then the page just reloads without the new variable having properly saved its new value (you need to go to a new passage).
Or do go back to the settings and it goes back to the default? then it might be because of the way you coded the dropdowns (if you change bind to 2bind, that should fix it).
Yes it is and weird