Skip to content

N
Neos
Commit 2d88c2dc authored by chechunchi's avatar chechunchi
Browse files
Options

add FixedSlot

parent 6b2d3fe5
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 184 deletions
src/ui/Duel/fixedSlot.tsx 0 → 100644
View file @ 2d88c2dc
import * as BABYLON from "@babylonjs/core";
import * as CONFIG from "../../config/ui";
import { store } from "../../store";
import { CardState } from "../../reducers/duel/generic";
import { useRef } from "react";
import { useClick } from "./hook";
import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
import { ygopro } from "../../api/ocgcore/idl/ocgcore";
import {
clearMonsterPlaceInteractivities,
setCardModalImgUrl,
setCardModalInteractivies,
setCardModalIsOpen,
setCardModalText,
} from "../../reducers/duel/mod";
const shape = CONFIG.CardSlotShape();
const FixedSlot = (props: {
state: CardState;
position: BABYLON.Vector3;
rotation: BABYLON.Vector3;
deffenseRotation?: BABYLON.Vector3;
}) => {
const planeRef = useRef(null);
const rotation =
props.state.location.position === ygopro.CardPosition.DEFENSE ||
props.state.location.position === ygopro.CardPosition.FACEUP_DEFENSE ||
props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE
? props.deffenseRotation || CONFIG.CardSlotDefenceRotation()
: props.rotation;
const edgesWidth = 2.0;
const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
const dispatch = store.dispatch;
const faceDown =
props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE ||
props.state.location.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
props.state.location.position === ygopro.CardPosition.FACEDOWN;
useClick(
(_event) => {
if (props.state.placeInteractivities) {
sendSelectPlaceResponse(props.state.placeInteractivities.response);
dispatch(clearMonsterPlaceInteractivities(0));
dispatch(clearMonsterPlaceInteractivities(1));
} else if (props.state.occupant) {
dispatch(
setCardModalText([
props.state.occupant.text.name,
props.state.occupant.text.desc,
])
);
dispatch(
setCardModalImgUrl(
`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
)
);
dispatch(setCardModalInteractivies([])); // TODO
dispatch(setCardModalIsOpen(true));
}
},
planeRef,
[props.state]
);
return (
<plane
name={`fixedslot-${props.state.location.sequence}`}
ref={planeRef}
width={shape.width}
height={shape.height}
position={props.position}
rotation={rotation}
enableEdgesRendering
edgesWidth={
props.state.placeInteractivities ||
props.state.idleInteractivities.length > 0
? edgesWidth
: 0
}
edgesColor={edgesColor}
>
<standardMaterial
name={`fixedslot-mat-${props.state.location.sequence}`}
diffuseTexture={
props.state.occupant
? faceDown
? new BABYLON.Texture(
`http://localhost:3030/images/card_back.jpg`
)
: new BABYLON.Texture(
`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
)
: new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
}
alpha={props.state.occupant ? 1 : 0}
></standardMaterial>
</plane>
);
};
export default FixedSlot;
src/ui/Duel/magics.tsx
View file @ 2d88c2dc
import * as BABYLON from "@babylonjs/core";
import * as CONFIG from "../../config/ui";
import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
import { useClick } from "./hook";
import { CardState } from "../../reducers/duel/generic";
import { store } from "../../store";
import { useAppSelector } from "../../hook";
import { useRef } from "react";
import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
import {
clearMagicPlaceInteractivities,
setCardModalImgUrl,
setCardModalIsOpen,
setCardModalText,
} from "../../reducers/duel/mod";
import { ygopro } from "../../api/ocgcore/idl/ocgcore";
import { zip } from "./util";
import FixedSlot from "./fixedSlot";
// TODO: use config
const left = -2.15;
......@@ -31,7 +21,7 @@ const Magics = () => {
<>
{zip(meMagics, meMagicPositions).map(([magic, position]) => {
return (
<CMagic
<FixedSlot
state={magic}
key={magic.location.sequence}
position={position}
......@@ -41,7 +31,7 @@ const Magics = () => {
})}
{zip(opMagics, opMagicPositions).map(([magic, position]) => {
return (
<CMagic
<FixedSlot
state={magic}
key={magic.location.sequence}
position={position}
......@@ -53,78 +43,6 @@ const Magics = () => {
);
};
const CMagic = (props: {
state: CardState;
position: BABYLON.Vector3;
rotation: BABYLON.Vector3;
}) => {
const state = props.state;
const planeRef = useRef(null);
const faceDown =
state.location.position === ygopro.CardPosition.FACEDOWN ||
state.location.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE;
const edgesWidth = 2.0;
const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
const dispatch = store.dispatch;
useClick(
(_event) => {
if (state.placeInteractivities) {
sendSelectPlaceResponse(state.placeInteractivities.response);
dispatch(clearMagicPlaceInteractivities(0));
dispatch(clearMagicPlaceInteractivities(1));
} else if (state.occupant) {
dispatch(
setCardModalText([state.occupant.text.name, state.occupant.text.desc])
);
dispatch(
setCardModalImgUrl(
`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.occupant.id}.jpg`
)
);
dispatch(setCardModalIsOpen(true));
}
},
planeRef,
[state]
);
return (
<plane
name={`magic-${state.location.sequence}`}
ref={planeRef}
width={shape.width}
height={shape.height}
position={props.position}
rotation={props.rotation}
enableEdgesRendering
edgesWidth={
state.placeInteractivities || state.idleInteractivities.length > 0
? edgesWidth
: 0
}
edgesColor={edgesColor}
>
<standardMaterial
name={`magic-mat-${props.state.location.sequence}`}
diffuseTexture={
state.occupant
? faceDown
? new BABYLON.Texture(
`http://localhost:3030/images/card_back.jpg`
)
: new BABYLON.Texture(
`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.occupant.id}.jpg`
)
: new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
}
alpha={state.occupant ? 1 : 0}
></standardMaterial>
</plane>
);
};
const magicPositions = (player: number, magics: CardState[]) => {
const x = (sequence: number) =>
player == 0 ? left + gap * sequence : -left - gap * sequence;
......
src/ui/Duel/monsters.tsx
View file @ 2d88c2dc
import * as BABYLON from "@babylonjs/core";
import * as CONFIG from "../../config/ui";
import { useClick } from "./hook";
import { store } from "../../store";
import { CardState } from "../../reducers/duel/generic";
import "react-babylonjs";
import { useRef } from "react";
import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
import {
clearMonsterPlaceInteractivities,
setCardModalImgUrl,
setCardModalInteractivies,
setCardModalIsOpen,
setCardModalText,
} from "../../reducers/duel/mod";
import { useAppSelector } from "../../hook";
import {
selectMeMonsters,
selectOpMonsters,
} from "../../reducers/duel/monstersSlice";
import { ygopro } from "../../api/ocgcore/idl/ocgcore";
import { zip } from "./util";
import FixedSlot from "./fixedSlot";
const shape = CONFIG.CardSlotShape();
const left = -2.15; // TODO: config
......@@ -35,7 +24,7 @@ const Monsters = () => {
<>
{zip(meMonsters, meMonsterPositions).map(([monster, position], idx) => {
return (
<CommonMonster
<FixedSlot
state={monster}
key={idx}
position={position}
......@@ -46,7 +35,7 @@ const Monsters = () => {
})}
{zip(opMonsters, opMonsterPositions).map(([monster, position], idx) => {
return (
<CommonMonster
<FixedSlot
state={monster}
key={idx}
position={position}
......@@ -61,91 +50,6 @@ const Monsters = () => {
);
};
const CommonMonster = (props: {
state: CardState;
position: BABYLON.Vector3;
rotation: BABYLON.Vector3;
deffenseRotation: BABYLON.Vector3;
}) => {
const planeRef = useRef(null);
const rotation =
props.state.location.position === ygopro.CardPosition.DEFENSE ||
props.state.location.position === ygopro.CardPosition.FACEUP_DEFENSE ||
props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE
? props.deffenseRotation
: props.rotation;
const edgesWidth = 2.0;
const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
const dispatch = store.dispatch;
const faceDown =
props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE ||
props.state.location.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
props.state.location.position === ygopro.CardPosition.FACEDOWN;
useClick(
(_event) => {
if (props.state.placeInteractivities) {
sendSelectPlaceResponse(props.state.placeInteractivities.response);
dispatch(clearMonsterPlaceInteractivities(0));
dispatch(clearMonsterPlaceInteractivities(1));
} else if (props.state.occupant) {
dispatch(
setCardModalText([
props.state.occupant.text.name,
props.state.occupant.text.desc,
])
);
dispatch(
setCardModalImgUrl(
`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
)
);
dispatch(setCardModalInteractivies([])); // TODO
dispatch(setCardModalIsOpen(true));
}
},
planeRef,
[props.state]
);
return (
<plane
name={`monster-${props.state.location.sequence}`}
ref={planeRef}
width={shape.width}
height={shape.height}
position={props.position}
rotation={rotation}
enableEdgesRendering
edgesWidth={
props.state.placeInteractivities ||
props.state.idleInteractivities.length > 0
? edgesWidth
: 0
}
edgesColor={edgesColor}
>
<standardMaterial
name={`monster-mat-${props.state.location.sequence}`}
diffuseTexture={
props.state.occupant
? faceDown
? new BABYLON.Texture(
`http://localhost:3030/images/card_back.jpg`
)
: new BABYLON.Texture(
`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
)
: new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
}
alpha={props.state.occupant ? 1 : 0}
></standardMaterial>
</plane>
);
};
// TODO: use props and redux
const ExtraMonsters = () => {
const xs = [-1.1, 1];
......
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