From beeb97bd239ad7e3d8105296f2e7845ea2eb2567 Mon Sep 17 00:00:00 2001
From: MinamizonoEno <a02142211@gmail.com>
Date: Fri, 1 Sep 2023 02:38:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=E9=80=B2=E5=8C=96=E4=B8=AD=E9=A3=9F?=
 =?UTF-8?q?=E4=BA=8B=E4=B8=AD=E3=81=AE=E3=83=A4=E3=82=AE=E3=81=AB=E8=A1=A3?=
 =?UTF-8?q?=E8=A3=85=E3=82=92=E5=8F=8D=E6=98=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Eat.tsx   | 21 +++++++++++++++++++--
 src/components/Pulse.tsx | 22 ++++++++++++++++++++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/Eat.tsx b/src/components/Eat.tsx
index 09860fd..2b3f9ba 100644
--- a/src/components/Eat.tsx
+++ b/src/components/Eat.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import Box from '@mui/material/Box';
 import yoro_hana from '../assets/yoro_hana.png';
 import yoro_kazitu from '../assets/yoro_kazitu.png';
@@ -11,6 +11,8 @@ import tano_kazitu from '../assets/tano_kazitu.png';
 import yagi_syokuzi from '../assets/yagi_syokuzi.png';
 import yagi from '../assets/yagi.png';
 import { EmotionDataType } from '../types/EmotionDataType';
+import { convertCostume } from '../util/convertCostume';
+import { GoatClothesContext } from '../provider/ContextProviders';
 
 type Props = {
   emotionData: EmotionDataType;
@@ -32,6 +34,12 @@ const Eat: FC<Props> = ({ emotionData, eat, showImage, randomNum, containerSize
   };
   const grassTop = position.y + 68;
   const grassLeft = position.x - 10;
+  const [clothesUrl] = useContext(GoatClothesContext);
+  const costumeImage = convertCostume({
+    costumeImgUrl: clothesUrl,
+    isRight: false,
+  });
+
   return (
     <Box>
       <div>
@@ -190,7 +198,16 @@ const Eat: FC<Props> = ({ emotionData, eat, showImage, randomNum, containerSize
                 top: `${position.y}px`,
                 zIndex: 1,
               }}
-            />
+            >
+              <Box //衣装用のbox
+                sx={{
+                  width: '100%',
+                  height: '100%',
+                  backgroundSize: 'cover',
+                  backgroundImage: `url(${costumeImage})`,
+                }}
+              />
+            </Box>
           ) : (
             <Box
               sx={{
diff --git a/src/components/Pulse.tsx b/src/components/Pulse.tsx
index ebfbd0e..1b5fff1 100644
--- a/src/components/Pulse.tsx
+++ b/src/components/Pulse.tsx
@@ -1,10 +1,12 @@
-import { useState, useEffect, FC } from 'react';
+import { useState, useEffect, FC, useContext } from 'react';
 import { Box } from '@mui/material';
 import yagi from '../assets/yagi.png';
 import yagi_ikari from '../assets/yagi_ikari.png';
 import yagi_tanosii from '../assets/yagi_tanosii.png';
 import yagi_kanasimi from '../assets/yagi_kanasimi.png';
 import yagi_yorokobi from '../assets/yagi_yorokobi.png';
+import { convertCostume } from '../util/convertCostume';
+import { GoatClothesContext } from '../provider/ContextProviders';
 
 type Props = {
   typeId: number;
@@ -17,6 +19,8 @@ type Props = {
 
 const Pulse: FC<Props> = ({ typeId, walkEvo, containerSize }) => {
   const [isDisplayLeft, setIsDisplayLeft] = useState(true);
+  const [clothesUrl] = useContext(GoatClothesContext);
+
   const position = {
     x: (containerSize.width / 5) * 3,
     y: (containerSize.height / 12) * 11,
@@ -59,6 +63,11 @@ const Pulse: FC<Props> = ({ typeId, walkEvo, containerSize }) => {
 
   const backgroundImage = getImagePath(typeId);
 
+  const costumeImage = convertCostume({
+    costumeImgUrl: clothesUrl,
+    isRight: false,
+  });
+
   return (
     <div>
       <Box
@@ -71,7 +80,16 @@ const Pulse: FC<Props> = ({ typeId, walkEvo, containerSize }) => {
           left: `${position.x}px`,
           top: `${position.y}px`,
         }}
-      />
+      >
+        <Box //衣装用のbox
+          sx={{
+            width: '100%',
+            height: '100%',
+            backgroundSize: 'cover',
+            backgroundImage: `url(${costumeImage})`,
+          }}
+        />
+      </Box>
     </div>
   );
 };