-
Notifications
You must be signed in to change notification settings - Fork 56
Expand file tree
/
Copy pathindex.html
More file actions
300 lines (267 loc) · 17.7 KB
/
Copy pathindex.html
File metadata and controls
300 lines (267 loc) · 17.7 KB
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Auto Roll Tables: hundreds of random tables for tabletop RPGs. Roll up NPCs, locations, items, monsters and plots in a click.">
<meta name="theme-color" content="#131d25">
<title>autorolltables.github.io</title>
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/d20-icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="img/d20-icon-512.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/app.css?v=17">
<script>
// apply the saved theme before first paint so there is no flash
(function () {
try {
var t = localStorage.getItem('art:theme');
document.documentElement.dataset.theme = t === 'light' ? 'light' : 'dark';
if (t === 'light') {
var m = document.querySelector('meta[name="theme-color"]');
if (m) m.content = '#e1e9ef';
}
} catch (e) {}
})();
</script>
<script src="js/roll_menu.js"></script>
<script src="js/roll_dungeons.js"></script>
<script src="js/roll_factions.js"></script>
<script src="js/roll_food.js"></script>
<script src="js/roll_magic.js"></script>
<script src="js/roll_monsters.js"></script>
<script src="js/roll_npcs.js"></script>
<script src="js/roll_objects.js"></script>
<script src="js/roll_plots.js"></script>
<script src="js/roll_settlements.js"></script>
<script src="js/roll_wilderness.js"></script>
<script src="js/roll_subrolls.js"></script>
</head>
<body>
<div class="bgimage">
<img src="includes/dndlogo1.png" alt="">
</div>
<div id="app">
<aside id="sidebar">
<div class="sidebar-head">
<img class="logo" src="img/d20-icon-192.png" alt="" width="30" height="30">
<span class="title">Auto Roll Tables</span>
<button class="btn icon-btn ghost collapse-btn" id="collapse-btn" title="Collapse sidebar" aria-label="Collapse sidebar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6 L9 12 L15 18"/></svg>
</button>
</div>
<nav id="nav" aria-label="Table categories"></nav>
<div class="sidebar-foot" id="sidebar-foot"></div>
</aside>
<main id="main" tabindex="-1">
<div class="mobile-brand">
<img src="img/d20-icon-192.png" alt="" width="26" height="26">
<span class="title">Auto Roll Tables</span>
</div>
<div class="tool-header">
<h1 id="view-title">All</h1>
<span class="sub" id="view-sub"></span>
<div class="header-actions" id="view-actions">
<button type="button" class="btn small primary new-custom-table" id="new-custom-table" hidden>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5 v14 M5 12 h14"/></svg>
New custom table
</button>
</div>
</div>
<!-- ============ Tables ============ -->
<section class="view" id="view-tables">
<div class="roll-layout">
<div class="pane">
<div class="pane-head">
<div class="filter-wrap">
<svg class="ic-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20 L16.2 16.2"/></svg>
<input type="text" id="filter" placeholder="Filter tables..." aria-label="Filter tables" autocomplete="off" spellcheck="false">
<button type="button" id="filter-clear" title="Clear filter" aria-label="Clear filter">×</button>
</div>
</div>
<div class="pane-body">
<div id="left-display-list"></div>
</div>
</div>
<div class="pane">
<div class="pane-head">
<div class="result-tabs">
<button type="button" class="result-tab active" id="current-roll-tab">Current Roll</button>
<button type="button" class="result-tab" id="history-roll-tab">History</button>
</div>
<button type="button" class="btn small ghost" id="expand-history-tab" title="Expand all">Expand</button>
<button type="button" class="btn small ghost" id="collapse-history-tab" title="Collapse all">Collapse</button>
<button type="button" class="btn small ghost" id="clear-history-roll-tab" title="Clear history">Clear</button>
<button type="button" class="btn small current-copy-button" title="Copy the current roll">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15 H4 a1 1 0 0 1-1-1 V4 a1 1 0 0 1 1-1 h10 a1 1 0 0 1 1 1 v1"/></svg>
Copy
</button>
<button type="button" class="btn small history-copy-button" title="Copy the whole history">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15 H4 a1 1 0 0 1-1-1 V4 a1 1 0 0 1 1-1 h10 a1 1 0 0 1 1 1 v1"/></svg>
Copy all
</button>
</div>
<div class="pane-body">
<div id="rightview-current-display" class="rightview"></div>
<div id="rightview-history-display" class="rightview"></div>
</div>
</div>
</div>
<!-- plain-text mirrors used as the clipboard source -->
<textarea id="rightview-current" class="current-textarea display" rows="19" spellcheck="false" tabindex="-1" aria-hidden="true"></textarea>
<textarea id="rightview-history" class="history-textarea display" rows="19" spellcheck="false" tabindex="-1" aria-hidden="true"></textarea>
</section>
<!-- ============ Settings ============ -->
<section class="view settings-view" id="view-settings" hidden>
<div class="grid-2">
<div class="card">
<h2>Appearance</h2>
<div class="field">
<span>Theme</span>
<div class="segmented" id="set-theme" role="group" aria-label="Theme">
<button type="button" class="seg" data-value="dark" aria-pressed="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5 A8.5 8.5 0 0 1 9.5 4 a8.5 8.5 0 1 0 10.5 10.5 Z"/></svg>
Dark
</button>
<button type="button" class="seg" data-value="light" aria-pressed="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5 v2.2 M12 19.3 v2.2 M2.5 12 h2.2 M19.3 12 h2.2 M5.2 5.2 l1.6 1.6 M17.2 17.2 l1.6 1.6 M18.8 5.2 l-1.6 1.6 M6.8 17.2 l-1.6 1.6"/></svg>
Light
</button>
</div>
</div>
<div class="field">
<span>Category switching</span>
<div class="segmented" id="set-navmode" role="group" aria-label="Category switching">
<button type="button" class="seg" data-value="hover" aria-pressed="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 11 V5.5 a1.5 1.5 0 0 1 3 0 V11 m0-1.5 a1.5 1.5 0 0 1 3 0 V11 m0-1 a1.5 1.5 0 0 1 3 0 v4.5 a6 6 0 0 1-6 6 h-1 a6 6 0 0 1-5-2.7 l-2-3 a1.6 1.6 0 0 1 2.5-2 L9 14.5"/></svg>
Hover
</button>
<button type="button" class="seg" data-value="click" aria-pressed="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5 L18.5 10 l-5.6 1.9 L10.6 17.5 Z M13.5 13.5 L19 19"/></svg>
Click
</button>
</div>
</div>
<p class="small faint" style="margin-top:10px">With hover, resting the pointer on a category in the left nav opens it without clicking. Hover is the default.</p>
</div>
<div class="card">
<h2>Favorites & custom tables</h2>
<p class="small muted">Star any table to pin it to the Favorites category. You can also write your own: open <a href="#/Favorites">Favorites</a> and choose <b>New custom table</b> to add a title and a list of results.</p>
<p class="small muted" id="set-fav-count">No tables starred.</p>
<div class="btn-row">
<button type="button" class="btn small primary new-custom-table">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5 v14 M5 12 h14"/></svg>
New custom table
</button>
<button type="button" class="btn small" id="set-clear-favorites">Clear all favorites</button>
<button type="button" class="btn small" id="set-clear-customs">Clear all custom tables</button>
</div>
<p class="small faint" style="margin-top:10px">The two are cleared separately, so clearing favorites leaves your custom tables alone. Custom tables are the ones you wrote, and clearing them cannot be undone, so that button asks twice. A single table can also be removed from its own edit dialog.</p>
</div>
<div class="card">
<h2>Backup & transfer</h2>
<p class="small muted">Everything lives in this browser, so it is worth exporting a copy now and then, or to move to another device. The file holds your starred favorites, your custom tables and the current roll history.</p>
<p class="small muted">Importing <b>merges</b> a file into what is already here, so nothing you have now is removed. Favorites and custom tables you already have are not duplicated; history entries are always added to the end of the list.</p>
<div class="btn-row">
<button type="button" class="btn primary" id="set-export">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 v12 M8 11 l4 4 4-4 M4 17 v2 a2 2 0 0 0 2 2 h12 a2 2 0 0 0 2-2 v-2"/></svg>
Export
</button>
<button type="button" class="btn" id="set-import">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15 V3 M8 7 l4-4 4 4 M4 17 v2 a2 2 0 0 0 2 2 h12 a2 2 0 0 0 2-2 v-2"/></svg>
Import...
</button>
<input type="file" id="set-import-file" accept=".json,application/json" hidden>
</div>
<p class="small muted" id="set-backup-status" role="status" style="margin-top:10px"></p>
</div>
<div class="card">
<h2>More tools</h2>
<p class="small muted">Other generators that live alongside the roll tables.</p>
<p class="small"><a href="hex-map-generator/hex_map_generator.html">Hex Map Generator</a> · <a href="region-map-generator/index.html">Region Map Generator</a></p>
</div>
<div class="card">
<h2>About</h2>
<p class="small muted">Auto Roll Tables is a free collection of random tables for tabletop RPGs. Everything runs in your browser: there is no account, no server and no tracking, and your favorites and settings never leave this device.</p>
<p class="small muted">Developed by <a href="https://github.com/dangeratio" target="_blank" rel="noopener">dangeratio</a>. Report an issue on <a href="https://github.com/autorolltables/autorolltables.github.io/issues/new" target="_blank" rel="noopener">GitHub</a> or <a href="https://www.reddit.com/message/compose/?to=dangeratio" target="_blank" rel="noopener">Reddit</a>.</p>
</div>
<div class="card" style="grid-column: 1 / -1">
<h2>Attribution</h2>
<p class="small muted">The roll tables collected here were written and shared by the tabletop community. Enormous thanks to <b>OrkishBlade</b> and everyone at <a href="https://www.reddit.com/r/BehindTheTables/" target="_blank" rel="noopener">/r/BehindTheTables</a>, whose tables make up the bulk of this site.</p>
<h3>Table authors</h3>
<p class="attrib-names">OrkishBlade · famoushippopotamus · Joxxill · Minitaz2001 · TuesdayTastic · micka190 · InternetLoveMachine · Burning_Titan · _Auto_ · Mimir-ion · Blk4ce · VD-Hawkin · Frank_Isaacs · charliedude · V-Num · Trinculoisdead · LinedWithEyes · rolls_for_initiative · lotrein · maladroitthief · LaserPoweredDeviltry · skywier · BornToDoStuf · captainfashion · olirant · Burgerkrieg</p>
<h3>Dungeon terrain tables</h3>
<p class="small muted">The hex map generator's terrain progression comes from Appendix B of the 1st edition <i>Dungeon Masters Guide</i> by Gary Gygax, via <a href="https://www.reddit.com/r/DnDBehindTheScreen/comments/4zqe25/stolen_tables_from_gygax/" target="_blank" rel="noopener">this write-up</a>.</p>
<h3>Region map generator</h3>
<p class="small muted">Built on the fantasy map generator by Martin O'Leary (<a href="https://mewo2.com/notes/terrain/" target="_blank" rel="noopener">mewo2</a>), used under the MIT license.</p>
<h3>Reference data</h3>
<p class="small muted">Reference material is drawn from the System Reference Document 5.1 by Wizards of the Coast LLC, available under the <a href="license.html">Open Gaming License</a>. Auto Roll Tables is unofficial fan content and is not affiliated with or endorsed by Wizards of the Coast.</p>
<h3>Software</h3>
<p class="small muted">Application code is open source on <a href="https://github.com/autorolltables/autorolltables.github.io" target="_blank" rel="noopener">GitHub</a>. Built with <a href="https://jquery.com" target="_blank" rel="noopener">jQuery</a>; the hex map generator uses <a href="https://ocanvas.org" target="_blank" rel="noopener">oCanvas</a>.</p>
<p class="small faint" style="margin-top:12px">See also the <a href="credits.html">credits</a> and <a href="changelog.html">changelog</a> pages.</p>
</div>
</div>
</section>
<footer class="page-foot">
Created by <a href="https://github.com/dangeratio" target="_blank" rel="noopener">dangeratio</a>
<span class="sep">|</span> report issues at <a href="https://github.com/autorolltables/autorolltables.github.io/issues" target="_blank" rel="noopener">github</a>
<span class="sep">|</span> <a href="#/settings">sources & attribution</a>
</footer>
</main>
</div>
<nav id="tabbar" aria-label="Table categories"></nav>
<div id="more-sheet" aria-label="More categories"></div>
<div id="alerts" aria-live="polite"></div>
<!-- custom table editor -->
<dialog id="custom-dialog" class="modal" aria-labelledby="custom-dialog-title">
<form method="dialog" onsubmit="return false">
<div class="modal-head">
<h2 id="custom-dialog-title">New custom table</h2>
</div>
<div class="modal-body">
<label class="field">
<span>Title</span>
<input type="text" id="custom-title" placeholder="Tavern rumours" autocomplete="off" spellcheck="false">
</label>
<label class="field wide">
<span>Results — one per line</span>
<textarea id="custom-entries" rows="10" spellcheck="false" placeholder="A cloaked figure asks about the old mine The miller's daughter has gone missing Someone is buying up every silver weapon in town"></textarea>
</label>
<p class="small faint">Rolling picks one line at random. Lines may use the same inline sub-roll syntax as the built-in tables, for example <code>A guard (d4): 1. bored; 2. drunk; 3. alert; 4. corrupt</code>.</p>
<p class="small danger-text" id="custom-error" role="alert"></p>
</div>
<div class="modal-foot">
<button type="button" class="btn" id="custom-delete">Delete</button>
<span class="spacer"></span>
<button type="button" class="btn" id="custom-cancel">Cancel</button>
<button type="button" class="btn primary" id="custom-save">Save table</button>
</div>
</form>
</dialog>
<script src="includes/jquery-3.7.1.min.js"></script>
<script src="js/custom-tables.js?v=17"></script>
<script src="js/backup.js?v=17"></script>
<script src="js/app-shell.js?v=17"></script>
<script src="js/rolltables.js?v=17"></script>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=10833414;
var sc_invisible=1;
var sc_security="aab08f2d";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="web counter"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/10833414/0/aab08f2d/1/"
alt="web counter"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
</body>
</html>