Chapel's <<event>> macro seems to be malfunctioning

Hello all!

I stuck Chapel’s <<event>> macro in my game, and when using it in a specific way it only works on odd times you visit the passage (first time, third time, etc.). It doesn’t matter if you do anything, simply leaving and coming back will change it.

Here’s his minified Javascript which I’m using:

// events.min.js, for SugarCube 2, by Chapel
;Macro.add("trigger",{handler:function(){var t;return 2<this.args.length||0===this.args.length?this.error("incorrect number of arguments"):"string"!=typeof this.args[0]?this.error("first argument should be a string and a valid event type"):(t=this.args[0],void(1===this.args.length||this.args[1]&&"string"==typeof this.args[1]&&"document"===this.args[1].toLowerCase().trim()?$(document):$(this.args[1])).trigger(t))}}),Macro.add("event",{tags:["which"],handler:function(){var t,r,s=this.payload,e="",i="";return 2<this.args.length||0===this.args.length?this.error("incorrect number of arguments"):"string"!=typeof this.args[0]?this.error("first argument should be a string and a valid event type"):(2===this.args.length&&"string"==typeof this.args[1]&&(e=this.args[1]),t=this.args[0],void $(document).on(t,e,function(t){if(i=s[0].contents,1<s.length)for(r=1;r<s.length;r++)s[r].args.includes(t.which)&&(i+=s[r].contents);new Wikifier(null,i)}))}});
// end events.min.js

Here’s what I have in the testing passage:

<span id="a">$boot</span>\
[[test2]]
<span class="boot">replace</span>\
<<event "click" ".boot">>\
<<if ndef $boot or $boot is 1>>\
<<set $boot to 2>>\
<<replace "#a">>$boot<</replace>>\
<<else>>\
<<if $boot is 2>>\
<<set $boot to 1>>\
<<replace "#a">>$boot<</replace>>\
<</if>>\
<</if>>\
<</event>>\

(Incidentally, “boot” refers to the boot of a car you’re opening and closing. :wink:)

By “not working”, I mean that instead of changing 1 to 2, or 2 to 1, it’s replacing 1 with 1, or 2 with 2 (inspect shows that the span is in fact getting replaced, and if you leave and come back while $boot is still undefined it will replace it with 1 instead of 2 like it’s supposed to, and thus it continues replacing it with 1).

Now, if I use the <<link>> macro it works perfectly:

<span id="a">$boot</span>\
[[test2]]
<<link "replace">>\
<<if ndef $boot or $boot is 1>>\
<<set $boot to 2>>\
<<replace "#a">>$boot<</replace>>\
<<else>>\
<<if $boot is 2>>\
<<set $boot to 1>>\
<<replace "#a">>$boot<</replace>>\
<</if>>\
<</if>>\
<</link>>\

However I don’t know how to make a <span> into a <<link>> macro, which is why I’m trying to get <<event>> to work - and if I could use <<link>> on a <span> I would probably prefer <<event>> because it’s as simple as adding a class, and usually works. Though if I knew how to use <<link>> with a <span> I could just use it as a workaround for this particular place that <<event>> is having trouble with.

Thanks in advance superpeople!

I’m a bit confused here. Why not simply use a <<button>> macro? Unless I’m missing something, you’re really overcomplicating things.

This should work fine:

<span id="a">$boot</span>\
[[test2]]
<span class="boot"><<button "replace">>
	<<if $boot !== 2>>
		<<set $boot to 2>>
	<<else>>
		<<set $boot to 1>>
	<</if>>
	<<replace "#a">>$boot<</replace>>
<</button>></span>\

You can style the button to look however you want by putting the following inside your Stylesheet section:

.boot button {
	/* Replace this line with your CSS styling. */
}

Any CSS styling you do there for “.boot button” will affect just that one button because it’s inside the “boot” classed <span> element.

Any clickable elements should probably be links or buttons anyways, otherwise blind people or people with other accessibility problems may have difficulty finding/using them.

Hope that helps! :slight_smile:

Well, here’s one of the passages from the game as an example of how I’m using the <<event>> macro elsewhere - there are over thirty of these, so putting all their styling in the Stylesheet would mean a vast amount of switching back and forth during editing, and the minimal image format doesn’t work in the Stylesheet, among other things. But it could work for this spot that <<event>> is having trouble with.

<div class="wrap">\
[img[setup.ImagePath+"grndr.png"]]\
<p><a data-passage="desk" style="position: absolute; left: 0%; top: 44.88%; width: 11%; height: 50.75%; z-index: 2;"></a></p>\
<p><a data-passage="drawers" style="position: absolute; left: 86%; top: 83.63%; width: 11.58%; height: 16.13%; z-index: 2;"></a></p>\
<p><a data-passage="in" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 11%; z-index: 2;"></a></p>\
<p><span class="bt" style="position: absolute; left: 36.67%; top: 24.38%; width: 12%; height: 4.88%; z-index: 2;"></span></p>\
<span id="a"></span>\
<<if $bt is 1>><p><span style="position: absolute; left: 36.17%; top: 23.4%; width: 13.42%; height: 7%; z-index: 2;">[img[setup.ImagePath+"bt-gn.png"]]</span></p>\
<</if>>\
</div>\
<<event "click" ".bt">>\
<<set $bt to 1>>\
<<replace "#a">><p><span style="position: absolute; left: 36.17%; top: 23.4%; width: 13.42%; height: 7%; z-index: 2;">[img[setup.ImagePath+"bt-gn.png"]]</span></p>\
<</replace>>\
<</event>>\

The Stylesheet:

@import url('https://fonts.googleapis.com/css?family=Oranienbaum');


html {
  cursor: url("/home/lauser/Documents/Patrick/Projects/Miscellany/ISpyBabyDragons/ISpyBabyDragons/images/pencil-cursor-darker.ico"), default;
}
img {
  cursor: url("/home/lauser/Documents/Patrick/Projects/Miscellany/ISpyBabyDragons/ISpyBabyDragons/images/pencil-cursor-darker.ico"), default;
}
a {
  cursor: url("/home/lauser/Documents/Patrick/Projects/Miscellany/ISpyBabyDragons/ISpyBabyDragons/images/pencil-cursor-lightest.ico"), default;
}

#ui-bar {
	display: none;
}
#passages {
	max-width: 1200px;
}
#story {
	margin-left: 0;
	margin-right: 0;
  margin-top: 0;
  padding: 0;
}
img {
  max-width:100%;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  user-drag: none;
-webkit-user-drag: none;
  max-height: 100%;
}
.wrap {
    position: relative;
  max-height: 100%;
  line-height: 0px;
}
body {
  background-color: black;
  overflow: hidden;
  color: #d0d0d0;
  font-size: 47px;
  font-family: 'Oranienbaum', serif;
}
p {
  line-height: 0px;
}
a {
  color: #ffffff;
  font-size: 70px;
  text-decoration: none;
}
a:hover {
  color: #808080;
  text-decoration: none;
}
a.link-external::after {
	visibility: hidden;
	content: "";
}

And the JavaScript:

if (window.hasOwnProperty("storyFormat") || document.location.href.toLowerCase().includes("/tmp/")) {
	setup.Path = "/home/lauser/Documents/Patrick/Projects/Miscellany/ISpyBabyDragons/ISpyBabyDragons/";  
} else { 
	setup.Path = "";  
}
setup.ImagePath = setup.Path + "images/";
setup.SoundPath = setup.Path + "sounds/";

// events.min.js, for SugarCube 2, by Chapel
;Macro.add("trigger",{handler:function(){var t;return 2<this.args.length||0===this.args.length?this.error("incorrect number of arguments"):"string"!=typeof this.args[0]?this.error("first argument should be a string and a valid event type"):(t=this.args[0],void(1===this.args.length||this.args[1]&&"string"==typeof this.args[1]&&"document"===this.args[1].toLowerCase().trim()?$(document):$(this.args[1])).trigger(t))}}),Macro.add("event",{tags:["which"],handler:function(){var t,r,s=this.payload,e="",i="";return 2<this.args.length||0===this.args.length?this.error("incorrect number of arguments"):"string"!=typeof this.args[0]?this.error("first argument should be a string and a valid event type"):(2===this.args.length&&"string"==typeof this.args[1]&&(e=this.args[1]),t=this.args[0],void $(document).on(t,e,function(t){if(i=s[0].contents,1<s.length)for(r=1;r<s.length;r++)s[r].args.includes(t.which)&&(i+=s[r].contents);new Wikifier(null,i)}))}});
// end events.min.js

The idea of this passage is that you can pick up an object. It’s a game like the ones I’ve done before (point and click adventures). This one’s a remake of one I did with a vastly more complicated system which didn’t work as well: here’s the same passage from the old version, if it’s even readable at all:

<p>[img[https://lh3.googleusercontent.com/6iXKu4nxEvdgUFt9dJ-ukmawkHzE42_nqf5q8Cgs7G_xZlEVRRF51sSQC7yPhjTodbL3UMXOBbUvB1lq-j-GOEtgHR3SDcv7U1NISbdRNEg6VUfNcW6HWZPohkXnU3WmFFl_sZp3RWB5gz316aLPEWvdOEsALV9MXdmvNVbCh4cQXtB-56Jj636Md57F3eSUFXzTx3e-Qc3xmHV7cM8a49-v7E9gdfp1bq5g_wGQQrBGOVpYWW2vF4n65OGpWA4mTXvOzlO24wjOYgtJ_-XNL5NDjxKMB3dkaVNqjGZ75HnHXCsNEQ28o7LaLPx_GFk-tBlBLfzZDYghOUDT0d8wkMGG-3OzDKlZ7j8Mwdm7c722cBJy0ShOtfZIEeKm6-Rkq-XfuQ_Kr4wBIzjibD1ba_JMP1JXryh7tTeI3mWwxjkqkDYhusJr-J3NYIGz8h_k2WNeH2hiMWyaO9nu1fsG-P45qL4QR7HNt0IJraL-tbXzro-MFDk5bQQdd-AjkYQucy2KkVA0FaS7wVaCnpjv4vNQidNOLJrEPIaLKR_ADGJuDFyLVwNdQelbHfcqv1sYuQlfDCFeciLqU-qC36RqChf_zeqEwZ2tm7eqpC4=w1200-h127-no][i]]<div class="flex"><span>[img[https://lh3.googleusercontent.com/RYch1ybKTLWjtfjmENwDexkL9C70MhsRDIFHnpao59nzO6ivpuTS785rRwwx75g4JVpKxuijnJF7KLhEs6QeuElT09z6YoZUDqFRQnP_Xtsxt2jXullJZdeMDod3xFh4ZN_eo2o3AY6ofIg4AAddBFkahvGVDwdCwjSUhKa9aJOb1yQX4Rb1iSO4t2kwgQ82wq2oxvl81qRgBzf7N0NUfSMF_T6vHHFvTBup39ihV_G27nPpu435zqC1XKEcDNWPj75JI75LChDFeDcLsxrADaJk8lrb5sqgJrAHBiTOlDWWsmwDJz-dUAj3O7Qz7vgv04rdlXtJwy-FFXNe-xgkmdr418meUCwpkQabXVuY0TNicKD5Pvl56Ccc9Ujfv1TWXQkv5ZEpyQ2ZromPR4IegcRVEZv3FXK7UwkpPuhvWCWvGQlYjszeRHr7q-2QjCZQC4uiEgwVdQs-IxSu84OCcVJqLnQwvmsByHW77FRd0_gKLF-PbuxI53L3_68AStgfv-fvy2ySKeF-gcqBKyPd12phiKcT7rVm4_fdRqZu-PG34GW7kQDMQoi4pXPhL_XeGiLRyV-3LG7eJdhyEkAIOub5m11anxT0s2mxNuw=w439-h103-no]]</span><<if $battery is 1>><span>[img[https://lh3.googleusercontent.com/mzMfkT2da8Z0eCwUgzK1x9CgHHa4emD2qt2ZqshPnUJorPBRlfE2wQfYYYlw3ne3KWM24G7773NxvJLMpgQhYOOIaVIwb8pb5JsQ-dpIulv5DorDToQf4_2n7mNWqo91ekHEIAOUEuMlhV-c6rh0Q5y6AMmCtNyrC7fxmAsN84gLc477mNppVAui9wKd3HLoUDK36IfI614QMmwj1Wks-WFP0LCJhd8T6IqKNuj2qzR2a8TPvYvTdV3eoQtIhuz9qwqSUBo9bEiu79Za2erD_lP7JT4eiiCTg52qfTLNq-dTj2jwyy19VXSjTdYW8mJy4JLMhGSj1vH1gfZUtkXP2YF2VE66MQE6UIrcFVbvhOC_du_1ste4NKtTQ7VMy_MZqV8rlTAAjSveACa51tZj8hwRSbya2DbCdigbZ_nFpyKmU5BzmcgBOgs8-1xlCQKWFBTVaBWLUK0QAjUpRkWwPkaIDMbbiLX7x47CPNzJJxDk1ycd4dG3YUP71_5OS5l5KORZyfBtsL02-gbyd14qonuKvmqu4FgEnMbmMQ68o_7G3CWG3hYYKgi4rdlqf4zebbB_gE1ni6YFZtRkbSo-IWtYRLBjKl8TTDooEXI=w147-h103-no]]</span><<else>><<linkreplace "[img[https://lh3.googleusercontent.com/mtEwr-ssShAcoiJw6G4UNAHqEpC2g-Lt8vHRGSN-qcRnYmFu8NZPJvF9cA0HXGl6LCd1U70bri0wDWSYluY_6wRulBFN363AvepU7KexJmTy6I3FPKWyvMG61XrR5hSHJDa2QXTnSZ2jW9HrB5W17pT0XH7EYawiYZjc6l8g5OADUiPAmG7Q1-zjHesL43zxzw38prqMvMFHOTxRr79oHO7_Ms3A-0rKFkY5FalhBrqAUFIa6PSSIGHEvBF3PFrCQOa5Re4oSTP_1GkKmhFZ66kUyaeNf8dKwyGvJusSInVyPDevwcOxnVHsbx5SKy_tJBmOd-OPXSIc61EThBIZVWl3DrQZqluryhgmZVVSoAUZG0V5M6N9KgGtDdmDIIrhXAKDBu8_iiwJszcJZBV5Hc72_7izJNftLcUKaOJEY6SIJf1MP6rxSw0idXRpS29r29rES1iLvg3-t4B1q8xxaK3VLLJSX2cB3IVp1pPPWDr2ueNU6DbVqfyxhh69LTRnKMM8yMCfr-Any04FZxO-2iGJd-lhKKhOQrnpz9fT1w0l0B6YfZTnu5P5NwsSw4cQ0-GeNuAvCgrMDXPKcQJ3dUjJ2sKPzG3DSKVU4xU=w147-h103-no]]">><<set $inv += 1>><<switch random(3)>><<case 1>><<audio "p1" volume 0.3 play>><<case 2>><<audio "p2" volume 0.3 play>><<case 3>><<audio "p3" volume 0.3 play>><<default>><<audio "p4" volume 0.3 play>><</switch>><<include "grindg">><<set $battery to 1>><</linkreplace>><</if>><span>[img[https://lh3.googleusercontent.com/M7rvUEfyDlH6XlZTfNkpLffX0U28h_lQrTqI-XYoFuqtN8SjIA7bsJyTiQ5yW8CDSW7EfcemGrKn0IYpsEHRgS4dhpZdaVcCXDeNv-3UJUdWUpuiXDHQg-HY1o0xto7j8QUlWI8DEphsnwFcU2qSC1m401T0wq6EWWtmJ4VOXDesoxb6iMe_06o9292lz7Whzkg73VYjm7AU_XDvtYmXs1mTOtPgeOBjdF__yIMns3m213e4a3fp9JhF2lZHFqLG3HXUHkG1c2KhnXZFVcjCe56gc-8CNIURDDYW5pSV89jLZnCmUQhWFckL7i7oLZLBo1fmCM10EQ6NFu3ji4vPbvIWkJ-rSlgF97TRZz11jMngFdgtu7djTZYMT49fH3XfK8SN1NFNln2gTOGncbUsFJG1WUilBfIuMXUWCXpkrkbGDlcg_ffisoX08qQ3Q1Uqplit9-WySt67wjFxuvVfTrpbLz6BsGdO-Mhw0A1Px1w0bXANT4RMdNg8d4-gZs-3xGf4NENph5UhpGn8QVMKrKItPl8CBYOvG9COYana5nIVNL4k1AqrhW2-s2r2K2SLzO1Cf-l-PfocY--5xNhlu4tugzYTviWPJKEFAng=w614-h103-no]]</span></div>[img[https://lh3.googleusercontent.com/jmxGYJqTyGn84cf4ddFe-wAdPMXkmxHVPiP1BdELLQ513IDOMUSIpQsgz8y3m-AlqRGJXhcZ9w7MXOcnvxXmIKEy04bvTg76ZWUynfLo7iSeLhsz0tF6Pegj9TnjCyLQcymLpNvIqhf6x6KVgee-u6PNIzVvPI6Ett2sRP1Z8f-itkv9S_VrxQv1uhH7QWh8EtthEEHj9JzjEpS9IvzGx_VGVpim0RHgd_cPZ_uVVmysM9hJaTzNDs60lMB-kuaIdcLvyWdR7hrVylmFUTk3rYup7u9YDT6ymCQaaytYm75AlbwralMRqcACA8ch23GDG5vtxbk1INsl02Zn7klLMCt79fByoNTggfrSK9A3yHnkRXj99Mvs1Wwar63H2BBHEMSe3U0ZnBMhJSdOmXz4TX2zBb4HudodMxtT97Hn8z8ho-Lr75SiX7xHIH4K7tCsamsw8jp8SKd5G1cKQCbCH4Y368QWb9DWmcn9Zdo1xw4wU5UtF85rtTI-EmUHPGEI88fOlzGFNriWvmlDEo7IRY9l8F3ST5nnZ55iG12qWOdoXA4-DQHxx_K1fatH8_aJf_RvaYYN-p7shDC-uhSZeR4MBGLLOSLdTONLzcg=w1200-h122-no]]<div class="flex">[img[https://lh3.googleusercontent.com/1RyFKyVgbj2tRjVLogJBhFUDFK64bWaW7kgNdu9SzB5Of_N1JSWM4d0ZpdSHCSJgYVM4FxVJ2YZy-fw2LRNs96sHlYO7D2DAPgHQwG3CP9aTCE3oL9hQiYKBEtCbP-ukU7J2a8bgAyvU9nF6BK9yxlOSNTgrn6hsQRcm9g7_gefhuVzM1_zjutWJSdVBRL0V2VEU7b6ueX6pSswdfH7WXUfdM0y-R_Qf89tYsQXH23jbE8HMnq-7tSDLDA4xu61-IfZmG9wZzY4j1rBTD2EJNJSzbmyRKjzir0q0VHy7owwhAWsMQpYh7eoIrYGWKq-Q31VcEJLleYyxW3y_50HIIG6Bda0kkY758Bj9NVuZO_1LIlWT2kzirGGwE8dx8t_BggqXB84jJnBDBgvVfy3b9MRVDlA0JkpEHi5EUNVZtPBTtXwidGNA2txXoIKqZZoQinqkH6MrqwC8OS79LH2EfgcrHbUyyE8vr55LJ-Z1BUQQVw95GcZassV4M17VGMtGsmWn6dflY9Iy8PmBOtNOK4Wf_Qfa-QNSY_7iRrUwn852MDkHvoMBTjv6jsDABhofMQb2S-B2ip_cRY4LZrnSVZFkJl2ujfygLCz41_U=w130-h314-no][desk]]<span>[img[https://lh3.googleusercontent.com/7GsOFfNNUIQD4FdmNa9ti-5oQMQTZLcLpQ7LdikDk_RUvXKa38IbLeaUFauI7oVuzUQGkp_HUqXWNE0bPSkL9e7vJev2GoTXmdzNDwCtip5KCXLTWEI2sxikKtE1URStfnvANgLDY0yRfgjk_5VtuPNCVgx5GuLB-r0Gi1n7BOu7XJpiHjUCKSDf9g90mBKakxbEWuIfjgupXV07akixecbxnuuesrOdGkMtjH0wIYXpog576dNqbPdnM7k4i1NetoWy0gYSWRiRNFiOlBMb_F0I7EzpJGlNrFq3REo0gkVz8QFiveE9xfhtBWpzA70riIRdx9hkfKQ7MnLnBLTQBsQ5TzmEt6GuDv8EM_FWoqHpn8K8eVMANFK6poMwU1Fq6SWgYwBpPgSEb4WLC_B6AjHmspFNL9ACytsrNQnYxzMonPckscSbGtqI82w2u31jdm3FtCH0Dg700CC7kMeyTVH4SY2q2_oiG36945Rwaiz0uiu6ajh0cY19LLu6bSL3KzSkq4n0z5eNLAnjVFds_ZNltqIY7FfrFzm6nm8TMFqR1HYGisxfTZ6lLOGAz3dNF-LHQh2rBSyjH3HUKp1G7D9S2K7TAM_bQ23j61g=w1070-h314-no]]</span></div><div class="flex">[img[https://lh3.googleusercontent.com/H7vc3w4qXvyR45vA_W9RKG1vrQMKxoIKdvAmufUym6x6y8ZbQKD_Cxl8fcrG-4JxAP2KQNndwE4XxZxMOII1qoVwxI820aRg15BSfNf2fkM_9TQ5ItU6oO3ZZzR0OlulnP4M7L88Zcy-CDArVHp054hUy5Pfq4i42kpmu7Y73E0SgVUVi55S8B5rwhCnxUpGKkIZf5MGEStc-ZUUZowx6QmqQcZ5WaCJSy0ieVkOsUBTUb25avuQRjsEpL0BmQakamLpqm8D4vgfmZMu8LSXWUBMCqlt_8Gfp2ObPyOk5z9bNZZU-58gUUnFYOwTcgir889XUQMoHMulRZpNzl7PUaJ9HRC9KHAb8mJxpgf9NypVPvY-WIyAKfiLxeefipebSqRW48kNv1A1GM-Z_tw9GolObFpNmGNPRu7I8cTZIsKvcNpXguptN-n8phJ5MeUnNWMRGr9WJeqt1koLQonTuZYnBSAm8FjLVAnhQPbVCWJCf6sEf02O9iu_yBCvmDM5mgzHf8q_iKWVjwebls411zz6UhBDfyn2b0E_hLnOA0E-wz7BTJMPQltnH1-DwIBD9MNyilSREDSpABYlCP_uop7zU556w1X-EI4dVro=w130-h135-no][desk]]<span>[img[https://lh3.googleusercontent.com/DIRc5rUvqDJOFkBvV71YlGftiMjZJVn8tqoUdsgi-aFLZyt2pMKc4jl1s9bWM-vOWbKwF58zZEGex7B-FYqtvYN_6f7GL4myKy43Yx3xKcfyZ_Nz7qETDPGW9PgEpcno5PTKQhGoPO3WTp2EGWGvLsCAU-4sQvPRTsejCMd4FHUd04rYrDhLYS0PhQKWQuf4QFqg17VdywCjHfZAZq5vCzEFRmodCjtxlpO5IgvHp5y6QfAdZfZVIQ910LvFon2k2Q6AE-k6WszdAqVLjoCHSXJ5FDS0U3W_F-ubw9NO4D5HKMghzPsoWaUc0Ykbu56ML8cm5Np5EBaL643-n68dZidzUce1y7Y590T8lhzjSjjzYLJ4Byy0CcHMC6VL1_bqfJnSaspfPwkmhOFlSkMT0CGhI1xWqUMIN2VjkAYJvJIwA4N-Drg6Tp4T1jPwVrsGdXx09pOHW3SaTHKtLYnmKWCA2dVa5A5ioZhDaLOd5a0O7UWJfPiYvhYCBNIiwl77Nj5h2wFfrJ9iMf0eVMs3rwh32I5sG_DXl1r5GOGU1SieT2Px_E1b2JWBcz56m2KBaP3pmZ04P6b_wasf50R2kR9aOPnfc5bk-wlA7bY=w906-h135-no]]</span>[img[https://lh3.googleusercontent.com/4txFEB_BApCwS9K84TMMuZPLGgvh4lQHmpvVLULgzUzkkh5rEelbjYU8QbA4vqeqNqa7V0aZB2Hd167ctM7iCF39c48nm9wlVxBnjcIO8vvowAB-Fjhd_RlNQ7e4VxtVhoeE7C7f1t4C-NMDjsVBJfzczx9P5TvJC1OTie6QCp6lEYG819CGpZAya26ElfdH2RIFfXaQrCKBYykEl2socDcf9NSc-mGtJaauApi1nvrAXiVQ8JxZ2MeY4uzvIhWzMMH-OYuI2uvqktn2BMWiQZa9YkQ__YK44jA0GBnwh7xz2KTU6WgMj3tJb_0XVXKSdTLMIDtFYDeBSXB1GtkYoZDMO7ro6LSlEzrGYeD-E6S8BhtuuIPXpKcuTnwGYwD3D4iqczjw-v-zvpeoYMDPUePT97tAt-nqt5_Ph5vEhXATxc_YbiXuT917Ad4-uJaUx_i7bFIDNs1PLUqWr1r_jqya9ywXjAZWL3NaLv1wJZ55sJ0Iw4-O1n7jA1pTgq_cplnhdcrhzE3coUfEUEU-UgtaxTI0dRprRGYhIVogosLAG5ra65gRwJwx5TPe-dLHT9FkDPlpSLAt5LLfgKQlJ-mbuENeRqTIaQ0AZo8=w164-h135-no][drawers]]</div></p><<if $i neq 1>><<set $i to 1>><<audio "i1" volume 0 fadeoverto 3 1>><<audio "i2" volume 0 fadeoverto 3 1>><</if>><<if $n is 1>><<set $n to 0>><<audio "n1" volume 1 fadeoverto 3 0>><<audio "n2" volume 1 fadeoverto 3 0>><</if>><<silently>><<include "basketg">><<include "d6g">><<include "boot">><<include "carg">><</silently>>

:slightly_smiling_face:

Well, again, I strongly recommend against using spans as buttons because it makes your game inaccessible to people with some visual or physical handicaps.

Also, I can’t be exactly sure what you’re trying to do there, but if I had to guess, I’d say that that code isn’t going to work the way that you want anyways. Even if $bt is already set to 1, a player can still click within the “bt” span and a second “bt-gn.png” image will appear (directly on top of the other one). I’m guessing you don’t want/need that, right?

And for another thing, I don’t know why you’re putting elements within <p> (paragraph) elements when you’re using absolute positioning on the interior elements. You’re setting the left and top for the interior elements, so putting them inside of a paragraph doesn’t do anything to them, it just adds height to the <div> element. You don’t need any of those paragraph elements at all, and I’m guessing you set the line-height in .wrap to 0px to hide those unnecessary paragraph elements.

In other words, you could just do this:

<a data-passage="desk" style="position: absolute; left: 0%; top: 44.88%; width: 11%; height: 50.75%; z-index: 2;"></a>\
<a data-passage="drawers" style="position: absolute; left: 86%; top: 83.63%; width: 11.58%; height: 16.13%; z-index: 2;"></a>\
<a data-passage="in" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 11%; z-index: 2;"></a>\
<<if $bt is 1>>\
	<span style="position: absolute; left: 36.17%; top: 23.4%; width: 13.42%; height: 7%; z-index: 2;">[img[setup.ImagePath+"bt-gn.png"]]</span>\
<<else>>\
	<button class="invisiButton" style="position: absolute; left: 36.67%; top: 24.38%; width: 12%; height: 4.88%; z-index: 2;" onclick="$('#hidImg').removeClass('hidden'); SugarCube.State.variables.bt = 1;"><span id="hidImg" class="hidden imgContainer" style="display: flex; cursor: default">[img[setup.ImagePath+"example.png"]]</span></button>\
<</if>>\
<div class="wrap">\
[img[setup.ImagePath+"grndr.png"]]\
</div>\

and add this to your Stylesheet section:

.invisiButton {
	background-color: transparent;
	border: none;
	padding: 0px;
	transition: none;
}
.invisiButton:active, .invisiButton:focus, .invisiButton:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
.imgContainer {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: default;
}
.hidden {
	visibility: hidden;
}

and that would display the same as your code does, except the button would be clickable as you want, plus it would support people who have to use keyboard navigation. It also makes it a bit easier to see what is clickable, since it highlights it when you hover your mouse over it (modify the rgba(255, 255, 255, 0.2) part to make that look better, if needed).

It replaces your “bt” span with an actual button with an onclick event that unhides the hidden image element.

Simply open Notepad or some other text editor, copy all of the CSS there, and when you’re done, just copy all of that from Notepad to the Stylesheet section. I do this kind of thing all the time, it’s not that hard.

By “minimal image format” do you mean this: [img[setup.ImagePath+"bt-gn.png"]] ?

If so, it wouldn’t go in the stylesheet anyways, it would go inside one of the elements as I showed above.

Also, you’ll want to fix your CSS like this so that the cursor styling will work on other computers:

html, img {
	cursor: url("images/pencil-cursor-darker.ico"), url("/home/lauser/Documents/Patrick/Projects/Miscellany/ISpyBabyDragons/ISpyBabyDragons/images/pencil-cursor-darker.ico"), auto;
}
a {
	cursor: url("images/pencil-cursor-lightest.ico"), url("/home/lauser/Documents/Patrick/Projects/Miscellany/ISpyBabyDragons/ISpyBabyDragons/images/pencil-cursor-lightest.ico"), auto;
}

Hope that helps! :slight_smile:

EDIT: Added code to set $bt to 1 as well.

So you are trying to implement your own version of a HTML Image Map (<map>) element that contains a hotspot that updates the current page instead of causing a Passage Transition?

I haven’t really tried anything for non-visual aspects of my games since they’re pretty much image only, hardly any text at all. The inventory for example only shows images of the items you’ve collected.

Sorry for dropping a lot of confusing stuff you aren’t able to test! For some clarification, what I’m attempting is a remake of this game:
I Spy Baby Dragons
The main problem with it is that it takes an extremely long time to load. The method I’m using for the remake is identical to what I used in my newest game:
A Pilfering Pucks Problem
It worked so overwhelmingly well for that game, I really wanted to try one of my older games with it, and I’ve breezed through most of the passages already, and they work stupendously. :grin: It’s only the spot where the <<event>> macro stops working every other time that has messed up (and it seems that if it’s doing what it should then the <<event>> macro should do the same thing as the <<link>> or <<button>> macro).

About the paragraphs: I found out with previous games by trial and error that images don’t line up right using z-index unless you wrap the z-index 2 images in <p> and set p and .wrap to zero line-height. For instance, in the example you put together for me, though bt-gn.png has the same position given in the styling, it’s almost a centimetre below where it was directed to appear.
About the cursor css, I actually change it to upload it to Itch.io, it actually didn’t occur to me to put both in from the start! :face_with_hand_over_mouth: Thanks for pointing that out!

Right now I’m experimenting with using the <<link>> macro for the car boot. You can see the passage in the old version if you go to the desk with the bicycle gear and click on the old, white car somewhat up and leftish.

They don’t work the same way. The reason the <<event>> macro is failing is that it’s trying to set up an event on an element that doesn’t exist yet. On the other hand, the <<link>> and <<button>> macros don’t try to do that, which is why they work fine. Unless you change how you do things (or unless I’m missing something about how the macro is supposed to work), the <<event>> macro isn’t going to work.
 

I’m kind of fishing in the dark here. You’ll have to link me to a simple example showing your method working and my method not working so I can see the difference, because I don’t know what you’re referring to, and your method isn’t the right way to deal with that kind of problem. You could stick <p></p> inside the <div> in my code, and it would have the same effect (though you’d have to remove the imgContainer class as well).

Regardless, it should only take some minor CSS tweaking on your part to get my version aligned properly.
 

I can see it where?

I uploaded a test where you can check out what’s happening:
Test.zip (137.0 KB)
Basically it’s supposed to switch between 1 and 2 every time you click “replace”, and this works. But if you go elsewhere and come back, it still replaces the <span> (you can see this in inspect mode, and if you leave and come back while $boot is still undefined it will switch it to 1). If you leave and come back again it works normally. <<event>> works in all the other passages, it’s just where I’m having something switch back and forth that it doing the odd thing. Essentially what it’s doing is behaving as if each click fires the event twice; that seems to me the only way it could be set at 1, yet replace it with 1 as if it was set at 2.

I got screenshots of the image placement: first is the way it is now, basically making the battery disappear when you pick it up:
2FireShot Capture 003 - I Spy Baby Dragons -

Second is with the button example:
FireShot Capture 002 - I Spy Baby Dragons -

This is the way it is without line height 0 in .wrap:
3FireShot Capture 004 - I Spy Baby Dragons -

You were right about the paragraphs: looking back it seems that it worked in one case I used it, then at some point where it didn’t work I was trying some things and found that adding line height 0 to .wrap “made the paragraph method work” when in fact .wrap {line-height: 0px;} was the only thing that was working, and works the same without the paragraphs (so I took them out :slightly_smiling_face:).

Sorry, by old version I meant in the game I’m remaking, which I linked to in the last post. It uses a completely different method: chopping an image into multiple images, and replacing the image with the item on it when you click on it. It took vastly longer to make than the method I’m using now, and often looks really choppy whenever a passage loads or an item is picked up.

I got <<link>> to work! Here is the passage now:

<div class="wrap">\
<span style="position: absolute; left: 31.75%; top: 71.04%; width: 10.75%; height: 11.11%; z-index: -1;">[img[setup.ImagePath+"ml-itm.png"]]</span>\
[img[setup.ImagePath+"cr.png"]]\
<a data-passage="desk" style="position: absolute; left: 0%; top: 90.26%; width: 100%; height: 9.74%; z-index: 2;"></a>\
<span id="a"><<if ndef $boot or $boot is 1>><span style="position: absolute; left: 30.25%; top: 66.67%; width: 13.92%; height: 17.23%; z-index: 2;">[img[setup.ImagePath+"cr-cls.png"]]</span>\
<</if>>\
</span>\
<<link "">>\
<<if ndef $boot or $boot is 1>>\
<<set $boot to 2>>\
<<replace "#a">><</replace>>\
<<if $ml neq 1>><<replace "#b">><span class="ml" style="position: absolute; left: 31.75%; top: 71.04%; width: 10.75%; height: 11.11%; z-index: 2;">[img[setup.ImagePath+"ml-itm.png"]]</span>\
<</replace>>\
<</if>>\
<<else>>\
<<if $boot is 2>>\
<<set $boot to 1>>\
<<replace "#a">><span style="position: absolute; left: 30.25%; top: 66.67%; width: 13.92%; height: 17.23%; z-index: 2;">[img[setup.ImagePath+"cr-cls.png"]]</span>\
<</replace>>\
<<replace "#b">><</replace>>\
<</if>>\
<</if>>\
<</link>>\
<span id="b"></span>\
</div>\
<<event "click" ".ml">>\
<<set $ml to 1>>\
<<replace "#b">><</replace>>\
<</event>>\

I added this to the Stylesheet to make <<link>> the right size and position:

.macro-link {position: absolute; left: 30.25%; top: 66.67%; width: 13.92%; height: 17.23%; z-index: 2;}

For the future it would be nice to find a way to have different <<link>>s different, and a way to style them in the passage rather than in the Stylesheet, but it doesn’t matter for this project since I only have this one place where I want to cycle through things.

I don’t know why you sent me a link to that code, because, like I said earlier, “Unless you change how you do things (or unless I’m missing something about how the macro is supposed to work), the <<event>> macro isn’t going to work.” Also, I already gave you working code to do that.

The example code I wanted to see was the button code. Screenshots tell me almost nothing about what’s going on there, because I need to look at the HTML and CSS too to figure out what the differences are.

Also, I think you just need to reposition the button. You’re the one telling it where to display with the position information you’re giving it. So if you aren’t giving it the correct position information, it’s not really that surprising if it doesn’t appear positioned correctly.

OK, but unless $boot can be something other than undefined, 1, or 2, you don’t need the <<if $boot is 2>>\ line or it’s corresponding <</if>>\ line. That’s because, if it gets to the <<else>> code, the only thing $boot could be set to is 2.

You could simply manually create a link. For example:

<a data-passage="Next" class="link-internal" tabindex="0">Next</a>

would look and act the same as doing:

[[Next]]

So you’d just style that manually created link.

Hope that helps! :slight_smile:

I sent over the test I was doing since I thought I misled you into thinking <<event>> wasn’t changing the element, and thought if you saw the problem yourself you might see something I missed, like what was causing <<event>> to fire twice with each click, since that seems to be what it’s doing. But there seems to be two conversations now: what might be confusing Chapel’s poor macro when I try to use it for switching something back and forth, and the pros and cons of alternatives. Anywho, here’s the button test:
buttonTest.zip (1.0 MB)
I included the current form of the passage so you know what I’m wanting it to look like, and the button version. The main displacement was from the button being outside of .wrap; but also the clickable area is to be smaller than the image, which doesn’t seem to work with the button, as the button contains the image. In other passages there are several clickable areas that trigger the same event, so the button wouldn’t work there (once I figure out polygonal clickable areas those types of spots will be easier). But I changed the button to the same size as the image, and then it’s only offset when you first click on it, I’m not sure why; after you leave and come back the image is positioned the same as I have it now.

True, that. The second <<if>> was a leftover from the first attempt.

Where would you put the contents of the <<link>> macro? It appears in the html as:

<a class="link-internal macro-link" tabindex="0"></a>

So where would you put what is supposed to be done when the <<link>> macro is clicked, such as <<audio>> or <<replace>> macros?

All you need to do in the “invisiButton” is change “top: 24.4%;” to “top: 23.4%;” and in the Stylesheet change “rgba(255, 255, 255, 0.2);” to “transparent;”.

Like I said, super easy to fix.
 

Ah, I see what you were doing now and why that matters.
 

Or you could just make the image smaller. You don’t need all of that transparent area around the outside of the part you show.
 

If that’s what you want, then yeah, you want an image map like Greyelf suggested. For example:

<div class="wrap">\
	<img @src="setup.ImagePath+'grndr.png'" usemap="#image-map">\
	<map name="image-map">\
		<area shape="poly" onclick="$('#hidBatt').removeClass('hidden'); SugarCube.State.variables.bt = 1;" title="battery" alt="battery" coords="445,210,445,237,474,217,544,229,578,229,578,200,524,201,540,228">\
	</map>\
	<<if $bt === 2>>\
		<span style="position: absolute; left: 36.17%; top: 23.4%; width: 13.42%; height: 7%; z-index: 2;">[img[setup.ImagePath+"bt-gn.png"]]</span>\
	<<else>>\
		<img id="hidBatt" class="hidden" style="position: absolute; left: 36.17%; top: 23.4%; width: 13.42%; height: 7%; z-index: 2;" @src="setup.ImagePath+'bt-gn.png'">\
	<</if>>\
</div>\

You can use image map generator sites to create the map coordinates in polygonal shapes.
 

Just put that code inside of an onclick="$.wiki('...')" attribute, like this:

<a data-passage="Passage Name" class="link-internal" tabindex="0" onclick="$.wiki('<<set $bt=2>>')">Link Text</a>

Clicking that link will set $bt to 2 and then send you to the “Passage Name” passage. (See the jQuery.wiki() method for details.)

If you want to keep the code in there short and simple, you might want to just have it call a widget there.

Enjoy! :slight_smile:

1 Like

Ah, I missed a number. :sweat_smile:

I’ve used them before, but they aren’t responsive, and I must admit I’m still confused about how to apply responsive methods to Twine; I’ve found these options though: jQuery, SVG images.

I had to call a widget, yes, because of the quotation marks in the <<replace>> macro and elsewhere; it works like a charm (actually it works perfectly), and I can style individual <<link>>s, so I shall certainly enjoy!

You might want to take a look at image-map-resizer. To get that to work, just add that code and this:

$(document).on(":passagedisplay", function (event) {
	$("map").imageMapResize();
});
setTimeout(function () { $("map").imageMapResize(); }, 250);

to your JavaScript section.

That should do it.

Enjoy! :slight_smile:

Hello again! Another project intervened, but I’m back to working on this one, and was wondering how to add “usemap=”#map-name"" to [img[setup.ImagePath+“fgt-a1.png”]]. Should I add it as a different question? [Edit: no wait, sorry, that was in a previous post. :slight_smile:]

There isn’t an easy way to use the [img[...]] format with image maps, so you should just use the <img> element instead, as shown in my earlier responses here.

1 Like