Commit 3aea11bc authored by timel's avatar timel

feat: mora

parent f8b686d1
Pipeline #22931 failed with stages
in 14 minutes and 8 seconds
...@@ -4,7 +4,7 @@ import { ygopro } from "@/api"; ...@@ -4,7 +4,7 @@ import { ygopro } from "@/api";
import PlayerState = ygopro.StocHsPlayerChange.State; import PlayerState = ygopro.StocHsPlayerChange.State;
import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd"; import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
import classNames from "classnames"; import classNames from "classnames";
import React, { useState } from "react"; import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import { useSnapshot } from "valtio"; import { useSnapshot } from "valtio";
import { useConfig } from "@/config"; import { useConfig } from "@/config";
...@@ -36,6 +36,8 @@ export const Component: React.FC = () => { ...@@ -36,6 +36,8 @@ export const Component: React.FC = () => {
const { user } = useSnapshot(accountStore); const { user } = useSnapshot(accountStore);
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const room = useSnapshot(roomStore); const room = useSnapshot(roomStore);
// const ref = useRef<MoraButtonRef>(null);
// ref.current?.getMoraResult(); // 用这个来异步获取猜拳结果
return ( return (
<ConfigProvider theme={theme}> <ConfigProvider theme={theme}>
...@@ -51,7 +53,6 @@ export const Component: React.FC = () => { ...@@ -51,7 +53,6 @@ export const Component: React.FC = () => {
icon={<IconFont type="icon-side-bar-fill" size={16} />} icon={<IconFont type="icon-side-bar-fill" size={16} />}
onClick={() => setCollapsed(!collapsed)} onClick={() => setCollapsed(!collapsed)}
/> />
<Chat /> <Chat />
</div> </div>
<div className={styles.main}> <div className={styles.main}>
...@@ -70,6 +71,7 @@ export const Component: React.FC = () => { ...@@ -70,6 +71,7 @@ export const Component: React.FC = () => {
<Button size="large" className={styles["btn-join"]}> <Button size="large" className={styles["btn-join"]}>
决斗准备 决斗准备
</Button> </Button>
{/* <MoraButton ref={ref} /> */}
</> </>
} }
/> />
...@@ -87,11 +89,28 @@ enum Mora { ...@@ -87,11 +89,28 @@ enum Mora {
Paper = "paper", Paper = "paper",
} }
const MoraButton: React.FC<{ // TODO: 可能有更好的设计,不一定是放在这个按钮这儿
onClick?: () => Promise<Mora>; // 思路不变,先暂时这么写
}> = () => {
// TODO: 实现这个onclick interface MoraButtonRef {
// 防抖 getMoraResult: () => Promise<Mora>;
}
const MoraButton = forwardRef<MoraButtonRef, {}>((props, ref) => {
const [open, setOpen] = useState(false);
const resolve = useRef<(mora: Mora) => void>(() => {});
useImperativeHandle(ref, () => ({
async getMoraResult() {
setOpen(true);
const result = await new Promise<Mora>((rs) => (resolve.current = rs));
setOpen(false);
return result;
},
}));
const onMoraClick = (mora: Mora) => resolve.current(mora);
const map = { const map = {
[Mora.Rock]: "石头", [Mora.Rock]: "石头",
...@@ -106,16 +125,18 @@ const MoraButton: React.FC<{ ...@@ -106,16 +125,18 @@ const MoraButton: React.FC<{
<Space> <Space>
{[Mora.Rock, Mora.Scissors, Mora.Paper].map((mora) => ( {[Mora.Rock, Mora.Scissors, Mora.Paper].map((mora) => (
<Button <Button
key={mora}
size="large" size="large"
type="text" type="text"
icon={<IconFont type={`icon-hand-${mora}`} size={16} />} icon={<IconFont type={`icon-hand-${mora}`} size={16} />}
onClick={() => onMoraClick(mora)}
> >
{map[mora]} {map[mora]}
</Button> </Button>
))} ))}
</Space> </Space>
} }
trigger="focus" open={open}
placement="bottom" placement="bottom"
> >
<Button <Button
...@@ -127,7 +148,7 @@ const MoraButton: React.FC<{ ...@@ -127,7 +148,7 @@ const MoraButton: React.FC<{
</Button> </Button>
</Popover> </Popover>
); );
}; });
const OrderPopup: React.FC<React.PropsWithChildren<{ open: boolean }>> = ({ const OrderPopup: React.FC<React.PropsWithChildren<{ open: boolean }>> = ({
children, children,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment