-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpreview.html
104 lines (95 loc) · 3.22 KB
/
preview.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Story Graph Previewer</title>
<script src="cytoscape.min.js"></script>
</head>
<body>
<div>
This page gives a graphical preview of the story graph described by <code>myStory.json</code>.
</div>
<pre id="logOutput"></pre>
<div id="graph" style="width: 640px; height: 480px; border: thin solid gray;"></div>
<pre id="details"></pre>
</body>
<script>
function log(msg) {
logOutput.innerHTML += msg + "\n";
}
log("Fetching JSON file...")
fetch("Duck-Duck-Game.json").then(
(response) => {
log("Parsing JSON file...");
return response.json();
}
).then(
(storyData) => {
log("Story data loaded.");
log("\n");
log("Story metadata:")
for (let key of ["Title", "Credits", "InitialLocation"]) {
log(`\t${key}: ${storyData[key]}`);
}
log("\n")
log("Story graph visualization:")
let elements = [];
let nodes = [];
let edges = []
for (let [key, location] of Object.entries(storyData.Locations)) {
nodes.push({ data: { id: key, name: location.Body } });
for (let choice of location.Choices || []) {
edges.push({ data: { source: key, target: choice.Target, id: key + ": " + choice.Text } });
}
}
let cy = cytoscape({
container: graph,
layout: {
name: 'breadthfirst'
},
elements: { nodes, edges },
});
cy.style([
{
selector: `[id="${storyData.InitialLocation}"]`,
style: {
'border-width': '10',
'border-color': 'lightblue'
}
},
{
selector: 'node',
style: {
'label': 'data(id)',
'text-valign': 'center'
}
},
{
selector: 'edge',
style: {
'width': 5,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'label': 'data(id)',
'font-size': '10px',
'text-rotation': 'autorotate'
}
},
]);
cy.on('mouseover', 'node', function (evt) {
details.innerHTML = storyData.Locations[this.id()].Body;
});
cy.on('mouseover', 'edge', function (evt) {
details.innerHTML = this.id();
});
cy.on('mouseout', function (evt) {
details.innerHTML = '';
});
}
).catch(reason => log(reason));
</script>
</html>