Merge pull request #178 from h8570rg/develop

Prd
h8570rg · Aug 3, 2024 · 56fdda8 · 56fdda8
2 parents 30dcc6d + 3ceae73
commit 56fdda8
Show file tree

Hide file tree

Showing 25 changed files with 393 additions and 297 deletions.
diff --git a/app/(main)/(routes)/friends/(components)/AddButton/index.tsx b/app/(main)/(routes)/friends/(components)/AddButton/index.tsx
@@ -11,15 +11,15 @@ import {
   ModalBody,
   ModalContent,
   ModalHeader,
-  useDisclosure,
+  useModal,
 } from "@/components/Modal";
 import { ScrollShadow } from "@/components/ScrollShadow";
 import { User } from "@/components/User";
 import { browserServices } from "@/lib/services/browser";
 import { addFriends } from "./actions";
 
 export function AddButton() {
-  const addModal = useDisclosure();
+  const addModal = useModal();
   const [query, setQuery] = useState("");
 
   const { searchProfiles } = browserServices();
@@ -47,8 +47,7 @@ export function AddButton() {
         <Icon name="personAdd" className="size-5 fill-current" />
       </Button>
       <Modal
-        isOpen={addModal.isOpen}
-        onOpenChange={addModal.onOpenChange}
+        {...addModal.bind}
         hideCloseButton
         onClose={() => {
           setQuery("");

diff --git a/app/(main)/(routes)/matches/(components)/CreateMatchButton/index.tsx b/app/(main)/(routes)/matches/(components)/CreateMatchButton/index.tsx
@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Accordion, AccordionItem } from "@/components/Accordion";
 import { Button, ButtonGroup } from "@/components/Button";
 import { Input } from "@/components/Input";
-import { useDisclosure } from "@/components/Modal";
+import { useModal } from "@/components/Modal";
 import {
   Modal,
   ModalBody,
@@ -63,7 +63,7 @@ const playersCount3DefaultValues: InputSchema = {
 };
 
 export function CreateMatchButton({ className }: { className?: string }) {
-  const ruleCreateModal = useDisclosure();
+  const ruleCreateModal = useModal();
 
   const [state, formAction] = useFormState(createMatch, {});
   const { errors } = state;
@@ -87,11 +87,7 @@ export function CreateMatchButton({ className }: { className?: string }) {
       >
         ゲームを始める
       </Button>
-      <Modal
-        isOpen={ruleCreateModal.isOpen}
-        onOpenChange={ruleCreateModal.onOpenChange}
-        hideCloseButton
-      >
+      <Modal {...ruleCreateModal.bind} hideCloseButton>
         <ModalContent>
           {(onClose) => (
             <>

diff --git a/app/(main)/(routes)/matches/(components)/MatchCard/index.tsx b/app/(main)/(routes)/matches/(components)/MatchCard/index.tsx
@@ -20,7 +20,7 @@ export function MatchCard({ match, userId }: { match: Match; userId: string }) {
     <NavigationCard matchId={match.id}>
       <CardHeader>
         <div className="flex w-full items-center justify-between">
-          <p className="">{displayDate}</p>
+          <p className="font-bold">{displayDate}</p>
           <AvatarGroup size="sm" isBordered max={4}>
             {match.players.map((player) => (
               <Avatar key={player.id} />

diff --git a/...hes/(routes)/[matchId]/(components)/ChipInputModal/(components)/ModalController/index.tsx b/...hes/(routes)/[matchId]/(components)/ChipInputModal/(components)/ModalController/index.tsx
@@ -11,11 +11,7 @@ export function ChipInputModalController({
   const { chipInputModal } = useMatchContext();
 
   return (
-    <Modal
-      isOpen={chipInputModal.isOpen}
-      onClose={chipInputModal.onClose}
-      hideCloseButton
-    >
+    <Modal {...chipInputModal.bind} hideCloseButton>
       <ModalContent>{children}</ModalContent>
     </Modal>
   );

diff --git a/app/(main)/(routes)/matches/(routes)/[matchId]/(components)/DataModal/index.tsx b/app/(main)/(routes)/matches/(routes)/[matchId]/(components)/DataModal/index.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { forwardRef } from "react";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@/components/Modal";
+import { useMatchContext } from "../../context";
+
+export function DataModal() {
+  const { dataModal } = useMatchContext();
+
+  return (
+    <Modal size="full" {...dataModal.bind}>
+      <ModalContent>
+        <ModalHeader>データ</ModalHeader>
+        <ModalBody>todo</ModalBody>
+        {/* スペーサーとして */}
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export const DataModalTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button">
+>(function DataModalTrigger({ onClick, ...props }, ref) {
+  const { onOpen } = useMatchContext().dataModal;
+
+  return (
+    <button
+      ref={ref}
+      onClick={(e) => {
+        onOpen();
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+});
diff --git a/...hes/(routes)/[matchId]/(components)/GameInputModal/(components)/ModalController/index.tsx b/...hes/(routes)/[matchId]/(components)/GameInputModal/(components)/ModalController/index.tsx
@@ -12,8 +12,7 @@ export function GameInputModalController({
 
   return (
     <Modal
-      isOpen={gameInputModal.isOpen}
-      onClose={gameInputModal.onClose}
+      {...gameInputModal.bind}
       hideCloseButton
       placement="center" // TODO: 考える
     >

diff --git a/app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchContextProvider/index.tsx b/app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchContextProvider/index.tsx
@@ -1,25 +1,28 @@
 "use client";
 
-import { useDisclosure } from "@/components/Modal";
+import { useModal } from "@/components/Modal";
 import { MatchContext } from "../../context";
 
 export function MatchContextProvider({
   children,
-  playerInputModalDefaultOpen,
 }: {
   children: React.ReactNode;
-  playerInputModalDefaultOpen: boolean;
 }) {
-  const playerInputModal = useDisclosure({
-    defaultOpen: playerInputModalDefaultOpen,
-  });
-  const gameInputModal = useDisclosure();
-  const chipInputModal = useDisclosure();
-  const ruleModal = useDisclosure();
+  const playerInputModal = useModal();
+  const gameInputModal = useModal();
+  const chipInputModal = useModal();
+  const ruleModal = useModal();
+  const dataModal = useModal();
 
   return (
     <MatchContext.Provider
-      value={{ playerInputModal, gameInputModal, chipInputModal, ruleModal }}
+      value={{
+        playerInputModal,
+        gameInputModal,
+        chipInputModal,
+        ruleModal,
+        dataModal,
+      }}
     >
       {children}
     </MatchContext.Provider>

diff --git a/...ches/(routes)/[matchId]/(components)/MatchPlayerInputModal/(components)/Content/index.tsx b/...ches/(routes)/[matchId]/(components)/MatchPlayerInputModal/(components)/Content/index.tsx
@@ -13,7 +13,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-  useDisclosure,
+  useModal,
 } from "@/components/Modal";
 import { ScrollShadow } from "@/components/ScrollShadow";
 import { User } from "@/components/User";
@@ -39,7 +39,7 @@ export function MatchPlayerInputModalContent({
     isOpen: isProfileCreateModalOpen,
     onClose: onProfileCreateModalClose,
     onOpen: onOpenProfileCreateModal,
-  } = useDisclosure();
+  } = useModal();
 
   const [isPending, setIsPending] = useState(false);
 

diff --git a/...utes)/[matchId]/(components)/MatchPlayerInputModal/(components)/ModalController/index.tsx b/...utes)/[matchId]/(components)/MatchPlayerInputModal/(components)/ModalController/index.tsx
@@ -1,13 +1,28 @@
 "use client";
 
+import { useEffect } from "react";
 import { Modal } from "@/components/Modal";
 import { useMatchContext } from "../../../../context";
 
-export function ModalController({ children }: { children: React.ReactNode }) {
-  const { onClose, isOpen } = useMatchContext().playerInputModal;
+export function ModalController({
+  children,
+  isDefaultOpen,
+}: {
+  children: React.ReactNode;
+  isDefaultOpen?: boolean;
+}) {
+  const { playerInputModal } = useMatchContext();
+
+  useEffect(() => {
+    if (isDefaultOpen) {
+      playerInputModal.onOpen();
+    }
+    // FIXME
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} hideCloseButton>
+    <Modal {...playerInputModal.bind} hideCloseButton>
       {children}
     </Modal>
   );

diff --git a/app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchPlayerInputModal/index.tsx b/app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchPlayerInputModal/index.tsx
@@ -9,8 +9,10 @@ export async function MatchPlayerInputModal({ matchId }: { matchId: string }) {
     getMatch({ matchId }),
   ]);
 
+  const isDefaultOpen = match.players.length <= 1;
+
   return (
-    <ModalController>
+    <ModalController isDefaultOpen={isDefaultOpen}>
       <MatchPlayerInputModalContent
         friends={friends}
         matchId={matchId}

diff --git a/.../(routes)/[matchId]/(components)/MatchTable/(components)/MatchPlayerInputButton/index.tsx b/.../(routes)/[matchId]/(components)/MatchTable/(components)/MatchPlayerInputButton/index.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useDisclosure } from "@/components/Modal";
+import { useModal } from "@/components/Modal";
 
 export function MatchPlayerInputButton(
   props: React.ComponentPropsWithoutRef<"button">,
 ) {
-  const gameInputModal = useDisclosure();
+  const gameInputModal = useModal();
 
   return <button onClick={gameInputModal.onOpen} {...props}></button>;
 }
diff --git a/...(routes)/matches/(routes)/[matchId]/(components)/RuleModal/(components)/Content/index.tsx b/...(routes)/matches/(routes)/[matchId]/(components)/RuleModal/(components)/Content/index.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@/components/Modal";
+import { calcMethodLabel, chipRateLabel, rateLabel } from "@/lib/config";
+import { Rule } from "@/lib/type";
+
+export function RuleModalContent({ rule }: { rule: Rule }) {
+  return (
+    <ModalContent>
+      <ModalHeader>ルール</ModalHeader>
+      <ModalBody>
+        <table className="table-fixed border-separate border-spacing-y-1">
+          <tbody className="[&_td]:text-center">
+            <tr>
+              <th>プレイ人数</th>
+              <td>{rule.playersCount}人</td>
+            </tr>
+            <tr>
+              <th>レート</th>
+              <td>{rateLabel[rule.rate]}</td>
+            </tr>
+            <tr>
+              <th>チップ</th>
+              <td>{chipRateLabel[rule.chipRate]}</td>
+            </tr>
+            <tr>
+              <th>ウマ</th>
+              <td className="space-x-4">
+                <span>{rule.incline.incline1}</span>
+                <span>{rule.incline.incline2}</span>
+                <span>{rule.incline.incline3}</span>
+                {rule.playersCount === 4 && (
+                  <span>{rule.incline.incline4}</span>
+                )}
+              </td>
+            </tr>
+            <tr>
+              <th>飛び賞</th>
+              <td>{rule.crackBoxBonus}点</td>
+            </tr>
+            <tr>
+              <th>持ち点</th>
+              <td>{rule.defaultPoints}点</td>
+            </tr>
+            <tr>
+              <th>オカ</th>
+              <td>{rule.defaultCalcPoints}点</td>
+            </tr>
+            <tr>
+              <th>計算</th>
+              <td>{calcMethodLabel[rule.calcMethod]}</td>
+            </tr>
+          </tbody>
+        </table>
+      </ModalBody>
+      {/* スペーサーとして */}
+      <ModalFooter />
+    </ModalContent>
+  );
+}
diff --git a/.../matches/(routes)/[matchId]/(components)/RuleModal/(components)/ModalController/index.tsx b/.../matches/(routes)/[matchId]/(components)/RuleModal/(components)/ModalController/index.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { Modal } from "@/components/Modal";
+import { useMatchContext } from "../../../../context";
+
+export function ModalController({ children }: { children: React.ReactNode }) {
+  const { ruleModal } = useMatchContext();
+
+  return (
+    <Modal {...ruleModal.bind} hideCloseButton>
+      {children}
+    </Modal>
+  );
+}