Merge pull request #64 from AndrewCK24/4-team-libero-mode

feat(team): 新增個別陣容設定與自由球員自動替換模式設定(#4)

app/api/teams/route.js

@@ -38,6 +38,9 @@ export const POST = async (req) => {
       nickname,
       members: [newMember._id],
       lineups: new Array(3).fill({
+        config: {
+          liberoMode: 0,
+        },
         starting: new Array(6).fill({ _id: null }),
         liberos: [],
         substitutes: [],

app/models/team.js

@@ -20,6 +20,12 @@ const teamSchema = new Schema(
     ],
     lineups: [
       {
+        config: {
+          liberoMode: {
+            type: Number,
+            enum: [0, 1, 2],
+          },
+        },
         starting: {
           type: [
             {
@@ -29,6 +35,7 @@ const teamSchema = new Schema(
               },
               position: {
                 type: String,
+                enum: ["OH", "MB", "OP", "S"],
               },
             },
           ],
@@ -42,6 +49,7 @@ const teamSchema = new Schema(
               },
               position: {
                 type: String,
+                enum: ["L"],
               },
             },
           ],

app/store/lineups-slice.js

@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
+import { set } from "mongoose";
 
 const initialState = {
   status: {
@@ -43,6 +44,11 @@ const lineupsSlice = createSlice({
         state.status.editingMember = initialState.status.editingMember;
       }
     },
+    setLiberoMode: (state, action) => {
+      const { lineupNum } = state.status;
+      state.lineups[lineupNum].config.liberoMode = action.payload;
+      state.status.edited = true;
+    },
     setEditingPlayer: (state, action) => {
       const { _id, list, zone } = action.payload;
       if (
@@ -64,12 +70,18 @@ const lineupsSlice = createSlice({
       const { lineupNum } = state.status;
       const { list, zone } = state.status.editingMember;
       if (list === "starting") {
-        state.lineups[lineupNum][list][zone - 1] = {
+        state.lineups[lineupNum].starting[zone - 1] = {
           ...state.lineups[lineupNum][list][zone - 1],
           _id: null,
         };
       } else {
-        state.lineups[lineupNum][list].splice(zone - 1, 1);
+        state.lineups[lineupNum].liberos.splice(zone - 1, 1);
+        if (
+          state.lineups[lineupNum].config.liberoMode >
+          state.lineups[lineupNum].liberos.length
+        ) {
+          state.lineups[lineupNum].config.liberoMode--;
+        }
       }
       state.status = {
         ...state.status,

components/team/lineup/index.jsx

@@ -12,6 +12,18 @@ import LoadingCard from "@/components/custom/loading/card";
 const Lineup = ({ team, members, handleSave }) => {
   const dispatch = useDispatch();
   const { lineups, status } = useSelector((state) => state.lineups);
+  const liberoMode = lineups[status.lineupNum]?.config.liberoMode;
+  const hasPairedMB = lineups[status.lineupNum]?.starting.some(
+    (player, index) => {
+      const oppositeIndex = index > 3 ? index - 3 : index + 3;
+      return (
+        player._id &&
+        player.position === "MB" &&
+        lineups[status.lineupNum].starting[oppositeIndex]._id &&
+        lineups[status.lineupNum].starting[oppositeIndex].position === "MB"
+      );
+    }
+  );
   // const pathname = usePathname();
   // const isRecording = pathname.includes("match");
   // const { setNum } = useSelector((state) => state.match.status.editingData);
@@ -49,7 +61,7 @@ const Lineup = ({ team, members, handleSave }) => {
           <Button
             size="lg"
             onClick={() => handleSave(lineups)}
-            disabled={!status.edited}
+            disabled={!status.edited || (!!liberoMode && !hasPairedMB)}
           >
             <FiSave />
             儲存陣容

components/team/lineup/options/config.jsx

@@ -1,6 +1,13 @@
 import { useDispatch, useSelector } from "react-redux";
-import { FiUser } from "react-icons/fi";
+import {
+  FiUser,
+  FiCheck,
+  FiX,
+  FiHelpCircle,
+  FiAlertTriangle,
+} from "react-icons/fi";
 import { lineupsActions } from "@/app/store/lineups-slice";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -16,6 +23,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Separator } from "@/components/ui/separator";
 
 const LineupConfig = ({ members, others, className }) => {
   const dispatch = useDispatch();
@@ -24,6 +32,22 @@ const LineupConfig = ({ members, others, className }) => {
   const substituteCount = lineups[status.lineupNum]?.substitutes.length;
   const substituteLimit = liberoCount < 2 ? 6 - liberoCount : 6;
   const othersCount = others.length;
+  const liberoMode = lineups[status.lineupNum]?.config.liberoMode;
+  const hasPairedMB = lineups[status.lineupNum]?.starting.some(
+    (player, index) => {
+      const oppositeIndex = index > 3 ? index - 3 : index + 3;
+      return (
+        player._id &&
+        player.position === "MB" &&
+        lineups[status.lineupNum].starting[oppositeIndex]._id &&
+        lineups[status.lineupNum].starting[oppositeIndex].position === "MB"
+      );
+    }
+  );
+
+  const handleLiberoMode = (mode) => {
+    if (mode !== liberoMode) dispatch(lineupsActions.setLiberoMode(mode));
+  };
 
   return (
     <Card className={className}>
@@ -43,6 +67,61 @@ const LineupConfig = ({ members, others, className }) => {
           ))}
         </CardBtnGroup>
       </CardHeader>
+      <h4 className="px-2 text-lg font-medium text-muted-foreground">
+        自由球員替換模式
+      </h4>
+      <Separator />
+      <div className="flex flex-col gap-2 pt-2 text-xl">
+        {!!liberoMode && !hasPairedMB && (
+          <Alert variant="destructive">
+            <FiAlertTriangle />
+            <AlertTitle>無對位 MB</AlertTitle>
+            <AlertDescription>
+              陣容中未設定對位 MB，無法使用自動替換自由球員功能。
+            </AlertDescription>
+          </Alert>
+        )}
+        <Button
+          variant={liberoMode === 0 ? "destructive" : "outline"}
+          size="lg"
+          onClick={() => handleLiberoMode(0)}
+        >
+          <FiX />
+          手動替換
+        </Button>
+        <Button
+          variant={liberoMode === 1 ? "default" : "outline"}
+          size="lg"
+          onClick={() => handleLiberoMode(1)}
+          disabled={liberoCount < 1}
+        >
+          <FiCheck />
+          自動替換
+        </Button>
+        {liberoMode === 0 ? (
+          <Alert>
+            <FiHelpCircle />
+            <AlertTitle>手動替換自由球員</AlertTitle>
+            <AlertDescription>
+              記錄比賽過程中不會隨著輪轉自動替換自由球員，仍可以手動替換。
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <Alert>
+            <FiHelpCircle />
+            <AlertTitle>自動替換自由球員</AlertTitle>
+            <AlertDescription>
+              記錄比賽過程中，當我方失分且該球是由我方 MB 進行發球時，自動將該名
+              MB
+              替換為第一位自由球員。且在自由球員即將輪轉至前排時，自動將自由球員更換為原先之
+              MB。
+            </AlertDescription>
+            <AlertDescription className="text-destructive">
+              使用此模式時，陣容中須有對位之 MB。
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
       <Table>
         <TableHeader className="text-lg">
           <TableRow>