Commit 338735da authored by timel's avatar timel

fix: some styles

parent e8fc6fda
...@@ -54,9 +54,15 @@ ...@@ -54,9 +54,15 @@
.inner { .inner {
position: absolute; position: absolute;
left: 0; left: 0;
width: 150px;
height: 70px;
filter: blur(120px);
transition: 0.3s;
}
&.ready .inner {
width: 250px; width: 250px;
height: 100px; height: 100px;
filter: blur(120px); filter: blur(100px) brightness(1.2) saturate(1.2);
} }
&.me { &.me {
box-shadow: -5px 0 20px 0 rgba(0, 115, 255, 0.15); box-shadow: -5px 0 20px 0 rgba(0, 115, 255, 0.15);
......
...@@ -97,6 +97,7 @@ export const Component: React.FC = () => { ...@@ -97,6 +97,7 @@ export const Component: React.FC = () => {
who={Who.Me} who={Who.Me}
player={me} player={me}
avatar={user?.avatar_url} avatar={user?.avatar_url}
ready={me?.state === PlayerState.READY}
btn={ btn={
room.stage === RoomStage.WAITING ? ( room.stage === RoomStage.WAITING ? (
<Button <Button
...@@ -138,6 +139,7 @@ export const Component: React.FC = () => { ...@@ -138,6 +139,7 @@ export const Component: React.FC = () => {
key={idx} key={idx}
who={Who.Op} who={Who.Op}
player={player} player={player}
ready={op?.state === PlayerState.READY}
btn={ btn={
room.stage === RoomStage.WAITING ? null : ( room.stage === RoomStage.WAITING ? null : (
<MoraAvatar <MoraAvatar
...@@ -177,12 +179,17 @@ enum Who { ...@@ -177,12 +179,17 @@ enum Who {
// 玩家区域: 双方各有一个 // 玩家区域: 双方各有一个
const PlayerZone: React.FC<{ const PlayerZone: React.FC<{
btn?: React.ReactNode; // 在内部右侧可以放一个按钮 btn?: React.ReactNode; // 在内部右侧可以放一个按钮
who?: Who; who: Who;
player?: Player; player?: Player;
avatar?: string; // 因为对手的头像目前不清楚如何获取,因此暂时这里作为一个参数传入 avatar?: string; // 因为对手的头像目前不清楚如何获取,因此暂时这里作为一个参数传入
}> = ({ btn, who, player, avatar }) => { ready: boolean;
}> = ({ btn, who, player, avatar, ready }) => {
return ( return (
<div className={classNames(styles["side-box"], who && styles[who])}> <div
className={classNames(styles["side-box"], styles[who], {
[styles.ready]: ready,
})}
>
<div className={styles.inner}></div> <div className={styles.inner}></div>
<div style={{ position: "relative" }}> <div style={{ position: "relative" }}>
<Avatar <Avatar
...@@ -358,7 +365,10 @@ const ActionButton: React.FC<{ ...@@ -358,7 +365,10 @@ const ActionButton: React.FC<{
<span>等待游戏开始</span> <span>等待游戏开始</span>
</> </>
) : ( ) : (
<></> <>
<LoadingOutlined />
<span>等待游戏开始</span>
</>
)} )}
</SpecialButton> </SpecialButton>
</TpPopover> </TpPopover>
......
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