feat: 遊び方の画面を追加 (#63)

app/components/BottomNav.tsx

@@ -17,10 +17,10 @@ const LINKS = [
 		href: "/play",
 		label: "遊ぶ",
 	},
-	// {
-	// 	href: "/guide",
-	// 	label: "遊び方",
-	// },
+	{
+		href: "/guide",
+		label: "遊び方",
+	},
 ];
 
 export interface BottomNavProps {

app/root.tsx

@@ -15,7 +15,6 @@ import { Analytics } from "./components/Analytics";
 import { Background } from "./components/Background";
 import { BottomNav } from "./components/BottomNav";
 import { Button } from "./components/Button";
-import { Loading } from "./components/Loading";
 import { Patterns } from "./components/Patterns";
 import { ThemeProvider } from "./components/Theme";
 import { useMyProfile } from "./features/profile/useMyProfile";

app/routes/_auth.guide.tsx

@@ -1,4 +1,5 @@
 import type { MetaFunction } from "@remix-run/react";
+import { cva } from "class-variance-authority";
 import type { ReactNode } from "react";
 import { Heading } from "~/components/Heading";
 
@@ -12,7 +13,39 @@ export default function Page(): ReactNode {
 		>
 			<main className="mx-auto grid w-full max-w-screen-sm gap-y-4">
 				<Heading>遊び方</Heading>
+				<div>
+					<p className={paragraph()}>
+						RicoShotは4対4に分かれて戦うチーム対戦型のシューティングゲームです。
+						2分間の試合で、敵を倒してポイントを稼ぎましょう。
+					</p>
+					<img
+						src="/assets/guide/playing.jpg"
+						alt="プレイ画面"
+						className={image({ dir: "left" })}
+					/>
+					<p className={paragraph()}>
+						操作はコントローラーを使います。使うボタンは少ないので、ゲーム初心者でもすぐに慣れるはずです！
+					</p>
+					<img
+						src="/assets/guide/controller.jpg"
+						alt="操作方法"
+						className={image({ dir: "right" })}
+					/>
+				</div>
 			</main>
 		</div>
 	);
 }
+
+const paragraph = cva("drop-shadow-base my-4");
+const image = cva(
+	"w-full border-white border-8 shadow-lg my-4 mx-1 aspect-video",
+	{
+		variants: {
+			dir: {
+				left: "rotate-2",
+				right: "-rotate-2",
+			},
+		},
+	},
+);