feat:進化中食事中のヤギに衣装を反映

nkc-ug · Aug 31, 2023 · beeb97b · beeb97b
1 parent f8d38e8
commit beeb97b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git 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
@@ -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>
   );
 };