How to access sugarcube 2 variables using onmousemove?

pingguo

<span onmousemove='javascript:if(state.variables.debug) {Status_Page_Debug.style.visibility="visible"}'>\
<<checkbox "$debug" false true>> Debug\
</span>\

The error was "state is not defined"

Other Facts:
state.variables["debug"] was defined and working fine in the "Main Script" Passage.
$debug was defined and given value false in Passage StoryInit.
Status_Page_Debug was a <div> over-layer on the page that works if I hard-code it to show no-matter.

I wanted to change the variable $debug to control the debug console trigger on the fly.

So the question is, what went wrong?

TheMadExile

First issue. The state variable is a v1 legacy shim. You should be using the State variable.

Second issue. You cannot access SugarCube internals with an external invocation, which is what you get by attaching behavior to onmousemove. Try the following instead:

<span onmousemove='javascript:if(SugarCube.State.variables.debug){Status_Page_Debug.style.visibility="visible";}'>\
<label><<checkbox "$debug" false true>> Debug</label>\
</span>\
<<script>>$('#checkbox-debug').on('mouseover', )<</script>>\

I generally advise against using the SugarCube object to access the internals from external calls, as it only exists for debugging purposes, is subject to change at any time, and does not have full access. That said, since your code is for debugging purposes, I don't see what it would really hurt in this case.

Just for your edification, however, the correct way is something like the following:

<label><<checkbox "$debug" false true>> Debug</label>\
<<script>>
postrender['checkbox-debug'] = function (content, taskName) {
	delete postrender[taskName];

	$(content).find('#checkbox-debug').on('change', function () {
		if (State.variables.debug) {
			Status_Page_Debug.style.visibility = 'visible';
		}
	});
};
<</script>>\

Besides being an internal invocation, and thus able to fully access SugarCube's internals, it only updates the visibility of Status_Page_Debug on change, rather than on every single mouse move event like the onmousemove code does.

NOTE: The <label> is for accessibility—among other things, it makes it possible to toggle the checkbox by clicking the "Debug" text.

pingguo

Clean, clear and bright.

Advises on State, label do me well. SugarCube is undocumented, I get it. What is the use of

<<script>>$('#checkbox-debug').on('mouseover', )<</script>>\

?

Pre/Postrender functions are still a mystery to me. While I do write a lot of it, I never have the time to go to the bottom. Let me ask one stupid question, why

delete postrender[taskName];

?

$debug does a lot, such as showing the logical outcome of if then else, count loops, and much more. The onmouseover overlay is only a small part of it.

TheMadExile

pingguo wrote: »

[…] What is the use of

<<script>>$('#checkbox-debug').on('mouseover', )<</script>>\

?

Nothing. That shouldn't be there. Apparently, I forgot to delete that line.

pingguo wrote: »

[…] Let me ask one stupid question, why

delete postrender[taskName];

?

That line deletes the task, thus making it single use—i.e. the post render task will only be run for the passage within which it was created.

pingguo

I see. Mmm... I probably have little use of "delete" as my habit of coding. Anyway thank you for the answers. They are very very helpful.