Merge pull request #82 from nkc-ug/future/efect

鳴き声追加
nkc-ug · Aug 28, 2023 · 32b9ada · 32b9ada
2 parents e825aee + 126fbe7
commit 32b9ada
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/src/Audio/やぎの鳴き声.mp3 b/src/Audio/やぎの鳴き声.mp3
diff --git a/src/components/EvolutionWalk.tsx b/src/components/EvolutionWalk.tsx
@@ -7,6 +7,7 @@ import yagi_yorokobi_right from '../assets/yagi_yorokobi_right.png';
 import yagi_ikari_right from '../assets/yagi_iakri_right.png';
 import yagi_kanasimi_right from '../assets/yagi_kanasimi_right.png';
 import yagi_tanosii_right from '../assets/yagi_tanosii_right.png';
+import yagi_efect from '../Audio/やぎの鳴き声.mp3';
 
 type Props = {
   typeId: number;
@@ -43,6 +44,15 @@ const EvolutionWalk: FC<Props> = ({ typeId, containerSize }) => {
     };
   }, [containerSize]);
 
+  const [play, isPlaying] = useState(true);
+  const yagiAudio = () => {
+    isPlaying(!play);
+    new Audio(yagi_efect).play();
+  };
+  const audioPlay = () => {
+    yagiAudio();
+  };
+
   const getImagePath = (typeId: number) => {
     switch (typeId) {
       case 1:
@@ -59,7 +69,7 @@ const EvolutionWalk: FC<Props> = ({ typeId, containerSize }) => {
   };
 
   const backgroundImage = getImagePath(typeId);
-
+  
   return (
     <div
       style={{
@@ -80,6 +90,7 @@ const EvolutionWalk: FC<Props> = ({ typeId, containerSize }) => {
           top: `${position.y}px`,
           transition: 'left 3s ease-in-out, top 3s ease-in-out', // 移動アニメーションの時間を延長（2秒）
         }}
+        onClick={audioPlay}
       />
     </div>
   );

diff --git a/src/components/NormalWalk.tsx b/src/components/NormalWalk.tsx
@@ -1,6 +1,8 @@
 import { useRef, useEffect, useState, FC } from 'react';
 import yagi_left from '../assets/yagi_left.png';
 import yagi_right from '../assets/yagi_right.png';
+import yagi_efect from '../Audio/やぎの鳴き声.mp3';
+import { Button } from '@mui/material';
 
 type Props = {
   containerSize: {
@@ -37,6 +39,15 @@ const NormalWalk: FC<Props> = ({ containerSize }) => {
 
   const backgroundImage = position.x > containerSize.width / 3 ? yagi_right : yagi_left;
 
+  const [play, isPlaying] = useState(true);
+  const yagiAudio = () => {
+    isPlaying(!play);
+    new Audio(yagi_efect).play();
+  };
+  const audioPlay = () => {
+    yagiAudio();
+  };
+
   return (
     <div
       style={{
@@ -45,19 +56,21 @@ const NormalWalk: FC<Props> = ({ containerSize }) => {
         height: '100%',
       }}
     >
-      <div
-        ref={walkerRef}
-        style={{
-          position: 'absolute',
-          width: '130px',
-          height: '130px',
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundSize: 'cover',
-          left: `${position.x}px`,
-          top: `${position.y}px`,
-          transition: 'left 3s ease-in-out, top 3s ease-in-out', // 移動アニメーションの時間を延長（3秒）
-        }}
-      />
+      <Button variant="text" onClick={audioPlay}>
+        <div
+          ref={walkerRef}
+          style={{
+            position: 'absolute',
+            width: '130px',
+            height: '130px',
+            backgroundImage: `url(${backgroundImage})`,
+            backgroundSize: 'cover',
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            transition: 'left 3s ease-in-out, top 3s ease-in-out', // 移動アニメーションの時間を延長（3秒）
+          }}
+        />
+      </Button>
     </div>
   );
 };