diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx index 8bc50223..796bba9a 100644 --- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx +++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx @@ -10,7 +10,9 @@ import { util, } from 'genshin-gacha-kit'; import { GenshinRichtext } from '../components/GenshinRichtext'; -import { getAppGachaItemText } from './utils'; +import { getAppGachaItemText, parseResultType } from './utils'; +import { openFullScreenVideo } from '../utils/openFullScreenVideo'; +import { wishVideoUrl } from './consts'; const GachaPoolItem: React.FC<{ items: OfficialGachaPoolItem[]; @@ -56,10 +58,13 @@ function useWish(poolData: OfficialGachaPool) { } const res = gachaKit.multiWish(num); - showToasts('抽卡结果: ' + res.map((item) => item.name).join(',')); - setGachaCount(gachaKit.getCounter('total') as number); - setGachaResult(JSON.parse(JSON.stringify(gachaKit.getResult()))); + openFullScreenVideo(wishVideoUrl[parseResultType(res)]).then(() => { + showToasts('抽卡结果: ' + res.map((item) => item.name).join(',')); + + setGachaCount(gachaKit.getCounter('total') as number); + setGachaResult(JSON.parse(JSON.stringify(gachaKit.getResult()))); + }); }, [gachaKit] ); diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/consts.ts b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/consts.ts new file mode 100644 index 00000000..1346a758 --- /dev/null +++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/consts.ts @@ -0,0 +1,13 @@ +/** + * 视频来源于 https://github.com/uzair-ashraf/genshin-impact-wish-simulator + */ +export const wishVideoUrl = { + '5star': 'https://tailchat.moonrailgun.com/genshin/5starwish.webm', + '4star': 'https://tailchat.moonrailgun.com/genshin/4starwish.webm', + '5star-single': + 'https://tailchat.moonrailgun.com/genshin/5starwish-single.webm', + '4star-single': + 'https://tailchat.moonrailgun.com/genshin/4starwish-single.webm', + '3star-single': + 'https://tailchat.moonrailgun.com/genshin/3starwish-single.webm', +} as const; diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts index d6fe3801..3f13200c 100644 --- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts +++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts @@ -1,4 +1,5 @@ import type { AppGachaItem } from 'genshin-gacha-kit'; +import { wishVideoUrl } from './consts'; export function getAppGachaItemText(item: AppGachaItem) { if (item.count >= 2) { @@ -7,3 +8,27 @@ export function getAppGachaItemText(item: AppGachaItem) { return item.name; } } + +export function parseResultType( + items: AppGachaItem[] +): keyof typeof wishVideoUrl { + if (items.length === 1) { + // single + const rarity = items[0].rarity; + if (rarity === 3) { + return '3star-single'; + } else if (rarity === 4) { + return '4star-single'; + } else if (rarity === 5) { + return '5star-single'; + } + } else { + if (items.some((i) => i.rarity === 5)) { + return '5star'; + } else if (items.some((i) => i.rarity === 4)) { + return '4star'; + } + } + + return '3star-single'; +} diff --git a/web/plugins/com.msgbyte.genshin/src/utils/openFullScreenVideo.ts b/web/plugins/com.msgbyte.genshin/src/utils/openFullScreenVideo.ts new file mode 100644 index 00000000..292c2d05 --- /dev/null +++ b/web/plugins/com.msgbyte.genshin/src/utils/openFullScreenVideo.ts @@ -0,0 +1,34 @@ +/** + * 打开一个全屏的video + */ +export async function openFullScreenVideo(src: string) { + return new Promise((resolve, reject) => { + const containerEl = document.createElement('div'); + containerEl.style.position = 'fixed'; + containerEl.style.height = '100vh'; + containerEl.style.width = '100vw'; + containerEl.style.left = '0px'; + containerEl.style.top = '0px'; + containerEl.style.zIndex = '99999'; + containerEl.style.backgroundColor = '#000000'; + containerEl.style.display = 'flex'; + containerEl.style.alignItems = 'center'; + containerEl.style.justifyContent = 'center'; + + const videoEl = document.createElement('video'); + videoEl.src = src; + + videoEl.autoplay = true; + videoEl.addEventListener('ended', () => { + containerEl.removeChild(videoEl); + document.body.removeChild(containerEl); + resolve(); + }); + videoEl.addEventListener('error', () => { + reject(); + }); + + containerEl.appendChild(videoEl); + document.body.appendChild(containerEl); + }); +}