feat: 試合結果のページを作成

packages/kcmsf/src/pages/result.tsx

@@ -0,0 +1,248 @@
+import { Flex, Select, Table, Title } from "@mantine/core";
+import { DepartmentType, config } from "config";
+import { useEffect, useMemo, useState } from "react";
+import { parseSeconds } from "../utils/time";
+
+type PreMatch = {
+  id: string;
+  matchCode: string;
+  departmentType: DepartmentType;
+  leftTeam?: {
+    id: string;
+    teamName: string;
+  };
+  rightTeam?: {
+    id: string;
+    teamName: string;
+  };
+  runResults: MatchResults;
+};
+
+type MainMatch = {
+  id: string;
+  matchCode: string;
+  departmentType: DepartmentType;
+  team1: {
+    id: string;
+    teamName: string;
+  };
+  team2: {
+    id: string;
+    teamName: string;
+  };
+  winnerID: string;
+  runResults: MatchResults;
+};
+
+type MatchResults = {
+  id: string;
+  teamID: string;
+  points: number;
+  goalTimeSeconds?: number;
+  finishState: "goal" | "finished";
+}[];
+
+export const Result = () => {
+  const [preMatchData, setPreMatchData] = useState<PreMatch[]>([]);
+  const [mainMatchData, setMainMatchData] = useState<MainMatch[]>([]);
+  const [department, setDepartment] = useState<DepartmentType>(
+    config.departments[0].type
+  );
+
+  useEffect(() => {
+    const getMatches = async () => {
+      const response = await fetch(`${import.meta.env.VITE_API_URL}/match`, {
+        method: "GET",
+      }).catch(() => undefined);
+
+      const matchResponse = (await response?.json()) as
+        | { pre: PreMatch[]; main: MainMatch[] }
+        | undefined;
+
+      setPreMatchData(matchResponse ? matchResponse.pre : []);
+      setMainMatchData(matchResponse ? matchResponse.main : []);
+    };
+    getMatches();
+  }, []);
+
+  const teamNames: Map<string, string> = useMemo(() => {
+    const team = new Map<string, string>();
+    mainMatchData.forEach((element) => {
+      if (element.team1) team.set(element.team1.id, element.team1.teamName);
+      if (element.team2) team.set(element.team2.id, element.team2.teamName);
+    });
+    return team;
+  }, [mainMatchData]);
+
+  const preMatches = useMemo(
+    () => mainMatchData.filter((match) => match.departmentType === department),
+    [mainMatchData]
+  );
+
+  const mainMatches = useMemo(
+    () => preMatchData.filter((match) => match.departmentType === department),
+    [preMatchData]
+  );
+
+  return (
+    <>
+      <Select
+        label="部門"
+        data={config.departments.map((element) => ({
+          value: element.type,
+          label: element.name,
+        }))}
+        value={department}
+        defaultValue={config.departments[0].type}
+        onChange={(value) => value && setDepartment(value as DepartmentType)}
+      />
+      <Flex direction="column" gap={20}>
+        <Title order={3}>{config.department[department].name}</Title>
+        <MainResultTable matches={preMatches} teamNames={teamNames} />
+        <PreResultTable matches={mainMatches} />
+      </Flex>
+    </>
+  );
+};
+
+const MainResultTable = (props: {
+  matches: MainMatch[];
+  teamNames: Map<string, string>;
+}) => {
+  if (props.matches.length === 0) {
+    return (
+      <div>
+        <Title order={3}>{"本戦"}</Title>
+        <p>結果がありません</p>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Title order={3}>{"本戦"}</Title>
+      <Table striped withTableBorder miw="40rem">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th style={{ textAlign: "center" }}>勝ち</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>得点</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>負け</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {props.matches.map((element) => (
+            <Table.Tr key={element.id}>
+              <MainMatchColum match={element} teamData={props.teamNames} />
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </div>
+  );
+};
+
+const MainMatchColum = (props: {
+  match: MainMatch;
+  teamData: Map<string, string>;
+}) => {
+  const loserID =
+    props.match.winnerID === props.match.team1.id
+      ? props.match.team2.id
+      : props.match.team1.id;
+  return (
+    <>
+      <Table.Td className="td">
+        {props.teamData.get(props.match.winnerID)}
+      </Table.Td>
+      <Table.Td className="td">
+        {props.match.runResults
+          .filter((result) => result.teamID === props.match.winnerID)
+          .reduce((sum, result) => sum + result.points, 0)}
+        -
+        {props.match.runResults
+          .filter((result) => result.teamID !== props.match.winnerID)
+          .reduce((sum, result) => sum + result.points, 0)}
+      </Table.Td>
+      <Table.Td className="td">{props.teamData.get(loserID)}</Table.Td>
+    </>
+  );
+};
+
+const PreResultTable = (props: { matches: PreMatch[] }) => {
+  if (props.matches.length === 0) {
+    return (
+      <div>
+        <Title order={3}>{"予選"}</Title>
+        <p>結果がありません</p>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Title order={3}>{"予選"}</Title>
+      <Table striped withTableBorder miw="40rem">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th style={{ textAlign: "center" }}>左チーム</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>得点</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>時間</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>右チーム</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>得点</Table.Th>
+            <Table.Th style={{ textAlign: "center" }}>時間</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {props.matches.map((element) => (
+            <Table.Tr key={element.id}>
+              <PreResultColum match={element} />
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </div>
+  );
+};
+
+const PreResultColum = (props: { match: PreMatch }) => {
+  const leftResult = useMemo(
+    () =>
+      props.match.runResults.find(
+        (result) => result.teamID === props.match.leftTeam?.id
+      ),
+    [props.match]
+  );
+  const rightResult = useMemo(
+    () =>
+      props.match.runResults.find(
+        (result) => result.teamID === props.match.rightTeam?.id
+      ),
+    [props.match]
+  );
+  const leftGoalTimeSeconds = useMemo(() => {
+    if (!leftResult) {
+      return "";
+    } else {
+      if (leftResult.goalTimeSeconds)
+        return parseSeconds(leftResult.goalTimeSeconds);
+      return "フィニッシュ";
+    }
+  }, [leftResult]);
+  const rightGoalTimeSeconds = useMemo(() => {
+    if (!rightResult) {
+      return "";
+    } else {
+      if (rightResult.goalTimeSeconds)
+        return parseSeconds(rightResult.goalTimeSeconds);
+      return "フィニッシュ";
+    }
+  }, [leftResult]);
+  return (
+    <>
+      <Table.Td className="td">{props.match.leftTeam?.teamName}</Table.Td>
+      <Table.Td className="td">{leftResult?.points}</Table.Td>
+      <Table.Td className="td">{leftGoalTimeSeconds}</Table.Td>
+      <Table.Td className="td">{props.match.rightTeam?.teamName}</Table.Td>
+      <Table.Td className="td">{rightResult?.points}</Table.Td>
+      <Table.Td className="td">{rightGoalTimeSeconds}</Table.Td>
+    </>
+  );
+};

packages/kcmsf/src/routes/router.tsx

@@ -4,6 +4,7 @@ import { Match } from "../pages/match.tsx";
 import { MatchList } from "../pages/matchList.tsx";
 import { Register } from "../pages/register.tsx";
 import { RegisterBulk } from "../pages/registerBulk.tsx";
+import { Result } from "../pages/result.tsx";
 import { Teams } from "../pages/teams.tsx";
 import { Layout } from "./layout.tsx";
 
@@ -46,6 +47,10 @@ export const router = createBrowserRouter(
           path: "matchlist",
           element: <MatchList />,
         },
+        {
+          path: "result",
+          element: <Result />,
+        },
       ],
     },
   ],

packages/mock/src/data/match.ts

@@ -55,14 +55,14 @@ export const preMatches: PreMatch[] = [
       {
         id: "3548129",
         teamID: "1392387",
-        points: 4,
-        goalTimeSeconds: 130,
+        points: 5,
         finishState: "finished",
       },
       {
         id: "13847917",
         teamID: "7549586",
         points: 4,
+        goalTimeSeconds: 130,
         finishState: "goal",
       },
     ],
@@ -81,7 +81,6 @@ export const preMatches: PreMatch[] = [
         id: "983156",
         teamID: "4578932",
         points: 8,
-        goalTimeSeconds: 120,
         finishState: "finished",
       },
     ],
@@ -108,15 +107,28 @@ export const mainMatches: MainMatch[] = [
         teamID: "1392387",
         points: 5,
         goalTimeSeconds: 150,
-        finishState: "finished",
+        finishState: "goal",
       },
       {
         id: "987326732",
         teamID: "7549586",
         points: 4,
         goalTimeSeconds: 130,
+        finishState: "goal",
+      },
+      {
+        id: "68963290",
+        teamID: "7549586",
+        points: 6,
         finishState: "finished",
       },
+      {
+        id: "5640890",
+        teamID: "1392387",
+        points: 5,
+        goalTimeSeconds: 120,
+        finishState: "goal",
+      },
     ],
   },
   {
@@ -125,7 +137,7 @@ export const mainMatches: MainMatch[] = [
     departmentType: config.departmentTypes[0],
     team1: {
       id: "1392387",
-      teamName: "かに1",
+      teamName: "かに3",
     },
     team2: {
       id: "7549586",
@@ -138,15 +150,27 @@ export const mainMatches: MainMatch[] = [
         teamID: "1392387",
         points: 5,
         goalTimeSeconds: 150,
+        finishState: "goal",
+      },
+      {
+        id: "987326732",
+        teamID: "1392387",
+        points: 4,
         finishState: "finished",
       },
       {
         id: "987326732",
         teamID: "7549586",
-        points: 4,
-        goalTimeSeconds: 130,
+        points: 3,
         finishState: "finished",
       },
+      {
+        id: "4279861",
+        teamID: "7549586",
+        points: 5,
+        goalTimeSeconds: 150,
+        finishState: "goal",
+      },
     ],
   },
 ];