From 75930238bd879110e2a57902fcf0f8bd528430c3 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 26 Jan 2022 10:34:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=9F=E7=A5=9E=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E5=A2=9E=E5=8A=A0=E6=8A=BD=E5=8D=A1=E6=A8=A1=E6=8B=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/GenshinPanel/GachaPool.tsx            | 80 ++++++++++++++++++-
 .../src/GenshinPanel/utils.ts                 |  9 +++
 2 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts

diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx
index 43c09e07..8bc50223 100644
--- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool.tsx
@@ -1,8 +1,16 @@
-import { useAsync } from '@capital/common';
-import { Divider } from '@capital/component';
-import React from 'react';
-import { OfficialGachaPoolItem, util } from 'genshin-gacha-kit';
+import { useAsync, showToasts } from '@capital/common';
+import { Divider, Button } from '@capital/component';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  AppGachaItem,
+  AppWishResult,
+  GenshinGachaKit,
+  OfficialGachaPool,
+  OfficialGachaPoolItem,
+  util,
+} from 'genshin-gacha-kit';
 import { GenshinRichtext } from '../components/GenshinRichtext';
+import { getAppGachaItemText } from './utils';
 
 const GachaPoolItem: React.FC<{
   items: OfficialGachaPoolItem[];
@@ -21,12 +29,51 @@ const GachaPoolItem: React.FC<{
 });
 GachaPoolItem.displayName = 'GachaPoolItem';
 
+const WishResult: React.FC<{ items: AppGachaItem[] }> = React.memo(
+  ({ items }) => {
+    return <span>{items.map(getAppGachaItemText).join(',')}</span>;
+  }
+);
+WishResult.displayName = 'WishResult';
+
+function useWish(poolData: OfficialGachaPool) {
+  const [gachaResult, setGachaResult] = useState<AppWishResult>({
+    ssr: [],
+    sr: [],
+    r: [],
+  });
+  const [gachaCount, setGachaCount] = useState<number>(0);
+
+  const gachaKit = useMemo(() => {
+    return poolData
+      ? new GenshinGachaKit(util.poolStructureConverter(poolData))
+      : null;
+  }, [poolData]);
+  const handleGacha = useCallback(
+    (num) => {
+      if (!gachaKit) {
+        return;
+      }
+
+      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())));
+    },
+    [gachaKit]
+  );
+
+  return { handleGacha, gachaResult, gachaCount };
+}
+
 export const GachaPool: React.FC<{
   gachaId: string;
 }> = React.memo((props) => {
   const { value: poolData } = useAsync(() => {
     return util.getGachaData(props.gachaId);
   }, [props.gachaId]);
+  const { handleGacha, gachaResult, gachaCount } = useWish(poolData);
 
   if (!poolData) {
     return <div>Loading...</div>;
@@ -42,6 +89,31 @@ export const GachaPool: React.FC<{
         <GachaPoolItem items={poolData.r4_up_items ?? []} />
       </div>
 
+      <div style={{ display: 'flex', gap: 4 }}>
+        <Button type="primary" onClick={() => handleGacha(1)}>
+          模拟单抽
+        </Button>
+        <Button type="primary" onClick={() => handleGacha(10)}>
+          模拟十连
+        </Button>
+      </div>
+
+      {gachaCount > 0 && (
+        <div>
+          <div>已抽: {gachaCount} 次</div>
+
+          <div>
+            5星: <WishResult items={gachaResult.ssr} />
+          </div>
+          <div>
+            4星: <WishResult items={gachaResult.sr} />
+          </div>
+          <div>
+            3星: <WishResult items={gachaResult.r} />
+          </div>
+        </div>
+      )}
+
       <Divider />
 
       <GenshinRichtext raw={poolData.content} />
diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts
new file mode 100644
index 00000000..d6fe3801
--- /dev/null
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/utils.ts
@@ -0,0 +1,9 @@
+import type { AppGachaItem } from 'genshin-gacha-kit';
+
+export function getAppGachaItemText(item: AppGachaItem) {
+  if (item.count >= 2) {
+    return `${item.name}(${item.count})`;
+  } else {
+    return item.name;
+  }
+}