mirror of https://github.com/msgbyte/tailchat
refactor: 重新整理genshin插件代码
moonrailgun
3 years ago
parent
b334ac7727
commit
e70cc588d3
@ -1,128 +0,0 @@
|
|||||||
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, parseResultType } from './utils';
|
|
||||||
import { openFullScreenVideo } from '../utils/openFullScreenVideo';
|
|
||||||
import { wishVideoUrl } from './consts';
|
|
||||||
|
|
||||||
const GachaPoolItem: React.FC<{
|
|
||||||
items: OfficialGachaPoolItem[];
|
|
||||||
}> = React.memo((props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{props.items.map((i) => (
|
|
||||||
<div key={i.item_id}>
|
|
||||||
<img src={i.item_img} />
|
|
||||||
|
|
||||||
<div>{i.item_name}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
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);
|
|
||||||
|
|
||||||
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]
|
|
||||||
);
|
|
||||||
|
|
||||||
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>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div>{poolData.banner}</div>
|
|
||||||
|
|
||||||
<div>{poolData.date_range}</div>
|
|
||||||
<div className="gacha-pool">
|
|
||||||
<GachaPoolItem items={poolData.r5_up_items ?? []} />
|
|
||||||
<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} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
GachaPool.displayName = 'GachaPool';
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { OfficialGachaPoolItem } from 'genshin-gacha-kit';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const GachaPoolItem: React.FC<{
|
||||||
|
items: OfficialGachaPoolItem[];
|
||||||
|
}> = React.memo((props) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{props.items.map((i) => (
|
||||||
|
<div key={i.item_id}>
|
||||||
|
<img src={i.item_img} />
|
||||||
|
|
||||||
|
<div>{i.item_name}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
GachaPoolItem.displayName = 'GachaPoolItem';
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
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>;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
WishResultText.displayName = 'WishResultText';
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import { useAsync } from '@capital/common';
|
||||||
|
import { Divider, Button } 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';
|
||||||
|
|
||||||
|
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>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>{poolData.banner}</div>
|
||||||
|
|
||||||
|
<div>{poolData.date_range}</div>
|
||||||
|
<div className="gacha-pool">
|
||||||
|
<GachaPoolItem items={poolData.r5_up_items ?? []} />
|
||||||
|
<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星: <WishResultText items={gachaResult.ssr} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
4星: <WishResultText items={gachaResult.sr} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
3星: <WishResultText items={gachaResult.r} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<GenshinRichtext raw={poolData.content} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
GachaPool.displayName = 'GachaPool';
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import { showToasts } from '@capital/common';
|
||||||
|
import {
|
||||||
|
AppWishResult,
|
||||||
|
GenshinGachaKit,
|
||||||
|
OfficialGachaPool,
|
||||||
|
util,
|
||||||
|
} from 'genshin-gacha-kit';
|
||||||
|
import { useCallback, useMemo, useState } from 'react';
|
||||||
|
import { openFullScreenVideo } from '../../utils/openFullScreenVideo';
|
||||||
|
import { wishVideoUrl } from '../consts';
|
||||||
|
import { parseResultType } from '../utils';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 祈愿
|
||||||
|
* @param poolData 卡池信息
|
||||||
|
*/
|
||||||
|
export 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);
|
||||||
|
|
||||||
|
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]
|
||||||
|
);
|
||||||
|
|
||||||
|
return { handleGacha, gachaResult, gachaCount };
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue