Update index.html
Browse files- index.html +115 -106
index.html
CHANGED
|
@@ -321,103 +321,109 @@
|
|
| 321 |
document.addEventListener('DOMContentLoaded', () => {
|
| 322 |
// Локальные данные персонажей
|
| 323 |
const LOCAL_CHARACTERS = [
|
| 324 |
-
{ "name": "Альбедо", "icon": "
|
| 325 |
-
{ "name": "Аль-Хайтам", "icon": "
|
| 326 |
-
{ "name": "Алой", "icon": "
|
| 327 |
-
{ "name": "Эмбер", "icon": "
|
| 328 |
-
{ "name": "Аратаки Итто", "icon": "
|
| 329 |
-
{ "name": "Арлекино", "icon": "
|
| 330 |
-
{ "name": "Бай Чжу", "icon": "
|
| 331 |
-
{ "name": "Барбара", "icon": "
|
| 332 |
-
{ "name": "Бэй Доу", "icon": "
|
| 333 |
-
{ "name": "Беннет", "icon": "
|
| 334 |
-
{ "name": "Кандакия", "icon": "
|
| 335 |
-
{ "name": "Шарлотта", "icon": "
|
| 336 |
-
{ "name": "Часка", "icon": "
|
| 337 |
-
{ "name": "Тиори", "icon": "
|
| 338 |
-
{ "name": "Чун Юнь", "icon": "
|
| 339 |
-
{ "name": "Ситлали", "icon": "
|
| 340 |
-
{ "name": "Клоринда", "icon": "
|
| 341 |
-
{ "name": "Коллеи", "icon": "
|
| 342 |
-
{ "name": "Сайно", "icon": "
|
| 343 |
-
{ "name": "Дэхья", "icon": "
|
| 344 |
-
{ "name": "Дилюк", "icon": "
|
| 345 |
-
{ "name": "Диона", "icon": "
|
| 346 |
-
{ "name": "Дори", "icon": "
|
| 347 |
-
{ "name": "Эмили", "icon": "
|
| 348 |
-
{ "name": "Эскофье", "icon": "
|
| 349 |
-
{ "name": "Эола", "icon": "
|
| 350 |
-
{ "name": "Фарузан", "icon": "
|
| 351 |
-
{ "name": "Фишль", "icon": "
|
| 352 |
-
{ "name": "Фремине", "icon": "
|
| 353 |
-
{ "name": "Фурина", "icon": "
|
| 354 |
-
{ "name": "Га Мин", "icon": "
|
| 355 |
-
{ "name": "Гань Юй", "icon": "
|
| 356 |
-
{ "name": "Горо", "icon": "
|
| 357 |
-
{ "name": "Ху Тао", "icon": "
|
| 358 |
-
{ "name": "Ифу", "icon": "
|
| 359 |
-
{ "name": "Янсан", "icon": "
|
| 360 |
-
{ "name": "Джинн", "icon": "
|
| 361 |
-
{ "name": "Кадзуха", "icon": "
|
| 362 |
-
{ "name": "Кэйа", "icon": "
|
| 363 |
-
{ "name": "Качина", "icon": "
|
| 364 |
-
{ "name": "Аяка", "icon": "
|
| 365 |
-
{ "name": "Аято", "icon": "
|
| 366 |
-
{ "name": "Кавэх", "icon": "
|
| 367 |
-
{ "name": "Кэ Цин", "icon": "
|
| 368 |
-
{ "name": "Кинич", "icon": "
|
| 369 |
-
{ "name": "Кирар
|
| 370 |
-
{ "name": "Кли", "icon": "
|
| 371 |
-
{ "name": "Сара", "icon": "
|
| 372 |
-
{ "name": "Шинобу", "icon": "
|
| 373 |
-
{ "name": "Лань Янь", "icon": "
|
| 374 |
-
{ "name": "Лейла", "icon": "
|
| 375 |
-
{ "name": "Лиза", "icon": "
|
| 376 |
-
{ "name": "Линнет", "icon": "
|
| 377 |
-
{ "name": "Лини", "icon": "
|
| 378 |
-
{ "name": "Мавуйка", "icon": "
|
| 379 |
-
{ "name": "Мика", "icon": "
|
| 380 |
-
{ "name": "Мона", "icon": "
|
| 381 |
-
{ "name": "Муалани", "icon": "
|
| 382 |
-
{ "name": "Нахида", "icon": "
|
| 383 |
-
{ "name": "Навия", "icon": "
|
| 384 |
-
{ "name": "Нёвиллет", "icon": "
|
| 385 |
-
{ "name": "Нилу", "icon": "
|
| 386 |
-
{ "name": "Нин Гуан", "icon": "
|
| 387 |
-
{ "name": "Ноэлль", "icon": "
|
| 388 |
-
{ "name": "Оророн", "icon": "
|
| 389 |
-
{ "name": "Ци Ци", "icon": "
|
| 390 |
-
{ "name": "Райдэн", "icon": "
|
| 391 |
-
{ "name": "Рэйзор", "icon": "
|
| 392 |
-
{ "name": "Розалья", "icon": "
|
| 393 |
-
{ "name": "Кокоми", "icon": "
|
| 394 |
-
{ "name": "Саю", "icon": "
|
| 395 |
-
{ "name": "Сетус", "icon": "
|
| 396 |
-
{ "name": "Шэнь Хэ", "icon": "
|
| 397 |
-
{ "name": "Хэйдзо", "icon": "
|
| 398 |
-
{ "name": "Сиджвин", "icon": "
|
| 399 |
-
{ "name": "Сахароза", "icon": "
|
| 400 |
-
{ "name": "Тарталья", "icon": "
|
| 401 |
-
{ "name": "Тома", "icon": "
|
| 402 |
-
{ "name": "Тигнари", "icon": "
|
| 403 |
-
{ "name": "Вареса", "icon": "
|
| 404 |
-
{ "name": "Венти", "icon": "
|
| 405 |
-
{ "name": "Странник", "icon": "
|
| 406 |
-
{ "name": "Ризли", "icon": "
|
| 407 |
-
{ "name": "Сяо", "icon": "
|
| 408 |
-
{ "name": "Сян Линь", "icon": "
|
| 409 |
-
{ "name": "Сянь Юнь", "icon": "
|
| 410 |
-
{ "name": "Шилонен", "icon": "
|
| 411 |
-
{ "name": "Син Цю", "icon": "
|
| 412 |
-
{ "name": "Синь Янь", "icon": "
|
| 413 |
-
{ "name": "Яэ Мико", "icon": "
|
| 414 |
-
{ "name": "Янь Фэй", "icon": "
|
| 415 |
-
{ "name": "Яо Яо", "icon": "
|
| 416 |
-
{ "name": "Е Лань", "icon": "
|
| 417 |
-
{ "name": "Ёимия", "icon": "
|
| 418 |
-
{ "name": "Юнь Цзинь", "icon": "
|
| 419 |
-
{ "name": "
|
| 420 |
-
{ "name": "
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 421 |
];
|
| 422 |
|
| 423 |
// Генерация или получение UID
|
|
@@ -527,10 +533,17 @@
|
|
| 527 |
card.classList.add('selected');
|
| 528 |
}
|
| 529 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 530 |
card.innerHTML = `
|
| 531 |
-
<
|
| 532 |
-
|
| 533 |
-
|
|
|
|
|
|
|
|
|
|
| 534 |
<p class="font-medium text-xs truncate w-full dark:text-white">${character.name}</p>
|
| 535 |
${isSelected ? '<button class="remove-btn" title="Удалить">×</button>' : ''}
|
| 536 |
`;
|
|
@@ -620,16 +633,12 @@
|
|
| 620 |
|
| 621 |
// Воспроизводим звук
|
| 622 |
if (boomSound) {
|
| 623 |
-
boomSound.currentTime = 0;
|
| 624 |
boomSound.play().catch(e => console.error("Error playing sound:", e));
|
| 625 |
}
|
| 626 |
|
| 627 |
-
//
|
| 628 |
-
await new Promise(resolve => setTimeout(resolve, 50)); // Небольшая задержка перед запуском анимации
|
| 629 |
card.classList.add('roulette-item-boom-enter-active');
|
| 630 |
-
|
| 631 |
-
// Ждем завершения анимации "бум" (0.4s) перед показом следующей карточки
|
| 632 |
-
// Добавляем небольшой дополнительный таймаут для разделения эффектов
|
| 633 |
await new Promise(resolve => setTimeout(resolve, 500));
|
| 634 |
}
|
| 635 |
|
|
|
|
| 321 |
document.addEventListener('DOMContentLoaded', () => {
|
| 322 |
// Локальные данные персонажей
|
| 323 |
const LOCAL_CHARACTERS = [
|
| 324 |
+
{ "name": "Альбедо", "icon": "pic/albedo.png", "element": "Geo" },
|
| 325 |
+
{ "name": "Аль-Хайтам", "icon": "pic/alhaitham.png", "element": "Dendro" },
|
| 326 |
+
{ "name": "Алой", "icon": "pic/aloy.png", "element": "Cryo" },
|
| 327 |
+
{ "name": "Эмбер", "icon": "pic/amber.png", "element": "Pyro" },
|
| 328 |
+
{ "name": "Аратаки Итто", "icon": "pic/arataki_itto.png", "element": "Geo" },
|
| 329 |
+
{ "name": "Арлекино", "icon": "pic/arlecchino.png", "element": "Pyro" },
|
| 330 |
+
{ "name": "Бай Чжу", "icon": "pic/baizhu.png", "element": "Dendro" },
|
| 331 |
+
{ "name": "Барбара", "icon": "pic/barbara.png", "element": "Hydro" },
|
| 332 |
+
{ "name": "Бэй Доу", "icon": "pic/beidou.png", "element": "Electro" },
|
| 333 |
+
{ "name": "Беннет", "icon": "pic/bennett.png", "element": "Pyro" },
|
| 334 |
+
{ "name": "Кандакия", "icon": "pic/candace.png", "element": "Hydro" },
|
| 335 |
+
{ "name": "Шарлотта", "icon": "pic/charlotte.png", "element": "Cryo" },
|
| 336 |
+
{ "name": "Часка", "icon": "pic/chasca.png", "element": "Anemo" },
|
| 337 |
+
{ "name": "Тиори", "icon": "pic/chiori.png", "element": "Geo" },
|
| 338 |
+
{ "name": "Чун Юнь", "icon": "pic/chongyun.png", "element": "Cryo" },
|
| 339 |
+
{ "name": "Ситлали", "icon": "pic/citlali.png", "element": "Cryo" },
|
| 340 |
+
{ "name": "Клоринда", "icon": "pic/clorinde.png", "element": "Electro" },
|
| 341 |
+
{ "name": "Коллеи", "icon": "pic/collei.png", "element": "Dendro" },
|
| 342 |
+
{ "name": "Сайно", "icon": "pic/cyno.png", "element": "Electro" },
|
| 343 |
+
{ "name": "Дэхья", "icon": "pic/dehya.png", "element": "Pyro" },
|
| 344 |
+
{ "name": "Дилюк", "icon": "pic/diluc.png", "element": "Pyro" },
|
| 345 |
+
{ "name": "Диона", "icon": "pic/diona.png", "element": "Cryo" },
|
| 346 |
+
{ "name": "Дори", "icon": "pic/dori.png", "element": "Electro" },
|
| 347 |
+
{ "name": "Эмилия", "icon": "pic/emilie.png" , "element": "Dendro" },
|
| 348 |
+
{ "name": "Эскофье", "icon": "pic/escoffier.png", "element": "Cryo" },
|
| 349 |
+
{ "name": "Эола", "icon": "pic/eula.png", "element": "Cryo" },
|
| 350 |
+
{ "name": "Фарузан", "icon": "pic/faruzan.png", "element": "Anemo" },
|
| 351 |
+
{ "name": "Фишль", "icon": "pic/fischl.png", "element": "Electro" },
|
| 352 |
+
{ "name": "Фремине", "icon": "pic/freminet.png", "element": "Cryo" },
|
| 353 |
+
{ "name": "Фурина", "icon": "pic/furina.png", "element": "Hydro" },
|
| 354 |
+
{ "name": "Га Мин", "icon": "pic/gaming.png", "element": "Pyro" },
|
| 355 |
+
{ "name": "Гань Юй", "icon": "pic/ganyu.png", "element": "Cryo" },
|
| 356 |
+
{ "name": "Горо", "icon": "pic/gorou.png", "element": "Geo" },
|
| 357 |
+
{ "name": "Ху Тао", "icon": "pic/hu_tao.png", "element": "Pyro" },
|
| 358 |
+
{ "name": "Ифу", "icon": "pic/ifa.png", "element": "Anemo" },
|
| 359 |
+
{ "name": "Янсан", "icon": "pic/iansan.png", "element": "Electro" },
|
| 360 |
+
{ "name": "Джинн", "icon": "pic/jean.png", "element": "Anemo" },
|
| 361 |
+
{ "name": "Кадзуха", "icon": "pic/kaedehara_kazuha.png", "element": "Anemo" },
|
| 362 |
+
{ "name": "Кэйа", "icon": "pic/kaeya.png", "element": "Cryo" },
|
| 363 |
+
{ "name": "Качина", "icon": "pic/kachina.png", "element": "Geo" },
|
| 364 |
+
{ "name": "Аяка", "icon": "pic/kamisato_ayaka.png", "element": "Cryo" },
|
| 365 |
+
{ "name": "Аято", "icon": "pic/kamisato_ayato.png", "element": "Hydro" },
|
| 366 |
+
{ "name": "Кавэх", "icon": "pic/kaveh.png", "element": "Dendro" },
|
| 367 |
+
{ "name": "Кэ Цин", "icon": "pic/keqing.png", "element": "Electro" },
|
| 368 |
+
{ "name": "Кинич", "icon": "pic/kinich.png", "element": "Dendro" },
|
| 369 |
+
{ "name": "Кирара", "icon": "pic/kirara.png", "element": "Dendro" },
|
| 370 |
+
{ "name": "Кли", "icon": "pic/klee.png", "element": "Pyro" },
|
| 371 |
+
{ "name": "Сара", "icon": "pic/kujou_sara.png", "element": "Electro" },
|
| 372 |
+
{ "name": "Шинобу", "icon": "pic/kuki_shinobu.png", "element": "Electro" },
|
| 373 |
+
{ "name": "Лань Янь", "icon": "pic/lan_yan.png", "element": "Anemo" },
|
| 374 |
+
{ "name": "Лейла", "icon": "pic/layla.png", "element": "Cryo" },
|
| 375 |
+
{ "name": "Лиза", "icon": "pic/lisa.png", "element": "Electro" },
|
| 376 |
+
{ "name": "Линнет", "icon": "pic/lynette.png", "element": "Anemo" },
|
| 377 |
+
{ "name": "Лини", "icon": "pic/lyney.png", "element": "Pyro" },
|
| 378 |
+
{ "name": "Мавуйка", "icon": "pic/mavuika.png", "element": "Pyro" },
|
| 379 |
+
{ "name": "Мика", "icon": "pic/mika.png", "element": "Cryo" },
|
| 380 |
+
{ "name": "Мона", "icon": "pic/mona.png", "element": "Hydro" },
|
| 381 |
+
{ "name": "Муалани", "icon": "pic/mualani.png", "element": "Hydro" },
|
| 382 |
+
{ "name": "Нахида", "icon": "pic/nahida.png", "element": "Dendro" },
|
| 383 |
+
{ "name": "Навия", "icon": "pic/navia.png", "element": "Geo" },
|
| 384 |
+
{ "name": "Нёвиллет", "icon": "pic/neuvillette.png", "element": "Hydro" },
|
| 385 |
+
{ "name": "Нилу", "icon": "pic/nilou.png", "element": "Hydro" },
|
| 386 |
+
{ "name": "Нин Гуан", "icon": "pic/ningguang.png", "element": "Geo" },
|
| 387 |
+
{ "name": "Ноэлль", "icon": "pic/noelle.png", "element": "Geo" },
|
| 388 |
+
{ "name": "Оророн", "icon": "pic/ororon.png", "element": "Electro" },
|
| 389 |
+
{ "name": "Ци Ци", "icon": "pic/qiqi.png", "element": "Cryo" },
|
| 390 |
+
{ "name": "Райдэн", "icon": "pic/raiden_shogun.png", "element": "Electro" },
|
| 391 |
+
{ "name": "Рэйзор", "icon": "pic/razor.png", "element": "Electro" },
|
| 392 |
+
{ "name": "Розалья", "icon": "pic/rosaria.png", "element": "Cryo" },
|
| 393 |
+
{ "name": "Кокоми", "icon": "pic/sangonomiya_kokomi.png", "element": "Hydro" },
|
| 394 |
+
{ "name": "Саю", "icon": "pic/sayu.png", "element": "Anemo" },
|
| 395 |
+
{ "name": "Сетус", "icon": "pic/sethos.png", "element": "Electro" },
|
| 396 |
+
{ "name": "Шэнь Хэ", "icon": "pic/shenhe.png", "element": "Cryo" },
|
| 397 |
+
{ "name": "Хэйдзо", "icon": "pic/shikanoin_heizou.png", "element": "Anemo" },
|
| 398 |
+
{ "name": "Сиджвин", "icon": "pic/sigewinne.png", "element": "Hydro" },
|
| 399 |
+
{ "name": "Сахароза", "icon": "pic/sucrose.png", "element": "Anemo" },
|
| 400 |
+
{ "name": "Тарталья", "icon": "pic/tartaglia.png", "element": "Hydro" },
|
| 401 |
+
{ "name": "Тома", "icon": "pic/thoma.png", "element": "Pyro" },
|
| 402 |
+
{ "name": "Тигнари", "icon": "pic/tighnari.png", "element": "Dendro" },
|
| 403 |
+
{ "name": "Вареса", "icon": "pic/varesa.png", "element": "Electro" },
|
| 404 |
+
{ "name": "Венти", "icon": "pic/venti.png", "element": "Anemo" },
|
| 405 |
+
{ "name": "Странник", "icon": "pic/wanderer.png", "element": "Anemo" },
|
| 406 |
+
{ "name": "Ризли", "icon": "pic/wriothesley.png", "element": "Cryo" },
|
| 407 |
+
{ "name": "Сяо", "icon": "pic/xiao.png", "element": "Anemo" },
|
| 408 |
+
{ "name": "Сян Линь", "icon": "pic/xiangling.png", "element": "Pyro" },
|
| 409 |
+
{ "name": "Сянь Юнь", "icon": "pic/xianyun.png", "element": "Anemo" },
|
| 410 |
+
{ "name": "Шилонен", "icon": "pic/xilonen.png", "element": "Geo" },
|
| 411 |
+
{ "name": "Син Цю", "icon": "pic/xingqiu.png", "element": "Hydro" },
|
| 412 |
+
{ "name": "Синь Янь", "icon": "pic/xinyan.png", "element": "Pyro" },
|
| 413 |
+
{ "name": "Яэ Мико", "icon": "pic/yae_miko.png", "element": "Electro" },
|
| 414 |
+
{ "name": "Янь Фэй", "icon": "pic/yanfei.png", "element": "Pyro" },
|
| 415 |
+
{ "name": "Яо Яо", "icon": "pic/yaoyao.png", "element": "Dendro" },
|
| 416 |
+
{ "name": "Е Лань", "icon": "pic/yelan.png", "element": "Hydro" },
|
| 417 |
+
{ "name": "Ёимия", "icon": "pic/yoimiya.png", "element": "Pyro" },
|
| 418 |
+
{ "name": "Юнь Цзинь", "icon": "pic/yun_jin.png", "element": "Geo" },
|
| 419 |
+
{ "name": "Паймон", "icon": "pic/paimon.png", "element": "Anemo" },
|
| 420 |
+
{ "name": "ГГ(Анемо)", "icon": "pic/traveler.webp", "element": "Anemo" },
|
| 421 |
+
{ "name": "ГГ (Гео)", "icon": "pic/traveler.webp", "element": "Geo" },
|
| 422 |
+
{ "name": "ГГ (Электро)", "icon": "pic/traveler.webp", "element": "Electro" },
|
| 423 |
+
{ "name": "ГГ (Дендро)", "icon": "pic/traveler.webp", "element": "Dendro" },
|
| 424 |
+
{ "name": "ГГ (Гидро)", "icon": "pic/traveler.webp", "element": "Hydro" },
|
| 425 |
+
{ "name": "Мидзуки", "icon": "pic/yumemizuki_mizuki.png", "element": "Anemo" },
|
| 426 |
+
{ "name": "Чжун Ли", "icon": "pic/zhongli.png", "element": "Geo" }
|
| 427 |
];
|
| 428 |
|
| 429 |
// Генерация или получение UID
|
|
|
|
| 533 |
card.classList.add('selected');
|
| 534 |
}
|
| 535 |
|
| 536 |
+
const elementIconHtml = character.element ?
|
| 537 |
+
`<img src="pic/Elements/Element_${character.element}.webp" alt="${character.element}"
|
| 538 |
+
class="w-5 h-5 absolute top-0 right-0 -mt-1 -mr-1" title="${character.element}">` : ''; // Slightly smaller for player selection
|
| 539 |
+
|
| 540 |
card.innerHTML = `
|
| 541 |
+
<div class="relative">
|
| 542 |
+
<img src="${character.icon}" alt="${character.name}"
|
| 543 |
+
class="w-12 h-12 rounded-full mb-1 object-cover border-2 border-transparent"
|
| 544 |
+
onerror="this.onerror=null;this.src='https://placehold.co/48x48/EFEAE4/4A4A4A?text=N/A'">
|
| 545 |
+
${elementIconHtml}
|
| 546 |
+
</div>
|
| 547 |
<p class="font-medium text-xs truncate w-full dark:text-white">${character.name}</p>
|
| 548 |
${isSelected ? '<button class="remove-btn" title="Удалить">×</button>' : ''}
|
| 549 |
`;
|
|
|
|
| 633 |
|
| 634 |
// Воспроизводим звук
|
| 635 |
if (boomSound) {
|
| 636 |
+
boomSound.currentTime = 0;
|
| 637 |
boomSound.play().catch(e => console.error("Error playing sound:", e));
|
| 638 |
}
|
| 639 |
|
| 640 |
+
await new Promise(resolve => setTimeout(resolve, 100)); // Небольшая задержка перед запуском анимации
|
|
|
|
| 641 |
card.classList.add('roulette-item-boom-enter-active');
|
|
|
|
|
|
|
|
|
|
| 642 |
await new Promise(resolve => setTimeout(resolve, 500));
|
| 643 |
}
|
| 644 |
|