forked from PrincessRTFM/WebUtil
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcape.html
85 lines (85 loc) · 6.34 KB
/
cape.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
<!DOCTYPE html>
<!--
@desc a Worm-style random parahuman power generator
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Random Cape Generator</title>
<link rel="stylesheet" href="css/cape.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/cape.core.browser.js"></script>
<script type="text/javascript" src="js/cape.lib.browser.js"></script>
<script type="text/javascript" src="js/cape.browser.js"></script>
</head>
<body>
<h1 id="header">You are a...</h1>
<div id="power">
<h3 id="category">(PLACEHOLDER - you shouldn't even see this)</h3>
<h4>who</h4>
<h3 id="ability">(PLACEHOLDER - you shouldn't even see this)</h3>
</div>
<div id="footer">Don't like this one?</div>
<div id="buttons">
<button id="reroll">Roll a new one!</button>
or
<button id="tweak">Retry this one!</button>
</div>
<div id="filters">
<p>Only powers that are at least one of these types will be shown.</p>
<div class="filterline">
<label for="filter-mover">mover</label><input type="checkbox" id="filter-mover" checked="checked" />
<label for="filter-shaker">shaker</label><input type="checkbox" id="filter-shaker" checked="checked" />
<label for="filter-brute">brute</label><input type="checkbox" id="filter-brute" checked="checked" />
<label for="filter-breaker">breaker</label><input type="checkbox" id="filter-breaker" checked="checked" />
</div>
<div class="filterline">
<label for="filter-master">master</label><input type="checkbox" id="filter-master" checked="checked" />
<label for="filter-tinker">tinker</label><input type="checkbox" id="filter-tinker" checked="checked" />
<label for="filter-blaster">blaster</label><input type="checkbox" id="filter-blaster" checked="checked" />
<label for="filter-thinker">thinker</label><input type="checkbox" id="filter-thinker" checked="checked" />
</div>
<div class="filterline">
<label for="filter-striker">striker</label><input type="checkbox" id="filter-striker" checked="checked" />
<label for="filter-changer">changer</label><input type="checkbox" id="filter-changer" checked="checked" />
<label for="filter-trump">trump</label><input type="checkbox" id="filter-trump" checked="checked" />
<label for="filter-stranger">stranger</label><input type="checkbox" id="filter-stranger" checked="checked" />
</div>
</div>
<div id="help">
<p>The categories of powers are taken from <a href="https://parahumans.wordpress.com/">Worm</a>, and the <i>approximate</i> breakdown is below. Any of the generated power text that's in <i class="detail">blue</i> is variable, and will be randomised each time that power is generated - you can use the <i>retry this one</i> button to reroll the current power to change those details.</p>
<p>Each time a power is rolled, the type may be any of the power filters that are enabled. If the power fits multiple categories, disabled ones will <b>not</b> stop the power from coming up - a striker/blaster can be picked if either striker or blaster is enabled, even if the other isn't, for instance. The filters you have enabled are actually saved to the URL of the page, so you can select your filters and then share the page URL to someone else to let them select a power from the categories you chose.</p>
<p>Roughly, the power classifications mean something like this:</p>
<p>
<b>Movers</b> are what it sounds like - they move around quickly. Speed, flight, teleportation, that kind of thing.<br/>
<b>Shakers</b> affect areas, usually only the area around them, and it usually goes away when they leave.<br/>
<b>Brutes</b> are all physical; strength, durability, and regeneration are the sorts of things you'd expect from them.<br/>
<b>Breakers</b> are complicated, but they tend to create an effect that only applies to them, and in some way changes their state or their physical properties.<br/>
<b>Masters</b> control minions in some way, be they animated constructs, animals, or even other people.<br/>
<b>Tinkers</b>, as you might expect, build things. Advanced technology, beyond normal, doing things that might not even make sense. They usually have a specialisation that they work best in, or even that they can <i>only</i> work in.<br/>
<b>Blasters</b> create directed, targetted, ranged effects. Think laser eyes and you'll get the idea, but they're a lot more varied.<br/>
<b>Thinkers</b> have some kind of purely mental effect, such as precognition (seeing the future) or mind reading.<br/>
<b>Strikers</b> cause some kind of effect through direct physical contact. No contact, no effect.<br/>
<b>Changers</b> can change their forms, but usually it's more like a werewolf than a ghost - a different form, not just different properties on the same shape. They're close to breakers, but subtly different.<br/>
<b>Trumps</b> do something to or with powers. Maybe they strengthen (or weaken) the powers of others, maybe they can grant temporary powers, maybe they themselves get stronger depending on how many people with powers are around them.<br/>
<b>Strangers</b> mess with your perceptions; things like invisibility fall under this, but so does shapeshifting that lets them look like other (existing, real) people - even though that <i>also</i> falls under changer.
</p>
</div>
<address id="credit">
Written by
<a href="https://github.com/PrincessRTFM">Lilith Song</a>
(<a href="https://reddit.com/user/PrincessRTFM">u/PrincessRTFM</a>)
for
<a href="https://reddit.com/user/edmandias">u/edmandias</a>
</address>
<address id="contribute">
<a href="https://github.com/PrincessRTFM/WebUtil/issues/2">power ideas thread</a>
|
<a href="https://github.com/PrincessRTFM/WebUtil/issues/new?assignees=PrincessRTFM&labels=bug%2C+website&template=website-bug-report.md&title=Bug%3A+XXXXXXXX">report a bug</a>
|
<a href="https://github.com/PrincessRTFM/WebUtil/issues/new?assignees=PrincessRTFM&labels=enhancement%2C+website&template=website-feature-request.md&title=Request%3A+XXXXXXXX">request a feature</a>
</address>
</body>
</html>