Trouble using the Dialog API in a for macro (sugarcube) [solved]

Authoring Twine
1

Hello, i’m currently working on a page that show differents buildings. By clicking on the picture of each building, it open a pop up showing the stat of the building.

My problem is that while using a link macro with the script for the API seems to work i fail to show the good information in the dialog.

My code is:
The first window where i create my buildings

<<nobr>>
<<set _content to Story.get("Nom_building_pocket")>>
<<set _passageText to _content.text>>
<<set _splitcontent to _passageText.split("\n")>>
	
<<set $liste_batiments to []>>

<<for _i to 0; _i < _splitcontent.length; _i++>>

	<<set _nom to _splitcontent[_i]>>
	
	<<set $building to{
		"nom": _nom,
		"nb_customers": random(0,100),
		"income": random(100,1000),
		"img": "data\\images\\build_pocket\\"+_nom+".jpg"
	}>>
	<<set $liste_batiments.push($building) >>
<</for>>




[[test_batiment]]
<</nobr>>

then my page where i show the pictures:

<<nobr>>
<div class="visites">
<div class="tete_batiments">
<span style="margin-right:1vh;">Filter By:</span>

<<set _Options3 = { "type of building" : "2", "level of building" : "3", "other" : "4"}>>
<<listbox "$nombre_choix_max" >>
	<<optionsfrom _Options3>>
<</listbox>>

<<set _Options3 = { "alphabetical order" : "4", "number of customers" : "3", "income" : "2" ,  "other ?" : "6"}>>
<<listbox "$nombre_choix_max" >>
	<<optionsfrom _Options3>>
<</listbox>>
<<button "apply the filter">>
<</button>>
</div>



<hr style="border-top: 1px solid white;">

<<for _i to 0; _i < $liste_batiments.length; _i++>>
<<capture _i>>
  <div class="notif" onclick="window.test_dialog();">
	<div class="image">[img[$liste_batiments[_i].img]]       </div>
			  <div class="nom" >$liste_batiments[_i].nom
			  </div>					

  </div>
  <</capture>>
<</for>>
 </div>
 
 <</nobr>>

and the code in my dialog:

<<nobr>>
<div class="center_button">
	<strong> $liste_batiments[_i].nom </strong>
</div>
<br>
Nomber of customers: $liste_batiments[_i].nb_customers
<br>
Income: $liste_batiments[_i].income
<br>
<</nobr>>

The problem is by clicking on the picure it show $liste_batiments[_i].income and not the value of it. (i try and it work if i put a basic link behind the name , but i really want to be able to click on the picture not just a link) :

<<link "detail" >>
<<script>>
Dialog.setup("Information", "charsheet");
	Dialog.wiki(Story.get("detail_build").processText());
	Dialog.open();
<</script>>
<</link>>
2

You’ll need to change your code in the page where it shows the pictures to this:

	<<for _i to 0; _i < $liste_batiments.length; _i++>>
		<<capture _i>>
			<div class="notif" @onclick="'window.test_dialog(' + _i + ');'">
				<div class="image">[img[$liste_batiments[_i].img]]</div>
				<div class="nom" >$liste_batiments[_i].nom</div>
			</div>
		<</capture>>
	<</for>>

That uses the Attribute Directive (the @ in front of the onclick) to pass the value of _i to the test_dialog() function.

Then, just change the test_dialog() function to this:

window.test_dialog = function (i){
	State.temporary.i = i;
	Dialog.setup("Information", "charsheet");
	Dialog.wiki(Story.get("detail_build").processText());
	Dialog.open();
};

That will make sure that the value of _i is set properly before the dialog window is opened.

Enjoy! :slight_smile:

P.S. Instead of wrapping an entire passage inside of a <<nobr>> macro, you can just add a “nobr” tag to the passage.

3

thank you for your help, your code works perfectly fine.

I did try something that look like : onclick="‘window.test_dialog(’ + _i + ‘);’" but it did totally break my page. I suppose i was supposed to add a @ for everything to work fine (or i mess up while using the " and ’ ).

As for the nobr tag, i didn’t know something so useful exist, the automatic br of twine is quite problematic when using css.

4

Well, then if you want to do “nobr” for the whole story, you could just put this in your JavaScript section:

Config.passages.nobr = true;

(See here.)

Or you could try this instead:

Config.cleanupWikifierOutput = true;

which tries to make the story use <p> elements instead of <br> elements. (See here.)

Have fun! :wink: