Skip to content

Commit

Permalink
Merge pull request #76 from nkc-ug/fix/layout
Browse files Browse the repository at this point in the history 
fix:レイアウトの変更
  • Loading branch information
@MinamizonoEno
MinamizonoEno authored Aug 27, 2023
2 parents 88fcad3 + 01dd025 commit f00e1bf
Show file tree
Hide file tree
Showing 13 changed files with 247 additions and 189 deletions.
4 changes: 3 additions & 1 deletion .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
Expand All @@ -10,5 +11,6 @@ module.exports = {
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
'react-hooks/exhaustive-deps': 'off',
},
}
};
8 changes: 7 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { CssBaseline } from '@mui/material';
import { Router } from './routes/Routers';

const App: React.FC = () => {
return <Router />;
return (
<>
<CssBaseline />
<Router />
</>
);
};

export default App;
Binary file added src/assets/mori.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/night.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/noon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/sougen.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/umi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 47 additions & 13 deletions src/components/Eat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,20 @@ type Props = {
eat: boolean;
showImage: boolean;
randomNum: number;
containerSize: {
width: number;
height: number;
};
};
const Eat: FC<Props> = (props) => {
const emoId = props.emotionData.emoId;
const random = props.randomNum;

const position = {
x: (props.containerSize.width / 5) * 3,
y: (props.containerSize.height / 12) * 11,
};
const grassTop = position.y + 68;
const grassLeft = position.x - 10;
return (
<Box>
<div>
Expand All @@ -39,7 +48,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
) : (
Expand All @@ -51,7 +63,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
);
Expand All @@ -66,7 +81,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
) : (
Expand All @@ -78,7 +96,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
);
Expand All @@ -93,7 +114,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
) : (
Expand All @@ -105,7 +129,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
);
Expand All @@ -120,7 +147,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
) : (
Expand All @@ -132,7 +162,10 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
zIndex: 1,
zIndex: 2,
position: 'absolute',
left: `${grassLeft}px`,
top: `${grassTop}px`,
}}
/>
);
Expand All @@ -152,16 +185,17 @@ const Eat: FC<Props> = (props) => {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
marginTop: '-130px',
marginLeft: '25px',
zIndex: -1,
left: `${position.x}px`,
top: `${position.y}px`,
zIndex: 1,
}}
/>
) : (
<Box
sx={{
position: 'absolute',
width: '130px',
left: `${position.x}px`,
top: `${position.y}px`,
height: '130px',
backgroundImage: `url(${yagi_left})`,
backgroundSize: 'cover',
Expand Down
85 changes: 33 additions & 52 deletions src/components/EvolutionWalk.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, FC } from 'react';
import yagi_yorokobi from '../assets/yagi_yorokobi.png';
import yagi_ikari from '../assets/yagi_iakri.png';
import yagi_kanasimi from '../assets/yagi_kanasimi.png';
Expand All @@ -10,64 +10,28 @@ import yagi_tanosii_right from '../assets/yagi_tanosii_right.png';

type Props = {
typeId: number;
containerSize: {
width: number;
height: number;
};
};

const EvolutionWalk: React.FC<Props> = (props) => {
const EvolutionWalk: FC<Props> = ({ typeId, containerSize }) => {
const walkerRef = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState({ x: 65, y: -130 });
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });

const getImagePath = (typeId: number) => {
switch (typeId) {
case 1:
return position.x > containerSize.width / 2 ? yagi_yorokobi_right : yagi_yorokobi;
case 2:
return position.x > containerSize.width / 2 ? yagi_ikari_right : yagi_ikari;
case 3:
return position.x > containerSize.width / 2 ? yagi_kanasimi_right : yagi_kanasimi;
case 4:
return position.x > containerSize.width / 2 ? yagi_tanosii_right : yagi_tanosii;
default:
return null;
}
};

const backgroundImage = getImagePath(props.typeId);

useEffect(() => {
const walkerElement = walkerRef.current;
if (!walkerElement) return;

const containerElement = walkerElement.parentElement;
if (!containerElement) return;

const updateContainerSize = () => {
const containerWidth = containerElement.clientWidth;
const containerHeight = containerElement.clientHeight;
setContainerSize({ width: containerWidth, height: containerHeight });
};

updateContainerSize(); // 初回描画時にコンテナサイズを更新

const resizeObserver = new ResizeObserver(updateContainerSize);
resizeObserver.observe(containerElement);

return () => {
resizeObserver.disconnect();
};
}, []);
const [position, setPosition] = useState({
x: containerSize.width / 3,
y: (containerSize.height / 10) * 5,
});

useEffect(() => {
if (!walkerRef.current) return; // walkerRef.currentがnullの場合、処理を終了

const startX = containerSize.width / 2 - 150; // 開始位置のx座標
const startY = containerSize.height / 2 - 150; // 開始位置のy座標
const endX = containerSize.width / 2 + 150; // 終了位置のx座標
const endY = containerSize.height / 2 + 150; // 終了位置のy座標
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 updatePosition = () => {
const newX = startX + Math.random() * (endX - startX);
const newY = startY + Math.random() * (endY - startY);
const newX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
const newY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;

setPosition({ x: newX, y: newY });
};
Expand All @@ -79,6 +43,23 @@ const EvolutionWalk: React.FC<Props> = (props) => {
};
}, [containerSize]);

const getImagePath = (typeId: number) => {
switch (typeId) {
case 1:
return position.x > containerSize.width / 3 ? yagi_yorokobi_right : yagi_yorokobi;
case 2:
return position.x > containerSize.width / 3 ? yagi_ikari_right : yagi_ikari;
case 3:
return position.x > containerSize.width / 3 ? yagi_kanasimi_right : yagi_kanasimi;
case 4:
return position.x > containerSize.width / 3 ? yagi_tanosii_right : yagi_tanosii;
default:
return null;
}
};

const backgroundImage = getImagePath(typeId);

return (
<div
style={{
Expand Down
56 changes: 20 additions & 36 deletions src/components/NormalWalk.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,29 @@
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, FC } from 'react';
import yagi_left from '../assets/yagi_left.png';
import yagi_right from '../assets/yagi_right.png';

const NormalWalk: React.FC = () => {
const walkerRef = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState({ x: 120, y: -50 });
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
useEffect(() => {
const walkerElement = walkerRef.current;
if (!walkerElement) return;

const containerElement = walkerElement.parentElement;
if (!containerElement) return;

const updateContainerSize = () => {
const containerWidth = containerElement.clientWidth;
const containerHeight = containerElement.clientHeight;
setContainerSize({ width: containerWidth, height: containerHeight });
};

updateContainerSize(); // 初回描画時にコンテナサイズを更新

const resizeObserver = new ResizeObserver(updateContainerSize);
resizeObserver.observe(containerElement);

return () => {
resizeObserver.disconnect();
};
}, []);
type Props = {
containerSize: {
width: number;
height: number;
};
};

const NormalWalk: FC<Props> = ({ containerSize }) => {
const walkerRef = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState({
x: containerSize.width / 3,
y: (containerSize.height / 10) * 5,
});
useEffect(() => {
if (!walkerRef.current) return; // walkerRef.currentがnullの場合、処理を終了

const startX = containerSize.width / 2 - 150; // 開始位置のx座標
const startY = containerSize.height / 2 - 150; // 開始位置のy座標
const endX = containerSize.width / 2 + 100; // 終了位置のx座標
const endY = containerSize.height / 2 + 30; // 終了位置のy座標
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 updatePosition = () => {
const newX = startX + Math.random() * (endX - startX);
const newY = startY + Math.random() * (endY - startY);
const newX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
const newY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;

setPosition({ x: newX, y: newY });
};
Expand All @@ -51,7 +35,7 @@ const NormalWalk: React.FC = () => {
};
}, [containerSize]);

const backgroundImage = position.x > containerSize.width / 2 ? yagi_right : yagi_left;
const backgroundImage = position.x > containerSize.width / 3 ? yagi_right : yagi_left;

return (
<div
Expand Down
Loading

0 comments on commit f00e1bf

Please sign in to comment.