Commit 7b939eba authored by Chunchi Che's avatar Chunchi Che

display disabled for YgoCard

parent 9d02d41c
Pipeline #28744 passed with stages
in 13 minutes and 31 seconds
import { proxy } from "valtio"; import { proxy } from "valtio";
import { CardMeta, ygopro } from "@/api"; import { CardMeta, ygopro } from "@/api";
import { STATUS_DISABLED, STATUS_FORBIDDEN } from "@/common";
import type { Interactivity } from "./matStore/types"; import type { Interactivity } from "./matStore/types";
import { type NeosStore } from "./shared"; import { type NeosStore } from "./shared";
/** /**
* 场上某位置的状态 * Status of card on field
*
* TODO: use class
*/ */
export interface CardType { export interface CardType {
uuid: string; // 一张卡的唯一标识 uuid: string; // 一张卡的唯一标识
...@@ -94,4 +97,9 @@ export class CardStore implements NeosStore { ...@@ -94,4 +97,9 @@ export class CardStore implements NeosStore {
} }
} }
// TODO: provided in class
export function isCardDisabled(card: CardType): boolean {
return card.status === STATUS_DISABLED || card.status === STATUS_FORBIDDEN;
}
export const cardStore = proxy(new CardStore()); export const cardStore = proxy(new CardStore());
...@@ -14,7 +14,13 @@ import { ...@@ -14,7 +14,13 @@ import {
import { Container } from "@/container"; import { Container } from "@/container";
import { getUIContainer } from "@/container/compat"; import { getUIContainer } from "@/container/compat";
import { eventbus, Task } from "@/infra"; import { eventbus, Task } from "@/infra";
import { cardStore, CardType, Interactivity, InteractType } from "@/stores"; import {
cardStore,
CardType,
Interactivity,
InteractType,
isCardDisabled,
} from "@/stores";
import { showCardModal as displayCardModal } from "@/ui/Duel/Message/CardModal"; import { showCardModal as displayCardModal } from "@/ui/Duel/Message/CardModal";
import { YgoCard } from "@/ui/Shared"; import { YgoCard } from "@/ui/Shared";
...@@ -344,6 +350,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => { ...@@ -344,6 +350,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
<YgoCard <YgoCard
className={styles.cover} className={styles.cover}
code={snap.code === 0 ? snap.meta.id : snap.code} code={snap.code === 0 ? snap.meta.id : snap.code}
disabled={isCardDisabled(snap as CardType)}
/> />
<YgoCard className={styles.back} isBack /> <YgoCard className={styles.back} isBack />
</div> </div>
......
...@@ -22,3 +22,12 @@ ...@@ -22,3 +22,12 @@
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
} }
.disabled {
position: relative;
display: flex;
width: 50%;
justify-content: center;
z-index: 2;
pointer-events: none;
}
...@@ -13,6 +13,7 @@ interface Props { ...@@ -13,6 +13,7 @@ interface Props {
isBack?: boolean; isBack?: boolean;
code?: number; code?: number;
targeted?: boolean; targeted?: boolean;
disabled?: boolean;
// cardName?: string; // cardName?: string;
style?: CSSProperties; style?: CSSProperties;
width?: number | string; width?: number | string;
...@@ -27,6 +28,7 @@ export const YgoCard: React.FC<Props> = (props) => { ...@@ -27,6 +28,7 @@ export const YgoCard: React.FC<Props> = (props) => {
// cardName, // cardName,
isBack = false, isBack = false,
targeted = false, targeted = false,
disabled = false,
width, width,
style, style,
onClick, onClick,
...@@ -53,6 +55,10 @@ export const YgoCard: React.FC<Props> = (props) => { ...@@ -53,6 +55,10 @@ export const YgoCard: React.FC<Props> = (props) => {
<div className={styles.targeted}> <div className={styles.targeted}>
<img src={`${assetsPath}/targeted.svg`} /> <img src={`${assetsPath}/targeted.svg`} />
</div> </div>
) : disabled ? (
<div className={styles.disabled}>
<img src={`${assetsPath}/disabled.png`} />
</div>
) : ( ) : (
<></> <></>
)} )}
......
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