Merge pull request #26 from claustra01/add_sound

Add sound
claustra01 · Aug 10, 2024 · 747bb9c · 747bb9c
2 parents f80e349 + 6bdf3ac
commit 747bb9c
Show file tree

Hide file tree

Showing 9 changed files with 391 additions and 62 deletions.
diff --git a/public/2D_material/red_lite.webp b/public/2D_material/red_lite.webp
diff --git a/src/components/responsive/homePC/index.module.css b/src/components/responsive/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/components/responsive/homePC/index.tsx b/src/components/responsive/homePC/index.tsx
@@ -0,0 +1,91 @@
+import { DefaultButton } from "../../ui/Button";
+import TextButton from "../../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;
diff --git a/src/components/responsive/homeSP/index.module.css b/src/components/responsive/homeSP/index.module.css
@@ -0,0 +1,64 @@
+@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 80s infinite linear 0.5s both;
+}
+
+.scroll-infinity__item {
+    width: 100vw;
+}
+
+.scroll-infinity__item > img {
+    width: 100%;
+}
+
+.background-logo {
+    opacity: 0.2;
+    position: absolute;
+    top: 10%; 
+    left: 50%;
+    transform: translateX(-50%);
+    justify-content: center;
+    align-items: center;
+}
+
+li {
+    font-size: 24px; 
+    padding: 0 24px;
+}
+
+.go-game-sp {
+    position: absolute;
+    top: 40%; 
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+    width: 80%; 
+    text-align: center; 
+}
+
+.go-game-sp button {
+    width: 100%;
+    padding: 12px 0;
+    font-size: 18px; 
+}
diff --git a/src/components/responsive/homeSP/index.tsx b/src/components/responsive/homeSP/index.tsx
@@ -0,0 +1,58 @@
+import { DefaultButton } from "../../ui/Button";
+import styles from "./index.module.css";
+
+function HomeSP() {
+	const handleClick = () => {
+		const audio = new Audio("/sound/wadaiko.mp3");
+		audio
+			.play()
+			.then(() => {
+				setTimeout(() => {
+					window.location.href = "/shooter";
+				}, 500);
+			})
+			.catch((error) => {
+				console.error("オーディオの音が出なかった", error);
+				window.location.href = "/shooter";
+			});
+	};
+
+	return (
+		<div>
+			<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="380"
+						height="380"
+					/>
+				</div>
+				<div className={styles["go-game-sp"]}>
+					<DefaultButton color="red" size="lg" onClick={handleClick}>
+						射的へ向かう
+					</DefaultButton>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default HomeSP;
diff --git a/src/components/ui/Button/index.module.css b/src/components/ui/Button/index.module.css
@@ -1,12 +1,6 @@
 .button-style {
     border-width: 0;
 
-    &:hover {
-      &:not([disabled]) {
-        scale: 1.2;
-      }
-    }
-
     &[data-size="sm"] {
       padding: 4px 8px;
       font-size: 12px;

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;
+}