html5passage

src/js/rulesAssistantOptions.tw

@@ -11,20 +11,14 @@ window.rulesAssistantOptions = (function() {
 	let V
 	let r = ""
 
-	function rulesAssistantOptions() {
+	function rulesAssistantOptions(element) {
 		V = State.variables
 		V.nextButton = "Back to Main"
 		V.nextLink = "Main"
 		V.returnTo = "Main"
 		V.showEncyclopedia = 1
 		V.encyclopedia = "Personal Assistant"
-		
-		let tmp = document.createElement("div")
-		tmp.classList.add("passage")
-		tmp.classList.add("rules-assistant-options")
-		document.getElementById("passages").appendChild(tmp)
-
-		const root = new Root(tmp)
+		const root = new Root(element)
 	}
 
 	function onreturn(e, cb) {

src/js/utilJS.tw

@@ -518,8 +518,19 @@ window.generateNewID = function generateNewID() {
 	return randint + timestamp.toString(36);
 };
 
-window.arraySwap(array, a, b) {
+window.arraySwap = function arraySwap(array, a, b) {
 	const tmp = array[a];
 	array[b] = array[a];
 	array[a] = tmp;
 };
+
+// circumvents sugarcube, allowing a plain HTML5 UI within it
+window.html5passage = function html5passage(passage_function) {
+	$(document).one(':passagedisplay', ev => {
+		const element = document.createElement("div");
+		element.classList.add("passage");
+		document.getElementById("passages").appendChild(element);
+		passage_function(element);
+		$(document).off(':passagedisplay');
+	});
+};

src/uncategorized/rulesAssistant.tw

 :: Rules Assistant [nobr]
 
-<<script>>$(document).one(':passagedisplay', ev => { rulesAssistantOptions(); $(document).off(':passagedisplay') })<</script>>
+<<script>>html5passage(rulesAssistantOptions)<</script>>
 /*
 <<set $nextButton = "Back to Main", $nextLink = "Main", $returnTo = "Main">>
 <<set $showEncyclopedia = 1, $encyclopedia = "Personal Assistant">>