-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
128 lines (128 loc) · 8.37 KB
/
Copy pathindex.html
File metadata and controls
128 lines (128 loc) · 8.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="[MAZ01001.github.io] Statistics of dice rolls | DND dice RNG with statistics | Calculates chance of success">
<meta name="author" content="MAZ01001">
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="../img/MAZ_logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
<link rel="manifest" href="../img/site.webmanifest">
<link rel="mask-icon" href="../img/safari-pinned-tab.svg" color="#ff9900">
<link rel="shortcut icon" href="../img/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="../img/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<title>Dice Statistics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<noscript>JavaScript must be enabled!</noscript>
<div id="box">
<div id="sheet"></div>
<hr>
<div id="nav">
<input type="button" id="add" value="Add roll" title="Add a dice roll">
<input type="button" id="hover" value="Click to remove" data-state="0" title="Switch between "remove dice on click" / "roll dice on click" / "roll dice on click or hover/swipe"">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/MAZ01001/dice_stats" title="Open GitHub project page (source code & documentation) in a new tab">Source Code</a>
<input type="button" id="permalink" value="Permalink" title="Create a permalink to this dice roll setup and copy it to clipboard">
<input type="button" id="roll" value="Roll all" title="Roll all dice on the page">
<span id="chance" title="Total chance of success for all dice rolls">--%</span>
</div>
</div>
<div id="permalinkNote">Permalink copied to clipboard</div>
<template id="dice"><svg width="100" height="100" tabindex="0"><use href="#d20"/><text x="50" y="50">?</text><title>D20 [Icosahedron] click to remove/roll</title></svg></template>
<template id="throw"><div class="throw">
<div class="start" data-sum="">
<span contenteditable data-maxlength="1000" title="Custom name for this dice roll - clear to remove dice roll">Name</span>
<div class="head" data-sum="">
<input type="number" min="0" step="1" inputmode="numeric" required placeholder="Value" title="Number value to check against the dice roll">
<select title="Choose the comparison operator">
<option value="GE" title="greater than or equal to" selected>≥</option>
<option value="LE" title="less than or equal to">≤</option>
<option value="GT" title="greater than">></option>
<option value="LT" title="less than"><</option>
<option value="EQ" title="equal to">=</option>
</select>
</div>
</div>
<div class="dice"></div>
<div class="end">
<div class="tail">
<input type="button" value="Add" title="Add selected dice">
<select title="Select a dice">
<option value="C" title="Coin with 2 faces: [1, 2]">C</option>
<option value="D4" title="Dice with 4 faces: [1, 2, 3, 4]">D4</option>
<option value="D6" title="Dice with 6 faces: [1, 2, ..., 6]">D6</option>
<option value="D8" title="Dice with 8 faces: [1, 2, ..., 8]">D8</option>
<option value="D10" title="Dice with 10 faces: [1, 2, ..., 10]">D10</option>
<option value="D12" title="Dice with 12 faces: [1, 2, ..., 12]">D12</option>
<option value="D20" title="Dice with 20 faces: [1, 2, ..., 20]" selected>D20</option>
<option value="D100" title="Dice with 10 faces: [10, 20, ..., 100]">D100</option>
</select>
</div>
<span title="Chance of success for this dice roll">--%</span>
</div>
</div></template>
<svg id="dnd" display="none">
<filter id="red"><feColorMatrix in="SourceGraphic" type="matrix" values="0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/></filter>
<filter id="green"><feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"/></filter>
<symbol id="c" stroke="#000" stroke-width="3" stroke-linejoin="miter" viewBox="-50 -50 100 100">
<circle r="30" fill="#fff" paint-order="stroke"/>
<circle r="25" fill="#ddd" stroke-width=".3" stroke-linejoin="bevel"/>
</symbol>
<symbol id="d4" stroke="#000" stroke-width="3" stroke-linejoin="miter" viewBox="-50 -50 100 100">
<path d="M0-40 39.84 29H-39.84z" fill="#fff" paint-order="stroke"/>
</symbol>
<symbol id="d6" stroke="#000" stroke-width="3" stroke-linejoin="miter" viewBox="-50 -50 100 100">
<rect x="-30" y="-30" width="60" height="60" fill="#fff" paint-order="stroke"/>
</symbol>
<symbol id="d8" stroke="#000" stroke-width=".3" stroke-linejoin="bevel" viewBox="-50 -50 100 100">
<path d="M0-40 34.64-20V20L0 40-34.64 20V-20z" fill="#000" stroke-width="3" stroke-linejoin="miter"/>
<g display="none"><path id="d8f" d="M0-40-34.64-20V20z"/></g>
<use href="#d8f" fill="#ccc"/>
<use href="#d8f" fill="#ccc" transform="rotate(120)"/>
<use href="#d8f" fill="#777" transform="rotate(240)"/>
<path d="M0-40 34.64 20H-34.64z" fill="#fff"/>
</symbol>
<symbol id="d10" stroke="#000" stroke-width=".3" stroke-linejoin="bevel" viewBox="-50 -50 100 100">
<path d="M0-42 40-11 41 8 0 40-41 8-40-11z" fill="#000" stroke-width="3" stroke-linejoin="miter"/>
<g display="none"><path id="d10n" d="M0-42 40-11 41 8 26 9z"/></g>
<use href="#d10n" fill="#ccc"/>
<use href="#d10n" fill="#ccc" transform="scale(-1 1)"/>
<g display="none"><path id="d10s" d="M41 8 0 40V24L26 9z"/></g>
<use href="#d10s" fill="#777"/>
<use href="#d10s" fill="#777" transform="scale(-1 1)"/>
<path d="M0-42 26 9 0 24-26 9z" fill="#fff"/>
</symbol>
<symbol id="d12" stroke="#000" stroke-width=".3" stroke-linejoin="bevel" viewBox="-50 -50 100 100">
<path d="M0-37 21.75-29.93 35.19-11.43V11.43L21.75 29.93 0 37-21.75 29.93-35.19 11.43V-11.43L-21.75-29.93z" fill="#000" stroke-width="3" stroke-linejoin="miter"/>
<g display="none"><path id="d12f" d="M0-37-21.75-29.93-35.19-11.43-22.08-7.17 0-23.22z"/></g>
<use href="#d12f" fill="#ddd"/>
<use href="#d12f" fill="#ddd" transform="rotate(72)"/>
<use href="#d12f" fill="#aaa" transform="rotate(288)"/>
<use href="#d12f" fill="#aaa" transform="rotate(144)"/>
<use href="#d12f" fill="#777" transform="rotate(216)"/>
<path d="M0-23.22 22.08-7.17 13.65 18.78H-13.65L-22.08-7.17z" fill="#fff"/>
</symbol>
<symbol id="d20" stroke="#000" stroke-width=".3" stroke-linejoin="bevel" viewBox="-50 -50 100 100">
<path d="M-36.37-21 0-42 36.37-21v42L0 42-36.37 21z" fill="#000" stroke-width="3" stroke-linejoin="miter"/>
<g display="none"><path id="d20k" d="M-36.37-21 0-42V-28z"/></g>
<use href="#d20k" fill="#ccc"/>
<use href="#d20k" fill="#ccc" transform="scale(-1 1)"/>
<use href="#d20k" fill="#aaa" transform="rotate(240)scale(-1 1)"/>
<use href="#d20k" fill="#aaa" transform="rotate(120)"/>
<use href="#d20k" fill="#777" transform="rotate(240)"/>
<use href="#d20k" fill="#777" transform="rotate(120)scale(-1 1)"/>
<g id="d20d"><path d="M-36.37-21 0-28-24.25 14z"/></g>
<use href="#d20d" fill="#ddd"/>
<use href="#d20d" fill="#ddd" transform="rotate(120)"/>
<use href="#d20d" fill="#bbb" transform="rotate(240)"/>
<path d="M0-28 24.25 14H-24.25z" fill="#fff"/>
</symbol>
</svg>
<script src="script.js"></script>
</body>
</html>