fix:homeからHomeSPとHomePCヘの切り分け

claustra01 · Aug 10, 2024 · 5d6b8f8 · 5d6b8f8
1 parent f80e349
commit 5d6b8f8
Show file tree

Hide file tree

Showing 8 changed files with 391 additions and 56 deletions.
diff --git a/public/2D_material/red_lite.webp b/public/2D_material/red_lite.webp
diff --git a/src/components/ui/TextButton/index.module.css b/src/components/ui/TextButton/index.module.css
@@ -0,0 +1,26 @@
+.textButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
+    text-decoration: none;
+    outline: none; 
+    font-family: 'Yuji Syuku', serif;
+}
+
+.textButton.sm {
+    font-size: 12px;
+}
+
+.textButton.md {
+    font-size: 16px;
+}
+
+.textButton.lg {
+    font-size: 20px;
+}
+
+.underline {
+    text-decoration: underline;
+}
diff --git a/src/components/ui/TextButton/index.tsx b/src/components/ui/TextButton/index.tsx
@@ -0,0 +1,35 @@
+import styles from "./index.module.css";
+
+type TextButtonProps = {
+	text: string;
+	onClick?: () => void;
+	color?: string;
+	size?: "sm" | "md" | "lg";
+	disabled?: boolean;
+	type?: "button" | "submit" | "reset";
+	underline?: boolean;
+};
+
+const TextButton: React.FC<TextButtonProps> = ({
+	text,
+	onClick,
+	color = "black",
+	size = "md",
+	disabled = false,
+	type = "button",
+	underline = false,
+}) => {
+	return (
+		<button
+			className={`${styles.textButton} ${styles[size]} ${underline ? styles.underline : ""}`}
+			onClick={onClick}
+			style={{ color }}
+			disabled={disabled}
+			type={type}
+		>
+			{text}
+		</button>
+	);
+};
+
+export default TextButton;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { DefaultButton } from "../../components/ui/Button";
 import { device } from "../../utils/device";
-import styles from "./index.module.css";
+import HomePC from "../homePC/index.tsx";
+import HomeSP from "../homeSP/index.tsx";
 
 function Home() {
 	const [isPcScreen, setIsPcScreen] = useState(
@@ -11,9 +11,7 @@ function Home() {
 	useEffect(() => {
 		const mediaQuery = window.matchMedia(device.pc);
 
-		const handleChange = (event: {
-			matches: boolean | ((prevState: boolean) => boolean);
-		}) => {
+		const handleChange = (event: { matches: boolean }) => {
 			setIsPcScreen(event.matches);
 		};
 
@@ -23,57 +21,7 @@ function Home() {
 		};
 	}, []);
 
-	const handleClick = () => {
-		const audio = new Audio("/sound/wadaiko.mp3");
-		audio
-			.play()
-			.then(() => {
-				setTimeout(() => {
-					window.location.href = isPcScreen ? "/yatai" : "/shooter";
-				}, 500);
-			})
-			.catch((error) => {
-				console.error("オーディオの音が出なかった", error);
-				window.location.href = isPcScreen ? "/yatai" : "/shooter";
-			});
-	};
-
-	return (
-		<div>
-			<div className={styles["scroll-infinity"]}>
-				<div className={styles["scroll-infinity__wrap"]}>
-					<ul
-						className={`${styles["scroll-infinity__list"]} ${styles["scroll-infinity__list--left"]}`}
-					>
-						<li className={styles["scroll-infinity__item"]}>
-							VIRTUAL_NATSUMATSURI
-						</li>
-						<li className={styles["scroll-infinity__item"]}>
-							VIRTUAL_NATSUMATSURI
-						</li>
-						<li className={styles["scroll-infinity__item"]}>
-							VIRTUAL_NATSUMATSURI
-						</li>
-					</ul>
-				</div>
-			</div>
-			<div className={styles["background-logo"]}>
-				<img
-					src="/logo.webp"
-					alt="背景にばーちゃるなつまつりのロゴ"
-					width="350"
-					height="350"
-				/>
-			</div>
-			<div
-				className={`${styles["go-game"]} ${isPcScreen ? styles["go-game-pc"] : ""}`}
-			>
-				<DefaultButton color="red" size="lg" onClick={handleClick}>
-					射的へ向かう
-				</DefaultButton>
-			</div>
-		</div>
-	);
+	return isPcScreen ? <HomePC /> : <HomeSP />;
 }
 
 export default Home;
diff --git a/src/pages/homePC/index.module.css b/src/pages/homePC/index.module.css
@@ -0,0 +1,113 @@
+@keyframes infinity-scroll-left {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+.scroll-infinity__wrap {
+    display: flex;
+    overflow: hidden;
+    width: 100vw;
+}
+
+.scroll-infinity__list {
+    display: flex;
+    list-style: none;
+    padding: 0;
+}
+
+.scroll-infinity__list--left {
+    animation: infinity-scroll-left 60s infinite linear 0.5s both;
+}
+
+.scroll-infinity__item {
+    width: 33.33vw; 
+}
+
+.scroll-infinity__item > img {
+    width: 100%;
+}
+
+.background-logo {
+    opacity: 0.2;
+    position: absolute;
+    top: 50%;
+    left: 24%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+    max-width: 48%; 
+}
+
+li {
+    font-size: 40px; 
+    padding: 0 32px;
+}
+
+.go-game-pc {
+    position: absolute;
+    top: 80%;
+    left: 24%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+    width: 40%; 
+    text-align: center;
+    z-index: 10;
+}
+
+.go-game-pc button {
+    width: 100%;
+    padding: 16px 0;
+    font-size: 24px; 
+}
+
+.red-lite{
+    opacity: 0.8;
+    position: absolute;
+    top: 2%;
+    right: 0;
+}
+
+.pistol-img{
+    opacity: 0.2;
+    position: absolute;
+    top: 25%;
+    right: 8%;
+    transform: scale(-1, 1);
+}
+
+.overlay-square {
+    position: absolute;
+    top: 20%;
+    right: 120px;
+    width: 520px; 
+    height: 532px; 
+    background-color: rgba(255, 255, 255, 0.8); 
+    z-index: 1; 
+}
+
+.id-room{
+    position: absolute;
+    top: 20%;
+    right: 300px;
+    font-size: 32px;
+    z-index: 10; 
+}
+
+.qr-scan{
+    position: absolute;
+    top: 60%;
+    right: -10px;
+    z-index: 10; 
+}
+
+.link-copy{
+    position: absolute;
+    top: 80%;
+    right: 300px;
+    z-index: 10;
+}
diff --git a/src/pages/homePC/index.tsx b/src/pages/homePC/index.tsx
@@ -0,0 +1,91 @@
+import { DefaultButton } from "../../components/ui/Button";
+import TextButton from "../../components/ui/TextButton";
+import styles from "./index.module.css";
+
+function HomePC() {
+	const handleClick = () => {
+		const audio = new Audio("/sound/wadaiko.mp3");
+		audio
+			.play()
+			.then(() => {
+				setTimeout(() => {
+					window.location.href = "/yatai";
+				}, 500);
+			})
+			.catch((error) => {
+				console.error("オーディオの音が出なかった", error);
+				window.location.href = "/yatai";
+			});
+	};
+
+	return (
+		<div className={styles.container}>
+			<div className={styles["scroll-infinity"]}>
+				<div className={styles["scroll-infinity__wrap"]}>
+					<ul
+						className={`${styles["scroll-infinity__list"]} ${styles["scroll-infinity__list--left"]}`}
+					>
+						<li className={styles["scroll-infinity__item"]}>
+							VIRTUAL_NATSUMATSURI
+						</li>
+						<li className={styles["scroll-infinity__item"]}>
+							VIRTUAL_NATSUMATSURI
+						</li>
+						<li className={styles["scroll-infinity__item"]}>
+							VIRTUAL_NATSUMATSURI
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div className={styles["background-logo"]}>
+				<img
+					src="/logo.webp"
+					alt="背景にばーちゃるなつまつりのロゴ"
+					width="680"
+					height="680"
+				/>
+			</div>
+			<div className={styles["go-game-pc"]}>
+				<DefaultButton color="red" size="lg" onClick={handleClick}>
+					射的へ向かう
+				</DefaultButton>
+			</div>
+			<div className={styles["overlay-square"]} />
+			<div className={styles["id-room"]}>
+				<p>屋台のID</p>
+			</div>
+			<div className={styles["red-lite"]}>
+				<img
+					src="/2D_material/red_lite.webp"
+					alt="赤提灯"
+					width="500"
+					height="500"
+				/>
+			</div>
+			<div className={styles["pistol-img"]}>
+				<img
+					src="/2D_material/pistol.webp"
+					alt="ピストル"
+					width="540"
+					height="540"
+				/>
+			</div>
+			<div className={styles["qr-scan"]}>
+				<img
+					src="/2D_material/scan.webp"
+					alt="qr-scan"
+					width="200"
+					height="200"
+				/>
+			</div>
+			<div className={styles["link-copy"]}>
+				<TextButton
+					text="共有リンクをコピー"
+					onClick={handleClick}
+					underline={true}
+				/>
+			</div>
+		</div>
+	);
+}
+export default HomePC;