From f6d5f29cb5fd338dce5b24e8384dc9f2426038e2 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 28 Jan 2022 15:03:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=9F=E7=A5=9E=E6=8A=BD=E5=8D=A1?=
 =?UTF-8?q?=E6=A8=A1=E6=8B=9F=E5=A2=9E=E5=8A=A0=E6=8A=BD=E5=8D=A1=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GenshinPanel/GachaPool/GachaResult.tsx    | 25 +++++++++++++++++++
 .../GachaPool/WishResultModal.tsx             | 21 ++++++++++++++++
 .../GenshinPanel/GachaPool/WishResultText.tsx | 17 ++++++++++---
 .../src/GenshinPanel/GachaPool/index.tsx      | 18 ++++---------
 .../GachaPool/{useWish.ts => useWish.tsx}     |  8 ++++--
 web/src/plugin/component/index.tsx            |  2 +-
 6 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaResult.tsx
 create mode 100644 web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultModal.tsx
 rename web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/{useWish.ts => useWish.tsx} (81%)

diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaResult.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaResult.tsx
new file mode 100644
index 00000000..72720f6a
--- /dev/null
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaResult.tsx
@@ -0,0 +1,25 @@
+import { AppWishResult } from 'genshin-gacha-kit';
+import React from 'react';
+import { WishResultText } from './WishResultText';
+
+interface GachaResultProps {
+  gachaResult: AppWishResult;
+}
+export const GachaResult: React.FC<GachaResultProps> = React.memo((props) => {
+  const { gachaResult } = props;
+
+  return (
+    <div>
+      <div>
+        <WishResultText label="5星" items={gachaResult.ssr} />
+      </div>
+      <div>
+        <WishResultText label="4星" items={gachaResult.sr} />
+      </div>
+      <div>
+        <WishResultText label="3星" items={gachaResult.r} />
+      </div>
+    </div>
+  );
+});
+GachaResult.displayName = 'GachaResult';
diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultModal.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultModal.tsx
new file mode 100644
index 00000000..9de04280
--- /dev/null
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultModal.tsx
@@ -0,0 +1,21 @@
+import { ModalWrapper } from '@capital/common';
+import { AppGachaItem } from 'genshin-gacha-kit';
+import React from 'react';
+import { GachaResult } from './GachaResult';
+
+export const WishResultModal: React.FC<{ items: AppGachaItem[] }> = React.memo(
+  ({ items }) => {
+    return (
+      <ModalWrapper title="抽卡结果">
+        <GachaResult
+          gachaResult={{
+            ssr: items.filter((i) => i.rarity === 5),
+            sr: items.filter((i) => i.rarity === 4),
+            r: items.filter((i) => i.rarity === 3),
+          }}
+        />
+      </ModalWrapper>
+    );
+  }
+);
+WishResultModal.displayName = 'WishResultModal';
diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultText.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultText.tsx
index b8dd0c28..e98fcdee 100644
--- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultText.tsx
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultText.tsx
@@ -2,9 +2,18 @@ import { AppGachaItem } from 'genshin-gacha-kit';
 import { getAppGachaItemText } from '../utils';
 import React from 'react';
 
-export const WishResultText: React.FC<{ items: AppGachaItem[] }> = React.memo(
-  ({ items }) => {
-    return <span>{items.map(getAppGachaItemText).join(',')}</span>;
+export const WishResultText: React.FC<{
+  label: string;
+  items: AppGachaItem[];
+}> = React.memo(({ label, items }) => {
+  if (items.length === 0) {
+    return null;
   }
-);
+
+  return (
+    <span>
+      {label}: {items.map(getAppGachaItemText).join(',')}
+    </span>
+  );
+});
 WishResultText.displayName = 'WishResultText';
diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/index.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/index.tsx
index 3076f542..e0ab8ef7 100644
--- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/index.tsx
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/index.tsx
@@ -1,11 +1,11 @@
 import { useAsync } from '@capital/common';
-import { Divider, Button } from '@capital/component';
+import { Divider, Button, Space } from '@capital/component';
 import React from 'react';
 import { util } from 'genshin-gacha-kit';
 import { GenshinRichtext } from '../../components/GenshinRichtext';
-import { WishResultText } from './WishResultText';
 import { GachaPoolItem } from './GachaPoolItem';
 import { useWish } from './useWish';
+import { GachaResult } from './GachaResult';
 
 export const GachaPool: React.FC<{
   gachaId: string;
@@ -29,28 +29,20 @@ export const GachaPool: React.FC<{
         <GachaPoolItem items={poolData.r4_up_items ?? []} />
       </div>
 
-      <div style={{ display: 'flex', gap: 4 }}>
+      <Space>
         <Button type="primary" onClick={() => handleGacha(1)}>
           模拟单抽
         </Button>
         <Button type="primary" onClick={() => handleGacha(10)}>
           模拟十连
         </Button>
-      </div>
+      </Space>
 
       {gachaCount > 0 && (
         <div>
           <div>已抽: {gachaCount} 次</div>
 
-          <div>
-            5星: <WishResultText items={gachaResult.ssr} />
-          </div>
-          <div>
-            4星: <WishResultText items={gachaResult.sr} />
-          </div>
-          <div>
-            3星: <WishResultText items={gachaResult.r} />
-          </div>
+          <GachaResult gachaResult={gachaResult} />
         </div>
       )}
 
diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.ts b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.tsx
similarity index 81%
rename from web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.ts
rename to web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.tsx
index 53e9a92b..31344716 100644
--- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.ts
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.tsx
@@ -1,14 +1,16 @@
-import { showToasts } from '@capital/common';
+import { openModal, showToasts } from '@capital/common';
 import {
   AppWishResult,
   GenshinGachaKit,
   OfficialGachaPool,
   util,
 } from 'genshin-gacha-kit';
+import React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { openFullScreenVideo } from '../../utils/openFullScreenVideo';
 import { wishVideoUrl } from '../consts';
 import { parseResultType } from '../utils';
+import { WishResultModal } from './WishResultModal';
 
 /**
  * 祈愿
@@ -36,7 +38,9 @@ export function useWish(poolData: OfficialGachaPool) {
       const res = gachaKit.multiWish(num);
 
       openFullScreenVideo(wishVideoUrl[parseResultType(res)]).then(() => {
-        showToasts('抽卡结果: ' + res.map((item) => item.name).join(','));
+        // showToasts('抽卡结果: ' + res.map((item) => item.name).join(','));
+
+        openModal(<WishResultModal items={res} />);
 
         setGachaCount(gachaKit.getCounter('total') as number);
         setGachaResult(JSON.parse(JSON.stringify(gachaKit.getResult())));
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
index ae9d04b1..adcf9e50 100644
--- a/web/src/plugin/component/index.tsx
+++ b/web/src/plugin/component/index.tsx
@@ -1,6 +1,6 @@
 import { Input } from 'antd';
 
-export { Button, Checkbox, Input, Divider } from 'antd';
+export { Button, Checkbox, Input, Divider, Space } from 'antd';
 export const TextArea = Input.TextArea;
 export { Image } from '@/components/Image';
 export { Icon } from '@iconify/react';