feat: 增加原神插件抽卡动画

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);
+
+      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]
   );

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;

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';
+}

web/plugins/com.msgbyte.genshin/src/utils/openFullScreenVideo.ts

@@ -0,0 +1,34 @@
+/**
+ * 打开一个全屏的video
+ */
+export async function openFullScreenVideo(src: string) {
+  return new Promise<void>((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);
+  });
+}