Confirmation boxes for saving

Question

Hello everyone. I'm trying to develop a game using Sugarcube 2.21.0.

I created a passage for my own options where I have a volume bar, restart, save and load options.

I want to create a link which the player shall click and a confirmation box shows up with "Do you want to save/load the game?" and yes/no buttons, if the player clicks yes, the Save.slots.save function will be called, if the player clicks no, the box will just close. I tried using UI.alert, but I was unable to do use the yes no buttons.

I already took a look at the API dialog on sugarcube documentation, tried some youtube tutorials, read a lot on the forums but I wasn't able to figure out how to do it.

I deactivated the UI bar, and I only want one slot, so there is no need for me to call the original save menu.

(Sorry if I didn't make myself clear. I'm brazilian so maybe there are a few mistakes.)

Answer 1

Make a passage with all the code and stuff: 

:: save-passage
Would you like to save the game? 

@@float:left;<<button "Yes">>
    <<run Save.slots.save(0)>>
<</button>>@@ \
@@float:right;<<button "No">>
    <<run Dialog.close()>>
<</button>>@@

In this example, I named the passage "save-passage". So my save link looks like this: 

<<button "Save">>
    <<script>>
        Dialog.setup("Save");
        Dialog.wiki(Story.get("save-passage").text);
        Dialog.open();
    <</script>>
<</button>>

 

Comments

Thank you! 

I've found this script used to restart the game, so I made my own based on that to save the game. I think I learned a lot from it.

<<script>>
Dialog.addClickHandler(
	jQuery('<a id="game-restart">Restart</a>').appendTo(output),
	null,
	function () {
		jQuery(Dialog.setup(L10n.get('restartTitle'), 'restart'))
			.append(
				  '<p>' + L10n.get('restartPrompt') + '</p><ul class="buttons">'
				+ '<li><button id="restart-ok">' + L10n.get(['restartOk', 'ok']) + '</button></li>'
				+ '<li><button id="restart-cancel" class="ui-close">' + L10n.get(['restartCancel', 'cancel']) + '</button></li>'
				+ '</ul>'
			)
			.find('#restart-ok')
				.ariaClick({ one : true }, function () {
					jQuery(document).one(':dialogclose', function () {
						Save.clear();
						Engine.restart();
					});
					Dialog.close();
				});
	}
);
<</script>>

 

But your solution suits me better since it looks easier and pretty straightforward.

Thanks again!