From 1ca184078407dd8fc57cb2cd973328516b89eac0 Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 21:57:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Add:=20=E3=82=B9=E3=83=9E=E3=83=9B=E3=82=92?= =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=AB=E5=90=91=E3=81=8B=E3=81=A3=E3=81=A6?= =?UTF-8?q?=E5=9E=82=E7=9B=B4=E3=81=AB=E6=9C=BA=E3=81=AE=E4=B8=8A=E3=81=AB?= =?UTF-8?q?=E7=BD=AE=E3=81=84=E3=81=A6=E3=81=AD=E3=83=A2=E3=83=BC=E3=83=80?= =?UTF-8?q?=E3=83=AB=E3=81=AE=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/2D_material/modal.webp | Bin 0 -> 3260 bytes src/components/ui/Modal/index.module.css | 21 ++++++ src/components/ui/Modal/index.tsx | 81 +++++++++++++++++++++++ src/pages/shooter/index.module.css | 39 ++++++++++- src/pages/shooter/index.tsx | 48 ++++++++++++-- 5 files changed, 182 insertions(+), 7 deletions(-) create mode 100644 public/2D_material/modal.webp create mode 100644 src/components/ui/Modal/index.module.css create mode 100644 src/components/ui/Modal/index.tsx diff --git a/public/2D_material/modal.webp b/public/2D_material/modal.webp new file mode 100644 index 0000000000000000000000000000000000000000..6eabff74fcbcc62728cefa70969742d185751af3 GIT binary patch literal 3260 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 vN7@->EFD7(#(?BLMstW~s?a literal 0 HcmV?d00001 diff --git a/src/components/ui/Modal/index.module.css b/src/components/ui/Modal/index.module.css new file mode 100644 index 0000000..15e77bc --- /dev/null +++ b/src/components/ui/Modal/index.module.css @@ -0,0 +1,21 @@ +.modal-background{ + background-color:#08000080; + width:100%; + height:100%; + position:fixed; + left:0; + top:0; + z-index:0; + +} + +.modal-content-wrapper{ + position:absolute; + left:50%; + top:30%; + translate: -50% -50%; + z-index:10; + border: none; + border-radius: 8px; + overflow: hidden; +} \ No newline at end of file diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx new file mode 100644 index 0000000..f492711 --- /dev/null +++ b/src/components/ui/Modal/index.tsx @@ -0,0 +1,81 @@ +import { useCallback, useEffect, useRef } from "react"; +import type { FC, ReactNode } from "react"; +import { createPortal } from "react-dom"; +import styles from "./index.module.css"; + +type Props = { + open: boolean; + children: ReactNode; + onClose?: () => void; + onOpen?: () => void; +}; + +export const Modal: FC = ({ + children, + open, + onClose = () => {}, + onOpen = () => {}, +}) => { + const dialogRef = useRef(null); + + const handleShowModal = useCallback(() => { + onOpen(); + dialogRef.current?.showModal(); + }, [onOpen]); + + const handleCloseModal = useCallback(() => { + onClose(); + dialogRef.current?.close(); + }, [onClose]); + + useEffect(() => { + if (open) { + handleShowModal(); + } else { + handleCloseModal(); + } + }, [open, handleShowModal, handleCloseModal]); + + const handleKeyUp = useCallback( + (event: KeyboardEvent) => { + if (event.key === "Escape") { + handleCloseModal(); + } + }, + [handleCloseModal], + ); + + useEffect(() => { + if (open) { + document.addEventListener("keyup", handleKeyUp); + } else { + document.removeEventListener("keyup", handleKeyUp); + } + return () => { + document.removeEventListener("keyup", handleKeyUp); + }; + }, [open, handleKeyUp]); + + return createPortal( + <> + e.key === "Enter" && handleShowModal()} + tabIndex={-1} + > + {children} + + {open && ( +