fix:ヤギの移動範囲の設定

nkc-ug · Aug 31, 2023 · 9eb8a28 · 9eb8a28
1 parent b29f999
commit 9eb8a28
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 140 deletions.
diff --git a/src/components/EvolutionWalk.tsx b/src/components/EvolutionWalk.tsx
@@ -31,10 +31,10 @@ const EvolutionWalk: FC<Props> = ({ typeId, containerSize }) => {
   });
 
   useEffect(() => {
-    const minX = -50; // 開始位置のx座標
-    const minY = (containerSize.height / 10) * 4; // 開始位置のy座標
-    const maxX = (containerSize.width / 10) * 5; // 終了位置のx座標
-    const maxY = (containerSize.height / 10) * 6; // 終了位置のy座標
+    const minX = 0; // 開始位置のx座標
+    const minY = 0; // 開始位置のy座標
+    const maxX = containerSize.width - 100; // 終了位置のx座標
+    const maxY = containerSize.height - 100; // 終了位置のy座標
 
     const updatePosition = () => {
       const newX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
@@ -83,36 +83,27 @@ const EvolutionWalk: FC<Props> = ({ typeId, containerSize }) => {
 
   return (
     <div
+      ref={walkerRef}
       style={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
+        position: 'sticky',
+        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', // 移動アニメーションの時間を延長（2秒）
       }}
+      onClick={audioPlay}
     >
-      <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', // 移動アニメーションの時間を延長（2秒）
-          }}
-        >
-          <Box //衣装用のbox
-            sx={{
-              width: '100%',
-              height: '100%',
-              backgroundSize: 'cover',
-              backgroundImage: `url(${costumeImage})`,
-            }}
-          />
-        </div>
-      </Button>
+      <Box //衣装用のbox
+        sx={{
+          width: '100%',
+          height: '100%',
+          backgroundSize: 'cover',
+          backgroundImage: `url(${costumeImage})`,
+        }}
+      />
     </div>
   );
 };

diff --git a/src/components/NormalWalk.tsx b/src/components/NormalWalk.tsx
@@ -19,14 +19,14 @@ const NormalWalk: FC<Props> = ({ containerSize }) => {
 
   const walkerRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState({
-    x: containerSize.width / 3,
+    x: containerSize.width / 2,
     y: (containerSize.height / 10) * 5,
   });
   useEffect(() => {
-    const minX = -50; // 開始位置のx座標
-    const minY = (containerSize.height / 10) * 4; // 開始位置のy座標
-    const maxX = (containerSize.width / 10) * 5; // 終了位置のx座標
-    const maxY = (containerSize.height / 10) * 6; // 終了位置のy座標
+    const minX = 0; // 開始位置のx座標
+    const minY = 0; // 開始位置のy座標
+    const maxX = containerSize.width - 100; // 終了位置のx座標
+    const maxY = containerSize.height - 100; // 終了位置のy座標
 
     const updatePosition = () => {
       const newX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
@@ -61,36 +61,27 @@ const NormalWalk: FC<Props> = ({ containerSize }) => {
 
   return (
     <div
+      ref={walkerRef}
       style={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
+        position: 'sticky',
+        width: '130px',
+        height: '130px',
+        backgroundImage: `url(${goatImage})`,
+        backgroundSize: 'cover',
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        transition: 'left 3s ease-in-out, top 3s ease-in-out', // 移動アニメーションの時間を延長（3秒）
       }}
+      onClick={audioPlay}
     >
-      <Button variant="text" onClick={audioPlay}>
-        <div
-          ref={walkerRef}
-          style={{
-            position: 'absolute',
-            width: '130px',
-            height: '130px',
-            backgroundImage: `url(${goatImage})`,
-            backgroundSize: 'cover',
-            left: `${position.x}px`,
-            top: `${position.y}px`,
-            transition: 'left 3s ease-in-out, top 3s ease-in-out', // 移動アニメーションの時間を延長（3秒）
-          }}
-        >
-          <Box //衣装用のbox
-            sx={{
-              width: '100%',
-              height: '100%',
-              backgroundSize: 'cover',
-              backgroundImage: `url(${costumeImage})`,
-            }}
-          />
-        </div>
-      </Button>
+      <Box //衣装用のbox
+        sx={{
+          width: '100%',
+          height: '100%',
+          backgroundSize: 'cover',
+          backgroundImage: `url(${costumeImage})`,
+        }}
+      />
     </div>
   );
 };

diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
@@ -8,9 +8,10 @@ type Props = {
       height: number;
     }>
   ) => void;
+  children: React.ReactNode;
 };
 
-export const PageContainer: FC<Props> = ({ updatePageSize }) => {
+export const PageContainer: FC<Props> = ({ updatePageSize, children }) => {
   const walkerRef = useRef<HTMLDivElement>(null);
 
   const updateContainerSize = useCallback(() => {
@@ -43,9 +44,8 @@ export const PageContainer: FC<Props> = ({ updatePageSize }) => {
   }, [updateContainerSize]);
 
   return (
-    <Container
-      ref={walkerRef}
-      style={{ position: 'absolute', width: '100%', height: '100%', padding: 0, margin: 0 }}
-    />
+    <Container ref={walkerRef} style={{ width: '100%', height: '100%', padding: 0, margin: 0 }}>
+      {children}
+    </Container>
   );
 };
diff --git a/src/components/costume/CostumeHeader.tsx b/src/components/costume/CostumeHeader.tsx
@@ -1,9 +1,6 @@
 import { Grid, Typography, Button, IconButton } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { useNavigate } from 'react-router-dom';
 
 export const CostumeHeader = () => {
-  const navigate = useNavigate();
   return (
     <Grid
       container

diff --git a/src/components/costume/CostumeNavbar.tsx b/src/components/costume/CostumeNavbar.tsx
@@ -1,7 +1,6 @@
 import { BottomNavigation, BottomNavigationAction, Box } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import ReplyIcon from '@mui/icons-material/Reply';
-import CoronavirusIcon from '@mui/icons-material/Coronavirus';
 
 export const CostumeNavBar = () => {
   const navigate = useNavigate();

diff --git a/src/pages/AppView.tsx b/src/pages/AppView.tsx
@@ -157,7 +157,6 @@ export const AppView: FC = () => {
 
   return (
     <div>
-      <PageContainer updatePageSize={updatePageSize} />
       <Stack direction="row" justifyContent="center">
         <Container
           disableGutters
@@ -196,34 +195,35 @@ export const AppView: FC = () => {
                 handleSubmit={handleSubmit}
                 isDisableTextField={isDisableTextField()}
               />
-              <Container
-                style={{
-                  backgroundImage: `url(${backGround.groundUrl})`,
-                  backgroundSize: '100% 100%',
-                  backgroundPosition: 'bottom',
-                  backgroundRepeat: 'no-repeat',
-                  height: '60vh',
-                  width: '100%',
-                }}
-              >
-                <Grid container>
-                  <Grid item xs={2} />
-                  <Grid item xs={6}>
-                    <Eat
-                      emotionData={emotionData}
-                      eat={eat}
-                      showImage={showImage}
-                      randomNum={random ?? 0}
-                      containerSize={containerSize}
-                    />
-                    {dispWalker && evoPop ? <NormalWalk containerSize={containerSize} /> : null}
-                    {evoWalk ? (
-                      <EvolutionWalk typeId={typeId} containerSize={containerSize} />
-                    ) : null}
+              <PageContainer updatePageSize={updatePageSize}>
+                <Container
+                  style={{
+                    backgroundImage: `url(${backGround.groundUrl})`,
+                    backgroundSize: '100% 100%',
+                    backgroundPosition: 'bottom',
+                    backgroundRepeat: 'no-repeat',
+                    height: '60vh',
+                    width: '100%',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {dispWalker && evoPop ? <NormalWalk containerSize={containerSize} /> : null}
+                  {evoWalk ? <EvolutionWalk typeId={typeId} containerSize={containerSize} /> : null}
+                  <Grid container>
+                    <Grid item xs={2} />
+                    <Grid item xs={6}>
+                      <Eat
+                        emotionData={emotionData}
+                        eat={eat}
+                        showImage={showImage}
+                        randomNum={random ?? 0}
+                        containerSize={containerSize}
+                      />
+                    </Grid>
+                    <Grid item xs={4} />
                   </Grid>
-                  <Grid item xs={4} />
-                </Grid>
-              </Container>
+                </Container>
+              </PageContainer>
             </Box>
           </Container>
         </Container>

diff --git a/src/pages/BattleView.tsx b/src/pages/BattleView.tsx
@@ -152,7 +152,6 @@ export const BattleView: FC = () => {
 
   return (
     <div>
-      <PageContainer updatePageSize={updatePageSize} />
       <Stack direction="row" justifyContent="center">
         <Container
           disableGutters
@@ -198,46 +197,48 @@ export const BattleView: FC = () => {
                 handleResultChange={handleBattleresultModalOpen}
                 isDisableTextField={isDisableTextField()}
               />
-              <Container
-                style={{
-                  backgroundImage: `url(${sougen})`,
-                  backgroundSize: '100% 100%',
-                  backgroundPosition: 'bottom',
-                  backgroundRepeat: 'no-repeat',
-                  height: '60vh',
-                  width: '100%',
-                }}
-              >
-                <Grid container>
-                  <Grid item xs={2}>
-                    <Container
-                      disableGutters
-                      style={{
-                        backgroundImage: `url(${monsterImg})`,
-                        backgroundSize: '100% 100%',
-                        backgroundPosition: 'bottom',
-                        backgroundRepeat: 'no-repeat',
-                        width: '300px',
-                        height: '300px',
-                      }}
-                    />
-                  </Grid>
-                  <Grid item xs={6}>
-                    <Eat
-                      emotionData={emotionData}
-                      eat={eat}
-                      showImage={showImage}
-                      randomNum={random ?? 0}
-                      containerSize={containerSize}
-                    />
-                    {dispWalker && evoPop ? <NormalWalk containerSize={containerSize} /> : null}
-                    {evoWalk ? (
-                      <EvolutionWalk typeId={typeId} containerSize={containerSize} />
-                    ) : null}
+              <PageContainer updatePageSize={updatePageSize}>
+                <Container
+                  style={{
+                    backgroundImage: `url(${sougen})`,
+                    backgroundSize: '100% 100%',
+                    backgroundPosition: 'bottom',
+                    backgroundRepeat: 'no-repeat',
+                    height: '60vh',
+                    width: '100%',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {dispWalker && evoPop ? <NormalWalk containerSize={containerSize} /> : null}
+                  {evoWalk ? <EvolutionWalk typeId={typeId} containerSize={containerSize} /> : null}
+
+                  <Grid container>
+                    <Grid item xs={2}>
+                      <Container
+                        disableGutters
+                        style={{
+                          backgroundImage: `url(${monsterImg})`,
+                          backgroundSize: '100% 100%',
+                          backgroundPosition: 'bottom',
+                          backgroundRepeat: 'no-repeat',
+                          width: '300px',
+                          height: '300px',
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Eat
+                        emotionData={emotionData}
+                        eat={eat}
+                        showImage={showImage}
+                        randomNum={random ?? 0}
+                        containerSize={containerSize}
+                      />
+                    </Grid>
+                    <Grid item xs={4} />
                   </Grid>
-                  <Grid item xs={4} />
-                </Grid>
-              </Container>
+                </Container>
+              </PageContainer>
             </Box>
           </Container>
         </Container>