initialize
This commit is contained in:
parent
796d3f525e
commit
ff7f24f02e
1
assets/add.svg
Normal file
1
assets/add.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
|
||||
|
After Width: | Height: | Size: 320 B |
1
assets/close.svg
Normal file
1
assets/close.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
|
||||
|
After Width: | Height: | Size: 258 B |
1
assets/dark.svg
Normal file
1
assets/dark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>
|
||||
|
After Width: | Height: | Size: 380 B |
1
assets/dices.svg
Normal file
1
assets/dices.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-260q25 0 42.5-17.5T700-320q0-25-17.5-42.5T640-380q-25 0-42.5 17.5T580-320q0 25 17.5 42.5T640-260ZM480-420q25 0 42.5-17.5T540-480q0-25-17.5-42.5T480-540q-25 0-42.5 17.5T420-480q0 25 17.5 42.5T480-420ZM320-580q25 0 42.5-17.5T380-640q0-25-17.5-42.5T320-700q-25 0-42.5 17.5T260-640q0 25 17.5 42.5T320-580ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
|
||||
|
After Width: | Height: | Size: 569 B |
15
assets/dices/10.svg
Executable file
15
assets/dices/10.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="153"
|
||||
height="151"
|
||||
viewBox="0 0 153 151"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 152.964,103.75 125.923,6.26877 c -0.04,-0.17211 -0.198,-0.27802 -0.37,-0.29126 -0.212,0 -0.397,0.15886 -0.397,0.37069 l -2.83,97.4678 c -0.026,1.086 0.344,2.158 1.045,2.992 l 17.573,20.879 c 0.053,0.066 0.132,0.119 0.212,0.159 0.304,0.145 0.661,0.013 0.806,-0.292 l 10.936,-23.169 c 0.106,-0.198 0.132,-0.423 0.066,-0.635 z m -29.606,5.944 c -1.587,-1.88 -3.848,-3.031 -6.295,-3.204 l -50.485,-3.64 c -1.2166,-0.08 -2.3802,0.503 -3.0413,1.535 L 34.446,150.101 c -0.0793,0.119 -0.1058,0.278 -0.0793,0.424 0.0661,0.317 0.3702,0.529 0.6876,0.463 L 139.172,129.726 c 0.093,-0.014 0.172,-0.053 0.238,-0.12 0.225,-0.198 0.265,-0.529 0.066,-0.768 z M 0.370251,45.9735 28.2312,52.249 l 0.119,0.0264 c 1.5603,0.3443 3.1867,0.0795 4.5619,-0.7414 L 117.553,0.708251 c 0.185,-0.066197 0.291,-0.278026 0.225,-0.463377 -0.067,-0.1853503 -0.265,-0.2912584 -0.463,-0.2250618 h -0.014 L 15.8412,20.3025 c -0.595,0.1191 -1.1107,0.4898 -1.4281,1.0061 L 0.119026,45.391 C 0.105803,45.4175 0.0925735,45.4572 0.0793504,45.4837 0.0264583,45.6955 0.158682,45.9206 0.370251,45.9735 Z M 61.9102,100.162 31.894,56.8033 C 30.9287,55.4132 29.4609,54.4202 27.808,54.0495 L 0.647947,47.9462 c -0.092561,-0.0265 -0.185135,-0.0133 -0.277696,0.0132 -0.277684,0.0927 -0.4363409,0.384 -0.3437797,0.662 L 31.6692,149.214 c 0.0925,0.304 0.4231,0.476 0.7272,0.384 0.1323,-0.04 0.238,-0.119 0.3174,-0.239 l 29.2625,-45.993 c 0.6215,-0.98 0.5951,-2.237 -0.0661,-3.204 z M 34.5518,52.7256 c -1.2033,0.8341 -1.5075,2.5022 -0.6612,3.707 L 62.73,98.0835 c 1.2033,1.7476 3.1339,2.8465 5.2496,2.9925 l 49.4674,3.574 c 0.04,0 0.079,0.013 0.119,0.013 1.587,0.04 2.922,-1.204 2.975,-2.806 L 123.45,2.15134 c 0,-0.29126 -0.066,-0.59577 -0.225,-0.84732 -0.449,-0.728162 -1.401,-0.96647 -2.129,-0.529572 L 34.7105,52.6461 c -0.0529,0.0133 -0.1058,0.0398 -0.1587,0.0795 z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
15
assets/dices/100.svg
Executable file
15
assets/dices/100.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="151"
|
||||
height="154"
|
||||
viewBox="0 0 151 154"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="m 122.048,55.2449 c 0.946,0.8628 2.06,1.4979 3.269,1.8934 l 24.057,7.6574 c 0.192,0.0599 0.408,-0.0479 0.467,-0.2396 0.036,-0.1199 0.012,-0.2397 -0.059,-0.3356 L 139.16,50.1759 c -0.18,-0.2277 -0.383,-0.4314 -0.635,-0.5872 L 68.5693,5.54936 c -0.1557,-0.09586 -0.3712,-0.04793 -0.467,0.10786 -0.0839,0.1438 -0.0599,0.32355 0.0598,0.4314 z m 28.512,11.624 -25.901,-8.2447 c -0.934,-0.2996 -1.94,-0.1558 -2.754,0.3835 L 90.8062,79.6792 c -0.8502,0.5632 -1.3651,1.5219 -1.3651,2.5405 l 0.1916,69.6603 c 0,0.383 0.3114,0.695 0.7065,0.695 0.2275,0 0.4311,-0.108 0.5629,-0.288 L 150.883,67.8275 c 0.204,-0.2756 0.132,-0.671 -0.143,-0.8747 -0.06,-0.024 -0.12,-0.06 -0.18,-0.0839 z M 41.5305,72.9325 86.8786,79.092 c 1.0058,0.1318 2.0237,-0.0959 2.8619,-0.6591 l 29.4455,-19.569 c 1.102,-0.731 1.401,-2.2289 0.671,-3.3314 -0.108,-0.1678 -0.24,-0.3116 -0.383,-0.4434 L 59.253,0.156795 C 59.0015,-0.0708911 58.6303,-0.0469241 58.4028,0.204729 58.3429,0.27663 58.295,0.360514 58.2711,0.444399 L 39.5307,69.9366 c -0.3473,1.2823 0.4071,2.6004 1.6884,2.936 0.1078,0.024 0.2036,0.0479 0.3114,0.0599 z M 85.753,80.578 39.0876,74.2387 C 38.429,74.1428 37.7584,74.3346 37.2435,74.766 L 18.8983,89.9371 8.64797,98.4094 c -0.43109,0.3595 -0.49096,1.0066 -0.14369,1.438 0.05987,0.0719 0.13171,0.1318 0.20356,0.1916 l 77.52406,53.758 c 0.515,0.36 1.2215,0.228 1.5807,-0.288 0.1317,-0.191 0.2036,-0.419 0.2036,-0.647 L 87.8246,82.9627 c 0,-1.2104 -0.8862,-2.217 -2.0716,-2.3847 z M 35.7467,73.8912 c 0.8741,-0.719 1.4968,-1.6897 1.7962,-2.7802 L 55.3612,5.02209 C 55.445,4.7225 55.2654,4.39895 54.9541,4.32705 54.7265,4.26713 54.4871,4.35102 54.3434,4.54275 L 0.457298,78.7325 c -0.4789877,0.6591 -0.58676,1.5099 -0.299367,2.2649 l 6.047209,15.926 c 0.15568,0.4195 0.63466,0.6352 1.0418,0.4674 0.08382,-0.0359 0.15566,-0.0719 0.2275,-0.1318 l 9.98686,-8.2566 z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
15
assets/dices/12.svg
Executable file
15
assets/dices/12.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="139"
|
||||
height="145"
|
||||
viewBox="0 0 139 145"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 74.9508,130.299 32.4386,105.89 c -0.858,-0.491 -1.8386,-0.758 -2.8304,-0.758 H 7.39932 c -0.47917,0 -0.86919,0.39 -0.86919,0.87 0,0.223 0.08915,0.446 0.24516,0.602 L 26.4769,127.22 c 0.312,0.324 0.702,0.58 1.1255,0.748 l 44.0611,16.923 c 0.8581,0.324 1.8164,-0.1 2.1396,-0.948 0.0223,-0.056 0.0445,-0.111 0.0557,-0.178 l 2.5853,-9.918 c 0.3566,-1.383 -0.2563,-2.834 -1.4933,-3.548 z m 61.9352,-37.0263 -6.017,1.5842 -12.815,3.3691 c -0.803,0.2119 -1.538,0.6024 -2.173,1.1379 l -9.16,7.9091 -26.477,22.859 c -1.0698,0.926 -1.8275,2.153 -2.1841,3.514 l -2.563,9.795 c -0.0892,0.324 0.1114,0.658 0.4346,0.748 0.1671,0.044 0.3343,0.022 0.4791,-0.067 l 46.9364,-29.129 c 0.2,-0.122 0.379,-0.29 0.512,-0.49 l 13.595,-20.427 c 0.156,-0.2455 0.101,-0.569 -0.144,-0.7252 -0.123,-0.0892 -0.279,-0.1116 -0.424,-0.0781 z m 2.106,-3.5699 -5.092,-47.8257 c -0.09,-0.8478 -0.457,-1.6287 -1.059,-2.2423 L 110.877,17.3452 c -0.245,-0.2566 -0.646,-0.2566 -0.891,-0.0112 -0.078,0.0669 -0.134,0.1673 -0.167,0.2566 l -9.8288,29.8087 c -0.4458,1.3388 -0.4235,2.8002 0.0778,4.1166 L 114.009,89 l 2.184,5.8792 c 0.434,1.1714 1.682,1.8184 2.897,1.506 l 13.718,-3.6145 4.958,-1.3053 c 0.792,-0.1896 1.304,-0.9482 1.226,-1.7626 z M 44.0389,49.7309 c 1.0698,1.6846 2.9753,2.6552 4.97,2.5101 l 7.9119,-0.5578 38.8237,-2.7555 c 1.3261,-0.1004 2.4627,-0.9817 2.875,-2.2423 l 9.8615,-29.9315 c 0.212,-0.6136 -0.122,-1.2718 -0.724,-1.4838 L 65.6349,0.276515 C 64.3423,-0.18088 62.9271,-0.0693311 61.7236,0.600027 L 26.2986,20.2345 c -0.3789,0.2232 -0.5237,0.7029 -0.3009,1.0933 0.0112,0.0112 0.0112,0.0224 0.0223,0.0335 z m 51.4716,0.7252 -32.6614,2.3204 -13.9628,0.9929 c -1.7495,0.1227 -3.2204,1.3387 -3.6884,3.0233 L 32.8398,101.762 c -0.3566,1.317 0.2117,2.711 1.3929,3.403 l 41.4759,23.807 c 1.2815,0.736 2.8861,0.58 4.0116,-0.379 L 113.73,99.23 c 1.114,-0.9705 1.516,-2.5324 1.003,-3.9157 L 113.05,90.785 98.8535,52.6203 C 98.3409,51.237 96.9814,50.3557 95.5105,50.4561 Z M 31.3243,101.55 36.1271,84.0579 43.8607,55.9448 c 0.4457,-1.6287 0.1894,-3.3802 -0.7244,-4.8082 L 28.2153,27.631 24.9837,22.5438 c -0.2118,-0.3346 -0.6575,-0.435 -0.9918,-0.2231 -0.078,0.0446 -0.1337,0.1004 -0.1894,0.1674 L 0.657541,52.4976 c -0.479168,0.6248 -0.7131806,1.4057 -0.6463199,2.1866 L 4.15658,102.298 c 0.06686,0.747 0.69089,1.316 1.4375,1.316 H 28.5941 c 1.2815,0 2.3959,-0.836 2.7302,-2.064 z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
15
assets/dices/20.svg
Executable file
15
assets/dices/20.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="150"
|
||||
height="145"
|
||||
viewBox="0 0 150 145"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 149.988,88.7684 128.626,17.7081 c -0.022,-0.0773 -0.1,-0.1104 -0.177,-0.0883 -0.055,0.0221 -0.088,0.0662 -0.099,0.1214 l -4.147,58.5657 c -0.033,0.3863 0.188,0.7506 0.53,0.9051 l 22.09,10.4085 2.9,1.3687 c 0.089,0.0441 0.21,0 0.254,-0.0883 0.022,-0.0331 0.033,-0.0883 0.011,-0.1325 z m -0.651,1.7771 -3.341,-1.5674 -21.473,-10.1215 c -0.375,-0.1656 -0.805,0 -0.97,0.3643 -0.011,0.011 -0.011,0.0331 -0.022,0.0441 l -14.128,39.813 -8.327,23.466 c -0.033,0.077 0.012,0.165 0.089,0.187 0.055,0.023 0.121,0.011 0.165,-0.033 l 48.195,-51.2254 c 0.22,-0.2318 0.209,-0.607 -0.033,-0.8278 -0.055,-0.0441 -0.1,-0.0773 -0.155,-0.0993 z M 60.6128,22.1673 121.92,75.159 c 0.21,0.1766 0.519,0.1656 0.706,-0.0441 0.077,-0.0773 0.11,-0.1877 0.122,-0.2981 l 4.323,-60.9608 c 0.011,-0.1435 -0.1,-0.2539 -0.243,-0.2649 h -0.044 l -65.8513,7.5166 c -0.3309,0.0331 -0.5625,0.3311 -0.5294,0.6622 0.0221,0.1656 0.0993,0.2981 0.2095,0.3974 z m 61.0652,57.6054 c 0.11,-0.298 -0.044,-0.6291 -0.342,-0.7284 -0.121,-0.0442 -0.254,-0.0442 -0.375,0 L 39.5263,105.678 c -0.2647,0.088 -0.4081,0.375 -0.3198,0.64 0.0331,0.111 0.1103,0.199 0.2095,0.265 l 58.3078,38.212 0.1765,0.122 c 0.2316,0.154 0.5514,0.088 0.7058,-0.155 0.0221,-0.033 0.0331,-0.066 0.0441,-0.099 L 106.48,122.61 Z M 59.124,22.962 c -0.3309,-0.287 -0.8161,-0.2428 -1.1029,0.0773 -0.0772,0.0883 -0.1323,0.1987 -0.1654,0.3201 L 38.1036,103.471 c -0.0882,0.331 0.1213,0.673 0.4632,0.761 0.1103,0.033 0.2316,0.022 0.3419,-0.011 L 120.807,77.4438 c 0.308,-0.0993 0.474,-0.4305 0.374,-0.7395 -0.033,-0.0994 -0.088,-0.1877 -0.176,-0.2649 z m -0.9595,-4.1722 c 0.0993,0.585 0.6397,0.9934 1.2352,0.9161 L 121.81,12.5756 c 0.066,-0.011 0.121,-0.0773 0.099,-0.1435 -0.011,-0.0552 -0.044,-0.0883 -0.099,-0.0993 L 55.2089,0.00372595 C 55.0765,-0.0183493 54.9442,0.0589141 54.9111,0.202403 c -0.011,0.033113 -0.011,0.066226 0,0.099339 z M 86.8276,139.519 37.6514,107.29 c -0.397,-0.254 -0.9264,-0.155 -1.2021,0.231 l -14.8774,21.314 c -0.1324,0.199 -0.0883,0.464 0.1103,0.596 0.0441,0.033 0.0992,0.055 0.1543,0.066 l 72.2479,15.155 c 0.0882,0.022 0.1764,-0.033 0.1985,-0.121 0.0221,-0.067 -0.011,-0.144 -0.0772,-0.177 z M 3.56229,48.1499 56.0801,20.6662 c 0.4522,-0.2428 0.6948,-0.7506 0.6066,-1.2473 L 53.4443,0.997113 C 53.4222,0.864662 53.2899,0.776361 53.1465,0.798436 53.1024,0.809474 53.0583,0.831549 53.0252,0.864662 L 3.42995,47.9733 c -0.04411,0.0442 -0.04411,0.1104 0,0.1545 0.03309,0.0442 0.08822,0.0442 0.13234,0.0221 z M 35.6994,102.963 c 0.1765,0.243 0.5073,0.298 0.7499,0.121 0.1103,-0.077 0.1765,-0.187 0.2096,-0.309 L 56.2455,23.3594 c 0.0662,-0.287 -0.1103,-0.585 -0.397,-0.6513 -0.1213,-0.0331 -0.2537,-0.011 -0.375,0.0442 L 0.672821,51.4391 c -0.6175968,0.3201 -0.849201,1.0817 -0.529374,1.6998 0.022057,0.0442 0.055148,0.0994 0.088234,0.1435 L 13.3005,71.5828 Z m -0.375,3.455 c 0.2757,-0.398 0.2647,-0.917 -0.011,-1.303 L 0.694873,56.6158 C 0.63973,56.5495 0.540474,56.5275 0.474303,56.5827 0.41916,56.6268 0.397103,56.693 0.41916,56.7593 L 19.9948,127.367 c 0.0551,0.188 0.2536,0.298 0.4411,0.243 0.0772,-0.022 0.1434,-0.066 0.1875,-0.133 4.901022,-7.01919 9.801118,-14.03902 14.701,-21.059 z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
15
assets/dices/4.svg
Executable file
15
assets/dices/4.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="150"
|
||||
height="149"
|
||||
viewBox="0 0 150 149"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 149.34,94.2589 86.9302,1.7987 C 86.452,1.08883 85.4843,0.88919 84.7724,1.36613 84.3164,1.66561 84.0605,2.17582 84.0828,2.71931 L 90.1336,146.013 c 0.0445,1.131 1.0011,2.018 2.1356,1.974 0.4671,-0.022 0.9232,-0.2 1.2791,-0.51 L 148.684,99.3056 c 1.457,-1.2755 1.746,-3.4384 0.656,-5.0467 z M 77.2756,1.07774 0.817546,98.6956 c -1.312489,1.6744 -1.012174,4.1034 0.667364,5.4124 0.17797,0.133 0.35593,0.255 0.55614,0.366 l 82.84255,44.245 c 1.1679,0.621 2.6139,0.178 3.2368,-0.987 0.2002,-0.377 0.3003,-0.799 0.278,-1.231 L 82.2809,2.68603 C 82.2142,1.14429 80.9128,-0.053608 79.3667,0.00185041 78.5436,0.0351254 77.7762,0.43442 77.2756,1.07774 Z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 950 B |
15
assets/dices/6.svg
Executable file
15
assets/dices/6.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="134"
|
||||
height="156"
|
||||
viewBox="0 0 134 156"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 94.9187,3.49436 C 93.731,3.83882 93.7904,5.91748 93.7429,6.82021 L 91.0111,63.0391 c -0.1426,2.9933 0.7126,5.9628 2.4229,8.4215 l 37.604,53.9384 c 0.404,0.582 1.425,2.185 2.102,2.007 0.974,-0.273 0.855,-2.387 0.855,-2.934 l -0.023,-62.2288 c 0.012,-1.4728 -0.428,-2.922 -1.259,-4.1454 L 97.4843,5.76306 C 97.021,5.00287 95.9758,3.18553 94.9187,3.49436 Z M 3.36759,94.9198 85.6306,68.3248 c 1.9954,-0.6651 3.3851,-2.4825 3.5039,-4.5849 L 92.1275,2.09274 C 92.1869,0.999959 91.3436,0.0615948 90.2509,0.00220446 89.9896,-0.0096736 89.7283,0.0259606 89.4789,0.120985 L 11.7649,28.0582 c -1.2115,0.4395 -2.09041,1.5085 -2.29232,2.7795 L 0.0300278,92.0928 c -0.2137938,1.4016 0.7364002,2.7082 2.1379322,2.922 0.40384,0.0713 0.80768,0.0357 1.19963,-0.095 z M 85.3931,70.3322 3.08255,96.951 C 2.33427,97.2004 1.74038,97.7943 1.51471,98.5426 1.28903,99.3028 1.44343,100.122 1.91853,100.74 L 44.119,154.643 c 0.879,1.128 2.3517,1.615 3.7295,1.223 l 81.9775,-22.829 c 0.286,-0.084 0.559,-0.214 0.796,-0.381 0.452,-0.32 0.796,-0.76 0.974,-1.282 0.297,-0.808 0.178,-1.699 -0.309,-2.4 L 91.9375,72.5296 c -1.4372,-2.0905 -4.1096,-2.9932 -6.5444,-2.1974 z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
15
assets/dices/8.svg
Executable file
15
assets/dices/8.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="140"
|
||||
height="148"
|
||||
viewBox="0 0 140 148"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 79.5504,117.837 41.7793,82.8823 C 41.3332,82.4699 40.634,82.482 40.1999,82.9065 L 31.2303,91.8697 1.78982,121.282 c -0.49429,0.497 -0.49429,1.31 0,1.807 0.16878,0.17 0.3858,0.291 0.61486,0.34 l 108.81632,24.56 c 0.181,0.049 0.362,-0.072 0.41,-0.254 0.024,-0.122 -0.012,-0.243 -0.096,-0.328 z M 39.3319,81.6694 c 0.4822,-0.4852 0.6872,-1.2007 0.5184,-1.8678 L 21.2601,4.7248 C 21.1878,4.43371 20.8864,4.25177 20.597,4.32455 20.3921,4.37306 20.2354,4.54288 20.1871,4.76119 L 0.00555227,119.96 c -0.03616767,0.218 0.10849973,0.424 0.31345073,0.461 0.120559,0.024 0.253177,-0.012 0.349624,-0.109 L 30.507,90.4991 Z m 1.8084,-2.8745 c 0.1206,0.4851 0.6028,0.7884 1.0971,0.6671 0.0844,-0.0243 0.1567,-0.0485 0.229,-0.0971 L 137.696,24.4946 c 0.326,-0.194 0.434,-0.6064 0.253,-0.9339 -0.096,-0.1698 -0.265,-0.2911 -0.446,-0.3275 L 23.8642,0.0309915 C 23.0444,-0.138811 22.2487,0.40697 22.0799,1.23172 22.0317,1.45004 22.0437,1.68049 22.092,1.8988 Z M 138.974,25.5013 114.959,39.3281 43.3586,80.5778 c -0.4702,0.2668 -0.6269,0.8733 -0.3617,1.3463 0.0482,0.0849 0.1085,0.1577 0.1808,0.2304 l 12.0318,11.1221 58.1455,53.7904 c 0.386,0.352 0.977,0.328 1.326,-0.06 0.109,-0.121 0.193,-0.279 0.229,-0.449 L 139.987,26.229 c 0.072,-0.3638 -0.157,-0.7277 -0.519,-0.8126 -0.181,-0.0242 -0.349,0 -0.494,0.0849 z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
15
assets/dices/custom.svg
Normal file
15
assets/dices/custom.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.07,12.85c0.77-1.39,2.25-2.21,3.11-3.44c0.91-1.29,0.4-3.7-2.18-3.7c-1.69,0-2.52,1.28-2.87,2.34L6.54,6.96 C7.25,4.83,9.18,3,11.99,3c2.35,0,3.96,1.07,4.78,2.41c0.7,1.15,1.11,3.3,0.03,4.9c-1.2,1.77-2.35,2.31-2.97,3.45 c-0.25,0.46-0.35,0.76-0.35,2.24h-2.89C10.58,15.22,10.46,13.95,11.07,12.85z M14,20c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-1.1,0.9-2,2-2 S14,18.9,14,20z"
|
||||
fill="#000000"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 659 B |
1
assets/export.svg
Normal file
1
assets/export.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
|
||||
|
After Width: | Height: | Size: 198 B |
1
assets/history.svg
Normal file
1
assets/history.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
|
||||
|
After Width: | Height: | Size: 381 B |
1
assets/import.svg
Normal file
1
assets/import.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
|
||||
|
After Width: | Height: | Size: 194 B |
1
assets/light.svg
Normal file
1
assets/light.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
assets/menu.svg
Normal file
1
assets/menu.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
||||
|
After Width: | Height: | Size: 202 B |
1
assets/roll.svg
Normal file
1
assets/roll.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0zm21.02 19c0 1.1-.9 2-2 2h-14c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 18c-.83 0-1.5-.67-1.5-1.5S6.67 15 7.5 15s1.5.67 1.5 1.5S8.33 18 7.5 18zm0-9C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm0-9c-.83 0-1.5-.67-1.5-1.5S15.67 6 16.5 6s1.5.67 1.5 1.5S17.33 9 16.5 9z"/></svg>
|
||||
|
After Width: | Height: | Size: 686 B |
72
index.html
Executable file
72
index.html
Executable file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG Dices</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="js/libs/sidebar/sidebar.js"></script>
|
||||
<link href="js/libs/sidebar/sidebar.css" type="text/css" rel="stylesheet" />
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<label id="sidebar-toggle" class="sidebar-toggle" for="sidebar-toggle-input"><img src="./assets/menu.svg"></label>
|
||||
<input id="sidebar-toggle-input" type="checkbox" role="button">
|
||||
<div id="sidebar">
|
||||
<label id="sidebar-toggle-close" class="sidebar-toggle text-fresh float-right" for="sidebar-toggle-input"><img
|
||||
src="./assets/close.svg"></label>
|
||||
<ul class="menu">
|
||||
<li onclick="resetDices()"><img src="./assets/dices.svg"> Reset Dices</li>
|
||||
<li onclick="clearHistory()"><img src="./assets/history.svg"> Clear History</li>
|
||||
<li onclick="exportData()"><img src="./assets/export.svg"> Export Data</li>
|
||||
<li><label><img src="./assets/import.svg"> Import Data
|
||||
<input id="importFile" type="file" accept="application/json" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu">
|
||||
<li onclick="toggleDarkMode()"><img id="dark-mode-icon" src="./assets/dark.svg"><span id="dark-mode-text">Dark Mode</span></li>
|
||||
</ul>
|
||||
<script>
|
||||
Sidebar();
|
||||
</script>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="dices-container">
|
||||
<div class="dices" id="dices"></div>
|
||||
|
||||
<div class="form" id="form">
|
||||
<input min="1" value="1" type="number" id="inputCount">
|
||||
D
|
||||
<select value="6" id="inputSides" onchange="updateCustom()">
|
||||
<option>4</option>
|
||||
<option>6</option>
|
||||
<option>8</option>
|
||||
<option>10</option>
|
||||
<option>12</option>
|
||||
<option>20</option>
|
||||
<option>100</option>
|
||||
<option value="">custom</option>
|
||||
</select>
|
||||
<input class="hidden" min="2" value="2" type="number" id="inputCustom">
|
||||
+
|
||||
<input value="0" type="number" id="inputAddition">
|
||||
<input value="" type="color" id="inputColor">
|
||||
<button onclick="addDiceForm()"><img src="./assets/roll.svg"> Add Dice</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="history-container">
|
||||
<div class="menu">
|
||||
<button id="roll-button" onclick="rollSelected()"><img src="./assets/roll.svg"> Roll</button>
|
||||
<button id="history-button" onclick="clearHistory()"><img src="./assets/history.svg"> Clear History</button>
|
||||
</div>
|
||||
|
||||
<div class="history" id="history"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
js/libs/sidebar/sidebar.css
Normal file
41
js/libs/sidebar/sidebar.css
Normal file
@ -0,0 +1,41 @@
|
||||
/* sidebar */
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transition: 0.4s;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#sidebar-toggle {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:not(:checked) ~ #sidebar {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:checked ~ #sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#sidebar-toggle-input:checked ~ #sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
17
js/libs/sidebar/sidebar.js
Normal file
17
js/libs/sidebar/sidebar.js
Normal file
@ -0,0 +1,17 @@
|
||||
window.Sidebar = function () {
|
||||
let sidebar = document.querySelector("#sidebar");
|
||||
let close = document.querySelector("#sidebar-toggle-close");
|
||||
let toggle = document.querySelector("#sidebar-toggle-input");
|
||||
|
||||
sidebar.addEventListener("click", function (event) {
|
||||
if (document.body.clientWidth < 1280) {
|
||||
toggle.checked = false;
|
||||
}
|
||||
})
|
||||
|
||||
close.addEventListener("click", function (event) {
|
||||
if (document.body.clientWidth < 1280) {
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
}
|
||||
318
script.js
Executable file
318
script.js
Executable file
@ -0,0 +1,318 @@
|
||||
class Dice {
|
||||
constructor(sides, addition = 0, count = 1, color = "#000") {
|
||||
this.sides = sides;
|
||||
this.addition = addition;
|
||||
this.count = count;
|
||||
this.color = color;
|
||||
this.selected = false;
|
||||
}
|
||||
}
|
||||
|
||||
class DiceHistoryEntry {
|
||||
constructor(dice = undefined, formula = undefined, result = undefined) {
|
||||
this.dice = dice;
|
||||
this.formula = formula;
|
||||
this.result = result;
|
||||
}
|
||||
}
|
||||
|
||||
const default_sides = [4, 6, 8, 10, 12, 20, 100];
|
||||
const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#000000"];
|
||||
|
||||
let darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
let dices = [];
|
||||
let history = [];
|
||||
|
||||
let dicesContainer = document.getElementById("dices");
|
||||
let historyContainer = document.getElementById("history");
|
||||
|
||||
function getDiceLabel(dice) {
|
||||
return (dice.count > 1 ? dice.count : "") + "D" + dice.sides + (dice.addition ? (dice.addition < 0 ? "-" : "+") + Math.abs(dice.addition) : "");
|
||||
}
|
||||
|
||||
function renderDice(dice, index) {
|
||||
const diceElement = document.createElement("div");
|
||||
diceElement.classList.add("dice");
|
||||
|
||||
const diceImage = document.createElement("div");
|
||||
diceImage.classList.add("dice-image");
|
||||
if (default_sides.indexOf(dice.sides) != -1) {
|
||||
diceImage.classList.add("dice-image-" + dice.sides);
|
||||
} else {
|
||||
diceImage.classList.add("dice-image-custom");
|
||||
}
|
||||
if (dice.color) {
|
||||
diceImage.style.backgroundColor = dice.color;
|
||||
// revert b/w on dark-mode
|
||||
if (darkMode) {
|
||||
if (["#000", "#000000", "black", "rgb(0,0,0)", "rgb(0, 0, 0)"].indexOf(dice.color) != -1) {
|
||||
diceImage.style.backgroundColor = "#fff";
|
||||
} else if (["#fff", "#ffffff", "white", "rgb(255,255,255)", "rgb(255, 255, 255)"].indexOf(dice.color) != -1) {
|
||||
diceImage.style.backgroundColor = "#000";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const diceImageContainer = document.createElement("div");
|
||||
diceImageContainer.classList.add("dice-image-container");
|
||||
diceImageContainer.onclick = function () {
|
||||
if (dices[index].selected) {
|
||||
dices[index].selected = false;
|
||||
diceElement.classList.remove("selected");
|
||||
} else {
|
||||
dices[index].selected = true;
|
||||
diceElement.classList.add("selected");
|
||||
}
|
||||
|
||||
if (dices.filter((dice) => dice.selected).length) {
|
||||
document.getElementById('roll-button').classList.remove("disabled");
|
||||
} else {
|
||||
document.getElementById('roll-button').classList.add("disabled");
|
||||
}
|
||||
|
||||
localStorage.setItem('dices', JSON.stringify(dices));
|
||||
};
|
||||
diceImageContainer.appendChild(diceImage);
|
||||
|
||||
diceElement.appendChild(diceImageContainer);
|
||||
|
||||
const diceLabelContainer = document.createElement("div");
|
||||
diceLabelContainer.classList.add("label-container");
|
||||
|
||||
const diceLabel = document.createElement("label");
|
||||
diceLabel.innerText = getDiceLabel(dice);
|
||||
|
||||
diceLabelContainer.appendChild(diceLabel);
|
||||
diceElement.appendChild(diceLabelContainer);
|
||||
|
||||
const diceRemove = document.createElement("div");
|
||||
diceRemove.classList.add("remove");
|
||||
diceRemove.onclick = function () {
|
||||
removeDice(index);
|
||||
};
|
||||
diceElement.appendChild(diceRemove);
|
||||
|
||||
if (dice.selected) {
|
||||
diceElement.classList.add("selected");
|
||||
} else {
|
||||
diceElement.classList.remove("selected");
|
||||
}
|
||||
|
||||
|
||||
dicesContainer.appendChild(diceElement);
|
||||
}
|
||||
|
||||
function renderDices() {
|
||||
dicesContainer.innerHTML = "";
|
||||
dices.forEach((dice, index) => {
|
||||
renderDice(dice, index);
|
||||
})
|
||||
|
||||
if (dices.filter((dice) => dice.selected).length) {
|
||||
document.getElementById('roll-button').classList.remove("disabled");
|
||||
} else {
|
||||
document.getElementById('roll-button').classList.add("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
function addDice(sides, addition = 0, count = 1, color = "#000") {
|
||||
dices.push(new Dice(sides, addition, count, color));
|
||||
localStorage.setItem('dices', JSON.stringify(dices));
|
||||
renderDices();
|
||||
}
|
||||
|
||||
function removeDice(index) {
|
||||
dices.splice(index, 1);
|
||||
localStorage.setItem('dices', JSON.stringify(dices));
|
||||
renderDices();
|
||||
}
|
||||
|
||||
function resetDices() {
|
||||
dices = [];
|
||||
default_sides.forEach((side, i) => {
|
||||
dices.push(new Dice(side, 0, 1, default_colors[i]));
|
||||
});
|
||||
localStorage.setItem('dices', JSON.stringify(dices));
|
||||
renderDices();
|
||||
}
|
||||
|
||||
|
||||
function addDiceForm() {
|
||||
let inputSides = document.getElementById("inputSides");
|
||||
if (!inputSides.value) {
|
||||
inputSides = document.getElementById("inputCustom")
|
||||
}
|
||||
const inputAddition = document.getElementById("inputAddition");
|
||||
const inputCount = document.getElementById("inputCount");
|
||||
const inputColor = document.getElementById("inputColor");
|
||||
addDice(+inputSides.value, +inputAddition.value, +inputCount.value, inputColor.value);
|
||||
}
|
||||
|
||||
function setDicesContainer(container) {
|
||||
dicesContainer = container;
|
||||
}
|
||||
|
||||
function renderHistory() {
|
||||
historyContainer.innerHTML = "";
|
||||
if (history.length) {
|
||||
document.getElementById('history-button').classList.remove("disabled");
|
||||
} else {
|
||||
document.getElementById('history-button').classList.add("disabled");
|
||||
}
|
||||
history.forEach((entry) => {
|
||||
if (entry.dice && entry.result) {
|
||||
const entryElement = document.createElement("div");
|
||||
entryElement.classList.add("entry");
|
||||
const diceLabel = document.createElement("label");
|
||||
diceLabel.innerHTML = getDiceLabel(entry.dice) + ": ";
|
||||
diceLabel.style.color = entry.dice.color;
|
||||
// revert b/w on dark-mode
|
||||
if (darkMode) {
|
||||
if (["#000", "#000000", "black", "rgb(0,0,0)", "rgb(0, 0, 0)"].indexOf(entry.dice.color) != -1) {
|
||||
diceLabel.style.color = "#fff";
|
||||
} else if (["#fff", "#ffffff", "white", "rgb(255,255,255)", "rgb(255, 255, 255)"].indexOf(entry.dice.color) != -1) {
|
||||
diceLabel.style.color = "#000";
|
||||
}
|
||||
}
|
||||
entryElement.appendChild(diceLabel);
|
||||
|
||||
const diceResult = document.createElement("span");
|
||||
diceResult.innerText = entry.result;
|
||||
entryElement.appendChild(diceResult);
|
||||
|
||||
const diceFormula = document.createElement("span");
|
||||
const diceEqual = document.createElement("span");
|
||||
entryElement.appendChild(diceEqual);
|
||||
entryElement.appendChild(diceFormula);
|
||||
|
||||
if (entry.formula) {
|
||||
diceFormula.innerText = entry.formula;
|
||||
diceEqual.innerText = " = "
|
||||
}
|
||||
|
||||
historyContainer.appendChild(entryElement);
|
||||
} else {
|
||||
historyContainer.appendChild(document.createElement("hr"));
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function roll(dice) {
|
||||
let formula = "";
|
||||
for (let index = 0; index < dice.count; index++) {
|
||||
formula += Math.floor(Math.random() * dice.sides + 1);
|
||||
if (index < dice.count - 1) {
|
||||
formula += " + ";
|
||||
}
|
||||
}
|
||||
if (dice.addition) {
|
||||
formula += " + " + dice.addition;
|
||||
}
|
||||
const result = eval(formula);
|
||||
if (formula.indexOf("+") == -1) {
|
||||
formula = "";
|
||||
}
|
||||
history.unshift(new DiceHistoryEntry(dice, formula, result));
|
||||
localStorage.setItem('history', JSON.stringify(history));
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
function rollSelected() {
|
||||
if (dices.filter((dice) => dice.selected).length) {
|
||||
if (history.length) {
|
||||
history.unshift(new DiceHistoryEntry());
|
||||
}
|
||||
dices.forEach((dice) => {
|
||||
if (dice.selected) {
|
||||
roll(dice);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function clearHistory() {
|
||||
history = [];
|
||||
localStorage.removeItem('history');
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
function exportData() {
|
||||
const downloadButton = document.createElement('a');
|
||||
downloadButton.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify({ dices: dices, history: history })));
|
||||
downloadButton.setAttribute('download', 'rgp-dices-' + new Date().toISOString() + '.json');
|
||||
document.body.appendChild(downloadButton);
|
||||
downloadButton.click();
|
||||
document.body.removeChild(downloadButton);
|
||||
}
|
||||
|
||||
function importData(event) {
|
||||
event.target.parentElement.classList.remove("error");
|
||||
try {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', async (event) => {
|
||||
const data = JSON.parse(event.target.result);
|
||||
if (data.dices) {
|
||||
dices = data.dices;
|
||||
renderDices();
|
||||
}
|
||||
if (data.history) {
|
||||
history = data.history;
|
||||
renderHistory();
|
||||
}
|
||||
});
|
||||
|
||||
reader.readAsText(event.target.files[0]);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
event.target.parentElement.classList.add("error");
|
||||
}
|
||||
}
|
||||
|
||||
function updateCustom() {
|
||||
if (!document.getElementById("inputSides").value) {
|
||||
document.getElementById("inputCustom").classList.remove("hidden");
|
||||
} else {
|
||||
document.getElementById("inputCustom").classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
if (darkMode) {
|
||||
darkMode = false;
|
||||
document.body.classList.remove("dark");
|
||||
document.getElementById("dark-mode-icon").src = "./assets/dark.svg";
|
||||
document.getElementById("dark-mode-text").innerText = "Dark Mode";
|
||||
} else {
|
||||
darkMode = true;
|
||||
document.body.classList.add("dark");
|
||||
document.getElementById("dark-mode-icon").src = "./assets/light.svg";
|
||||
document.getElementById("dark-mode-text").innerText = "Light Mode";
|
||||
}
|
||||
renderDices();
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
if (localStorage.getItem('dices')) {
|
||||
dices = JSON.parse(localStorage.getItem('dices'));
|
||||
} else {
|
||||
default_sides.forEach((side, i) => {
|
||||
dices.push(new Dice(side, 0, 1, default_colors[i]));
|
||||
})
|
||||
}
|
||||
|
||||
if (localStorage.getItem('history')) {
|
||||
history = JSON.parse(localStorage.getItem('history'));
|
||||
}
|
||||
|
||||
document.getElementById("importFile").addEventListener("change", importData);
|
||||
|
||||
renderDices();
|
||||
renderHistory();
|
||||
updateCustom();
|
||||
|
||||
if (darkMode) {
|
||||
document.body.classList.add("dark");
|
||||
document.getElementById("dark-mode-icon").src = "./assets/light.svg";
|
||||
document.getElementById("dark-mode-text").innerText = "Light Mode";
|
||||
}
|
||||
290
style.css
Executable file
290
style.css
Executable file
@ -0,0 +1,290 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
white-space: nowrap;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 1.5em;
|
||||
margin-left: 0.5em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu input[type="file"] {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
|
||||
.menu li:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.menu li label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu li img {
|
||||
height: 1.2em;
|
||||
width: auto;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.container,
|
||||
.dices-container,
|
||||
.history-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dices {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
min-height: 12em;
|
||||
}
|
||||
|
||||
.dice {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 10em;
|
||||
height: 12em;
|
||||
margin: 0 0.2em;
|
||||
border: 0.3em solid transparent;
|
||||
}
|
||||
|
||||
.dice .label-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0.2em;
|
||||
z-index: 2;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.dice label {
|
||||
font-size: 1em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dice.selected label {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dice .dice-image-container {
|
||||
position: relative;
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0.1em 0.1em 0.1em transparent) drop-shadow(-0.1em -0.1em 0.1em transparent);
|
||||
}
|
||||
|
||||
.dice .dice-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.dice.selected .dice-image-container {
|
||||
filter: drop-shadow(0.1em 0.1em 0.1em #333) drop-shadow(-0.1em -0.1em 0.1em #333);
|
||||
}
|
||||
|
||||
.dice .remove {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.2em;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.dice .remove::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #DD0000;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-image: url(./assets/close.svg);
|
||||
}
|
||||
|
||||
|
||||
.dice .remove:hover {
|
||||
filter: brightness(0.5);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-4 {
|
||||
mask-image: url(./assets/dices/4.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-6 {
|
||||
mask-image: url(./assets/dices/6.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-8 {
|
||||
mask-image: url(./assets/dices/8.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-10 {
|
||||
mask-image: url(./assets/dices/10.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-12 {
|
||||
mask-image: url(./assets/dices/12.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-20 {
|
||||
mask-image: url(./assets/dices/20.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-100 {
|
||||
mask-image: url(./assets/dices/100.svg);
|
||||
}
|
||||
|
||||
.dice .dice-image.dice-image-custom {
|
||||
mask-image: url(./assets/dices/custom.svg);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.form input,
|
||||
.form select {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.history-container {
|
||||
margin-top: 2em;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.history-container .menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.history .entry {
|
||||
margin: 0.3em 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 0.5fr 5fr;
|
||||
}
|
||||
|
||||
.history hr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
button img {
|
||||
height: 1.2em;
|
||||
width: auto;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
button.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background-color: #000;
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
body.dark #sidebar {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
body.dark #sidebar-toggle,
|
||||
body.dark #sidebar-toggle-close,
|
||||
body.dark .menu li img,
|
||||
body.dark button img {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
body.dark button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark .dice.selected .dice-image-container {
|
||||
filter: drop-shadow(0.1em 0.1em 0.1em #efefef) drop-shadow(-0.1em -0.1em 0.1em #efefef);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.dices {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user