Commit c40cbcc3 authored by timel's avatar timel Committed by Chunchi Che

Fix/bugs 0709

parent 19653d6a
...@@ -3,7 +3,7 @@ import "./index.scss"; ...@@ -3,7 +3,7 @@ import "./index.scss";
import { MinusOutlined, UpOutlined } from "@ant-design/icons"; import { MinusOutlined, UpOutlined } from "@ant-design/icons";
import { Modal, type ModalProps } from "antd"; import { Modal, type ModalProps } from "antd";
import classNames from "classnames"; import classNames from "classnames";
import { useState } from "react"; import { useEffect, useState } from "react";
interface Props extends ModalProps { interface Props extends ModalProps {
canBeMinimized?: boolean; canBeMinimized?: boolean;
...@@ -12,6 +12,12 @@ interface Props extends ModalProps { ...@@ -12,6 +12,12 @@ interface Props extends ModalProps {
export const NeosModal: React.FC<Props> = (props) => { export const NeosModal: React.FC<Props> = (props) => {
const { canBeMinimized = true } = props; const { canBeMinimized = true } = props;
const [mini, setMini] = useState(false); const [mini, setMini] = useState(false);
// 为了修antd的bug,先让isOpen发生变化,再让它变回来
const [realOpen, setRealOpen] = useState(true);
useEffect(() => setRealOpen(false), []);
useEffect(() => setRealOpen(!!props.open), [props.open]);
return ( return (
<Modal <Modal
className={classNames("neos-modal", { "neos-modal-mini": mini })} className={classNames("neos-modal", { "neos-modal-mini": mini })}
...@@ -24,6 +30,7 @@ export const NeosModal: React.FC<Props> = (props) => { ...@@ -24,6 +30,7 @@ export const NeosModal: React.FC<Props> = (props) => {
wrapClassName={classNames({ "neos-modal-wrap": mini })} wrapClassName={classNames({ "neos-modal-wrap": mini })}
closable={canBeMinimized} closable={canBeMinimized}
{...props} {...props}
open={realOpen}
/> />
); );
}; };
...@@ -18,9 +18,7 @@ section#mat { ...@@ -18,9 +18,7 @@ section#mat {
.block { .block {
height: var(--block-height-m); height: var(--block-height-m);
width: var(--block-width); width: var(--block-width);
// background-color: rgba(128, 128, 128, 0.447);
background: radial-gradient(#1d1d1d, #222); background: radial-gradient(#1d1d1d, #222);
// box-shadow: 0 0 0 1px purple;
position: relative; position: relative;
&.extra { &.extra {
margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2); margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
...@@ -29,8 +27,6 @@ section#mat { ...@@ -29,8 +27,6 @@ section#mat {
height: var(--block-height-s); height: var(--block-height-s);
} }
&.highlight { &.highlight {
// box-shadow: 0 0 0 1px #00b0ff, 0 0 13px 0px #0077ff,
// 0 0 11px 0 skyblue inset;
background: #102639; background: #102639;
cursor: pointer; cursor: pointer;
// animation: blink 1s linear infinite alternate; // animation: blink 1s linear infinite alternate;
...@@ -72,3 +68,32 @@ section#mat { ...@@ -72,3 +68,32 @@ section#mat {
} }
} }
} }
// 被禁用的样式
.disabled-cross {
width: 100%;
height: 100%;
cursor: not-allowed;
background: linear-gradient(
to top right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
),
linear-gradient(
to bottom right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
);
display: none;
}
.block.disabled {
.disabled-cross {
display: block;
}
}
import "./index.scss"; import "./index.scss";
import classnames from "classnames"; import classnames from "classnames";
import { type CSSProperties } from "react";
import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio"; import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
import { sendSelectPlaceResponse, ygopro } from "@/api"; import { sendSelectPlaceResponse, ygopro } from "@/api";
...@@ -12,25 +11,6 @@ import { ...@@ -12,25 +11,6 @@ import {
placeStore, placeStore,
} from "@/stores"; } from "@/stores";
// Block被禁用的样式
const BgDisabledStyle = {
background: `linear-gradient(
to top right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
), linear-gradient(
to bottom right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
)`,
};
const BgExtraRow: React.FC<{ const BgExtraRow: React.FC<{
meSnap: Snapshot<BlockState[]>; meSnap: Snapshot<BlockState[]>;
opSnap: Snapshot<BlockState[]>; opSnap: Snapshot<BlockState[]>;
...@@ -42,18 +22,15 @@ const BgExtraRow: React.FC<{ ...@@ -42,18 +22,15 @@ const BgExtraRow: React.FC<{
key={i} key={i}
className={classnames("block", "extra", { className={classnames("block", "extra", {
highlight: !!meSnap[i].interactivity || !!opSnap[i].interactivity, highlight: !!meSnap[i].interactivity || !!opSnap[i].interactivity,
disabled: meSnap[i].disabled || opSnap[i].disabled,
})} })}
style={
meSnap[i].disabled || opSnap[i].disabled
? (BgDisabledStyle as CSSProperties)
: {}
}
onClick={() => { onClick={() => {
onBlockClick(meSnap[i].interactivity); onBlockClick(meSnap[i].interactivity);
onBlockClick(opSnap[i].interactivity); onBlockClick(opSnap[i].interactivity);
}} }}
> >
{<DecoTriangles />} {<DecoTriangles />}
{<DisabledCross />}
</div> </div>
))} ))}
</div> </div>
...@@ -72,11 +49,12 @@ const BgRow: React.FC<{ ...@@ -72,11 +49,12 @@ const BgRow: React.FC<{
className={classnames("block", { className={classnames("block", {
szone: isSzone, szone: isSzone,
highlight: !!snap[i].interactivity, highlight: !!snap[i].interactivity,
disabled: snap[i].disabled,
})} })}
style={snap[i].disabled ? (BgDisabledStyle as CSSProperties) : {}}
onClick={() => onBlockClick(snap[i].interactivity)} onClick={() => onBlockClick(snap[i].interactivity)}
> >
{<DecoTriangles />} {<DecoTriangles />}
{<DisabledCross />}
</div> </div>
))} ))}
</div> </div>
...@@ -113,3 +91,5 @@ const DecoTriangles: React.FC = () => ( ...@@ -113,3 +91,5 @@ const DecoTriangles: React.FC = () => (
))} ))}
</> </>
); );
const DisabledCross: React.FC = () => <div className="disabled-cross"></div>;
...@@ -16,6 +16,7 @@ export const focus = async (props: { card: CardType; api: SpringApi }) => { ...@@ -16,6 +16,7 @@ export const focus = async (props: { card: CardType; api: SpringApi }) => {
y: current.y + (matStore.isMe(card.location.controller) ? -1 : 1) * 120, // TODO: 放到config之中 y: current.y + (matStore.isMe(card.location.controller) ? -1 : 1) * 120, // TODO: 放到config之中
ry: 0, ry: 0,
rz: 0, rz: 0,
z: current.z + 50,
}); });
await asyncStart(api)({ await asyncStart(api)({
y: current.y, y: current.y,
......
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