From 4f1d5573ec6e2e71781a499cbb36e799792a3f6d Mon Sep 17 00:00:00 2001
From: ebina <ebina.engr@gmail.com>
Date: Wed, 21 Aug 2024 00:07:10 +0900
Subject: [PATCH] =?UTF-8?q?OTHELLO-75:=20=E7=BD=AE=E3=81=91=E3=82=8B?=
 =?UTF-8?q?=E3=83=9E=E3=82=B9=E3=81=AB=E3=83=9B=E3=83=90=E3=83=BC=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E9=9A=9B=E3=81=AB=E7=9F=B3=E3=82=92=E8=96=84=E3=81=8F?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PlayGround/elements/Board/Board.tsx       |  1 +
 .../PlayGround/elements/Board/DummyStone.tsx  | 19 +++++++++++++++++++
 .../PlayGround/elements/Board/Field.tsx       | 11 ++++++++---
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/components/PlayGround/elements/Board/DummyStone.tsx

diff --git a/src/components/PlayGround/elements/Board/Board.tsx b/src/components/PlayGround/elements/Board/Board.tsx
index 57ef733..c0d4b3f 100644
--- a/src/components/PlayGround/elements/Board/Board.tsx
+++ b/src/components/PlayGround/elements/Board/Board.tsx
@@ -26,6 +26,7 @@ const Board: React.FC = () => {
               fieldId={index}
               content={content}
               isSelectable={selectableFields.includes(index)}
+              currentColor={players.active.color}
               update={selectableFields.includes(index) ? update : undefined}
               showMessage={showMessage}
             />
diff --git a/src/components/PlayGround/elements/Board/DummyStone.tsx b/src/components/PlayGround/elements/Board/DummyStone.tsx
new file mode 100644
index 0000000..3182db4
--- /dev/null
+++ b/src/components/PlayGround/elements/Board/DummyStone.tsx
@@ -0,0 +1,19 @@
+import { COLOR_CODE } from "@models/Board/Color";
+
+type Props = {
+  color: COLOR_CODE;
+  size?: string;
+};
+
+const Stone: React.FC<Props> = (props) => {
+  const color: string = props.color === COLOR_CODE.WHITE ? "bg-slate-50/60" : "bg-slate-900/40";
+  const size = props.size ?? "h-5/6 w-5/6";
+
+  return (
+    <div
+      className={`rounded-full shadow-[2px_2px_1px_#bebebe] ${color} ${size} animate-flip-in`}
+    />
+  );
+};
+
+export default Stone;
diff --git a/src/components/PlayGround/elements/Board/Field.tsx b/src/components/PlayGround/elements/Board/Field.tsx
index 5096618..07119e6 100644
--- a/src/components/PlayGround/elements/Board/Field.tsx
+++ b/src/components/PlayGround/elements/Board/Field.tsx
@@ -1,12 +1,14 @@
 import { FieldId } from "@models/Board/Board";
 import { COLOR_CODE } from "@models/Board/Color";
 import Stone from "./Stone";
-import { memo } from "react";
+import { memo, useState } from "react";
+import DummyStone from "./DummyStone";
 
 type Props = {
   fieldId: FieldId;
   content: COLOR_CODE;
   isSelectable: boolean;
+  currentColor: COLOR_CODE;
   update?: (fieldId: FieldId) => void;
   showMessage: (message: string) => void;
 };
@@ -15,13 +17,16 @@ const style =
   "bg-slate-200 rounded-sm shadow-x2s flex items-center justify-center box-content";
 
 // eslintに怒られるため名前付き関数に変更している
-const Field: React.FC<Props> = memo(function field(props) {
+const Field: React.FC<Props> = memo(function Field(props) {
+  const [hover, setHover] = useState(false);
   return props.isSelectable ? (
     <button
       className={style}
       onClick={() => !!props.update && props.update(props.fieldId)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
     >
-      {props.content ? <Stone color={props.content} /> : null}
+      {props.content ? <Stone color={props.content} /> : hover ? <DummyStone color={props.currentColor} /> : null}
     </button>
   ) : (
     <div