A little previewer for a text-based adventure game.
It will render a directed graph for you, using d3.js and d3.layouts.force. The arrows (showing directed edges) were a little tricky. They are rendered given source and target coordinates with some basic trigonometry:
arrow.attr("transform", function(d) {
var p1 = [d.source.x,d.source.y],
p2 = [d.target.x,d.target.y],
ang = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]),
deg = ang * 180 / Math.PI,
dis = -8,
dx = dis * Math.cos(ang),
dy = dis * Math.sin(ang),
x = d.target.x + dx,
y = d.target.y + dy,
rotation = deg + 270;
return " translate(" + x + "," + y + ") rotate(" + rotation + ")";
});It looks like there is a much easier way to do this.
The format for the text is:
Title
*ID: A subject message.
A longer description,
spanning multiple lines.
>TARGET_ID: Target message.
>TARGET_ID: Target message.
*ID: [...]The example game used is below. Use the “Reset” link to edit it.
Directed layouts *A1: You wake up. You're in the public library. There are notes scattered all over the table. Something about force-directed layouts. >A2: Drink some water. *A2: You drink some water. It has a funny, bubblegum taste. >A3: Walk outside. >A4: Pick out the nearest book. *A3: You walk outside. The grackles, red-wing blackbirds, starlings, and Canada geese are making a racket. The sun hurts your eyes. >A6: Attempt to cross traffic. *A4: You pick up the nearest book. It’s called, “The Everything Bicycle Book.” >A5: Read page 55. >A1: Fall asleep. *A5: You turn to page 55. There’s a section on recumbent bikes. You are so inspired, you go out and buy one. You’re riding it around. The sun hurts your eyes. >A6: Attempt to cross traffic. *A6: You attempt to cross traffic, and are hit by a bus.