├── README.md
├── animation_list.json
├── assets
├── neon
│ ├── neon.atlas
│ ├── neon.png
│ └── neon.skel
└── spine_boy
│ ├── spine_boy.atlas
│ ├── spine_boy.png
│ └── spine_boy.skel
├── css
├── index.css
└── spine-player.css
├── index.html
├── js
├── change_current_animation.js
├── make_list.js
├── toggles.js
└── zoom&drag.js
└── spine
├── spine-player40.js
└── spine-player41.js
/README.md:
--------------------------------------------------------------------------------
1 | # spine-web-player-template
2 | A template based on the design of the live2d visualiser of the website nikke-db. Only works with animations made using the spine software and of the versions 4.0 or 4.1.
3 | The template will work with any animation made from spine, not restricting to animations coming only from the game Nikke: Goddess of Victory.
4 |
5 | # Installation
6 | ```git clone https://github.com/Nikke-db/spine-web-player-template.git```
7 | Or download as .zip and extract.
8 |
9 | # How to use
10 |
11 | In ```animation_list.json``` add a name to your animation and give it a custom ID. This ID is extremely important.
12 | As of 24th may 2023 you also need to reference the spine version of the assets, in order to call the right spine player.
13 | In ```/assets```, create a folder using the ID of your animation as a name.
14 | Inside ```/assets/ID``` you must import a ```ID.atlas```, ```ID.png```, and ```ID.skel```.
15 | Make sure the 1st line of ```ID.atlas``` have the correct name file for ```ID.png```.
16 | If everything have been done correctly, the new animated character will appear in the list, and clicking on it will open the animation on the browser.
17 | Please check how it is working for spine_boy and neon if it doesn't work. Or send me a message.
18 |
19 | By default, the animation is paused. Click the play button on the bottom left corner.
20 | You can change the current animation with the running icon in the bottom right corner.
21 |
22 | # How to launch
23 |
24 | The program make CORS requests to load the files needed, meaning it cannot be launched as is. The easiest way to make it work locally is by using the extension Live Server in Visual Studio Code.
25 |
26 | # Features
27 |
28 | You can zoom using the scrool wheel, and click + drag to move the animation around the screen.
29 |
30 | # Json vs Skel
31 |
32 | By default, the program works with .skel files. If you use .json files for your animations, please go to ```js/change_current_animation.js```, uncomment line 27 and comment line 28.
33 |
34 | # Credits
35 |
36 | Spine web player made by esoteric software, learn more about it at http://esotericsoftware.com/spine-player.
37 | Template made by Koshirei https://github.com/Koshirei and used for the Nikke-db website https://github.com/Nikke-db/Nikke-db.github.io.
38 |
--------------------------------------------------------------------------------
/animation_list.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "Spine Boy",
4 | "id": "spine_boy",
5 | "version": 4.0
6 | },
7 | {
8 | "name":"Neon",
9 | "id":"neon",
10 | "version": 4.1
11 | }
12 | ]
--------------------------------------------------------------------------------
/assets/neon/neon.atlas:
--------------------------------------------------------------------------------
1 | neon.png
2 | size:2048,2048
3 | filter:Linear,Linear
4 | pma:true
5 | angry_acc_1
6 | bounds:711,2008,39,38
7 | angry_brow_1
8 | bounds:247,2038,32,8
9 | angry_brow_2
10 | bounds:247,1804,12,11
11 | angry_mouth
12 | bounds:829,1898,24,32
13 | arm_l_1
14 | bounds:394,1353,121,403
15 | rotate:90
16 | arm_l_2
17 | bounds:1753,414,252,271
18 | arm_l_b_1
19 | bounds:302,790,254,215
20 | offsets:1,1,256,222
21 | arm_l_b_2
22 | bounds:1461,409,106,279
23 | offsets:1,1,108,282
24 | arm_l_s
25 | bounds:1174,811,131,136
26 | arm_r_1
27 | bounds:804,1352,257,369
28 | arm_r_1_2
29 | bounds:266,157,115,73
30 | arm_r_acc_01
31 | bounds:824,1558,69,84
32 | arm_r_acc_02
33 | bounds:1617,1441,65,83
34 | arm_r_acc_03
35 | bounds:409,33,65,84
36 | arm_r_acc_04
37 | bounds:339,649,83,101
38 | rotate:90
39 | arm_r_acc_05
40 | bounds:1750,1959,81,111
41 | rotate:90
42 | arm_r_acc_06
43 | bounds:1316,178,169,145
44 | arm_r_acc_07
45 | bounds:1738,1091,85,135
46 | arm_r_acc_08
47 | bounds:1605,851,73,142
48 | arm_r_acc_09
49 | bounds:1236,710,66,69
50 | arm_r_acc_10
51 | bounds:419,1010,81,122
52 | rotate:90
53 | arm_r_acc_11
54 | bounds:73,52,213,221
55 | rotate:270
56 | arm_r_acc_12
57 | bounds:1188,266,140,91
58 | rotate:270
59 | back
60 | bounds:2,231,116,324
61 | rotate:90
62 | back_hair_1
63 | bounds:867,616,92,465
64 | rotate:90
65 | back_hair_2
66 | bounds:2,658,130,426
67 | rotate:90
68 | back_hair_3
69 | bounds:2,349,108,273
70 | rotate:90
71 | bag_01
72 | bounds:1611,1220,306,246
73 | rotate:90
74 | bag_02
75 | bounds:274,332,94,98
76 | bag_03
77 | bounds:1883,1469,135,393
78 | bag_04
79 | bounds:816,253,240,237
80 | bag_back
81 | bounds:1920,1918,94,128
82 | belt
83 | bounds:1044,397,324,151
84 | body_01
85 | bounds:1350,1653,358,394
86 | offsets:7,0,365,406
87 | rotate:90
88 | body_2
89 | bounds:1082,1857,264,189
90 | body_ribbon_1
91 | bounds:162,1302,41,39
92 | body_ribbon_2
93 | bounds:1018,1534,89,213
94 | body_ribbon_3
95 | bounds:621,63,116,170
96 | body_s_01
97 | bounds:1569,417,204,256
98 | offsets:0,0,204,283
99 | button_1
100 | bounds:224,1621,28,29
101 | button_2
102 | bounds:366,1379,20,41
103 | cap_01
104 | bounds:319,1824,49,50
105 | cap_02
106 | bounds:1347,1996,64,50
107 | cap_03
108 | bounds:247,1781,21,22
109 | cap_04
110 | bounds:653,35,85,116
111 | cap_05
112 | bounds:1040,821,362,326
113 | rotate:90
114 | cap_06
115 | bounds:1028,65,267,185
116 | rotate:180
117 | cap_07
118 | bounds:815,327,56,55
119 | cap_ribbon_1
120 | bounds:946,1352,84,140
121 | cap_ribbon_2
122 | bounds:896,1616,34,54
123 | cap_ribbon_3
124 | bounds:402,1766,56,200
125 | rotate:90
126 | cap_ribbon_4
127 | bounds:933,1933,109,113
128 | cap_ribbon_5
129 | bounds:546,905,72,185
130 | cheek_01
131 | bounds:33,1700,27,18
132 | cheek_02
133 | bounds:576,1228,52,27
134 | cheek_03
135 | bounds:1377,248,205,143
136 | offsets:7,7,212,150
137 | cloth_01
138 | bounds:999,796,127,119
139 | rotate:90
140 | cloth_02
141 | bounds:1220,970,234,126
142 | cloth_03
143 | bounds:1627,225,126,238
144 | offsets:5,0,131,238
145 | rotate:270
146 | cloth_04
147 | bounds:1857,1543,101,229
148 | rotate:180
149 | cloth_05
150 | bounds:802,571,117,123
151 | rotate:90
152 | delight_eyebrow_1
153 | bounds:623,1478,32,18
154 | delight_eyebrow_2
155 | bounds:358,1835,13,9
156 | delight_mouth_1
157 | bounds:32,1603,18,8
158 | delight_mouth_2
159 | bounds:630,1202,44,35
160 | offsets:0,22,44,57
161 | ear_r
162 | bounds:1005,1356,66,77
163 | emotion_1
164 | bounds:430,713,75,75
165 | eye_l
166 | bounds:2,1170,21,42
167 | eye_r
168 | bounds:247,1734,37,44
169 | eyebrow_l
170 | bounds:270,1783,16,14
171 | eyebrow_r
172 | bounds:118,1307,41,21
173 | eyebrow_r_2
174 | bounds:735,1506,38,22
175 | eyehi_l
176 | bounds:947,2021,20,25
177 | eyehi_r
178 | bounds:564,1476,43,29
179 | eyehole_l
180 | bounds:1044,1953,28,48
181 | offsets:2,0,31,48
182 | eyehole_r
183 | bounds:887,1995,58,51
184 | offsets:0,1,58,52
185 | eyelash_l_01
186 | bounds:74,1581,33,23
187 | eyelash_l_02
188 | bounds:660,1800,16,22
189 | eyelash_r_01
190 | bounds:149,1592,43,33
191 | eyelash_r_02
192 | bounds:2,1686,32,32
193 | eyelash_r_03
194 | bounds:254,1638,26,20
195 | eyeline_l_01
196 | bounds:607,1056,23,34
197 | eyeline_l_02
198 | bounds:678,1805,18,17
199 | eyeline_l_03
200 | bounds:779,1469,22,45
201 | offsets:0,0,23,45
202 | eyeline_l_04
203 | bounds:385,1370,27,24
204 | offsets:0,0,27,25
205 | eyeline_r_01
206 | bounds:2,26,130,78
207 | rotate:180
208 | eyeline_r_02
209 | bounds:411,1770,46,17
210 | eyeline_r_03
211 | bounds:425,1008,45,31
212 | eyeline_r_04
213 | bounds:711,1833,46,16
214 | eyeline_r_05
215 | bounds:277,31,79,57
216 | eyeline_r_06
217 | bounds:735,1347,75,28
218 | face
219 | bounds:2,809,301,300
220 | offsets:0,0,303,300
221 | face_hi_1
222 | bounds:1745,1850,21,107
223 | face_hi_2
224 | bounds:247,1951,9,19
225 | fin_l_2
226 | bounds:1274,848,59,87
227 | fin_l_3
228 | bounds:1808,1225,50,106
229 | fin_l_4
230 | bounds:2,1214,31,105
231 | fin_l_5
232 | bounds:1296,710,27,98
233 | fin_l_6
234 | bounds:247,1861,22,81
235 | gla_01
236 | bounds:482,1233,92,42
237 | gla_02
238 | bounds:2,1304,13,24
239 | gla_02_2
240 | bounds:713,1186,28,33
241 | gla_03
242 | bounds:932,1657,48,40
243 | gla_04
244 | bounds:479,559,97,91
245 | gla_05
246 | bounds:2,1604,28,25
247 | gla_06
248 | bounds:777,1872,50,80
249 | gla_07
250 | bounds:308,1701,16,27
251 | gla_08
252 | bounds:711,1983,12,23
253 | gla_hi
254 | bounds:687,478,81,91
255 | gla_s_01
256 | bounds:147,87,92,92
257 | gla_s_02
258 | bounds:515,1754,71,20
259 | gla_s_03
260 | bounds:539,1735,27,23
261 | gla_s_04
262 | bounds:1097,1100,38,41
263 | gun_1
264 | bounds:558,406,484,391
265 | rotate:180
266 | gun_2
267 | bounds:1200,789,536,429
268 | offsets:0,109,536,538
269 | rotate:180
270 | gun_3
271 | bounds:2,1330,1146,716
272 | gun_4
273 | bounds:1652,794,359,688
274 | offsets:13,0,372,688
275 | rotate:180
276 | hair_f_01
277 | bounds:1223,517,133,119
278 | hair_f_02
279 | bounds:200,781,91,117
280 | hair_f_03
281 | bounds:1214,1854,140,55
282 | hair_f_04
283 | bounds:463,255,91,56
284 | hair_f_05
285 | bounds:792,157,115,234
286 | rotate:270
287 | hair_l_01
288 | bounds:1713,1528,132,429
289 | hair_r_01
290 | bounds:1024,1427,21,105
291 | hair_r_02
292 | bounds:1798,1509,129,512
293 | hair_r_04
294 | bounds:367,184,119,405
295 | rotate:90
296 | hair_r_05
297 | bounds:364,385,145,537
298 | rotate:90
299 | hair_r_06
300 | bounds:743,686,160,588
301 | rotate:90
302 | hair_s_01
303 | bounds:1676,1964,76,82
304 | hair_s_02
305 | bounds:271,1327,21,50
306 | hair_s_03
307 | bounds:760,53,58,350
308 | hair_s_04
309 | bounds:1069,1065,27,85
310 | hairpin
311 | bounds:1134,2012,79,34
312 | hand_l_1
313 | bounds:304,1008,113,93
314 | hand_l_b
315 | bounds:1617,1526,90,129
316 | offsets:1,1,92,131
317 | hand_l_b_1
318 | bounds:662,751,79,44
319 | offsets:1,1,81,46
320 | hand_l_b_2
321 | bounds:673,1474,104,30
322 | offsets:1,1,106,32
323 | hand_l_b_3
324 | bounds:1027,1154,113,46
325 | offsets:1,1,115,48
326 | hand_l_b_4
327 | bounds:1035,2003,97,43
328 | offsets:2,1,100,45
329 | hiar_r_03
330 | bounds:2,549,160,512
331 | rotate:90
332 | leg_l_1
333 | bounds:280,1182,213,1062
334 | rotate:270
335 | leg_l_2
336 | bounds:1332,1104,283,548
337 | leg_l_sha
338 | bounds:1905,791,141,609
339 | leg_r_1
340 | bounds:2,1043,285,1079
341 | rotate:90
342 | leg_r_2
343 | bounds:1048,1397,343,455
344 | leg_r_3
345 | bounds:999,946,33,95
346 | leg_r_4
347 | bounds:711,1850,71,147
348 | offsets:0,3,71,150
349 | leg_sha_1
350 | bounds:1058,252,128,143
351 | offsets:1,1,131,150
352 | leg_sha_2
353 | bounds:343,431,343,138
354 | offsets:2,18,345,169
355 | lip_01
356 | bounds:676,1192,45,38
357 | lip_02
358 | bounds:514,1060,35,24
359 | lip_03
360 | bounds:602,1479,20,46
361 | offsets:0,0,20,47
362 | lip_04
363 | bounds:188,1611,35,28
364 | offsets:1,0,36,28
365 | lip_05
366 | bounds:391,1007,38,38
367 | lip_r_2
368 | bounds:308,1656,42,51
369 | offsets:1,3,44,56
370 | neck_01
371 | bounds:2,1058,96,41
372 | neck_02
373 | bounds:973,497,117,138
374 | rotate:90
375 | neck_3
376 | bounds:293,76,235,132
377 | neck_4
378 | bounds:1388,1654,62,59
379 | no_eyebrow_1
380 | bounds:62,1708,32,10
381 | no_eyebrow_2
382 | bounds:247,1725,13,14
383 | no_glass_1
384 | bounds:927,542,37,62
385 | no_glass_2
386 | bounds:207,1290,68,69
387 | no_mouth
388 | bounds:249,1351,22,16
389 | nose
390 | bounds:475,38,43,116
391 | nose_hi
392 | bounds:282,1640,19,19
393 | pant_2
394 | bounds:1696,653,321,195
395 | pant_3
396 | bounds:1861,230,185,155
397 | pant_hi
398 | bounds:558,821,64,82
399 | r_arm2
400 | bounds:2,1606,120,304
401 | rotate:270
402 | r_arm_3
403 | bounds:1217,228,243,261
404 | offsets:0,0,248,261
405 | r_fin_1
406 | bounds:343,488,52,76
407 | r_fin_2
408 | bounds:92,1560,57,50
409 | r_fin_2_2
410 | bounds:1063,1694,33,63
411 | r_fin_3
412 | bounds:1368,1076,70,70
413 | r_fin_4
414 | bounds:603,1766,58,56
415 | offsets:3,0,61,56
416 | r_fin_5
417 | bounds:1068,1364,57,56
418 | offsets:3,0,60,56
419 | r_fin_b_2
420 | bounds:2,176,71,105
421 | r_fin_b_3
422 | bounds:626,96,56,111
423 | r_fin_b_4
424 | bounds:1401,553,39,110
425 | r_fin_b_5
426 | bounds:1801,1761,29,100
427 | offsets:2,0,31,100
428 | r_hand
429 | bounds:1110,484,122,131
430 | rip_hi
431 | bounds:349,2037,22,9
432 | rip_r_1
433 | bounds:2,790,44,69
434 | offsets:3,0,49,72
435 | s_bag_1
436 | bounds:562,243,141,197
437 | offsets:3,0,144,202
438 | rotate:90
439 | s_bag_2
440 | bounds:247,1854,124,192
441 | offsets:3,0,127,192
442 | shy_cheek_1
443 | bounds:1507,1220,99,97
444 | rotate:90
445 | shy_cheek_2
446 | bounds:1588,1997,68,49
447 | shy_eye_1
448 | bounds:2,1012,36,44
449 | shy_eye_2
450 | bounds:247,1797,70,63
451 | shy_eyebrow_1
452 | bounds:92,1314,29,14
453 | offsets:0,1,29,15
454 | shy_eyebrow_2
455 | bounds:247,1852,15,7
456 | worry_eyebrow_2
457 | bounds:247,1852,15,7
458 | shy_mouth_1
459 | bounds:286,1746,16,7
460 | shy_mouth_2
461 | bounds:999,801,44,54
462 | skirt_01
463 | bounds:2,432,134,339
464 | rotate:90
465 | skirt_02
466 | bounds:1631,322,116,334
467 | rotate:270
468 | skirt_03
469 | bounds:1338,657,212,344
470 | rotate:90
471 | skirt_04
472 | bounds:328,231,154,247
473 | rotate:90
474 | skirt_05
475 | bounds:1887,1815,153,115
476 | skirt_06
477 | bounds:1860,1337,57,306
478 | skirt_back
479 | bounds:1355,491,61,158
480 | skirt_f_01
481 | bounds:373,1824,222,336
482 | offsets:1,1,224,338
483 | rotate:90
484 | skirt_f_02
485 | bounds:2,1720,243,326
486 | offsets:1,1,245,328
487 | skirt_f_03
488 | bounds:633,797,203,295
489 | offsets:1,1,205,297
490 | skirt_f_04
491 | bounds:838,818,159,244
492 | offsets:1,1,161,246
493 | skirt_s_1
494 | bounds:516,569,204,169
495 | rotate:180
496 | skirt_s_2
497 | bounds:2,133,138,165
498 | rotate:90
499 | skirt_s_3
500 | bounds:523,96,101,110
501 | surprise_eyebrow_1
502 | bounds:96,1711,35,7
503 | surprise_eyebrow_2
504 | bounds:379,1810,12,12
505 | surprise_mouth
506 | bounds:285,1074,18,36
507 | tooth
508 | bounds:283,1728,27,15
509 | worry_eye_1
510 | bounds:2,629,64,63
511 | worry_eye_2
512 | bounds:507,748,34,40
513 | worry_eyebrow_1
514 | bounds:532,1476,29,15
515 | worry_mouth
516 | bounds:784,1961,20,22
517 |
--------------------------------------------------------------------------------
/assets/neon/neon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nikke-db/spine-web-player-template/06dfdde6c4bfd6378a97d1b29801554b83d5b237/assets/neon/neon.png
--------------------------------------------------------------------------------
/assets/neon/neon.skel:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nikke-db/spine-web-player-template/06dfdde6c4bfd6378a97d1b29801554b83d5b237/assets/neon/neon.skel
--------------------------------------------------------------------------------
/assets/spine_boy/spine_boy.atlas:
--------------------------------------------------------------------------------
1 | spine_boy.png
2 | size: 1024, 256
3 | filter: Linear, Linear
4 | pma: true
5 | scale: 0.5
6 | crosshair
7 | bounds: 813, 160, 45, 45
8 | eye-indifferent
9 | bounds: 569, 2, 47, 45
10 | eye-surprised
11 | bounds: 643, 7, 47, 45
12 | rotate: 90
13 | front-bracer
14 | bounds: 811, 51, 29, 40
15 | front-fist-closed
16 | bounds: 807, 93, 38, 41
17 | front-fist-open
18 | bounds: 815, 210, 43, 44
19 | front-foot
20 | bounds: 706, 64, 63, 35
21 | rotate: 90
22 | front-shin
23 | bounds: 80, 11, 41, 92
24 | front-thigh
25 | bounds: 754, 12, 23, 56
26 | front-upper-arm
27 | bounds: 618, 5, 23, 49
28 | goggles
29 | bounds: 214, 20, 131, 83
30 | gun
31 | bounds: 347, 14, 105, 102
32 | rotate: 90
33 | head
34 | bounds: 80, 105, 136, 149
35 | hoverboard-board
36 | bounds: 2, 8, 246, 76
37 | rotate: 90
38 | hoverboard-thruster
39 | bounds: 478, 2, 30, 32
40 | hoverglow-small
41 | bounds: 218, 117, 137, 38
42 | rotate: 90
43 | mouth-grind
44 | bounds: 775, 80, 47, 30
45 | rotate: 90
46 | mouth-oooo
47 | bounds: 779, 31, 47, 30
48 | rotate: 90
49 | mouth-smile
50 | bounds: 783, 207, 47, 30
51 | rotate: 90
52 | muzzle-glow
53 | bounds: 779, 4, 25, 25
54 | muzzle-ring
55 | bounds: 451, 14, 25, 105
56 | muzzle01
57 | bounds: 664, 60, 67, 40
58 | rotate: 90
59 | muzzle02
60 | bounds: 580, 56, 68, 42
61 | rotate: 90
62 | muzzle03
63 | bounds: 478, 36, 83, 53
64 | rotate: 90
65 | muzzle04
66 | bounds: 533, 49, 75, 45
67 | rotate: 90
68 | muzzle05
69 | bounds: 624, 56, 68, 38
70 | rotate: 90
71 | neck
72 | bounds: 806, 8, 18, 21
73 | portal-bg
74 | bounds: 258, 121, 133, 133
75 | portal-flare1
76 | bounds: 690, 2, 56, 30
77 | rotate: 90
78 | portal-flare2
79 | bounds: 510, 3, 57, 31
80 | portal-flare3
81 | bounds: 722, 4, 58, 30
82 | rotate: 90
83 | portal-shade
84 | bounds: 393, 121, 133, 133
85 | portal-streaks1
86 | bounds: 528, 126, 126, 128
87 | portal-streaks2
88 | bounds: 656, 129, 125, 125
89 | rear-bracer
90 | bounds: 826, 13, 28, 36
91 | rear-foot
92 | bounds: 743, 70, 57, 30
93 | rotate: 90
94 | rear-shin
95 | bounds: 174, 14, 38, 89
96 | rear-thigh
97 | bounds: 783, 158, 28, 47
98 | rear-upper-arm
99 | bounds: 783, 136, 20, 44
100 | rotate: 90
101 | torso
102 | bounds: 123, 13, 49, 90
103 |
--------------------------------------------------------------------------------
/assets/spine_boy/spine_boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nikke-db/spine-web-player-template/06dfdde6c4bfd6378a97d1b29801554b83d5b237/assets/spine_boy/spine_boy.png
--------------------------------------------------------------------------------
/assets/spine_boy/spine_boy.skel:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nikke-db/spine-web-player-template/06dfdde6c4bfd6378a97d1b29801554b83d5b237/assets/spine_boy/spine_boy.skel
--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --main-dark-theme: #212529;
3 | --alt-dark-theme: #2f353a;
4 | }
5 |
6 | body {
7 | background-repeat: no-repeat;
8 | background-position-x:center;
9 | background-position-y:center;
10 | overflow: hidden;
11 | height:100vh;
12 | background-color: var(--alt-dark-theme);
13 | }
14 |
15 | #player-container {
16 | margin-left: 15vw;
17 | max-width: 100vw;
18 |
19 | }
20 |
21 | .spine-player-canvas {
22 | margin-top: 7%;
23 | margin-left: 15%;
24 | height: 95%
25 | }
26 |
27 | .spine-player-controls {
28 | position: fixed;
29 | bottom: 0;
30 | }
31 |
32 | #visualiserMain {
33 | background-color: var(--main-dark-theme);
34 | border-bottom-right-radius: 10px;
35 | border-left: 2px white dashed;
36 | border-top-right-radius: 10px;
37 | margin-left: 20px;
38 | padding-top:10px;
39 | position: fixed;
40 | overflow: auto;
41 | height: 76vh;
42 | bottom: 7vh;
43 | width:200px;
44 | z-index: 1;
45 | left: 0;
46 | }
47 |
48 | .charDiv {
49 | font-family: Arial, Helvetica, sans-serif;
50 | border: var(--main-dark-theme) 2px solid;
51 | border: gold 2px solid;
52 | margin: 0 5px 10px 5px;
53 | list-style-type: none;
54 | border-radius: 10px;
55 | user-select: none;
56 | transition: 0.5s;
57 | color:white;
58 | padding:10px;
59 | }
60 |
61 | .charDiv:hover {
62 | background-color: var(--alt-dark-theme);
63 | transition: 0.5s;
64 | cursor: pointer;
65 | }
66 |
67 | #premutipliedToggle {
68 | font-family: Arial, Helvetica, sans-serif;
69 | background-color: var(--main-dark-theme);
70 | color: white;
71 | padding: 10px;
72 | position: absolute;
73 | width: 180px;
74 | margin-left: 10px;
75 | top: 10vh;
76 | border-top-right-radius: 10px;
77 | border-bottom-right-radius: 10px;
78 | border-left: 2px white dashed;
79 | }
--------------------------------------------------------------------------------
/css/spine-player.css:
--------------------------------------------------------------------------------
1 |
2 | /** Player **/
3 | .spine-player {
4 | box-sizing: border-box;
5 | width: 100%;
6 | height: 100%;
7 | background: none;
8 | }
9 | .spine-player * {
10 | box-sizing: border-box;
11 | font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
12 | color: #dddddd;
13 | -webkit-touch-callout: none;
14 | -webkit-user-select: none;
15 | -khtml-user-select: none;
16 | -moz-user-select: none;
17 | -ms-user-select: none;
18 | user-select: none;
19 | }
20 |
21 | .spine-player-error {
22 | font-size: 14px;
23 | z-index: -5;
24 | border-radius: 4px;
25 | -webkit-user-select: text;
26 | -khtml-user-select: text;
27 | -moz-user-select: text;
28 | -ms-user-select: text;
29 | user-select: text;
30 | }
31 |
32 | .spine-player-hidden {
33 | display: none;
34 | }
35 |
36 | /** Canvas **/
37 | .spine-player canvas {
38 | border-radius: 4px;
39 | }
40 |
41 | /** Slider **/
42 | .spine-player-slider {
43 | width: 100%;
44 | height: 16px;
45 | position: relative;
46 | cursor: pointer;
47 | }
48 | .spine-player-slider-value {
49 | position: absolute;
50 | bottom: 0;
51 | height: 2px;
52 | background: white;
53 | cursor: pointer;
54 | transition: height 0.2s;
55 | }
56 | .spine-player-slider:hover .spine-player-slider-value {
57 | height: 4px;
58 | background: white;
59 | transition: height 0.2s;
60 | }
61 | .spine-player-slider-value.hovering {
62 | height: 4px;
63 | background: white;
64 | transition: height 0.2s;
65 | }
66 | .spine-player-slider.big {
67 | height: 12px;
68 | background: rgb(0, 0, 0);
69 | }
70 | .spine-player-slider.big .spine-player-slider-value {
71 | height: 12px;
72 | background: white;
73 | }
74 |
75 | /** Column and row layout elements **/
76 | .spine-player-column {
77 | display: flex;
78 | flex-direction: column;
79 | }
80 | .spine-player-row {
81 | display: flex;
82 | flex-direction: row;
83 | }
84 |
85 | /** List **/
86 | .spine-player-list {
87 | list-style: none !important;
88 | padding: 0 !important;
89 | margin: 0 !important;
90 | }
91 | .spine-player-list li {
92 | cursor: pointer;
93 | margin: 8px 8px;
94 | }
95 | .spine-player-list .selectable {
96 | display: flex;
97 | flex-direction: row;
98 | margin: 0 !important;
99 | padding: 2px 20px 2px 0 !important;
100 | }
101 | .spine-player-list li.selectable:first-child {
102 | margin-top: 4px !important;
103 | }
104 | .spine-player-list li.selectable:last-child {
105 | margin-bottom: 4px !important;
106 | }
107 | .spine-player-list li.selectable:hover {
108 | background: #6e6e6e;
109 | }
110 | .spine-player-list li.selectable .selectable-circle {
111 | display: flex;
112 | flex-direction: row;
113 | width: 6px;
114 | min-width: 6px;
115 | height: 6px;
116 | border-radius: 50%;
117 | background: #fff;
118 | align-self: center;
119 | opacity: 0;
120 | margin: 5px 10px;
121 | }
122 | .spine-player-list li.selectable.selected .selectable-circle {
123 | opacity: 1;
124 | }
125 | .spine-player-list li.selectable .selectable-text {
126 | color: #aaa;
127 | }
128 | .spine-player-list li.selectable.selected .selectable-text, .spine-player-list li.selectable:hover .selectable-text {
129 | color: #ddd;
130 | }
131 |
132 | /** Switch **/
133 | .spine-player-switch {
134 | display: flex;
135 | flex-direction: row;
136 | margin: 2px 10px;
137 | }
138 | .spine-player-switch-text {
139 | flex: 1;
140 | margin-right: 8px;
141 | }
142 | .spine-player-switch-knob-area {
143 | width: 30px; /* width of the switch */
144 | height: 10px;
145 | display: block;
146 | border-radius: 5px; /* must be half of height */
147 | background: #6e6e6e;
148 | position: relative;
149 | align-self: center;
150 | justify-self: flex-end;
151 | }
152 | .spine-player-switch.active .spine-player-switch-knob-area {
153 | background: #5EAFF1;
154 | }
155 | .spine-player-switch-knob {
156 | display: block;
157 | width: 14px;
158 | height: 14px;
159 | border-radius: 50%;
160 | background: #9e9e9e;
161 | position: absolute;
162 | left: 0px;
163 | top: -2px;
164 | filter: drop-shadow(0 0 1px #333);
165 | transition: transform 0.2s;
166 | }
167 | .spine-player-switch.active .spine-player-switch-knob {
168 | background: #fff;
169 | transform: translateX(18px);
170 | transition: transform 0.2s;
171 | }
172 |
173 | /** Popup **/
174 | .spine-player-popup-parent {
175 | position: relative;
176 | z-index: 1;
177 | }
178 | .spine-player-popup {
179 | user-select: none;
180 | position: absolute;
181 | background: rgba(0, 0, 0, 0.75);
182 | z-index: 1;
183 | right: 2px;
184 | bottom: 40px;
185 | border-radius: 4px;
186 | max-height: 400%;
187 | overflow: auto;
188 | font-size: 85%;
189 | }
190 | .spine-player-popup-title {
191 | margin: 4px 15px 2px 15px;
192 | text-align: center;
193 | }
194 | .spine-player-popup hr {
195 | margin: 0;
196 | border: 0;
197 | border-bottom: 1px solid #cccccc70;
198 | }
199 |
200 | /** Player controls **/
201 | .spine-player-controls {
202 | display: flex;
203 | flex-direction: column;
204 | position: absolute;
205 | bottom: 0;
206 | left: 0;
207 | width: 100%;
208 | opacity: 1;
209 | transition: opacity 0.4s;
210 | }
211 | .spine-player-controls-hidden {
212 | pointer-events: none;
213 | transition: opacity 0.4s;
214 | }
215 |
216 | /** Player buttons **/
217 | .spine-player-buttons {
218 | display: flex;
219 | flex-direction: row;
220 | width: 100%;
221 | background: rgba(0, 0, 0, 0.5);
222 | border-bottom-left-radius: 4px;
223 | border-bottom-right-radius: 4px;
224 | padding: 2px 8px 3px;
225 | }
226 | .spine-player-button {
227 | background: none;
228 | outline: 0;
229 | border: none;
230 | width: 32px;
231 | height: 32px;
232 | background-size: 20px;
233 | background-repeat: no-repeat;
234 | background-position: center;
235 | cursor: pointer;
236 | margin-right: 3px;
237 | padding-bottom: 3px;
238 | filter: drop-shadow(0 0 1px #333);
239 | }
240 | .spine-player-button-spacer {
241 | flex: 1;
242 | }
243 | .spine-player-button-icon-play {
244 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
245 | }
246 | .spine-player-button-icon-play:hover {
247 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
248 | }
249 | .spine-player-button-icon-play-selected {
250 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
251 | }
252 | .spine-player-button-icon-pause {
253 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
254 | }
255 | .spine-player-button-icon-pause:hover {
256 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
257 | }
258 | .spine-player-button-icon-pause-selected {
259 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
260 | }
261 | .spine-player-button-icon-speed {
262 | background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
263 | }
264 | .spine-player-button-icon-speed:hover {
265 | background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
266 | }
267 | .spine-player-button-icon-speed-selected {
268 | background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
269 | }
270 | .spine-player-button-icon-animations {
271 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
272 | }
273 | .spine-player-button-icon-animations:hover {
274 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
275 | }
276 | .spine-player-button-icon-animations-selected {
277 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
278 | }
279 | .spine-player-button-icon-skins {
280 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
281 | width: 31px;
282 | height: 31px;
283 | }
284 | .spine-player-button-icon-skins:hover {
285 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
286 | }
287 | .spine-player-button-icon-skins-selected {
288 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
289 | }
290 | .spine-player-button-icon-settings {
291 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
292 | margin-top: 1px;
293 | }
294 | .spine-player-button-icon-settings:hover {
295 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
296 | }
297 | .spine-player-button-icon-settings-selected {
298 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
299 | }
300 | .spine-player-button-icon-fullscreen {
301 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
302 | margin-top: 1px;
303 | }
304 | .spine-player-button-icon-fullscreen:hover {
305 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
306 | }
307 | .spine-player-button-icon-fullscreen-selected {
308 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
309 | }
310 | .spine-player-button-icon-spine-logo {
311 | height: 20px;
312 | position: relative;
313 | top: 1px;
314 | margin: 0 8px !important;
315 | align-self: center;
316 | border: none !important;
317 | width: auto !important;
318 | cursor: pointer;
319 | transition: transform 0.2s;
320 | box-shadow: none !important;
321 | filter: drop-shadow(0 0 1px #333);
322 | }
323 | .spine-player-button-icon-spine-logo:hover {
324 | transform: scale(1.05);
325 | transition: transform 0.2s;
326 | }
327 |
328 | /** Speed slider **/
329 | .spine-player-speed-slider {
330 | width: 150px;
331 | }
332 |
333 | /** Player editor **/
334 | .spine-player-editor-container {
335 | display: flex;
336 | flex-direction: row;
337 | height: 100%;
338 | width: 100%;
339 | }
340 | .spine-player-editor-code {
341 | flex: 1;
342 | overflow: auto;
343 | }
344 | .spine-player-editor-player {
345 | flex: 1;
346 | border: none;
347 | background: black;
348 | }
349 | .CodeMirror {
350 | height: 100%;
351 | }
352 |
353 | .scrollbar-msg{
354 | color:rgb(180, 175, 175);
355 | width:50%;
356 | left:25%;
357 | text-align: center;
358 | position:absolute;
359 | bottom: 5px;
360 | user-select: none;
361 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
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 |
--------------------------------------------------------------------------------
/js/change_current_animation.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | let current_spine = "";
4 | let activeid, activeSpineVersion;
5 | let premultipliedAlphaValue = true;
6 |
7 | const change_spine = (id, assetSpineVersion) => {
8 |
9 | if (current_spine !== ""){
10 | current_spine.dispose();
11 | }
12 |
13 | activeid = id
14 | activeSpineVersion = assetSpineVersion
15 |
16 | let runtimeSpineVersion;
17 |
18 | if (assetSpineVersion == 4.0) {
19 | runtimeSpineVersion = spine40
20 | } else if (assetSpineVersion == 4.1) {
21 | runtimeSpineVersion = spine41
22 | }
23 |
24 | document.getElementById("player-container").innerHTML = "";
25 |
26 | current_spine = new runtimeSpineVersion.SpinePlayer("player-container", {
27 | // jsonUrl: "/assets/" + id + "/" + id + ".json",
28 | skelUrl: "/assets/" + id + "/" + id + ".skel",
29 | atlasUrl: "/assets/" + id + "/" + id + ".atlas",
30 | backgroundColor: "2f353a",
31 | alpha: false,
32 | premultipliedAlpha: premultipliedAlphaValue,
33 | preserveDrawingBuffer:true,
34 | success: function (player) {
35 | player.play();
36 | }
37 | });
38 |
39 | //very important or there'll be some annoying issue when zooming in and out
40 | //I don't even know how I found that to fix the issue
41 | document.querySelector(".spine-player-canvas").width = document.querySelector(".spine-player-canvas").height
42 |
43 | document.querySelector(".spine-player-canvas").style.width = null
44 |
45 | document.querySelector(".spine-player-canvas").style.display = "inline"
46 | }
47 |
48 | const reloadSpine = () => {
49 | change_spine(activeid, activeSpineVersion)
50 | }
--------------------------------------------------------------------------------
/js/make_list.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const create_list = async () => {
4 | const response = await fetch('animation_list.json');
5 | const json = await response.json()
6 |
7 | json.forEach((animation) => {
8 | const liste_item = document.createElement("li");
9 |
10 | liste_item.innerHTML = animation.name;
11 |
12 | liste_item.setAttribute('id', animation.id)
13 |
14 | liste_item.classList.add("charDiv")
15 |
16 | liste_item.addEventListener("click", ()=>{
17 | change_spine(animation.id, animation.version)
18 | })
19 |
20 | document.getElementById("visualiserMain").appendChild(liste_item)
21 | })
22 | }
23 |
24 | create_list();
--------------------------------------------------------------------------------
/js/toggles.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | document.querySelector("#checkboxPremultipliedToggle").addEventListener('input', (e) => {
4 | premultipliedAlphaValue = e.target.checked
5 |
6 | if (current_spine !== "") {
7 | reloadSpine()
8 | }
9 | })
--------------------------------------------------------------------------------
/js/zoom&drag.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | //zoom
4 | document.addEventListener("wheel", (e) => {
5 |
6 | if ( e.target !== document.querySelector("#background-div") &&
7 | e.target !== document.querySelector(".spine-player") &&
8 | e.target !== document.querySelector(".spine-player-canvas") &&
9 | e.target !== document.querySelector("body")) {
10 | return false
11 | }
12 |
13 | let canvas = document.querySelector("#player-container")
14 | let height = canvas.style.height.replaceAll("vh", "")
15 |
16 | switch (e.deltaY > 0) {
17 | case true:
18 | if (parseInt(canvas.style.height.replaceAll("vh", "")) <= 20) return false
19 | canvas.style.height = parseInt(height) - 5 + "vh";
20 | break;
21 | case false:
22 | if (parseInt(canvas.style.height.replaceAll("vh", "")) >= 500) return false
23 | canvas.style.height = parseInt(height) + 5 + "vh";
24 | break;
25 | }
26 | })
27 |
28 | //click to drag and move the animation
29 | let move = false
30 | let oldx = "";
31 | let oldy = "";
32 |
33 | document.addEventListener("mousedown", (e) => {
34 |
35 | if ( e.target !== document.querySelector(".spine-player-canvas") &&
36 | e.target !== document.querySelector("body")) {
37 | return false
38 | }
39 | move = true
40 | oldx = e.clientX;
41 | oldy = e.clientY;
42 | })
43 |
44 | document.addEventListener("mouseup", (e) => {
45 | oldx = ""
46 | oldy = ""
47 | move = false
48 | })
49 |
50 | document.addEventListener("mousemove", (e) => {
51 | if (move) {
52 |
53 | let newx = e.clientX
54 | let newy = e.clientY
55 | let stylel, stylet;
56 |
57 | stylel = document.querySelector("#player-container").style.left.replaceAll("px", "")
58 |
59 | stylet = document.querySelector("#player-container").style.top.replaceAll("px", "")
60 |
61 | if (newx > oldx) {
62 | document.querySelector("#player-container").style.left = (parseInt(stylel) + (newx - oldx)) + "px"
63 | }
64 | if (newx < oldx) {
65 | document.querySelector("#player-container").style.left = (parseInt(stylel) + (newx - oldx)) + "px"
66 | }
67 | if (newy < oldy) {
68 | document.querySelector("#player-container").style.top = (parseInt(stylet) + (newy - oldy)) + "px"
69 | }
70 | if (newy > oldy) {
71 | document.querySelector("#player-container").style.top = (parseInt(stylet) + (newy - oldy)) + "px"
72 | }
73 | oldx = newx
74 | oldy = newy
75 | }
76 | })
--------------------------------------------------------------------------------