Commit e8ac3d50 authored by timel's avatar timel

feat: popover 2

parent fa6626f6
Pipeline #22953 failed with stages
in 11 minutes and 28 seconds
...@@ -16,9 +16,9 @@ export enum Tp { ...@@ -16,9 +16,9 @@ export enum Tp {
Second = 2, Second = 2,
} }
export const MoraPopover: React.FC<React.PropsWithChildren> = ({ export const MoraPopover: React.FC<
children, React.PropsWithChildren<{ onSelect?: (result: Mora) => void }>
}) => { > = ({ children, onSelect }) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
// 需要在mora的service之中,emit一个事件,让这个组件监听到,然后打开popover // 需要在mora的service之中,emit一个事件,让这个组件监听到,然后打开popover
...@@ -28,6 +28,7 @@ export const MoraPopover: React.FC<React.PropsWithChildren> = ({ ...@@ -28,6 +28,7 @@ export const MoraPopover: React.FC<React.PropsWithChildren> = ({
const onClick = (result: Mora) => { const onClick = (result: Mora) => {
result; // 这里send猜拳的结果给服务器 result; // 这里send猜拳的结果给服务器
onSelect?.(result);
setOpen(false); setOpen(false);
}; };
...@@ -63,7 +64,9 @@ export const MoraPopover: React.FC<React.PropsWithChildren> = ({ ...@@ -63,7 +64,9 @@ export const MoraPopover: React.FC<React.PropsWithChildren> = ({
); );
}; };
export const TpPopover: React.FC<React.PropsWithChildren> = ({ children }) => { export const TpPopover: React.FC<
React.PropsWithChildren<{ onSelect?: (result: Tp) => void }>
> = ({ children, onSelect }) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
// 需要在mora的service之中,emit一个事件,让这个组件监听到,然后打开popover // 需要在mora的service之中,emit一个事件,让这个组件监听到,然后打开popover
...@@ -73,6 +76,7 @@ export const TpPopover: React.FC<React.PropsWithChildren> = ({ children }) => { ...@@ -73,6 +76,7 @@ export const TpPopover: React.FC<React.PropsWithChildren> = ({ children }) => {
const onClick = (result: Tp) => { const onClick = (result: Tp) => {
result; // 这里send结果给服务器 result; // 这里send结果给服务器
onSelect?.(result);
setOpen(false); setOpen(false);
}; };
......
...@@ -23,7 +23,7 @@ import { Background, IconFont, Select, SpecialButton } from "@/ui/Shared"; ...@@ -23,7 +23,7 @@ import { Background, IconFont, Select, SpecialButton } from "@/ui/Shared";
import { Chat } from "./Chat"; import { Chat } from "./Chat";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { MoraPopover, TpPopover } from "./Popover"; import { Mora, MoraPopover, Tp, TpPopover } from "./Popover";
const NeosConfig = useConfig(); const NeosConfig = useConfig();
...@@ -50,6 +50,9 @@ export const Component: React.FC = () => { ...@@ -50,6 +50,9 @@ export const Component: React.FC = () => {
const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0]))); const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
const room = useSnapshot(roomStore); const room = useSnapshot(roomStore);
const [myMora, setMyMora] = useState<Mora>();
const [opponentMora, setOpponentMora] = useState<Mora>();
return ( return (
<ConfigProvider theme={theme}> <ConfigProvider theme={theme}>
<div <div
...@@ -85,7 +88,8 @@ export const Component: React.FC = () => { ...@@ -85,7 +88,8 @@ export const Component: React.FC = () => {
avatar={user?.avatar_url} avatar={user?.avatar_url}
btn={ btn={
<> <>
<Button {/* 根据stage显示结果 */}
{/* <Button
size="large" size="large"
className={styles["btn-join"]} className={styles["btn-join"]}
onClick={() => { onClick={() => {
...@@ -103,13 +107,41 @@ export const Component: React.FC = () => { ...@@ -103,13 +107,41 @@ export const Component: React.FC = () => {
{room.getMePlayer()?.state === PlayerState.NO_READY {room.getMePlayer()?.state === PlayerState.NO_READY
? "决斗准备" ? "决斗准备"
: "取消准备"} : "取消准备"}
</Button> </Button> */}
<div style={{ marginLeft: "auto" }}>
{/* 根据是否有了猜拳结果而显示 */}
<Avatar
style={{ marginLeft: "auto" }}
size={48}
icon={<IconFont type="icon-hand-rock" />}
/>
{/* <Skeleton.Avatar active size={48} /> */}
</div>
</> </>
} }
/> />
<PlayerZone who={Who.Op} player={room.getOpPlayer()} /> <PlayerZone
who={Who.Op}
player={room.getOpPlayer()}
btn={
<div style={{ marginLeft: "auto" }}>
{/* 根据是否有了猜拳结果而显示 */}
{/* <Avatar
style={{ marginLeft: "auto" }}
size={48}
icon={<IconFont type="icon-hand-rock" />}
/> */}
<Skeleton.Avatar active size={48} />
</div> </div>
<ActionButton /> }
/>
</div>
<ActionButton
onMoraSelect={setMyMora}
onTpSelect={() => {
// 暂时不知道需不需要 先放着
}}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -245,10 +277,13 @@ const SideButtons: React.FC<{ ...@@ -245,10 +277,13 @@ const SideButtons: React.FC<{
); );
}; };
const ActionButton: React.FC = () => { const ActionButton: React.FC<{
onMoraSelect: (mora: Mora) => void;
onTpSelect: (tp: Tp) => void;
}> = ({ onMoraSelect, onTpSelect }) => {
return ( return (
<MoraPopover> <MoraPopover onSelect={onMoraSelect}>
<TpPopover> <TpPopover onSelect={onTpSelect}>
<SpecialButton className={styles["btns-action"]} disabled={false}> <SpecialButton className={styles["btns-action"]} disabled={false}>
<> <>
<IconFont type="icon-play" size={12} /> <IconFont type="icon-play" size={12} />
......
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