feat: num filter

Simirall · Aug 22, 2024 · 7773e2d · 7773e2d
1 parent e68a488
commit 7773e2d
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 11 deletions.
diff --git a/src/pages/components/GameModal.tsx b/src/pages/components/GameModal.tsx
@@ -63,8 +63,6 @@ export const GameModal = () => {
     [madamis, gameId]
   );
 
-  console.log(madamis?.games);
-
   const formSchema = z.object({
     players: z.array(z.string()).length(madamis?.player ?? 0),
     gm: z.string().refine((v) => userIds.includes(v)),

diff --git a/src/pages/components/MadamisList.tsx b/src/pages/components/MadamisList.tsx
@@ -5,6 +5,7 @@ import {
   Chip,
   Group,
   NavLink,
+  Select,
   Stack,
 } from "@mantine/core";
 import { Link, PencilSimple } from "@phosphor-icons/react";
@@ -20,22 +21,65 @@ export const MadamisList = () => {
   const { editOpen } = useMadamisModalStore();
 
   const [onlyNotPlayed, updatePlayed] = useState(false);
+  const [players, setPlayers] = useState<string | null>(null);
 
   return (
     <Stack p="sm" align="center">
-      <Chip
-        size="xl"
-        checked={onlyNotPlayed}
-        onChange={(e) => {
-          updatePlayed(e);
-        }}
-      >
-        未プレイのみ
-      </Chip>
+      <Group justify="center">
+        <Chip
+          size="xl"
+          checked={onlyNotPlayed}
+          onChange={(e) => {
+            updatePlayed(e);
+          }}
+        >
+          未プレイのみ
+        </Chip>
+        <Select
+          placeholder="遊ぶ人数"
+          size="md"
+          radius="xl"
+          variant="filled"
+          data={[
+            {
+              value: "2",
+              label: "2人",
+            },
+            {
+              value: "3",
+              label: "3人",
+            },
+            {
+              value: "4",
+              label: "4人",
+            },
+            {
+              value: "5",
+              label: "5人",
+            },
+            {
+              value: "6",
+              label: "6人",
+            },
+            {
+              value: "7",
+              label: "7人",
+            },
+          ]}
+          value={players}
+          onChange={setPlayers}
+        />
+      </Group>
       <Group justify="center">
         {data &&
           data
             .filter((d) => (onlyNotPlayed ? d.games.length === 0 : true))
+            .filter((d) =>
+              !players
+                ? true
+                : d.player + 1 === parseInt(players) ||
+                  (!d.gmRequired && d.player === parseInt(players))
+            )
             .map((d) => (
               <Card
                 key={d.id}