Merge pull request #163 from h8570rg/develop

PRD
h8570rg · Jul 20, 2024 · be0f94b · be0f94b
2 parents 3556e80 + 0c65722
commit be0f94b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 35 deletions.
diff --git a/app/(main)/(routes)/matches/(components)/MatchCard/index.tsx b/app/(main)/(routes)/matches/(components)/MatchCard/index.tsx
@@ -1,32 +1,26 @@
 import { Avatar, AvatarGroup } from "@/components/Avatar";
 import { CardBody, CardHeader } from "@/components/Card";
 import { Divider } from "@/components/Divider";
-import { serverServices } from "@/lib/services/server";
+import { Match } from "@/lib/type";
 import { dayjs } from "@/lib/utils/date";
 import { NavigationCard } from "./(components)/Card";
 
-export async function MatchCard({
-  matchId,
-  date,
-}: {
-  matchId: string;
-  date: string;
-}) {
-  const { getMatch } = serverServices();
-  const [match] = await Promise.all([getMatch({ matchId })]);
-
+export function MatchCard({ match, userId }: { match: Match; userId: string }) {
+  const { createdAt } = match;
   const today = dayjs();
-  const targetDate = dayjs(date);
+  const targetDate = dayjs(createdAt);
   const isSameYear = today.isSame(targetDate, "year");
   const displayDate = isSameYear
-    ? dayjs(date).format("M/D")
-    : dayjs(date).format("YYYY/M/D");
+    ? dayjs(createdAt).format("M/D")
+    : dayjs(createdAt).format("YYYY/M/D");
+
+  const data = match.players.find((player) => player.id === userId)!;
 
   return (
-    <NavigationCard matchId={matchId}>
+    <NavigationCard matchId={match.id}>
       <CardHeader>
         <div className="flex w-full items-center justify-between">
-          <p className="font-bold">{displayDate}</p>
+          <p className="">{displayDate}</p>
           <AvatarGroup size="sm" isBordered max={4}>
             {match.players.map((player) => (
               <Avatar key={player.id} />
@@ -36,12 +30,36 @@ export async function MatchCard({
       </CardHeader>
       <Divider />
       <CardBody>
-        {/* <div className="h-[70px]">
-          <RankCountChart
-            matchResult={match}
-            userProfileId={userProfile.id}
-          />
-        </div> */}
+        <div className="flex items-center">
+          <div className="flex grow flex-col items-center px-8">
+            <div className="mb-2 text-tiny text-foreground-light">平均着順</div>
+            <div className="text-large font-bold">
+              {data.averageRank ?? "なし"}
+            </div>
+          </div>
+          <div className="px-8">
+            <table className="[&_td]:text-center [&_th]:w-10 [&_th]:text-center">
+              <thead className="text-tiny text-foreground-light">
+                <tr>
+                  <th>1位</th>
+                  <th>2位</th>
+                  <th>3位</th>
+                  {match.rule.playersCount === 4 && <th>4位</th>}
+                </tr>
+              </thead>
+              <tbody className="text-small font-bold">
+                <tr>
+                  <td>{data.rankCounts[0]}</td>
+                  <td>{data.rankCounts[1]}</td>
+                  <td>{data.rankCounts[2]}</td>
+                  {match.rule.playersCount === 4 && (
+                    <td>{data.rankCounts[3]}</td>
+                  )}
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </CardBody>
     </NavigationCard>
   );

diff --git a/app/(main)/(routes)/matches/page.tsx b/app/(main)/(routes)/matches/page.tsx
@@ -3,11 +3,10 @@ import { CreateMatchButton } from "./(components)/CreateMatchButton";
 import { MatchCard } from "./(components)/MatchCard";
 
 export default async function Matches() {
-  const { getMatches } = serverServices();
+  const { getMatches, getUser } = serverServices();
 
   // TODO: infinite scroll
-  const matches = await getMatches({});
-
+  const [matches, user] = await Promise.all([getMatches({}), getUser()]);
   return (
     <div>
       <h1 className="heading-1 mb-1">成績表</h1>
@@ -21,7 +20,7 @@ export default async function Matches() {
       <ul className="space-y-4">
         {matches?.map((match) => (
           <li key={match.id}>
-            <MatchCard matchId={match.id} date={match.createdAt} />
+            <MatchCard match={match} userId={user.id} />
           </li>
         ))}
       </ul>

diff --git a/lib/services/features/match.ts b/lib/services/features/match.ts
@@ -250,8 +250,8 @@ function formatMatch(match: {
       id: profiles.id,
       name: profiles.name,
       janrecoId: profiles.janreco_id,
-      rankCounts: new Array(match.match_players.length).fill(0),
-      averageRank: 0,
+      rankCounts: new Array(rule.players_count).fill(0),
+      averageRank: null,
       totalScore: 0,
       chipCount: chip_count,
       result: 0,
@@ -268,11 +268,16 @@ function formatMatch(match: {
   });
 
   players.forEach((player) => {
-    player.averageRank =
-      player.rankCounts.reduce(
-        (acc, rankCount, rank) => acc + rankCount * (rank + 1),
-        0,
-      ) / match.games.length;
+    if (player.rankCounts.reduce((acc, cur) => acc + cur, 0) > 0) {
+      player.averageRank = Number(
+        (
+          player.rankCounts.reduce(
+            (acc, cur, index) => acc + cur * (index + 1),
+            0,
+          ) / player.rankCounts.reduce((acc, cur) => acc + cur, 0)
+        ).toFixed(2),
+      );
+    }
     player.result =
       (player.chipCount ?? 0) * rule.chip_rate + player.totalScore * rule.rate;
   });

diff --git a/lib/services/features/profile.ts b/lib/services/features/profile.ts
@@ -1,9 +1,16 @@
 import { PostgrestError } from "@supabase/supabase-js";
-import { Profile } from "@/lib/type";
+import { Profile, User } from "@/lib/type";
 import { Supabase } from ".";
 
 export function profileService(supabase: Supabase) {
   return {
+    async getUser(): Promise<User> {
+      const userResponse = await supabase.auth.getUser();
+      if (userResponse.error) throw userResponse.error;
+      const user = userResponse.data.user;
+      return user;
+    },
+
     async getUserProfile(): Promise<Profile> {
       const userResponse = await supabase.auth.getUser();
       if (userResponse.error) throw userResponse.error;

diff --git a/lib/type.ts b/lib/type.ts
@@ -1,5 +1,8 @@
+import { User as SupabaseUser } from "@supabase/supabase-js";
 import { calcMethods, chipRates, rates } from "./config";
 
+export type User = SupabaseUser;
+
 export type Profile = {
   id: string;
   name: string | null;
@@ -19,7 +22,7 @@ export type Match = {
 
 export type MatchPlayer = Profile & {
   rankCounts: number[];
-  averageRank: number;
+  averageRank: number | null;
   totalScore: number;
   chipCount: number | null;
   result: number;