Skip to content

N
Neos
Commit a23b4d02 authored by timel's avatar timel
Browse files
Options

fix: move to bugs; prototype bug; snap/store bug

parent 8876669c
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 59 deletions
src/service/duel/move.ts
View file @ a23b4d02
......@@ -94,7 +94,7 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
case ygopro.CardZone.GRAVE:
case ygopro.CardZone.EXTRA:
case ygopro.CardZone.HAND: {
matStore.hands.of(to.controler).insert(to.sequence, code);
matStore.in(to.location).of(to.controler).insert(to.sequence, code);
break;
}
case ygopro.CardZone.OVERLAY: {
......
src/ui/Duel/Message/CardListModal.tsx
View file @ a23b4d02
......@@ -34,7 +34,7 @@ export const CardListModal = () => {
const snapCardListModal = useSnapshot(cardListModal);
const isOpen = snapCardListModal.isOpen;
const list = snapCardListModal.list;
const list = snapCardListModal.list as typeof cardListModal.list;
const handleOkOrCancel = () => {
dispatch(setCardListModalIsOpen(false));
......
src/ui/Duel/PlayMat/Field.tsx
View file @ a23b4d02
......@@ -23,9 +23,10 @@ export const Field = () => {
// );
// 这儿的find可能是出于某种考虑，以后再深思
const meField = useSnapshot(matStore.magics.me[5]);
const opField = useSnapshot(matStore.magics.op[5]);
const meFieldState = matStore.magics.me[5];
const meField = useSnapshot(meFieldState);
const opFieldState = matStore.magics.op[5];
const opField = useSnapshot(opFieldState);
const clearPlaceInteractivitiesAction = (controller: number) =>
matStore.magics.of(controller).clearPlaceInteractivity();
......@@ -33,7 +34,7 @@ export const Field = () => {
<>
{meField ? (
<FixedSlot
snapState={meField}
state={meFieldState}
sequence={0}
position={fieldPosition(0)}
rotation={cardSlotRotation(false)}
......@@ -45,7 +46,7 @@ export const Field = () => {
)}
{opField ? (
<FixedSlot
snapState={opField}
state={opFieldState}
sequence={0}
position={fieldPosition(1)}
rotation={cardSlotRotation(true)}
......
src/ui/Duel/PlayMat/FixedSlot.tsx
View file @ a23b4d02
......@@ -18,9 +18,13 @@ import {
import { store } from "@/store";
import { interactTypeToString } from "../utils";
import { useSnapshot } from "valtio";
import { useSnapshot, INTERNAL_Snapshot } from "valtio";
import { clearAllIdleInteractivities, type CardState } from "@/valtioStores";
import {
clearAllIdleInteractivities,
type CardState,
clearAllPlaceInteradtivities,
} from "@/valtioStores";
const NeosConfig = useConfig();
......@@ -33,7 +37,7 @@ const cardDefenceRotation = new BABYLON.Vector3(
);
export const FixedSlot = (props: {
snapState: CardState;
state: CardState;
sequence: number;
position: BABYLON.Vector3;
rotation: BABYLON.Vector3;
......@@ -43,8 +47,8 @@ export const FixedSlot = (props: {
}) => {
const planeRef = useRef(null);
// const snapState = useSnapshot(props.state);
const snapState = props.snapState;
const snapState = useSnapshot(props.state);
// const snapState = props.state;
const rotation =
snapState.location.position === ygopro.CardPosition.DEFENSE ||
snapState.location.position === ygopro.CardPosition.FACEUP_DEFENSE ||
......@@ -66,8 +70,11 @@ export const FixedSlot = (props: {
sendSelectPlaceResponse(snapState.placeInteractivity.response);
// dispatch(props.clearPlaceInteractivitiesAction(0));
// dispatch(props.clearPlaceInteractivitiesAction(1));
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(1);
// 其实不应该从外面传进来的...
// props.clearPlaceInteractivitiesAction(0);
// props.clearPlaceInteractivitiesAction(1);
clearAllPlaceInteradtivities(0);
clearAllPlaceInteradtivities(1);
} else if (snapState.occupant) {
// 中央弹窗展示选中卡牌信息
dispatch(setCardModalMeta(snapState.occupant));
......
src/ui/Duel/PlayMat/Hands.tsx
View file @ a23b4d02
......@@ -13,7 +13,7 @@ import {
} from "@/reducers/duel/mod";
import { store } from "@/store";
import { matStore, type CardState, messageStore } from "@/valtioStores";
import { useSnapshot } from "valtio";
import { useSnapshot, INTERNAL_Snapshot } from "valtio";
import { animated, useSpring } from "../spring";
import { interactTypeToString, zip } from "../utils";
......@@ -28,17 +28,20 @@ const handRotation = new BABYLON.Vector3(rotation.x, rotation.y, rotation.z);
const hoverScaling = NeosConfig.ui.card.handHoverScaling;
export const Hands = () => {
const meHands = useSnapshot(matStore.hands.me);
const opHands = useSnapshot(matStore.hands.op);
const meHandsState = matStore.hands.me;
const opHandsState = matStore.hands.op;
const meHandsSnap = useSnapshot(meHandsState);
const opHandsSnap = useSnapshot(opHandsState);
// const meHands = useAppSelector(selectMeHands).inner;
// const opHands = useAppSelector(selectOpHands).inner;
const meHandPositions = handPositons(0, meHands);
const opHandPositions = handPositons(1, opHands);
const meHandPositions = handPositons(0, meHandsSnap);
const opHandPositions = handPositons(1, opHandsSnap);
// const meHandPositions = handPositons(0, meHandsState);
// const opHandPositions = handPositons(1, opHandsState);
return (
<>
{zip(meHands, meHandPositions).map(([hand, position], idx) => {
{zip(meHandsState, meHandPositions).map(([hand, position], idx) => {
return (
<CHand
key={idx}
......@@ -46,11 +49,11 @@ export const Hands = () => {
sequence={idx}
position={position}
rotation={handRotation}
cover={(id) => `${NeosConfig.cardImgUrl}/${id}.jpg`}
// cover={(id) => `${NeosConfig.cardImgUrl}/${id}.jpg`}
/>
);
})}
{zip(opHands, opHandPositions).map(([hand, position], idx) => {
{zip(opHandsState, opHandPositions).map(([hand, position], idx) => {
return (
<CHand
key={idx}
......@@ -58,7 +61,8 @@ export const Hands = () => {
sequence={idx}
position={position}
rotation={handRotation}
cover={(_) => `${NeosConfig.assetsPath}/card_back.jpg`}
// cover={(_) => `${NeosConfig.assetsPath}/card_back.jpg`}
back={true}
/>
);
})}
......@@ -71,7 +75,7 @@ const CHand = (props: {
sequence: number;
position: BABYLON.Vector3;
rotation: BABYLON.Vector3;
cover: (id: number) => string;
back?: boolean;
}) => {
const hoverScale = new BABYLON.Vector3(
hoverScaling.x,
......@@ -168,7 +172,12 @@ const CHand = (props: {
<animated.standardMaterial
name={`hand-mat-${props.sequence}`}
diffuseTexture={
new BABYLON.Texture(props.cover(state.occupant?.id || 0))
// new BABYLON.Texture(props.cover(state.occupant?.id || 0))
new BABYLON.Texture(
props.back
? `${NeosConfig.assetsPath}/card_back.jpg`
: `${NeosConfig.cardImgUrl}/${state.occupant?.id || 0}.jpg`
)
}
/>
</animated.plane>
......@@ -176,7 +185,10 @@ const CHand = (props: {
);
};
const handPositons = (player: number, hands: CardState[]) => {
const handPositons = (
player: number,
hands: INTERNAL_Snapshot<CardState[]>
) => {
const gap = groundShape.width / (hands.length - 1);
const x = (idx: number) =>
player == 0 ? left + gap * idx : -left - gap * idx;
......
src/ui/Duel/PlayMat/Magics.tsx
View file @ a23b4d02
......@@ -9,8 +9,8 @@ import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
import { cardSlotRotation, zip } from "../utils";
import { FixedSlot } from "./FixedSlot";
import { matStore, type CardState, messageStore } from "@/valtioStores";
import { useSnapshot } from "valtio";
import { matStore, type CardState } from "@/valtioStores";
import { useSnapshot, type INTERNAL_Snapshot } from "valtio";
const NeosConfig = useConfig();
// TODO: use config
......@@ -22,22 +22,26 @@ export const Magics = () => {
// const meMagics = useAppSelector(selectMeMagics).inner;
// const opMagics = useAppSelector(selectOpMagics).inner;
const meMagics = useSnapshot(matStore.magics.me);
const opMagics = useSnapshot(matStore.magics.op);
const meMagicPositions = magicPositions(0, meMagics);
const opMagicPositions = magicPositions(1, opMagics);
const meMagicState = matStore.magics.me;
const opMagicState = matStore.magics.op;
const meMagicsSnap = useSnapshot(meMagicState);
const opMagicsSnap = useSnapshot(opMagicState);
const meMagicPositions = magicPositions(0, meMagicsSnap);
const opMagicPositions = magicPositions(1, opMagicsSnap);
const clearPlaceInteractivitiesAction = (controller: number) =>
const clearPlaceInteractivitiesAction = (controller: number) => {
console.warn("magic clearPlaceInteractivitiesAction");
matStore.magics.of(controller).clearPlaceInteractivity();
};
return (
<>
{zip(meMagics, meMagicPositions)
{zip(meMagicState, meMagicPositions)
.slice(0, 5)
.map(([magic, position], sequence) => {
return (
<FixedSlot
snapState={magic}
state={magic}
key={sequence}
sequence={sequence}
position={position}
......@@ -47,12 +51,12 @@ export const Magics = () => {
/>
);
})}
{zip(opMagics, opMagicPositions)
{zip(opMagicState, opMagicPositions)
.slice(0, 5)
.map(([magic, position], sequence) => {
return (
<FixedSlot
snapState={magic}
state={magic}
key={sequence}
sequence={sequence}
position={position}
......@@ -66,7 +70,10 @@ export const Magics = () => {
);
};
const magicPositions = (player: number, magics: CardState[]) => {
const magicPositions = (
player: number,
magics: INTERNAL_Snapshot<CardState[]>
) => {
const x = (sequence: number) =>
player == 0 ? left + gap * sequence : -left - gap * sequence;
const y = transform.z / 2 + NeosConfig.ui.card.floating;
......
src/ui/Duel/PlayMat/Monsters.tsx
View file @ a23b4d02
......@@ -15,7 +15,7 @@ import { cardSlotDefenceRotation, cardSlotRotation, zip } from "../utils";
import { FixedSlot } from "./FixedSlot";
import { matStore, type CardState, messageStore } from "@/valtioStores";
import { useSnapshot } from "valtio";
import { useSnapshot, type INTERNAL_Snapshot } from "valtio";
const NeosConfig = useConfig();
const transform = NeosConfig.ui.card.transform;
......@@ -23,24 +23,29 @@ const floating = NeosConfig.ui.card.floating;
const left = -2.15; // TODO: config
const gap = 1.05;
const clearPlaceInteractivitiesAction = (controller: number) =>
const clearPlaceInteractivitiesAction = (controller: number) => {
console.warn("monster clearPlaceInteractivitiesAction");
matStore.monsters.of(controller).clearPlaceInteractivity();
};
export const Monsters = () => {
// const meMonsters = useAppSelector(selectMeMonsters).inner;
// const opMonsters = useAppSelector(selectOpMonsters).inner;
const meMonsters = useSnapshot(matStore.monsters.me);
const opMonsters = useSnapshot(matStore.monsters.op);
const meMonsterPositions = monsterPositions(0, meMonsters);
const opMonsterPositions = monsterPositions(1, opMonsters);
const meMonstersStore = matStore.monsters.me;
const opMonstersStore = matStore.monsters.op;
const meMonstersSnap = useSnapshot(meMonstersStore);
const opMonstersSnap = useSnapshot(opMonstersStore);
const meMonsterPositions = monsterPositions(0, meMonstersSnap);
const opMonsterPositions = monsterPositions(1, opMonstersSnap);
return (
<>
{zip(meMonsters, meMonsterPositions)
{zip(meMonstersStore, meMonsterPositions)
.slice(0, 5)
.map(([monster, position], sequence) => (
<FixedSlot
snapState={monster}
state={monster}
key={sequence}
sequence={sequence}
position={position}
......@@ -50,11 +55,11 @@ export const Monsters = () => {
clearPlaceInteractivitiesAction={clearPlaceInteractivitiesAction}
/>
))}
{zip(opMonsters, opMonsterPositions)
{zip(opMonstersStore, opMonsterPositions)
.slice(0, 5)
.map(([monster, position], sequence) => (
<FixedSlot
snapState={monster}
state={monster}
key={sequence}
sequence={sequence}
position={position}
......@@ -64,7 +69,10 @@ export const Monsters = () => {
clearPlaceInteractivitiesAction={clearPlaceInteractivitiesAction}
/>
))}
<ExtraMonsters meMonsters={meMonsters} opMonsters={opMonsters} />
<ExtraMonsters
meMonsters={meMonstersStore}
opMonsters={meMonstersStore}
/>
</>
);
};
......@@ -89,7 +97,7 @@ const ExtraMonsters = (props: {
<>
{meLeft ? (
<FixedSlot
snapState={meLeft}
state={meLeft}
sequence={5}
position={leftPosition}
rotation={meRotation}
......@@ -102,7 +110,7 @@ const ExtraMonsters = (props: {
)}
{meRight ? (
<FixedSlot
snapState={meRight}
state={meRight}
sequence={6}
position={rightPosition}
rotation={meRotation}
......@@ -115,7 +123,7 @@ const ExtraMonsters = (props: {
)}
{opLeft ? (
<FixedSlot
snapState={opLeft}
state={opLeft}
sequence={5}
position={rightPosition}
rotation={opRotation}
......@@ -127,7 +135,7 @@ const ExtraMonsters = (props: {
)}
{opRight ? (
<FixedSlot
snapState={opRight}
state={opRight}
sequence={6}
position={leftPosition}
rotation={opRotation}
......@@ -141,7 +149,10 @@ const ExtraMonsters = (props: {
);
};
const monsterPositions = (player: number, monsters: CardState[]) => {
const monsterPositions = (
player: number,
monsters: INTERNAL_Snapshot<CardState[]>
) => {
const x = (sequence: number) =>
player == 0 ? left + gap * sequence : -left - gap * sequence;
const y = transform.z / 2 + floating;
......
src/valtioStores/matStore/store.ts
View file @ a23b4d02
......@@ -36,13 +36,29 @@ class CardArray extends Array<CardState> implements ArrayCardState {
});
// methods
remove(sequence: number) {
console.warn("remove", {
sequence,
zone: ygopro.CardZone[this.zone],
controller: getWhom(this.getController()),
});
this.splice(sequence, 1);
}
async insert(sequence: number, id: number) {
console.warn("insert", {
sequence,
id,
zone: ygopro.CardZone[this.zone],
controller: getWhom(this.getController()),
});
const card = await this.genCard(this.getController(), id);
this.splice(sequence, 0, card);
}
async add(ids: number[]) {
console.warn("add", {
ids,
zone: ygopro.CardZone[this.zone],
controller: getWhom(this.getController()),
});
const cards = await Promise.all(
ids.map(async (id) => this.genCard(this.getController(), id))
);
......@@ -53,6 +69,13 @@ class CardArray extends Array<CardState> implements ArrayCardState {
id: number,
position?: ygopro.CardPosition
) {
console.warn("setOccupant", {
sequence,
id,
position,
zone: ygopro.CardZone[this.zone],
controller: getWhom(this.getController()),
});
const meta = await fetchCard(id);
const target = this[sequence];
target.occupant = meta;
......@@ -85,18 +108,19 @@ class CardArray extends Array<CardState> implements ArrayCardState {
}
const genDuelCardArray = (cardStates: CardState[], zone: ygopro.CardZone) => {
const me = new CardArray(...cardStates);
const me = cloneDeep(new CardArray(...cardStates));
me.zone = zone;
me.getController = () => (matStore.selfType == 1 ? 0 : 1);
const op = new CardArray(...cardStates);
const op = cloneDeep(new CardArray(...cardStates));
op.zone = zone;
op.getController = () => (matStore.selfType == 1 ? 1 : 0);
const res = proxy({
me,
op,
of: (controller: number) => {
res[getWhom(controller)].__proto__ = CardArray.prototype;
return res[getWhom(controller)];
const tmp = res[getWhom(controller)];
tmp.__proto__ = CardArray.prototype; // 手动修复原型链
return tmp;
},
});
return res;
......
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