From e02752a4d8398b94558ccc835d8d53205acbd27c Mon Sep 17 00:00:00 2001 From: K-Kizuku Date: Mon, 19 Aug 2024 05:45:48 +0900 Subject: [PATCH] fix: lint --- src/pages/shooter/index.tsx | 306 ++++++++++++++++++------------------ 1 file changed, 153 insertions(+), 153 deletions(-) diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx index 691a997..7464ab6 100644 --- a/src/pages/shooter/index.tsx +++ b/src/pages/shooter/index.tsx @@ -1,8 +1,8 @@ import { - type KeyboardEventHandler, - useCallback, - useEffect, - useState, + type KeyboardEventHandler, + useCallback, + useEffect, + useState, } from "react"; import { useNavigate } from "react-router-dom"; import { DefaultButton } from "../../components/ui/Button"; @@ -18,170 +18,170 @@ import { MessageType } from "../../type/shooting"; import styles from "./index.module.css"; const Shooter = () => { - const [isOpen, setIsOpen] = useState(true); - const { sendData } = useSocketSender(); - const { onMessage } = useSocketReceiver(); - const navigate = useNavigate(); - const addOneScore = useScoreStore((state) => state.addOneScore); + const [isOpen, setIsOpen] = useState(true); + const { sendData } = useSocketSender(); + const { onMessage } = useSocketReceiver(); + const navigate = useNavigate(); + const addOneScore = useScoreStore((state) => state.addOneScore); - const initialImages = [ - "/2D_material/cork.webp", - "/2D_material/cork.webp", - "/2D_material/cork.webp", - ]; - const [images, setImages] = useState(initialImages); - const uuid = useUUIDStore((state) => state.uuid); - const [initialOrientation, setInitialOrientation] = useState({ - alpha: 0, - beta: 0, - gamma: 0, - }); + const initialImages = [ + "/2D_material/cork.webp", + "/2D_material/cork.webp", + "/2D_material/cork.webp", + ]; + const [images, setImages] = useState(initialImages); + const uuid = useUUIDStore((state) => state.uuid); + const [initialOrientation, setInitialOrientation] = useState({ + alpha: 0, + beta: 0, + gamma: 0, + }); - const send = useCallback( - (event: DeviceOrientationEvent, msg_type: message_type) => { - if (!event.alpha || !event.beta || !event.gamma) { - return; - } - sendData(msg_type, uuid, { - alpha: initialOrientation - ? (event.gamma - initialOrientation.gamma) * 2 - : event.gamma, - beta: initialOrientation - ? event.beta - initialOrientation.beta - : event.beta, - }); - }, - [sendData, uuid, initialOrientation] - ); - useEffect(() => { - const intervalId = setInterval(() => { - window.addEventListener( - "deviceorientation", - (event) => send(event, message_type.status), - { once: true } - ); - }, 100); + const send = useCallback( + (event: DeviceOrientationEvent, msg_type: message_type) => { + if (!event.alpha || !event.beta || !event.gamma) { + return; + } + sendData(msg_type, uuid, { + alpha: initialOrientation + ? (event.gamma - initialOrientation.gamma) * 2 + : event.gamma, + beta: initialOrientation + ? event.beta - initialOrientation.beta + : event.beta, + }); + }, + [sendData, uuid, initialOrientation], + ); + useEffect(() => { + const intervalId = setInterval(() => { + window.addEventListener( + "deviceorientation", + (event) => send(event, message_type.status), + { once: true }, + ); + }, 100); - return () => { - if (intervalId !== null) { - clearInterval(intervalId); - } - }; - }, [send]); + return () => { + if (intervalId !== null) { + clearInterval(intervalId); + } + }; + }, [send]); - // biome-ignore lint/correctness/useExhaustiveDependencies: 初期化処理だけでいいため依存配列は空配列にしている - useEffect(() => { - onMessage((data) => { - if (data.message_type === MessageType.Hit && data.id === uuid) { - addOneScore(); - } - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + // biome-ignore lint/correctness/useExhaustiveDependencies: 初期化処理だけでいいため依存配列は空配列にしている + useEffect(() => { + onMessage((data) => { + if (data.message_type === MessageType.Hit && data.id === uuid) { + addOneScore(); + } + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); - useEffect(() => { - if (images.length === 0) { - navigate("/result"); - } - }, [images, navigate]); + useEffect(() => { + if (images.length === 0) { + navigate("/result"); + } + }, [images, navigate]); - const handleClick = async () => { - window.addEventListener( - "deviceorientation", - (event) => send(event, message_type.action), - { once: true } - ); - const audio = new Audio("/sound/cork_sound.mp3"); - audio - .play() - .then(() => {}) - .catch((error) => { - console.error("オーディオの音が出なかった", error); - }); - setImages((prevImages) => prevImages.slice(1)); - }; + const handleClick = async () => { + window.addEventListener( + "deviceorientation", + (event) => send(event, message_type.action), + { once: true }, + ); + const audio = new Audio("/sound/cork_sound.mp3"); + audio + .play() + .then(() => {}) + .catch((error) => { + console.error("オーディオの音が出なかった", error); + }); + setImages((prevImages) => prevImages.slice(1)); + }; - const handleKeyUp: KeyboardEventHandler = (event) => { - if (event.key === "Enter" || event.key === " ") { - // handleClick(); - } - }; + const handleKeyUp: KeyboardEventHandler = (event) => { + if (event.key === "Enter" || event.key === " ") { + // handleClick(); + } + }; - return ( -
- setIsOpen(false)}> - - -
- -
-
- {images.length > 0 ? ( - images.map((src, i) => ( - // biome-ignore lint/suspicious/noArrayIndexKey: - コルクの残量を表示しています - )) - ) : ( -

コルクがなくなりました!

- )} -
-
- ); + return ( +
+ setIsOpen(false)}> + + +
+ +
+
+ {images.length > 0 ? ( + images.map((src, i) => ( + // biome-ignore lint/suspicious/noArrayIndexKey: + コルクの残量を表示しています + )) + ) : ( +

コルクがなくなりました!

+ )} +
+
+ ); }; type ModalContentProps = { - setIsOpen: (isOpen: boolean) => void; - setInitialOrientation: (orientation: Orientation) => void; + setIsOpen: (isOpen: boolean) => void; + setInitialOrientation: (orientation: Orientation) => void; }; const ModalContent: React.FC = ({ - setIsOpen, - setInitialOrientation, + setIsOpen, + setInitialOrientation, }) => { - const handleClick = () => { - window.addEventListener( - "deviceorientation", - (event) => { - setInitialOrientation({ - alpha: event.alpha || 0, - beta: event.beta || 0, - gamma: event.gamma || 0, - }); - }, - { once: true } - ); - setIsOpen(false); - }; - return ( -
- スマホを画面に向かって垂直におく図 -
-

- スマホを画面に向かって -
- 垂直に机の上に置いてね -

-
-
- - 置いたよ！ - -
-
- ); + const handleClick = () => { + window.addEventListener( + "deviceorientation", + (event) => { + setInitialOrientation({ + alpha: event.alpha || 0, + beta: event.beta || 0, + gamma: event.gamma || 0, + }); + }, + { once: true }, + ); + setIsOpen(false); + }; + return ( +
+ スマホを画面に向かって垂直におく図 +
+

+ スマホを画面に向かって +
+ 垂直に机の上に置いてね +

+
+
+ + 置いたよ！ + +
+
+ ); }; export default Shooter;