リーグ表のプロトタイプ

app/(authenticated)/sports/[id]/create-league/page.tsx

@@ -1,6 +1,6 @@
 import {Breadcrumbs, Link, Stack, Typography} from "@mui/material";
 import CardBackground from "@/components/layout/cardBackground";
-import LeagueDnd from "@/components/league/leagueDnd";
+import LeagueDnd from "@/components/league/create/leagueDnd";
 import {sportFactory} from "@/src/models/SportModel";
 
 export default async function LeaguePage({params}: { params: { id: string } }) {

app/(authenticated)/sports/[id]/games/[gameId]/page.tsx

@@ -3,6 +3,7 @@ import {Stack, Grid, Link, Typography, Breadcrumbs} from "@mui/material";
 import CardList from "@/components/layout/cardList";
 import {sportFactory} from "@/src/models/SportModel";
 import {gameFactory} from "@/src/models/GameModel";
+import LeagueTable from "@/components/league/table/leagueTable";
 
 export default async function GamePage({params}: { params: { gameId:string, id: string } }) {
     const gameId = parseInt(params.gameId, 10)
@@ -25,6 +26,7 @@ export default async function GamePage({params}: { params: { gameId:string, id:
                 <Typography color="text.primary">{game.name}(ID:{gameId})</Typography>
             </Breadcrumbs>
             <CardBackground title={`${game.name}のリーグ表`}>
+                <LeagueTable game={game} sport={sport} />
             </CardBackground>
             <CardBackground title={`${game.name}の進行中の試合`}>
                 <Grid container>

components/league/table/leagueTable.tsx

@@ -0,0 +1,90 @@
+import {Game, gameFactory} from "@/src/models/GameModel";
+import {Sport} from "@/src/models/SportModel";
+import {Stack} from "@mui/material";
+import {ReactNode} from "react";
+import TeamCell from "@/components/league/table/teamCell";
+import SlashCell from "@/components/league/table/slashCell";
+import MatchCell from "@/components/league/table/matchCell";
+
+export type LeagueTableProps = {
+    game: Game
+    sport: Sport
+}
+
+export default async function LeagueTable(props: LeagueTableProps) {
+    const entries = await gameFactory().getGameEntries(props.game.id)
+    const matches = await gameFactory().getGameMatches(props.game.id)
+
+    const cells: ReactNode[] = []
+
+    //  create 2 dimensional Stack components
+    //  1st dimension: rows
+    //  2nd dimension: columns
+    //  each cell is a LeagueTableCell component
+    for (let i = 0; i < (entries.length + 1); i++) {
+        const rows: ReactNode[] = []
+        for (let j = 0; j < (entries.length + 1); j++) {
+            if (i === 0 && j === 0) {
+                //  meaningless data
+                rows.push(
+                    <SlashCell key={`${i}_${j}`}/>
+                )
+            }
+            else if (i === 0 || j === 0) {
+                const index = (i === 0) ? (j - 1) : (i - 1)
+                const team = entries[index]
+
+                //  Team name
+                rows.push(
+                    <TeamCell team={team} key={`${i}_${j}`} />
+                )
+            }
+            else if (i === j) {
+                //  meaningless match data
+                rows.push(
+                    <SlashCell key={`${i}_${j}`}/>
+                )
+            }
+            else {
+                const leftTeam = entries[i - 1]
+                const rightTeam = entries[j - 1]
+
+                //  find the match between leftTeam and rightTeam
+                const match = matches.find(match => {
+                    return (match.leftTeamId === leftTeam.id && match.rightTeamId === rightTeam.id) ||
+                        (match.leftTeamId === rightTeam.id && match.rightTeamId === leftTeam.id)
+                })
+
+                if (match) {
+                    //  create a LeagueTableCell component
+                    rows.push(
+                        <MatchCell
+                            sport={props.sport}
+                            game={props.game}
+                            match={match}
+                            teams={entries}
+                            key={`${i}_${j}`}
+                        />
+                    )
+                }
+                else {
+                    //  create a LeagueTableCell component
+                    rows.push(
+                        <SlashCell key={`${i}_${j}`}/>
+                    )
+                }
+            }
+        }
+        cells.push(<Stack key={i} direction={"column"}>{rows}</Stack>)
+    }
+
+
+    return (
+        <Stack
+            spacing={0}
+            direction={"row"}
+        >
+            {cells}
+        </Stack>
+    )
+}

components/league/table/matchCell.tsx

@@ -0,0 +1,53 @@
+import {Box, Typography} from "@mui/material";
+import Link from "next/link";
+import {Match} from "@/src/models/MatchModel";
+import {Sport} from "@/src/models/SportModel";
+import {Game} from "@/src/models/GameModel";
+import {Team} from "@/src/models/TeamModel";
+
+
+export type MatchCellProps = {
+    sport: Sport
+    game: Game
+    match: Match
+    teams: Team[]
+}
+
+export default function MatchCell(props: MatchCellProps) {
+    const leftTeam = props.teams.find(team => team.id === props.match.leftTeamId)
+    const rightTeam = props.teams.find(team => team.id === props.match.rightTeamId)
+
+    if (!leftTeam || !rightTeam) {
+        return (
+            <Box
+                height={100}
+                width={200}
+                border={1}
+                alignItems={"center"}
+                justifyContent={"center"}
+                display={"flex"}
+            >
+                <Typography>
+                    エラー
+                </Typography>
+            </Box>
+        )
+    }
+
+    return (
+        <Box
+            height={100}
+            width={200}
+            border={1}
+            component={Link}
+            href={`/sports/${props.sport.id}/games/${props.game.id}/matches/${props.match.id}`}
+            alignItems={"center"}
+            justifyContent={"center"}
+            display={"flex"}
+        >
+            <Typography>
+                {leftTeam.name} vs {rightTeam.name}
+            </Typography>
+        </Box>
+    )
+}

components/league/table/slashCell.tsx

@@ -0,0 +1,14 @@
+import {Box} from "@mui/material";
+
+export default function SlashCell() {
+    //  display slash
+    return (
+        <Box
+            height={100}
+            width={200}
+            border={1}
+            bgcolor={"#d3d3d3"}
+        >
+        </Box>
+    )
+}

components/league/table/teamCell.tsx

@@ -0,0 +1,28 @@
+import {Box, Typography} from "@mui/material";
+import {Team} from "@/src/models/TeamModel";
+import Link from "next/link";
+
+
+export type TeamCellProps = {
+    team: Team
+}
+
+export default function TeamCell(props: TeamCellProps) {
+
+    return (
+        <Box
+            height={100}
+            width={200}
+            border={1}
+            component={Link}
+            href={`/teams/${props.team.id}`}
+            alignItems={"center"}
+            justifyContent={"center"}
+            display={"flex"}
+        >
+            <Typography>
+                {props.team.name}
+            </Typography>
+        </Box>
+    )
+}