It looks like you're new here. If you want to get involved, click one of these buttons!
// Build the compass line
window.compass_line = function(link, width, height, span, r, c) {
var image_filename = "assets/img/compass/";
var hover_filename = "assets/img/compass/";
if (link) {
image_filename += "gold_r" + r + "_c" + c + ".png";
hover_filename += "pink_r" + r + "_c" + c + ".png";
} else {
image_filename += "compass_r" + r + "_c" + c + ".png";
hover_filename += "compass_r" + r + "_c" + c + ".png";
}
if (link)
return "<td " + span + "><a data-passage='" + link + "' class='link-internal'><img src='" + image_filename + "' height='" + height + "' width='" + width + "'></a></td>";
else
return "<td " + span + "><img src='" + image_filename + "' height='" + height + "' width='" + width + "'></td>";
}
// Pass the room name-id as the only argument
macros.add("compass", {
version: { major: 1, minor: 0, revision: 0},
handler: function() {
if (this.args.length != 1)
return this.error("Compass requires exactly 1 parameter, the room object name.");
var room = this.args[0];
if (typeof room != "object")
room = setup[this.args[0]];
var compass = ["<html><table id='compass'>"];
compass.push("<tr>");
compass.push(compass_line(room.cnx[0], 68, 63, "", 1, 1));
compass.push(compass_line(room.cnx[1], 65, 63, "colspan='2'", 1, 2));
compass.push(compass_line(room.cnx[2], 67, 63, "", 1, 4));
compass.push("</tr>");
compass.push("<tr>");
compass.push(compass_line(room.cnx[3], 68, 75, "rowspan='2'", 2, 1));
compass.push(compass_line(room.cnx[8], 32, 37, "", 2, 2));
compass.push(compass_line(room.cnx[10], 33, 37, "", 2, 3));
compass.push(compass_line(room.cnx[4], 67, 75, "rowspan='2'", 2, 4));
compass.push("</tr>");
compass.push("<tr>");
compass.push(compass_line(room.cnx[9], 32, 38, "", 3, 2));
compass.push(compass_line(room.cnx[11], 33, 38, "", 3, 3));
compass.push("</tr>");
compass.push("<tr>");
compass.push(compass_line(room.cnx[5], 68, 62, "", 4, 1));
compass.push(compass_line(room.cnx[6], 65, 62, "colspan='2'", 4,2));
compass.push(compass_line(room.cnx[7], 67, 62, "", 4, 4));
compass.push("</tr>");
compass.push("</table></html>");
new Wikifier(this.output, compass.join(""));
}
});
The end result is that there are, for this example, 2 active links. One to the east and one to the west. It correctly chooses the "gold" direction parts, but clicking on them doesn't work. I ripped off the link properties from real links produced from standard twine style links (double square braces). So, it should be correct, unless there is a subtle error that my tired eyes are overlooking.
Comments
The function within Wikifier that builds internal links is named createInternalLink and one of the extra things it does that you didn't when you created your 'a' tags is that it attaches an onClick event handler to the tag. This is why your 'a' tags are not doing anything when you click on them.
Do you have access to the Twine source? if so look for the function within the /targets/engine.js file
You may? be able to call the function from within your own source code.
greyelf is correct about why it's not working. You'll need to post-process the Wikifier's output buffer to add click handlers to the <a> elements.
For example:
[list type=decimal]
I added another class, link-compass, to the <a> tags in compass_line() and added the post-processing code you'll likely need after the Wikifier call in handler().
I moved the compass_line() function into the macro's handler(). If you're not using the compass_line() function outside of the macro, then you should simply declare it as a sub-function of the macro's handler() (if you are using it elsewhere, then you can just move it back out). Also, you're not using the hover_filename anywhere within the function at the moment.
SugarCube is distributed as a single file and does not use /targets/engine.js (IIRC, the parameter lists between the vanilla 1.4+ version and SugarCube's vary, so looking at the vanilla source is less helpful than looking at the SugarCube source). Regardless, that won't work anyway, since you cannot join the returned element object with the text which is being fed into the Wikifier.
As for the hovers, I haven't messed with that part. I wanted to get the links to work before jumping too far ahead of myself.