finish magic select place ui

src/service/duel/selectPlace.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { AppDispatch } from "../../store";
 import MsgSelectPlace = ygopro.StocGameMessage.MsgSelectPlace;
-import { addMonsterPlaceSelectAble, addMagicPlaceSelectAble } from "../../reducers/duel/mod";
+import {
+  addMonsterPlaceSelectAble,
+  addMagicPlaceSelectAble,
+} from "../../reducers/duel/mod";
 
 export default (selectPlace: MsgSelectPlace, dispatch: AppDispatch) => {
   if (selectPlace.count != 1) {

src/service/duel/start.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { AppDispatch } from "../../store";
-import { infoInit, setSelfType, initMonsters, initMagics } from "../../reducers/duel/mod";
+import {
+  infoInit,
+  setSelfType,
+  initMonsters,
+  initMagics,
+} from "../../reducers/duel/mod";
 
 export default (
   start: ygopro.StocGameMessage.MsgStart,

src/ui/Duel/magics.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
+import { selectMeMagics } from "../../reducers/duel/magicSlice";
+import { useClick } from "./hook";
+import { Magic } from "../../reducers/duel/util";
+import { store } from "../../store";
+import { useAppSelector } from "../../hook";
+import { useRef } from "react";
+import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
+import { clearMagicSelectInfo } from "../../reducers/duel/mod";
 
 // TODO: use config
 const left = -2.15;
 const gap = 1.05;
 
 const Magics = () => {
+  const magics = useAppSelector(selectMeMagics).magics;
+
   return (
     <>
-      {[0, 1, 2, 3, 4].map((idx) => {
-        return <Magic idx={idx} />;
+      {magics.map((magic) => {
+        return <CMagic state={magic} />;
       })}
     </>
   );
 };
 
-const Magic = (props: { idx: number }) => {
+const CMagic = (props: { state: Magic }) => {
+  const state = props.state;
+
+  const planeRef = useRef(null);
   const shape = CONFIG.CardSlotShape();
   const position = new BABYLON.Vector3(
-    left + gap * props.idx,
+    left + gap * state.sequence,
     shape.depth / 2 + CONFIG.Floating,
     -2.6
   );
   const rotation = CONFIG.CardSlotRotation();
+  const edgesWidth = 2.0;
+  const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
+  const dispatch = store.dispatch;
+
+  useClick(
+    (_event) => {
+      if (state.selectInfo) {
+        sendSelectPlaceResponse(state.selectInfo.response);
+        dispatch(clearMagicSelectInfo(0));
+        dispatch(clearMagicSelectInfo(1));
+      }
+    },
+    planeRef,
+    [state]
+  );
 
   return (
     <plane
-      name={`magic-${props.idx}`}
+      name={`magic-${state.sequence}`}
+      ref={planeRef}
       width={shape.width}
       height={shape.height}
       position={position}
       rotation={rotation}
+      enableEdgesRendering
+      edgesWidth={state.selectInfo ? edgesWidth : 0}
+      edgesColor={edgesColor}
     >
       <standardMaterial
-        name={`magic-mat-${props.idx}`}
+        name={`magic-mat-${props.state.sequence}`}
         diffuseTexture={
-          new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
+          state.occupant
+            ? new BABYLON.Texture(`http://localhost:3030/images/card_back.jpg`)
+            : new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
         }
         alpha={0.2}
       ></standardMaterial>

src/ui/Duel/monsters.tsx

@@ -42,7 +42,7 @@ const CommonMonster = (props: { state: Monster }) => {
   useClick(
     (_event) => {
       if (props.state.selectInfo) {
-        sendSelectPlaceResponse(props.state.selectInfo?.response);
+        sendSelectPlaceResponse(props.state.selectInfo.response);
         dispatch(clearMonsterSelectInfo(0));
         dispatch(clearMonsterSelectInfo(1));
       }