Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Manually created internal links being ignored
First off, I'm using SugarCube 3025 and twee 1.4
OK, so I'm trying to build a compass so that you can click N, E, NW, etc. It's old ugly table based html crap that Fireworks produces, but I've cleaned it up somewhat using CSS, and built a macro to work the magic of producing the HTML table. It all works great....except, the links don't work.
Here is my code, in case you can discern anything from this madness:
Any thoughts on what I'm doing wrong? Once I get this done, I'll FINALLY have my inventory/room stuff working...phew!
OK, so I'm trying to build a compass so that you can click N, E, NW, etc. It's old ugly table based html crap that Fireworks produces, but I've cleaned it up somewhat using CSS, and built a macro to work the magic of producing the HTML table. It all works great....except, the links don't work.
Here is my code, in case you can discern anything from this madness:
// 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(""));
}
});
Any thoughts on what I'm doing wrong? Once I get this done, I'll FINALLY have my inventory/room stuff working...phew!
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.