-
Notifications
You must be signed in to change notification settings - Fork 1
/
tracery.html
98 lines (98 loc) · 3.96 KB
/
tracery.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
<html>
<head>
<title>Bracery</title>
</head>
<body style="display: flex; flex-direction: row; justify-content: space-around;">
<div style="width: 600px; background-color: #eee; padding: 4px;">
<h1><a href="https://github.com/ihh/bracery">Bracery</a></h1>
<p>
Symbol definitions (<a href="http://tracery.io/">Tracery</a> JSON format):
<div>
<textarea id="defs" style="width: 100%; min-height: 10em; resize: vertical;">
{"name": ["Arjun","Yuuma","Darcy","Mia","Chiaki","Izzi","Azra","Lina"],
"animal": ["unicorn","raven","sparrow","scorpion","coyote","eagle","owl","lizard","zebra","duck","kitten"],
"mood": ["vexed","indignant","impassioned","wistful","astute","courteous"],
"story": ["#hero# traveled with her pet #heroPet#. #hero# was never #mood#, for the #heroPet# was always too #mood#."],
"origin": ["#[hero:#name#][heroPet:#animal#]story#"]}
</textarea>
</div>
<br><p>
Text to be expanded (<a href="#" id="erase">erase</a> for default):
<div>
<textarea id="eval" style="width: 100%; resize: vertical;">#origin# And they had fun... until they met #name#.</textarea>
</div>
<br><p>
Expansion (<a id="reroll" href="#">re-roll</a>):
<div id="expansion" style="width: 100%; background-color: lightgray;">
</div>
<div id="showadvancedcontainer">
<br><p>
<a href="#" id="showadvanced">Advanced</a>
</div>
<div id="advanced" style="display: none;">
<br><p>
Symbol definitions (Bracery plain text format):
<div>
<textarea id="textdefs" style="width: 100%; min-height: 20em; resize: vertical;">
</textarea>
</div>
<br><p>
Configuration:
<div>
<textarea id="config" style="width: 100%;">{"maxDepth":100,"maxRecursion":3}</textarea>
</div>
<br><p>
Parse tree:
<div id="tree">
</div>
</div>
<!-- bracery -->
<script src="bracery.js"></script>
<!-- hook up the UI -->
<script>
var defsElement = document.getElementById('defs')
var textdefsElement = document.getElementById('textdefs')
var evalElement = document.getElementById('eval')
var eraseElement = document.getElementById('erase')
var rerollElement = document.getElementById('reroll')
var expElement = document.getElementById('expansion')
var configElement = document.getElementById('config')
var treeElement = document.getElementById('tree')
var showElement = document.getElementById('showadvanced')
var showContainer = document.getElementById('showadvancedcontainer')
var advElement = document.getElementById('advanced')
function show (expansion) {
expElement.innerText = expansion.text
treeElement.innerText = JSON.stringify (expansion.tree)
}
function updatedTextDefs() {
defsElement.value = JSON.stringify (bracery.ParseTree.parseTextDefs (textdefsElement.value), null, 2)
update()
}
function update (evt) {
try {
var defs = defsElement.value.match(/\S/) ? JSON.parse(defsElement.value) : {}
var text = evalElement.value.match(/\S/) ? evalElement.value : ''
var config = configElement.value.match(/\S/) ? JSON.parse(configElement.value) : {}
var b = new bracery.Bracery (defs)
if (evt)
textdefsElement.value = b.toText()
evalElement.placeholder = '#' + b.getDefaultSymbol() + '#'
show (b.expand (text, config))
} catch (e) {
expElement.innerText = e
}
}
textdefsElement.addEventListener ('keyup', updatedTextDefs)
defsElement.addEventListener ('keyup', update)
evalElement.addEventListener ('keyup', update)
configElement.addEventListener ('keyup', update)
expElement.addEventListener ('click', update)
eraseElement.addEventListener ('click', function (evt) { evt.preventDefault(); evalElement.value = ''; update() })
rerollElement.addEventListener ('click', function (evt) { evt.preventDefault(); update() })
showElement.addEventListener ('click', function (evt) { evt.preventDefault(); showContainer.remove(); advElement.style = '' })
update (true)
</script>
</div>
</body>
</html>