From af47151703f2252bb27d0cb237e90c5697885314 Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 15:12:38 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Add:=20=E3=82=B9=E3=83=9E=E3=83=9B=E7=89=88?= =?UTF-8?q?=E3=81=AE=E3=81=AEHome=E3=81=AEUI=EF=BC=88=E3=83=A1=E3=83=87?= =?UTF-8?q?=E3=82=A3=E3=82=A2=E3=82=AF=E3=82=A8=E3=83=AA=E3=81=AF=E5=A4=9C?= =?UTF-8?q?=E7=9C=A0=E3=81=8F=E3=81=AA=E3=81=A3=E3=81=A6=E3=81=8B=E3=82=89?= =?UTF-8?q?=E3=81=AB=E5=9B=9E=E3=81=99=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/index.module.css | 55 +++++++++++++++++++++++ src/components/ui/Button/index.tsx | 29 ++++++++++++ src/index.css | 1 + src/pages/home/index.module.css | 26 ++++++++++- src/pages/home/index.tsx | 47 ++++++++++++------- 5 files changed, 142 insertions(+), 16 deletions(-) create mode 100644 src/components/ui/Button/index.module.css create mode 100644 src/components/ui/Button/index.tsx diff --git a/src/components/ui/Button/index.module.css b/src/components/ui/Button/index.module.css new file mode 100644 index 0000000..ef69462 --- /dev/null +++ b/src/components/ui/Button/index.module.css @@ -0,0 +1,55 @@ +.button-style { + border-width: 0; + + &:hover { + &:not([disabled]) { + scale: 1.2; + } + } + + &[data-size="sm"] { + padding: 4px 8px; + font-size: 12px; + border-radius: 4px; + } + + &[data-size="md"] { + padding: 4px 32px; + font-size: 24px; + font-weight: bold; + border-radius: 4px; + } + + &[data-size="lg"] { + padding: 8px 48px; + font-size: 24px; + font-weight: bold; + border-radius: 4px; + white-space: nowrap; + } + + &[data-variant="contained"] { + color: var(--white); + + + &[data-color="red"] { + background-color: var(--red); + } + + &[data-color="black"] { + background-color: var(--black); + } + } + + &[data-variant="outlined"] { + background-color: var(--white); + color: var(--black); + border-width: 2px; + border-style: solid; + + &[data-color="red"] { + border-color: var(--red); + } + + } + } \ No newline at end of file diff --git a/src/components/ui/Button/index.tsx b/src/components/ui/Button/index.tsx new file mode 100644 index 0000000..50254a8 --- /dev/null +++ b/src/components/ui/Button/index.tsx @@ -0,0 +1,29 @@ +import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import styles from "./index.module.css"; + +type ButtonProps = { + children: ReactNode; + variant?: "contained" | "outlined"; + size?: "sm" | "md" | "lg"; + color?: "red" | "black"; +} & ComponentPropsWithoutRef<"button">; + +export const DefaultButton = ({ + children, + variant = "outlined", + size = "md", + color = "red", + ...props +}: ButtonProps) => { + return ( + + ); +}; diff --git a/src/index.css b/src/index.css index 4b86c4b..a29afbb 100644 --- a/src/index.css +++ b/src/index.css @@ -24,6 +24,7 @@ body { display: flex; min-width: 320px; min-height: 100vh; + background-color: #FFF2F2; } h1 { diff --git a/src/pages/home/index.module.css b/src/pages/home/index.module.css index 524d0ac..835b91e 100644 --- a/src/pages/home/index.module.css +++ b/src/pages/home/index.module.css @@ -24,4 +24,28 @@ } .scroll-infinity__item>img { width: 100%; - } \ No newline at end of file + } + +.background-logo{ + opacity: 0.8; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + justify-content: center; + align-items: center; +} + +li{ + font-size: 20px; + padding: 0 24px; +} + +.go_game{ + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + justify-content: center; + align-items: center; +} diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 3291805..39e89ce 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,22 +1,39 @@ +import { DefaultButton } from "../../components/ui/Button"; import styles from "./index.module.css"; function Home() { return ( -
-
-
    -
  • - VIRTUAL_NATSUMATSURI -
    • -
  • - VIRTUAL_NATSUMATSURI -
    • -
  • - VIRTUAL_NATSUMATSURI -
    • -
+ +
+
+
+
    +
  • + VIRTUAL_NATSUMATSURI +
    • +
  • + VIRTUAL_NATSUMATSURI +
    • +
  • + VIRTUAL_NATSUMATSURI +
    • +
+
+
+
+ 背景にばーちゃるなつまつりのロゴ +
+
+ + 射的へ向かう +
); From 19f93e241172b1f283183f9abd411f429b218b73 Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 15:15:33 +0900 Subject: [PATCH 2/6] fix: blank_index.tsx --- src/pages/home/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 39e89ce..653efde 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -3,7 +3,6 @@ import styles from "./index.module.css"; function Home() { return ( -
From 29a70e9ba6b8474e5514af1dd078998b35fc5019 Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 15:23:15 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Add=EF=BC=9Ahome=E3=81=AEPC=E3=81=A8?= =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=AE=E3=83=AC=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0=E3=82=8F=E3=81=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/index.module.css | 10 +++++++++- src/pages/home/index.tsx | 32 ++++++++++++++++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/pages/home/index.module.css b/src/pages/home/index.module.css index 835b91e..07b12d0 100644 --- a/src/pages/home/index.module.css +++ b/src/pages/home/index.module.css @@ -41,7 +41,7 @@ li{ padding: 0 24px; } -.go_game{ +.go-game{ position: absolute; top: 40%; left: 50%; @@ -49,3 +49,11 @@ li{ justify-content: center; align-items: center; } + +@media (min-width: 600px) { + .go-game-pc { + display: flex; + justify-content: center; + align-items: center; + } +} \ No newline at end of file diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 653efde..55ed9ba 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,7 +1,33 @@ +import { useEffect, useState } from "react"; import { DefaultButton } from "../../components/ui/Button"; import styles from "./index.module.css"; function Home() { + const [isSmallScreen, setIsSmallScreen] = useState( + window.matchMedia("(max-width: 600px)").matches, + ); + + useEffect(() => { + const mediaQuery = window.matchMedia("(max-width: 600px)"); + + const handleChange = (event: { + matches: boolean | ((prevState: boolean) => boolean); + }) => { + setIsSmallScreen(event.matches); + }; + + mediaQuery.addEventListener("change", handleChange); + + // Cleanup event listener on component unmount + return () => { + mediaQuery.removeEventListener("change", handleChange); + }; + }, []); + + const handleClick = () => { + window.location.href = isSmallScreen ? "/shooter" : "/gallery"; + }; + return (
@@ -29,8 +55,10 @@ function Home() { height="350" />
-
- +
+ 射的へ向かう
From 3331dc7dd8b84b67e0c42ef2477072edcc8a06a6 Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 15:27:55 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20root=E3=82=92home=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1fa1b95..5e26768 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,8 +4,7 @@ const AppRoutes = () => { return ( <> - - } /> + } /> ); From 249cef2ba2203c8d90668d3794cac82154095f5c Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 15:52:43 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20home=E3=81=AEdevice.ts=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=81=A8=E3=81=9D=E3=82=8C=E3=81=AB=E4=BC=B4?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/index.module.css | 2 +- src/pages/home/index.tsx | 36 ++++++++++++++------------------- src/utils/device.ts | 3 +++ 3 files changed, 19 insertions(+), 22 deletions(-) create mode 100644 src/utils/device.ts diff --git a/src/pages/home/index.module.css b/src/pages/home/index.module.css index 07b12d0..0e00e6c 100644 --- a/src/pages/home/index.module.css +++ b/src/pages/home/index.module.css @@ -50,7 +50,7 @@ li{ align-items: center; } -@media (min-width: 600px) { +@media (min-width: 1024px) { .go-game-pc { display: flex; justify-content: center; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 55ed9ba..d87de2b 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,32 +1,28 @@ import { useEffect, useState } from "react"; import { DefaultButton } from "../../components/ui/Button"; import styles from "./index.module.css"; +import { device } from "../../utils/device"; function Home() { - const [isSmallScreen, setIsSmallScreen] = useState( - window.matchMedia("(max-width: 600px)").matches, - ); + const [isPcScreen, setIsPcScreen] = useState(window.matchMedia(device.pc).matches); useEffect(() => { - const mediaQuery = window.matchMedia("(max-width: 600px)"); - - const handleChange = (event: { - matches: boolean | ((prevState: boolean) => boolean); - }) => { - setIsSmallScreen(event.matches); - }; + const mediaQuery = window.matchMedia(device.pc); - mediaQuery.addEventListener("change", handleChange); + const handleChange = (event: { matches: boolean | ((prevState: boolean) => boolean); }) => { + setIsPcScreen(event.matches); + }; - // Cleanup event listener on component unmount - return () => { - mediaQuery.removeEventListener("change", handleChange); - }; - }, []); + mediaQuery.addEventListener('change', handleChange); + return () => { + mediaQuery.removeEventListener('change', handleChange); + }; + }, []); const handleClick = () => { - window.location.href = isSmallScreen ? "/shooter" : "/gallery"; - }; + window.location.href = isPcScreen ? '/gallery' : '/shooter'; + }; + return (
@@ -55,9 +51,7 @@ function Home() { height="350" />
-
+
射的へ向かう diff --git a/src/utils/device.ts b/src/utils/device.ts new file mode 100644 index 0000000..ff961a2 --- /dev/null +++ b/src/utils/device.ts @@ -0,0 +1,3 @@ +export const device = { + pc: '(min-width: 1024px)', +}; \ No newline at end of file From 15f6c4b423820a8f790341f800a60476c7450b13 Mon Sep 17 00:00:00 2001 From: Sea10wood Date: Sat, 10 Aug 2024 15:55:55 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E4=BD=99=E8=A8=88=E3=81=AA=E3=81=8F?= =?UTF-8?q?blank=E3=81=AE=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/index.tsx | 35 ++++++++++++++++++++--------------- src/utils/device.ts | 4 ++-- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index d87de2b..e7c7d41 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,28 +1,31 @@ import { useEffect, useState } from "react"; import { DefaultButton } from "../../components/ui/Button"; -import styles from "./index.module.css"; import { device } from "../../utils/device"; +import styles from "./index.module.css"; function Home() { - const [isPcScreen, setIsPcScreen] = useState(window.matchMedia(device.pc).matches); + const [isPcScreen, setIsPcScreen] = useState( + window.matchMedia(device.pc).matches, + ); useEffect(() => { - const mediaQuery = window.matchMedia(device.pc); + const mediaQuery = window.matchMedia(device.pc); - const handleChange = (event: { matches: boolean | ((prevState: boolean) => boolean); }) => { - setIsPcScreen(event.matches); - }; + const handleChange = (event: { + matches: boolean | ((prevState: boolean) => boolean); + }) => { + setIsPcScreen(event.matches); + }; - mediaQuery.addEventListener('change', handleChange); - return () => { - mediaQuery.removeEventListener('change', handleChange); - }; - }, []); + mediaQuery.addEventListener("change", handleChange); + return () => { + mediaQuery.removeEventListener("change", handleChange); + }; + }, []); const handleClick = () => { - window.location.href = isPcScreen ? '/gallery' : '/shooter'; - }; - + window.location.href = isPcScreen ? "/gallery" : "/shooter"; + }; return (
@@ -51,7 +54,9 @@ function Home() { height="350" />
-
+
射的へ向かう diff --git a/src/utils/device.ts b/src/utils/device.ts index ff961a2..23fb32d 100644 --- a/src/utils/device.ts +++ b/src/utils/device.ts @@ -1,3 +1,3 @@ export const device = { - pc: '(min-width: 1024px)', -}; \ No newline at end of file + pc: "(min-width: 1024px)", +};