-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (127 loc) · 4.14 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<head>
<!-- Simple Styling -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
/>
<!-- Milligram CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
<!-- Gets the logic behind the engine -->
<script src="https://random-tables.netlify.app/logic.js"></script>
</head>
<body class="container">
<h2>Example Web Based Random Generation</h2>
<h3 id="status">Getting Table Data...</h3>
<label>Weather:</label>
<input disabled id="nature-table-result" />
<button id="trigger-nature-table">Random Weather</button>
<h4>Dwarf</h4>
<button id="trigger-dwarf-male">New Dwarf Male</button>
<br />
<div>
<label>Name</label>
<input type="text" disabled id="input-name" />
</div>
<div>
<label>Age</label>
<input type="text" disabled id="input-age" />
</div>
<div>
<textarea
type="text"
disabled
id="input-desc"
rows="5"
cols="60"
></textarea>
</div>
<div>
<label style="display: block">Personality</label>
<textarea
type="text"
disabled
id="input-pers"
rows="3"
cols="60"
></textarea>
</div>
<div>
<label style="display: block">Motivation</label>
<textarea
type="text"
disabled
id="input-motivations"
rows="2"
cols="60"
></textarea>
</div>
<div>
<label style="display: block">Family</label>
<textarea
type="text"
disabled
id="input-family"
rows="2"
cols="60"
></textarea>
</div>
<div>
<label style="display: block">Past</label>
<textarea
type="text"
disabled
id="input-past"
rows="3"
cols="60"
></textarea>
</div>
</body>
<script>
console.log("window.document.RandomTables", window.document.RandomTables);
// first we connect to the logic that we linked to in <head>
const TableGen = window.document.RandomTables;
// First we create a function we will trigger once the Tables have been downloaded
function onTablesDownloaded() {
// We'll first hide the 'Getting Table Data...' message
document.getElementById("status").style.display = "none";
// And show the button that allows people to run the generator
document.getElementById("trigger-nature-table").style.display = "block";
}
// now we can use a function that it has to get data from JSON (a data format) via URLs
// This function can be given 1-3 arguements, the first must be an array of URLs (denoted by being wrapped with square brackets [])
// The second argument will be a function that is triggered once all the data is downloaded
TableGen.getFromURLArray(
[
"https://random-tables.netlify.app/utility-nature.json",
"https://random-tables.netlify.app/npc-fantasy.json",
],
onTablesDownloaded
);
// setup logic for result of clicking buttons
// See --- for what calls are available for each table
document.getElementById("trigger-nature-table").onclick = function () {
TableGen.getCall("utility-nature/weather/weather").then(function (
tableResult
) {
// As this is a 'Utility' table it only returns a string
document.getElementById("nature-table-result").value = tableResult;
});
};
document.getElementById("trigger-dwarf-male").onclick = function () {
TableGen.getCall("npc-fantasy/dwarf/male").then(function (tableResult) {
console.log("tableResult", tableResult);
// Full tables return an Array, you can print the result to the console to examine the returned data before presenting it on the page
document.getElementById("input-name").value = tableResult[0].value;
document.getElementById("input-age").value = tableResult[1].value;
document.getElementById("input-desc").value = tableResult[2].value;
document.getElementById("input-pers").value = tableResult[3].value;
document.getElementById("input-motivations").value = tableResult[4].value;
document.getElementById("input-family").value = tableResult[5].value;
document.getElementById("input-past").value = tableResult[6].value;
});
};
</script>