Merge pull request #7 from RuiOkazaki/feature/TSK-33

[TSK-33]ゲーム画面まで遷移できるようにする
RuiOkazaki · May 10, 2024 · f045a67 · f045a67
2 parents 41c52ca + fcafb12
commit f045a67
Show file tree

Hide file tree

Showing 25 changed files with 628 additions and 117 deletions.
diff --git a/biome.json b/biome.json
@@ -82,6 +82,16 @@
           }
         }
       }
+    },
+    {
+      "include": ["src/shared/libs/pathpida/$path.ts"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useFilenamingConvention": "off"
+          }
+        }
+      }
     }
   ]
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "run-p dev:*",
+    "dev:next": "next dev",
+    "dev:path": "pathpida --ignorePath .gitignore --output ./src/shared/libs/pathpida --watch",
+    "build": "pathpida --ignorePath .gitignore --output ./src/shared/libs/pathpida && next build",
     "start": "next start",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "coverage": "vitest run --coverage",
+    "fix": "run-s *:fix",
     "lint:fix": "biome lint --apply-unsafe ./",
     "format:fix": "biome format ./ --write",
     "check": "biome check ./",
@@ -20,7 +23,10 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@formkit/tempo": "^0.1.1",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "graphql": "^16.8.1",
@@ -40,6 +46,8 @@
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "^1.5.2",
     "lefthook": "^1.6.10",
+    "npm-run-all2": "^6.1.2",
+    "pathpida": "^0.22.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.5",

diff --git a/src/app/game/configure/page.tsx b/src/app/game/configure/page.tsx
@@ -0,0 +1,6 @@
+export * from '@/page/game-configure';
+export { default } from '@/page/game-configure';
+
+// MEMO: export type { Query } from '@/page/game-configure'; だと pathpida がうまく読み込んでくれない
+import type { Query as OriginalQuery } from '@/page/game-configure';
+export type Query = OriginalQuery;
diff --git a/src/app/game/layout.tsx b/src/app/game/layout.tsx
@@ -1,2 +1,9 @@
-export * from '@/page/game/layout';
-export { default } from '@/page/game/layout';
+import { GameModeLayout } from '@/shared/layout/game-mode-layout';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <GameModeLayout>{children}</GameModeLayout>;
+}
diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
@@ -1,2 +1,2 @@
-export * from '@/page/game/page';
-export { default } from '@/page/game/page';
+export * from '@/page/game-home';
+export { default } from '@/page/game-home';
diff --git a/src/app/game/play/page.tsx b/src/app/game/play/page.tsx
@@ -0,0 +1,6 @@
+export * from '@/page/game-play';
+export { default } from '@/page/game-play';
+
+// MEMO: export type { Query } from '@/page/game-play'; だと pathpida がうまく読み込んでくれない
+import type { Query as OriginalQuery } from '@/page/game-play';
+export type Query = OriginalQuery;
diff --git a/src/app/game/result/page.tsx b/src/app/game/result/page.tsx
@@ -0,0 +1,2 @@
+export * from '@/page/game-result';
+export { default } from '@/page/game-result';
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,2 +1,22 @@
-export * from '@/page/layout';
-export { default } from '@/page/layout';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang='ja'>
+      <UserProvider>
+        <body>{children}</body>
+      </UserProvider>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,2 +1,2 @@
-export * from '@/page/page';
-export { default } from '@/page/page';
+export * from '@/page/home';
+export { default } from '@/page/home';
diff --git a/src/page/game-configure/index.tsx b/src/page/game-configure/index.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { pagesPath } from '@/shared/libs/pathpida/$path';
+import { Button } from '@/shared/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs';
+import { Typography } from '@/shared/ui/typography';
+import { GameHeader } from '@/widget/game-header';
+import { HomeIcon, MenuIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+export type Query = {
+  game_name: 'target-bull' | 'cr-number';
+};
+
+const DIFFICULTY = ['5', '10', '30', '50', '100'] as const;
+
+// TODO: ゲームモードによって色を変更する
+export default function Game() {
+  const [selectedDifficulty, setSelectedDifficulty] =
+    useState<(typeof DIFFICULTY)[number]>('5');
+
+  const query = useSearchParams();
+  // TODO: query.get を型安全にする
+  const game_name = query.get('game_name') as unknown as ReturnType<
+    typeof pagesPath.game.configure.$url
+  >['query']['game_name'];
+  game_name;
+
+  return (
+    <div className='grid h-full w-full grid-rows-[4.5rem_1fr]'>
+      <GameHeader
+        color='red-500'
+        title='TARGET BULL'
+        leftItems={
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-white bg-red-500 text-white hover:border-white hover:bg-red-500 hover:text-white'
+            asChild
+          >
+            <Link href={pagesPath.game.$url()}>
+              <HomeIcon className='stroke-1' />
+            </Link>
+          </Button>
+        }
+        rightItems={
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-white bg-red-500 text-white hover:border-white hover:bg-red-500 hover:text-white'
+          >
+            <MenuIcon className='stroke-1' />
+          </Button>
+        }
+      />
+      <main className='h-full p-4'>
+        <div className='flex h-full flex-col items-center justify-center gap-7'>
+          <div className='flex items-center gap-7'>
+            <span className='block aspect-video h-24 bg-gray-300' />
+            <div className='flex w-72 flex-col gap-2'>
+              <Typography variant='body-l'>
+                ゲームの難易度を選択してください
+              </Typography>
+              <span className='border-b' />
+              <Typography>
+                ターゲットにn（5,10,30,50,100）回
+                <br />
+                刺さるまで狙い続ける
+              </Typography>
+            </div>
+          </div>
+          <Tabs value={selectedDifficulty}>
+            <TabsList>
+              {DIFFICULTY.map(level => (
+                <TabsTrigger
+                  key={level}
+                  value={level}
+                  onClick={() => setSelectedDifficulty(level)}
+                >
+                  {level}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          <Button
+            variant='outline'
+            className='w-80 border-red-500 text-red-500 hover:bg-red-500 hover:text-white'
+            asChild
+            disabled={!selectedDifficulty}
+          >
+            <Link
+              href={pagesPath.game.play.$url({
+                query: {
+                  game_name: 'target-bull',
+                  difficulty: selectedDifficulty,
+                },
+              })}
+            >
+              ゲームを開始する
+            </Link>
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/src/page/game-home/index.tsx b/src/page/game-home/index.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { pagesPath } from '@/shared/libs/pathpida/$path';
+import { Button } from '@/shared/ui/button';
+import { Typography } from '@/shared/ui/typography';
+import { GameHeader } from '@/widget/game-header';
+import { MenuIcon, SettingsIcon, UserIcon } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Game() {
+  return (
+    <div className='grid h-full w-full grid-rows-[4.5rem_1fr]'>
+      <GameHeader
+        leftItems={
+          <Button className='flex gap-2 uppercase' variant='outline'>
+            <UserIcon size='1rem' />
+            Profile
+          </Button>
+        }
+        rightItems={
+          <div className='flex gap-4'>
+            <Button variant='outline' size='icon'>
+              <SettingsIcon className='stroke-[1.5]' />
+            </Button>
+            <Button variant='outline' size='icon'>
+              <MenuIcon />
+            </Button>
+          </div>
+        }
+      />
+      <main className='h-full p-4'>
+        <div className='flex h-full items-center justify-center gap-8'>
+          <div className='h-3/4'>
+            <Typography
+              className='grid h-full w-36 place-items-center border border-red-500 text-red-500 uppercase'
+              variant='body-m'
+              weight='bold'
+              asChild
+            >
+              <Button variant='unstyle' asChild>
+                <Link
+                  href={pagesPath.game.configure.$url({
+                    query: { game_name: 'target-bull' },
+                  })}
+                >
+                  Target Bull
+                </Link>
+              </Button>
+            </Typography>
+          </div>
+          <div className='h-3/4'>
+            <Typography
+              className='grid h-full w-36 place-items-center border border-blue-500 text-blue-500 uppercase'
+              variant='body-m'
+              weight='bold'
+              asChild
+            >
+              <Button variant='unstyle' asChild>
+                <Link
+                  href={pagesPath.game.configure.$url({
+                    query: { game_name: 'cr-number' },
+                  })}
+                >
+                  CR Number
+                </Link>
+              </Button>
+            </Typography>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from '@/page/game-result';
		export { default } from '@/page/game-result';