fix: 色々修正 (#61)

tuatmcc · Nov 7, 2024 · 5830e75 · 5830e75
2 parents 6b9e50a + 110bf08
commit 5830e75
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/app/components/BottomNav.tsx b/app/components/BottomNav.tsx
@@ -17,10 +17,10 @@ const LINKS = [
 		href: "/play",
 		label: "遊ぶ",
 	},
-	{
-		href: "/guide",
-		label: "遊び方",
-	},
+	// {
+	// 	href: "/guide",
+	// 	label: "遊び方",
+	// },
 ];
 
 export interface BottomNavProps {
@@ -87,7 +87,7 @@ function Selected({ length, index }: SelectedProps): ReactNode {
 		<div className="absolute inset-x-4 inset-y-0">
 			<div
 				className={cn(
-					"-top-0.5 md:-top-1 absolute inset-y-1 left-0 p-1 transition-transform duration-200 ease-in-backward md:inset-y-0 md:px-4",
+					"-top-1 absolute bottom-0 left-0 p-1 transition-transform duration-200 ease-in-backward md:px-4",
 					index === -1 && "hidden",
 				)}
 				style={{

diff --git a/app/components/ProfileCard.tsx b/app/components/ProfileCard.tsx
@@ -111,7 +111,7 @@ function EditModal({ profile, setOpen }: EditModalProps): ReactNode {
 							</span>
 						)}
 					</div>
-					<div className="mt-2 grid grid-cols-2 justify-items-center gap-x-8 px-4">
+					<div className="mt-2 grid grid-cols-2 justify-items-center gap-x-8">
 						<Button
 							className="w-full max-w-32"
 							foreground={false}

diff --git a/app/routes/_auth.play.tsx b/app/routes/_auth.play.tsx
@@ -11,10 +11,10 @@ export default function Page() {
 	if (!session) return null;
 	return (
 		<div
-			className="min-h-dvh w-full p-4"
+			className="h-dvh w-full overflow-hidden p-4"
 			style={{ viewTransitionName: "main" }}
 		>
-			<main className="mx-auto grid w-full max-w-screen-sm gap-y-4">
+			<main className="mx-auto grid h-full w-full max-w-screen-sm grid-rows-[auto_auto_1fr] gap-y-4">
 				<Heading>遊ぶ</Heading>
 				<div className="grid justify-items-center gap-y-1">
 					<QRCode
@@ -25,6 +25,13 @@ export default function Page() {
 						{session.user.id}
 					</span>
 				</div>
+				<div className="grid place-items-center pb-16">
+					<p className="text-center drop-shadow-base">
+						プレイする際には上記のQRコードを
+						<br />
+						ゲーム筐体にかざして読み取ってください
+					</p>
+				</div>
 			</main>
 		</div>
 	);