From 05bdc5c44c3200cba8aeebd424abf91b63fcc4c4 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Fri, 23 May 2025 22:01:08 +0200
Subject: [PATCH] feat: support mixed teams in MVP ranking

---
 cutt/db.py        |  1 +
 src/App.css       | 14 ++++++++------
 src/Rankings.tsx  | 49 +++++++++++++++++++++++++++++++++--------------
 src/TeamPanel.tsx |  1 -
 src/types.ts      |  1 +
 5 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/cutt/db.py b/cutt/db.py
index bf27a0b..7f2594e 100644
--- a/cutt/db.py
+++ b/cutt/db.py
@@ -38,6 +38,7 @@ class Team(SQLModel, table=True):
     name: str
     location: str | None
     country: str | None
+    mixed: bool = False
     players: list["Player"] | None = Relationship(
         back_populates="teams", link_model=PlayerTeamLink
     )
diff --git a/src/App.css b/src/App.css
index 1a165a8..4e1e910 100644
--- a/src/App.css
+++ b/src/App.css
@@ -515,12 +515,6 @@ button {
   &.disable-player {
     background-color: #e338;
   }
-  &.mmp {
-    background-color: lightskyblue;
-  }
-  &.fmp {
-    background-color: salmon;
-  }
 }
 
 .new-player-inputs {
@@ -551,6 +545,14 @@ button {
   }
 }
 
+.mmp {
+  background-color: lightskyblue;
+}
+
+.fmp {
+  background-color: salmon;
+}
+
 @keyframes blink {
   0% {
     background-color: #8888;
diff --git a/src/Rankings.tsx b/src/Rankings.tsx
index 1c35670..3511e0e 100644
--- a/src/Rankings.tsx
+++ b/src/Rankings.tsx
@@ -7,9 +7,11 @@ import TabController from "./TabController";
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
+  gender?: boolean;
 };
 
 function PlayerList(props: PlayerListProps) {
+  const fmps = props.list?.filter((item) => item.gender === "fmp").length;
   return (
     <ReactSortable
       {...props}
@@ -17,13 +19,23 @@ function PlayerList(props: PlayerListProps) {
       swapThreshold={0.2}
       style={{ minHeight: props.list && props.list?.length < 1 ? 64 : 32 }}
     >
-      {props.list?.map((item, index) => (
-        <div key={item.id} className="item">
-          {props.orderedList
-            ? index + 1 + ". " + item.display_name
-            : item.display_name}
-        </div>
-      ))}
+      {props.list &&
+        props.list.map((item, index) => (
+          <div
+            key={item.id}
+            className={"item " + (props.gender ? item.gender : "")}
+          >
+            {props.orderedList
+              ? props.gender
+                ? index +
+                  1 -
+                  (item.gender !== "fmp" ? fmps! : 0) +
+                  ". " +
+                  item.display_name
+                : index + 1 + ". " + item.display_name
+              : item.display_name}
+          </div>
+        ))}
     </ReactSortable>
   );
 }
@@ -325,8 +337,11 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
   const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
   const [loading, setLoading] = useState(false);
+  const [mixed, setMixed] = useState(false);
 
   useEffect(() => {
+    const activeTeam = teams.teams.find((team) => team.id == teams.activeTeam);
+    activeTeam && setMixed(activeTeam.mixed);
     handleGet();
   }, [players]);
 
@@ -382,11 +397,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
               setList={setAvailablePlayers}
               group={{
                 name: "mvp-shared",
-                pull: function (to) {
-                  return to.el.classList.contains("putclone") ? "clone" : true;
-                },
               }}
               className="dragbox"
+              gender={mixed}
             />
           </div>
           <div className="box two">
@@ -399,15 +412,23 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
             )}
             <PlayerList
               list={rankedPlayers}
-              setList={setRankedPlayers}
+              setList={(newList) =>
+                mixed
+                  ? setRankedPlayers(
+                      newList.sort((a, b) =>
+                        a.gender && b.gender
+                          ? a.gender.localeCompare(b.gender)
+                          : -1
+                      )
+                    )
+                  : setRankedPlayers(newList)
+              }
               group={{
                 name: "mvp-shared",
-                pull: function (to) {
-                  return to.el.classList.contains("putclone") ? "clone" : true;
-                },
               }}
               className="dragbox"
               orderedList
+              gender={mixed}
             />
           </div>
         </div>
diff --git a/src/TeamPanel.tsx b/src/TeamPanel.tsx
index 20efd74..0e7b783 100644
--- a/src/TeamPanel.tsx
+++ b/src/TeamPanel.tsx
@@ -155,7 +155,6 @@ const TeamPanel = () => {
               <label>gender</label>
               <select
                 name="gender"
-                required
                 value={player.gender}
                 onChange={(e) => {
                   setPlayer({ ...player, gender: e.target.value as Gender });
diff --git a/src/types.ts b/src/types.ts
index 661a459..99fda09 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -46,6 +46,7 @@ export interface Team {
   name: string;
   location: string;
   country: string;
+  mixed: boolean;
 }
 
 export type ErrorState = {