-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (120 loc) · 11.9 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
135
136
137
138
139
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>L5R Roller</title>
<meta name="description" content="A dice roller for Legend of the Five Rings, made by @TALlama">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/l5r.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<svg class='hidden' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<symbol id="success" width="10" height="10" viewBox="0 0 100 100" fill='green'>
<polygon points="80,77 85,70 88,63 90,56 90.5,51 90.5,45 90,42 88,36 85,30 81,24 75,18 71,15 66,12 59,10 54,9 44,9 34,11 28,13 20,18 15,24 12,30 10,34 6.5,35 6,41 7,52 9,61 14,80 20,88 40,94 50,96 60,96 65,93 68,87 68,83 66,80 64,79 62,78 59,78 55,79 51,83 44,85 35,83 30,80 20,70 15,60 13,45 16,39 18,35 20,30 25,23 30,19 40,14 50,13 60,14 70,19 80,28 86,45 85,65 80,77" />
</symbol>
<symbol id="explode" width="10" height="10" viewBox="0 0 100 100" fill='teal'>
<path d="M 17.675066 67.95104 C 17.675066 67.95104 26.269928 80.15916 35.80776 85.31572 C 45.34559 90.47227 68.16207 89.19587 73.807765 84.11572 C 79.45346 79.03556 80.22435 74.51859 80.00777 71.115716 C 79.79118 67.712845 80.01525 67.425075 78.607765 63.115715 C 77.20028 58.806356 64.84671 53.0056 60.67507 59.951044 C 56.50343 66.89649 57.16881 71.544925 59.67507 72.95104 C 62.181335 74.35716 61.07229 73.58226 62.20776 74.115716 C 63.34324 74.649175 62.370414 75.29312 62.00776 76.51572 C 61.64511 77.73831 56.79428 79.41009 52.67507 79.95104 C 48.555865 80.49199 38.62948 82.21908 32.67507 78.95104 C 26.720656 75.683005 17.675066 67.95104 17.675066 67.95104 Z" />
<path d="M 51.540824 10.002591 C 51.540824 10.002591 45.18379 9.934438 42.119817 10.497212 C 39.055845 11.059987 32.63697 14.241555 30.27476 15.364933 C 27.912552 16.48831 18.217493 27.162903 16.205468 30.43328 C 14.193444 33.703654 9.790525 47.38762 10.007754 49.86491 C 10.224982 52.3422 11.534996 61.12462 17.404335 65.39844 C 23.273673 69.67227 31.436973 67.38613 35.40776 64.315715 C 39.378544 61.2453 40.87667 58.62358 39.80776 52.715715 C 38.738847 46.807853 30.577045 44.7659 28.207758 45.115715 C 25.83847 45.46553 24.961478 45.577 24.961478 45.577 C 24.961478 45.577 23.46094 46.264026 23.21224 44.60738 C 22.963538 42.950736 23.086407 38.960656 24.077047 34.796565 C 25.067686 30.632475 31.513375 21.170393 34.64786 17.78898 C 37.782346 14.407568 43.869056 11.466832 43.869056 11.466832 Z" />
<path d="M 85.72189 69.82755 C 85.72189 69.82755 89.36117 64.69756 90.72039 61.82661 C 92.0796 58.955654 93.38577 58.40404 93.52703 49.3317 C 93.66829 40.25936 89.33619 28.814687 87.91773 25.490824 C 86.49927 22.166961 79.06155 14.323031 76.89097 12.941566 C 74.7204 11.5601 68.012856 9.54775 59.92414 10.090821 C 51.83543 10.633893 45.901995 19.46386 48.717724 26.490824 C 51.53345 33.517788 59.681574 34.686373 59.681574 34.686373 C 59.681574 34.686373 64.664545 36.02566 68.11773 34.490825 C 71.57091 32.95599 71.82632 27.650383 71.82632 27.650383 C 71.82632 27.650383 71.43926 26.199765 73.11773 26.290824 C 74.7962 26.381883 79.43608 30.615166 81.16443 33.109302 C 82.89278 35.60344 90.45858 41.001163 90.31773 51.890825 C 90.17688 62.78049 85.72189 69.82755 85.72189 69.82755 Z" />
</symbol>
<symbol id="strife" width="10" height="10" viewBox="0 0 100 100" fill='red'>
<path d="M 32.4 23.4 C 25.345025 25.887678 14.336493 37.381517 12.4 43.2 C 10.463507 49.018485 8.789573 62.95024 12.8 69.6 C 16.810427 76.249765 30.805687 90.3436 40.04367 89.8797 C 49.28165 89.4158 47.36043 84.05264 47.2 82.2 C 47.039574 80.34737 42.77251 76.71801 46.419565 71.92181 C 50.06662 67.1256 54.976303 64.395735 56.659565 64.24181 C 58.34283 64.08788 54.383886 70.08294 54.250364 73.5188 C 54.11684 76.95466 53.90995 78.25829 55.88064 81.218045 C 57.85133 84.1778 63.75649 88.6584 72 86 C 80.24351 83.34161 89.12891 68.2327 89 60.2 C 88.87109 52.1673 83.76777 46.86019 80.8 44 C 77.83223 41.13981 71.482464 37.826066 68 35.4 C 64.51754 32.973935 55.8 24.8 55.8 24.8 C 55.8 24.8 59.47867 29.91706 63.2 35.4 C 66.92133 40.88294 75.23697 44.964455 79.4 49.4 C 83.56304 53.835546 83.41991 54.110427 84.6 59.8 C 85.7801 65.489575 70.85308 80.62796 69.38865 81.218045 C 67.92421 81.80813 66.35071 82.87915 63.56623 80.61654 C 60.78175 78.35394 58.19136 75.96006 58.8 73 C 59.40864 70.039944 62.55924 61.55213 62.4 60.8 C 62.24076 60.04787 63.033175 58.70853 57.699565 59.521806 C 52.365955 60.33508 45.28341 64.80995 43.2 68.8 C 41.11659 72.79005 39.336493 78.61374 40.88 82.16 C 42.42351 85.70626 38.27014 85.13033 29.8 80.8 C 21.329859 76.46967 11.137441 59.30095 15.6 48.6 C 20.06256 37.899054 22.156398 38.2109 27.2 33.6 C 32.243603 28.9891 51.77725 24.585308 54.01747 22.99248 C 56.25768 21.399654 59.79285 12.339725 57.4 11.4 C 55.007153 10.460275 49.8 11.4 49.8 11.4 C 49.8 11.4 39.454976 20.912322 32.4 23.4 Z"/>
</symbol>
<symbol id="opportunity" width="10" height="10" viewBox="0 0 100 100" fill='rebeccapurple'>
<path d="M 49.60912 42.10959 L 47.00326 35.26656 L 48.02699 23.580777 L 55.100047 11.473883 L 60.96324 10 L 65.98883 13.895262 L 67.1987 21.369953 L 63.476035 26.63382 L 57.333644 26.528543 L 51.00512 32.10824 Z" />
<path d="M 54.95114 45.945205 L 61.4658 37.945205 L 75.14658 34.438356 L 84.39739 34.547945 L 90 38.164384 L 89.34853 44.630137 L 84.2671 47.91781 L 79.96743 48.356164 L 76.188925 45.068493 L 75.92834 39.58904 L 66.93811 39.47945 L 62.50814 41.12329 Z" />
<path d="M 51.824104 51.20548 L 62.37785 51.20548 L 78.27362 57.342466 L 85.96091 64.57534 L 88.56678 72.46575 L 85.96091 79.80822 L 79.96743 82.54795 L 73.19218 81.12329 L 72.01954 75.9726 L 74.49511 71.26027 L 77.75244 69.83562 L 74.88599 63.260274 L 65.37459 55.36986 Z" />
<path d="M 50.260586 57.89041 L 57.557 66.43836 L 57.557 78.71233 L 51.9544 88.24658 L 46.35179 90 L 40.4886 88.57534 C 40.4886 88.57534 36.188925 83.64384 36.188925 83.53425 C 36.188925 83.42466 36.579805 77.83562 36.579805 77.83562 L 40.358306 74.87671 L 44.788274 72.90411 L 50.260586 74.547945 L 51.433225 75.9726 L 53.517915 71.80822 L 53.517915 66.21918 L 53.517915 63.58904 Z" />
<path d="M 43.87622 51.534247 L 42.833876 60.739726 L 36.188925 67.09589 L 24.723127 72.46575 L 16.514658 71.47945 L 11.172638 67.86301 L 10 62.38356 L 12.605863 56.0274 L 17.166124 53.72603 L 22.37785 54.82192 L 24.85342 58.32877 L 27.980456 62.38356 L 34.104235 62.71233 L 39.055375 58.657534 Z" />
<path d="M 43.87622 44.08219 L 37.62215 46.931507 L 26.677524 44.739726 L 18.859935 39.369863 L 16.514658 33.452055 L 16.514658 26.657534 L 17.557003 21.178082 L 22.638436 17.123288 L 27.459283 16.79452 L 30.9772 18.657534 L 32.540717 25.0137 L 30.325733 32.575342 L 28.762215 36.30137 L 31.628664 40.90411 L 36.579805 42.9863 Z" />
</symbol>
<symbol id="ring-die" width='10' height='10' viewBox='0 0 100 100' stroke='black' fill='white'>
<rect x="10" y="10" width="80" height="80" />
</symbol>
<symbol id="skill-die" width='10' height='10' viewBox='0 0 100 100' stroke='black' fill='white'>
<path d="M 51 99 L 99 63 L 81 7 L 21 7 L 1 63 Z" transform='rotate(20 50 50) translate(2 1)' />
</symbol>
<symbol id='face--'></symbol>
<symbol id='face-O'>
<use xlink:href="#opportunity" x="10" y="10" width='80' height='80' />
</symbol>
<symbol id='face-OX'>
<use xlink:href="#opportunity" x="14" y="14" width='46' height='46' />
<use xlink:href="#strife" x="43" y="43" width='46' height='46' />
</symbol>
<symbol id='face-R'>
<use xlink:href="#explode" x="10" y="10" width='80' height='80' />
</symbol>
<symbol id='face-RX'>
<use xlink:href="#explode" x="14" y="14" width='46' height='46' />
<use xlink:href="#strife" x="43" y="43" width='46' height='46' />
</symbol>
<symbol id='face-S'>
<use xlink:href="#success" x="10" y="10" width='80' height='80' />
</symbol>
<symbol id='face-SO'>
<use xlink:href="#success" x="14" y="14" width='46' height='46' />
<use xlink:href="#opportunity" x="43" y="43" width='46' height='46' />
</symbol>
<symbol id='face-SX'>
<use xlink:href="#success" x="14" y="14" width='46' height='46' />
<use xlink:href="#strife" x="43" y="43" width='46' height='46' />
</symbol>
</svg>
<article class='rollbox'>
<header class='rollbox--header'>
<label>Ring dice <input class='rollbox--ring' type='number' value='3'/></label>
<label>Skill dice <input class='rollbox--skill' type='number' value='2'/></label>
<button class='rollbox--trigger' >Roll!</button>
</header>
<article class='dice-tray rollbox--current-dice-tray'></article>
<article class='rollbox--actions'>
<a href='#' class='rollbox--action rollbox--action---roll-exploding hidden' data-shown-if='exploding'>roll <span data-shows='exploding'>0</span> exploding</a>
<a href='#' class='rollbox--action rollbox--action---add-ring-die'>+ Ring</a>
<a href='#' class='rollbox--action rollbox--action---add-skill-die'>+ Skill</a>
</article>
<dl class='rollbox--outcome'>
<dt>keeps left</dt>
<dd><output class='rollbox--output'><span data-shows='keepsLeft'>3</span> <span data-shown-if='keepsLeft'>(click dice to keep them)</span></output></dd>
<dt class='hidden' data-shown-if='successes'>
<svg height='20' viewBox='0 0 20 20'><use xlink:href='#success'></svg>
<span data-shown-if='exploding'>
+
<svg height='20' viewBox='0 0 20 20'><use xlink:href='#explode'></svg>
</span>
successes
</dt>
<dd class='hidden' data-shown-if='successes'><output class='rollbox--output' data-shows='successes'></output></dd>
<dt class='hidden' data-shown-if='opportunities'><svg height='20' viewBox='0 0 20 20'><use xlink:href='#opportunity'></svg> opportunities</dt>
<dd class='hidden' data-shown-if='opportunities'><output class='rollbox--output' data-shows='opportunities'></output></dd>
<dt class='hidden' data-shown-if='strife'><svg height='20' viewBox='0 0 20 20'><use xlink:href='#strife'></svg> strife</dt>
<dd class='hidden' data-shown-if='strife'><output class='rollbox--output' data-shows='strife'></output></dd>
<dt class='hidden' data-shown-if='rerolls'>rerolls</dt>
<dd class='hidden' data-shown-if='rerolls'><output class='rollbox--output' data-shows='rerolls'></output></dd>
</dl>
</article>
<article>
<header>Reminders</header>
<ul>
<li>If you activate an <strong>advantage</strong>, you <em>may</em> reroll two dice</li>
<li>If you activate a <strong>disadvantage</strong>, you <em>must</em> reroll two successes</li>
<li>If you activate both an <strong>advantage and disadvantage</strong>, <em>neither</em> applies</li>
<li>If you're in <strong>Fire stance</strong> and succeed, each strife gives a <em>bonus success</em></li>
<li>If you're in <strong>Void stance</strong>, strife <em>doesn't affect you</em></li>
</ul>
<header>Tips</header>
<ul>
<li>You can specify what dice to roll by adding <a href='?ring=3&skill=2'><code>?ring=3&skill=2</code></a> to the URL</li>
<li>You can specify the result by adding <a href='?rings=-,OX,O,S,SX,RX&skills=-,O,SX,S,SO,RX,R'><code>?rings=-,OX,O,S,SX,RX&skills=-,O,SX,S,SO,RX,R</code></a> to the URL</li>
</ul>
</article>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src='js/l5r_roller.js'></script>
</html>